diff --git a/static/icons/ellipsis.svg b/static/icons/ellipsis.svg new file mode 100644 index 00000000..53c45a18 --- /dev/null +++ b/static/icons/ellipsis.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss index 5508bf43..9a32c009 100644 --- a/styles/components/_accordion_table.scss +++ b/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 { diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 2102cc2e..4b2b3c65 100644 --- a/styles/components/_portfolio_layout.scss +++ b/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 { - width: 66.66%; - flex-basis: unset; + &--td { + position: relative; + } } .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; + } + } } } } diff --git a/styles/elements/_tables.scss b/styles/elements/_tables.scss index 1086215b..f313756c 100644 --- a/styles/elements/_tables.scss +++ b/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; diff --git a/styles/sections/_application_edit.scss b/styles/sections/_application_edit.scss index 9ee0e671..1c1c395d 100644 --- a/styles/sections/_application_edit.scss +++ b/styles/sections/_application_edit.scss @@ -118,69 +118,6 @@ } } -.environment-role { - padding: ($gap * 2) 0; - - h4 { - margin-bottom: $gap / 4; - } - - &__users { - background-color: $color-gray-lightest; - padding: ($gap * 1.2) ($gap * 0.6); - font-size: $small-font-size; - display: flex; - flex-wrap: wrap; - - .environment-role__user { - background-color: $color-white; - border-radius: 0.5rem; - padding: ($gap / 2) $gap; - border: solid 2px $color-blue; - margin: $gap; - white-space: nowrap; - width: 20rem; - position: relative; - height: 3.6rem; - - &-field { - position: absolute; - background-color: $color-white; - margin-top: $gap * 2; - padding: $gap; - left: -0.1rem; - border: solid 1px $color-gray-light; - width: 20rem; - z-index: 3; - - .usa-input { - margin: 0; - - li { - background-color: $color-white; - border: none; - } - } - } - - &.unassigned { - border: solid 1px $color-gray-light; - } - - .icon-link { - padding: 0; - } - } - - .environment-role__no-user { - margin: $gap; - padding: ($gap / 2) $gap; - font-weight: $font-normal; - height: 3.6rem; - } - } -} - .environment-name--gray { font-weight: $font-normal; color: $color-gray-medium; diff --git a/templates/applications/fragments/members.html b/templates/applications/fragments/members.html index 496469d0..ac4aaffb 100644 --- a/templates/applications/fragments/members.html +++ b/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, @@ -54,7 +55,7 @@ {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %} {% call Modal(resend_invite_modal, classes="form-content--app-mem") %}
Name | -Application Permissions | -Environment Access | -
---|
- {{ member.user_name }}
-
- {{ Icon('edit') }}
-
- - {% if member.role_status == 'pending' %} - {{ Label('envelope', 'invite pending', 'success', classes='label--below') }} - {% endif %} - - |
-
-
- {% for perm, value in member.permission_sets.items() %}
-
- {{ ("portfolios.applications.members.{}.{}".format(perm, value)) | translate }}
-
- {% endfor %}
- |
-
-
-
-
- {% for env in member.environment_roles %}
-
-
-
- {{ env.environment_name }}
-
-
- : {{ env.role }}
-
-
- {% endfor %}
-
- {% 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) %}
- Resend Invite
- - {% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%} - {{ 'invites.revoke' | translate }} - {%- endif %} - {%- endif %} - |
+ {{ "common.name" | translate }} | +{{ "portfolios.applications.members.form.app_perms.title" | translate }} | +{{ 'portfolios.applications.members.form.env_access.table_header' | translate }} |
---|