From 05bdfde059b7073a5b650385d7d956b74a6f4aa7 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 27 Nov 2019 09:47:15 -0500
Subject: [PATCH] Add v-cloack to toggle-menu component and add hover style to
 drop down menu items

---
 styles/components/_portfolio_layout.scss      |  4 ++
 templates/applications/fragments/members.html | 43 +++++++++----------
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss
index a931b659..0e018809 100644
--- a/styles/components/_portfolio_layout.scss
+++ b/styles/components/_portfolio_layout.scss
@@ -283,6 +283,10 @@
           &:last-child {
             border-bottom: 0;
           }
+
+          &:hover {
+            background-color: $color-aqua-lightest;
+          }
         }
       }
     }
diff --git a/templates/applications/fragments/members.html b/templates/applications/fragments/members.html
index 6305f570..1a7bcb4a 100644
--- a/templates/applications/fragments/members.html
+++ b/templates/applications/fragments/members.html
@@ -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>