Add v-cloack to toggle-menu component and add hover style to drop down menu items

This commit is contained in:
leigh-mil 2019-11-27 09:47:15 -05:00
parent f4922f0db2
commit 05bdfde059
2 changed files with 25 additions and 22 deletions

View File

@ -283,6 +283,10 @@
&:last-child {
border-bottom: 0;
}
&:hover {
background-color: $color-aqua-lightest;
}
}
}
}

View File

@ -133,32 +133,31 @@
</div>
{% endfor %}
{% if user_can(permissions.EDIT_APPLICATION_MEMBER) -%}
<toggle-menu inline-template>
<div class="app-member-menu">
<span v-if="isVisible" class="accordion-table__item__toggler accordion-table__item__toggler--active">
{{ Icon('ellipsis')}}
</span>
<span v-else class="accordion-table__item__toggler">
{{ Icon('ellipsis')}}
</span>
<toggle-menu inline-template v-cloak>
<div class="app-member-menu">
<span v-if="isVisible" class="accordion-table__item__toggler accordion-table__item__toggler--active">
{{ Icon('ellipsis')}}
</span>
<span v-else class="accordion-table__item__toggler">
{{ Icon('ellipsis')}}
</span>
<div v-show="isVisible" class="accordion-table__item-toggle-content app-member-menu__toggle">
<a v-on:click="openModal('{{ perms_modal }}')">
{{ "portfolios.applications.members.menu.edit" | translate }}
</a>
{% if invite_pending or invite_expired -%}
{% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %}
{% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
<a v-on:click='openModal("{{ resend_invite_modal }}")'>
{{ "portfolios.applications.members.menu.resend" | translate }}
<div v-show="isVisible" class="accordion-table__item-toggle-content app-member-menu__toggle">
<a v-on:click="openModal('{{ perms_modal }}')">
{{ "portfolios.applications.members.menu.edit" | translate }}
</a>
{% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%}
<a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
{% if invite_pending or invite_expired -%}
{% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %}
{% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
<a v-on:click='openModal("{{ resend_invite_modal }}")'>
{{ "portfolios.applications.members.menu.resend" | translate }}
</a>
{% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%}
<a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
{%- endif %}
{%- endif %}
{%- endif %}
</div>
</div>
</div>
</toggle-menu>
{%- endif %}
</td>