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 { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
&:hover {
background-color: $color-aqua-lightest;
}
} }
} }
} }

View File

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