Add toggle drop down menu for app member edit

static/icons/ellipsis.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ellipsis-h" class="svg-inline--fa fa-ellipsis-h fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z"></path></svg>

styles/components/_accordion_table.scss

@@ -94,6 +94,10 @@
         border-right: 10px solid transparent;
         border-bottom: 10px solid $color-blue-light;
       }
+
+      &--active {
+        background-color: $color-gray-lightest;
+      }
     }
 
     &-toggle-content {

styles/components/_portfolio_layout.scss

@@ -149,6 +149,7 @@
   .member-list {
     .responsive-table-wrapper {
       margin-bottom: 0;
+      overflow: visible;
 
       table.atat-table {
         table-layout: fixed;
@@ -213,12 +214,13 @@
     }
 
     .env_role {
-      width: 50%;
+      &--th {
-    }
+        width: 50%;
+      }
 
-    .form-col--two-thirds {
+      &--td {
-      width: 66.66%;
+        position: relative;
-      flex-basis: unset;
+      }
     }
 
     .row {
@@ -236,6 +238,47 @@
       .env-role__role {
         white-space: nowrap;
         display: inline-block;
+        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;
+
+        .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;
+          }
+        }
       }
     }
   }

styles/elements/_tables.scss

@@ -12,6 +12,8 @@ table.atat-table {
     border-collapse: separate;
   }
 
+  background: $color-white;
+
   th,
   td {
     &.table-cell {
@@ -46,7 +48,7 @@ table.atat-table {
     tr {
       th,
       td {
-        background-color: $color-white;
+        background: none;
         margin: 0;
         padding: $gap * 2;
         border: 1px solid $color-gray-lighter;

templates/applications/fragments/members.html

@@ -6,6 +6,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_list.html" import ToggleButton, ToggleSection %}
 
 {% macro MemberManagementTemplate(
   application,
@@ -90,67 +91,82 @@
 
     <section class="member-list application-list">
       <div class='responsive-table-wrapper'>
-        <table class="atat-table">
+        <toggler inline-template>
-          <thead>
+          <table class="atat-table">
-            <tr>
+            <thead>
-              <th>Name</th>
-              <th>Application Permissions</th>
-              <th class="env_role">Environment Access</th>
-            </tr>
-          </thead>
-          <tbody>
-            {% for member in members %}
-              {% set modal_name = "edit_member-{}".format(loop.index) %}
               <tr>
-                <td>
+                <th>Name</th>
-                  <strong>{{ member.user_name }}</strong>
+                <th>Application Permissions</th>
-                  <a class="icon-link" v-on:click="openModal('{{ modal_name }}')">
+                <th class="env_role--th">Environment Access</th>
-                    {{ Icon('edit') }}
-                  </a>
-                  <br>
-                  {% if member.role_status == 'pending' %}
-                    {{ Label('envelope', 'invite pending', 'success', classes='label--below') }}
-                  {% endif %}
-
-                </td>
-
-                <td>
-                  {% for perm, value in member.permission_sets.items() %}
-                    <div>
-                      {{ ("portfolios.applications.members.{}.{}".format(perm, value)) | translate }}
-                    </div>
-                  {% endfor %}
-                </td>
-                <td>
-                  <div class="form-row">
-                    <div class="form-col form-col--two-thirds">
-                      {% for env in member.environment_roles %}
-                        <div class="row">
-                          <span class="env-role__environment">
-                            {{ env.environment_name }}
-                          </span>
-                          <span class="env-role__role">
-                            : {{ env.role }}
-                          </span>
-                        </div>
-                      {% endfor %}
-                    </div>
-                    <div class="form-col form-col--one-third">
-                      {% if member.role_status == 'pending' -%}
-                        {% 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 }}")'>Resend Invite</a><br>
-                        {% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%}
-                          <a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
-                        {%- endif %}
-                      {%- endif %}
-                    </div>
-                  </div>
-                </td>
               </tr>
-            {% endfor %}
+            </thead>
-          </tbody>
+            <tbody>
-        </table>
+              {% for member in members %}
+                {% set perms_modal = "edit_member-{}".format(loop.index) %}
+                <tr>
+                  <td>
+                    <strong>{{ member.user_name }}</strong>
+                    {% if member.role_status == 'pending' %}
+                      <br>
+                      {{ Label('envelope', 'invite pending', 'success', classes='label--below') }}
+                    {% endif %}
+
+                  </td>
+
+                  <td>
+                    {% for perm, value in member.permission_sets.items() %}
+                      <div>
+                        {{ ("portfolios.applications.members.{}.{}".format(perm, value)) | translate }}
+                      </div>
+                    {% endfor %}
+                  </td>
+                  <td class="env_role--td">
+                    {% for env in member.environment_roles %}
+                      <div class="row">
+                        <span class="env-role__environment">
+                          {{ env.environment_name }}
+                        </span>
+                        <span class="env-role__role">
+                          : {{ env.role }}
+                        </span>
+                      </div>
+                    {% endfor %}
+                    <div class="app-member-menu">
+                      {% set toggle_button -%}
+                        {{ Icon('ellipsis')}}
+                      {%- endset %}
+                      {% set section = "app_member_edit-{}".format(member.role_id) %}
+
+                      {{
+                        ToggleButton(
+                          open_html=toggle_button,
+                          close_html=toggle_button,
+                          section_name=section,
+                          active_style=True
+                        )
+                      }}
+                      {% call ToggleSection(section_name=section, classes="app-member-menu__toggle") %}
+                        {% if user_can(permissions.EDIT_APPLICATION_MEMBER) -%}
+                          <a v-on:click="openModal('{{ perms_modal }}')">
+                            Edit Roles and Permissions
+                          </a>
+                        {%- endif %}
+                        {% if member.role_status == 'pending' -%}
+                          {% 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 }}")'>Resend Invite</a>
+                          {% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%}
+                            <a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
+                          {%- endif %}
+                        {%- endif %}
+                      {% endcall %}
+                    </div>
+                  </td>
+                </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </toggler>
       </div>
     </section>
   {% endif %}

templates/components/toggle_list.html

@@ -1,9 +1,9 @@
-{% macro ToggleButton(action, open_html, close_html, section_name, classes="") %}
+{% macro ToggleButton(action, open_html, close_html, section_name, classes="", active_style=False) %}
-  <span v-on:click="toggleSection('{{ section_name }}')" class="accordion-table__item__toggler {{ classes }}">
+  <span v-on:click="toggleSection('{{ section_name }}')">
-    <span v-if="selectedSection === '{{ section_name }}'">
+    <span v-if="selectedSection === '{{ section_name }}'" class="accordion-table__item__toggler {{ classes }}{% if active_style -%} accordion-table__item__toggler--active{%- endif %}">
       {{ close_html }}
     </span>
-    <span v-else>
+    <span v-else class="accordion-table__item__toggler {{ classes }}">
       {{ open_html }}
     </span>
   </span>