From 5ba22d82e3bb97ab5a93d806d9676eb7880bdfa8 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Tue, 7 Jan 2020 12:00:34 -0500
Subject: [PATCH] Move toggle menu into its own macro. Use ToggleMenu macro in
 application team table.

---
 styles/atat.scss                              |  1 +
 styles/components/_portfolio_layout.scss      | 49 -------------------
 styles/components/_toggle_menu.scss           | 49 +++++++++++++++++++
 templates/applications/fragments/members.html | 42 ++++++----------
 templates/components/toggle_menu.html         | 17 +++++++
 5 files changed, 83 insertions(+), 75 deletions(-)
 create mode 100644 styles/components/_toggle_menu.scss
 create mode 100644 templates/components/toggle_menu.html

diff --git a/styles/atat.scss b/styles/atat.scss
index 0134dd89..72c7af40 100644
--- a/styles/atat.scss
+++ b/styles/atat.scss
@@ -39,6 +39,7 @@
 @import "components/sticky_cta.scss";
 @import "components/error_page.scss";
 @import "components/member_form.scss";
+@import "components/toggle_menu.scss";
 
 @import "sections/login";
 @import "sections/home";
diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss
index fffc468f..beb2f576 100644
--- a/styles/components/_portfolio_layout.scss
+++ b/styles/components/_portfolio_layout.scss
@@ -154,55 +154,6 @@
         margin-right: $gap * 6;
       }
     }
-
-    .app-member-menu {
-      position: absolute;
-      top: $gap;
-      right: $gap * 2;
-
-      .accordion-table__item__toggler {
-        padding: $gap / 3;
-        border: 1px solid $color-gray-lighter;
-        border-radius: 3px;
-        cursor: pointer;
-
-        &:hover,
-        &--active {
-          background-color: $color-aqua-lightest;
-        }
-
-        .icon {
-          margin: $gap / 2;
-        }
-      }
-
-      &__toggle {
-        position: absolute;
-        right: 0;
-        top: 30px;
-        background-color: $color-white;
-        border: 1px solid $color-gray-light;
-        z-index: 1;
-        margin-top: 0;
-
-        a {
-          display: block;
-          padding: $gap;
-          border-bottom: 1px solid $color-gray-lighter;
-          text-decoration: none;
-          color: $color-black;
-          cursor: pointer;
-
-          &:last-child {
-            border-bottom: 0;
-          }
-
-          &:hover {
-            background-color: $color-aqua-lightest;
-          }
-        }
-      }
-    }
   }
 
   #add-new-env {
diff --git a/styles/components/_toggle_menu.scss b/styles/components/_toggle_menu.scss
new file mode 100644
index 00000000..a8ef0cbd
--- /dev/null
+++ b/styles/components/_toggle_menu.scss
@@ -0,0 +1,49 @@
+.toggle-menu {
+  position: absolute;
+  top: $gap;
+  right: $gap * 2;
+
+  .accordion-table__item__toggler {
+    padding: $gap / 3;
+    border: 1px solid $color-gray-lighter;
+    border-radius: 3px;
+    cursor: pointer;
+
+    &:hover,
+    &--active {
+      background-color: $color-aqua-lightest;
+    }
+
+    .icon {
+      margin: $gap / 2;
+    }
+  }
+
+  &__toggle {
+    position: absolute;
+    right: 0;
+    top: 30px;
+    background-color: $color-white;
+    border: 1px solid $color-gray-light;
+    z-index: 1;
+    margin-top: 0;
+
+    a {
+      display: block;
+      padding: $gap;
+      border-bottom: 1px solid $color-gray-lighter;
+      text-decoration: none;
+      color: $color-black;
+      cursor: pointer;
+      white-space: nowrap;
+
+      &: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 d6fb7290..662d1145 100644
--- a/templates/applications/fragments/members.html
+++ b/templates/applications/fragments/members.html
@@ -5,6 +5,7 @@
 {% from "components/modal.html" import Modal %}
 {% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
 {% from "components/save_button.html" import SaveButton %}
+{% from "components/toggle_menu.html" import ToggleMenu %}
 
 {% macro MemberManagementTemplate(
   application,
@@ -131,32 +132,21 @@
                     </div>
                   {% endfor %}
                   {% if user_can(permissions.EDIT_APPLICATION_MEMBER) -%}
-                    <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 }}
-                            </a>
-                            {% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%}
-                              <a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
-                            {%- endif %}
-                          {%- endif %}
-                        </div>
-                      </div>
-                    </toggle-menu>
+                    {% call ToggleMenu() %}
+                      <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 }}
+                        </a>
+                        {% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%}
+                          <a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
+                        {%- endif %}
+                      {%- endif %}
+                    {% endcall %}
                   {%- endif %}
                 </td>
               </tr>
diff --git a/templates/components/toggle_menu.html b/templates/components/toggle_menu.html
new file mode 100644
index 00000000..b9cd0cfa
--- /dev/null
+++ b/templates/components/toggle_menu.html
@@ -0,0 +1,17 @@
+{% from "components/icon.html" import Icon %}
+
+{% macro ToggleMenu() %}
+<toggle-menu inline-template v-cloak>
+  <div class="toggle-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 toggle-menu__toggle">
+      {{ caller() }}
+    </div>
+  </div>
+</toggle-menu>
+{% endmacro %}