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 {
+      &--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,25 +91,23 @@
 
     <section class="member-list application-list">
       <div class='responsive-table-wrapper'>
+        <toggler inline-template>
           <table class="atat-table">
             <thead>
               <tr>
                 <th>Name</th>
                 <th>Application Permissions</th>
-              <th class="env_role">Environment Access</th>
+                <th class="env_role--th">Environment Access</th>
               </tr>
             </thead>
             <tbody>
               {% for member in members %}
-              {% set modal_name = "edit_member-{}".format(loop.index) %}
+                {% set perms_modal = "edit_member-{}".format(loop.index) %}
                 <tr>
                   <td>
                     <strong>{{ member.user_name }}</strong>
-                  <a class="icon-link" v-on:click="openModal('{{ modal_name }}')">
-                    {{ Icon('edit') }}
-                  </a>
-                  <br>
                     {% if member.role_status == 'pending' %}
+                      <br>
                       {{ Label('envelope', 'invite pending', 'success', classes='label--below') }}
                     {% endif %}
 
@@ -121,9 +120,7 @@
                       </div>
                     {% endfor %}
                   </td>
-                <td>
+                  <td class="env_role--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">
@@ -134,23 +131,42 @@
                         </span>
                       </div>
                     {% endfor %}
-                    </div>
+                    <div class="app-member-menu">
-                    <div class="form-col form-col--one-third">
+                      {% 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><br>
+                          <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 %}
-                    </div>
+                      {% 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>