From ff41a20ad80c5cfd1e41f5bd3d847127c1dbdf1e Mon Sep 17 00:00:00 2001 From: dandds Date: Thu, 9 May 2019 15:38:44 -0400 Subject: [PATCH] Adds additional buttons and functionality to app team settings. "Add to existing environment" table, "delete member", and environment roles and env role edit buttons added for every user in the team settings list. Accompanying CSS changes. --- styles/components/_accordion_table.scss | 39 ++++++++ styles/components/_portfolio_layout.scss | 38 ++++---- .../fragments/applications/edit_team.html | 57 +++++++---- templates/portfolios/applications/team.html | 94 +++++++++---------- translations.yaml | 1 + 5 files changed, 141 insertions(+), 88 deletions(-) diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss index 1bcf3331..c5d93b09 100644 --- a/styles/components/_accordion_table.scss +++ b/styles/components/_accordion_table.scss @@ -91,6 +91,30 @@ border-bottom: 1px solid $color-gray-lighter; } } + + .accordion-table__item__action-group { + padding: 1rem 3.2rem; + background-color: $color-gray-lightest; + + button, + a { + margin: 0; + font-size: $small-font-size; + } + + .icon-link { + padding-top: 0.5rem; + float: none; + } + + > *:first-child { + padding-left: 0; + } + + > *:last-child { + float: right; + } + } } .accordion-table__item__toggler { @@ -100,6 +124,10 @@ color: $color-blue; padding: $gap; + > span { + margin-left: auto; + } + .icon { @include icon-size(12); @@ -147,6 +175,17 @@ .accordion-table__item__expanded_first { float: left; } + + .accordion-table__item__expanded-role { + .icon-link { + padding: 0; + vertical-align: text-top; + + .icon { + margin: 0 0 0 0.25rem; + } + } + } } } } diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 60fd04c6..7303c016 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -1,7 +1,6 @@ .portfolio-panel-container { @include media($large-screen) { @include grid-row; - min-height: 500px; } @@ -38,7 +37,6 @@ &.icon-link--disabled { color: $color-gray-dark; opacity: 1; - .icon { @include icon-color($color-gray-dark); } @@ -53,7 +51,6 @@ .icon-link { color: $color-gray-medium; pointer-events: none; - &.icon-link--disabled { opacity: 1; } @@ -63,7 +60,6 @@ .portfolio-header { flex-direction: column; - @include media($small-screen) { flex-direction: row; } @@ -103,10 +99,8 @@ .icon-link { padding: 0.8rem 1.2rem; - &.active { color: $color-gray; - .icon { @include icon-color($color-gray); } @@ -150,7 +144,6 @@ .unfunded { color: $color-red; - .icon { @include icon-color($color-red); } @@ -166,7 +159,7 @@ } .portfolio-content { - margin: (6 * $gap) $gap 0 $gap; + margin: 6 * $gap $gap 0 $gap; .panel { @include shadow-panel; @@ -175,7 +168,6 @@ .member-list { .panel { @include shadow-panel; - padding-bottom: 0; } @@ -191,7 +183,7 @@ } tr:first-child { - padding: 0 (2 * $gap) 0 (5 * $gap); + padding: 0 2 * $gap 0 5 * $gap; } td { @@ -203,14 +195,14 @@ th { background-color: $color-gray-lightest; - padding: $gap (2 * $gap); + padding: $gap 2 * $gap; border-top: none; border-bottom: none; color: $color-gray; } td:first-child { - padding: (2 * $gap) (2 * $gap) (2 * $gap) (5 * $gap); + padding: 2 * $gap 2 * $gap 2 * $gap 5 * $gap; } tbody { @@ -218,7 +210,7 @@ border-bottom: 1px solid $color-gray-lightest; font-size: 1.6rem; border-top: 0; - padding: (3 * $gap) (2 * $gap); + padding: 3 * $gap 2 * $gap; .usa-button-disabled { color: $color-gray-medium; @@ -318,6 +310,11 @@ .alert { margin: 4rem; } + + .member-list__subhead { + font-weight: $font-normal; + font-size: $base-font-size; + } } .application-content { @@ -333,7 +330,6 @@ .block-list__footer { border-bottom: none; } - .application-edit__env-list-item { label { color: $color-black; @@ -373,7 +369,6 @@ .portfolio-applications__header--actions { color: $color-blue; font-size: $small-font-size; - .icon { @include icon-color($color-blue); @include icon-size(14); @@ -384,7 +379,6 @@ .application-list { .toggle-link { background-color: $color-blue-light; - .icon { margin: $gap / 2; } @@ -402,7 +396,6 @@ .application-list-item__environment__csp_link { font-size: $small-font-size; font-weight: normal; - &:hover { background-color: $color-aqua-light; } @@ -420,7 +413,6 @@ .subheading { @include subheading; - margin-top: 6 * $gap; margin-bottom: 2 * $gap; } @@ -431,6 +423,7 @@ .pending-task-order { background-color: $color-gold-lightest; + align-items: center; margin: 0; margin-bottom: 2 * $gap; @@ -462,7 +455,6 @@ .icon--tiny { @include icon-size(10); - margin-left: 1rem; } } @@ -487,7 +479,7 @@ th { background-color: $color-gray-lightest; - padding: $gap (2 * $gap); + padding: $gap 2 * $gap; border-top: none; border-bottom: none; color: $color-gray; @@ -566,7 +558,6 @@ .panel { @include shadow-panel; - margin-bottom: 4 * $gap; } } @@ -586,7 +577,6 @@ input { max-width: 30em; } - .icon-validation { left: 30em; } @@ -615,3 +605,7 @@ } } } + +.member-list__name { + margin-top: 1rem; +} diff --git a/templates/fragments/applications/edit_team.html b/templates/fragments/applications/edit_team.html index 1914a62a..8b17426f 100644 --- a/templates/fragments/applications/edit_team.html +++ b/templates/fragments/applications/edit_team.html @@ -11,7 +11,11 @@
  • -
    {{ member_form.user_name.data }}
    +
    +
    + {{ member_form.user_name.data }} +
    +
    {{ OptionsInput(permissions_form.perms_team_mgmt, label=False, watch=True) }}
    {{ OptionsInput(permissions_form.perms_env_mgmt, label=False, watch=True) }}
    {{ OptionsInput(permissions_form.perms_del_env, label=False, watch=True) }}
    @@ -26,30 +30,47 @@ {{ ToggleButton( - open_html=open_html, - close_html=close_html, - section_name="environments" - ) + open_html=open_html, + close_html=close_html, + section_name="environments" + ) }}
    - - {% call ToggleSection(section_name="environments") %} + {% call ToggleSection(section_name="environments") %}
      {% for environment_form in environment_roles_form %} -
    • +
    • +
      {{ environment_form.environment_name.data }} -
      • + +
      +
      + + {{ environment_form.role.data }} + +
      + {{ Icon("edit") }} +
      +
      +
      + {% endfor %} - {% if user_can(permissions.DELETE_APPLICATION_MEMBER) %} -
    • - - {{ "portfolios.applications.remove_member.button" | translate }} - -
      • - {% endif %}
    - {% endcall %} - {{ member_form.user_id() }} +
    + + {{ "portfolios.applications.team_settings.add_to_environment" | translate }} + {{ Icon("plus") }} + + +
    + {% endcall %} + {{ member_form.user_id() }}
    • {% endfor %} diff --git a/templates/portfolios/applications/team.html b/templates/portfolios/applications/team.html index d33992cd..a1ef3d57 100644 --- a/templates/portfolios/applications/team.html +++ b/templates/portfolios/applications/team.html @@ -52,62 +52,60 @@ {% if g.matchesPath("application-members") %} {% include "fragments/flash.html" %} {% endif %} -
    -
    -
    -
    - {{ "portfolios.applications.team_settings.section.title" | translate({ "application_name": application.name }) }} +
    +
    +
    +
    + {{ "portfolios.applications.team_settings.section.title" | translate({ "application_name": application.name }) }} +

    Members ({{ team_form.members | length }})

    +
    - - {{ Icon('info') }} - {{ "portfolios.admin.settings_info" | translate }} -
    -
    -
    -
    - {{ "common.name" | translate }} +
    +
    +
    + {{ "common.name" | translate }} +
    +
    + {{ "portfolios.applications.team_settings.section.table.team_management" | translate }} +
    +
    + {{ "portfolios.applications.team_settings.section.table.environment_management" | translate }} +
    +
    + {{ "portfolios.applications.team_settings.section.table.delete_access" | translate }} +
    +
    +   +
    -
    - {{ "portfolios.applications.team_settings.section.table.team_management" | translate }} -
    -
    - {{ "portfolios.applications.team_settings.section.table.environment_management" | translate }} -
    -
    - {{ "portfolios.applications.team_settings.section.table.delete_access" | translate }} -
    -
    -   +
      + {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %} + {% include "fragments/applications/edit_team.html" %} + {% elif user_can(permissions.VIEW_APPLICATION_MEMBER) %} + {% include "fragments/applications/read_only_team.html" %} + {% endif %} +
    +
    + +
    +
    + {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %} + {{ SaveButton(text=('common.save' | translate), element="input", form="team") }} + {% endif %} + + {% set new_member_modal_name = "add-app-mem" %} + {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %} + + {{ "portfolios.admin.add_new_member" | translate }} + {{ Icon("plus") }} + + {% endif %}
    -
      - {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %} - {% include "fragments/applications/edit_team.html" %} - {% elif user_can(permissions.VIEW_APPLICATION_MEMBER) %} - {% include "fragments/applications/read_only_team.html" %} - {% endif %} -
    - -
    -
    - {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %} - {{ SaveButton(text=('common.save' | translate), element="input", form="team") }} - {% endif %} - - {% set new_member_modal_name = "add-app-mem" %} - {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %} - - {{ "portfolios.admin.add_new_member" | translate }} - {{ Icon("plus") }} - - {% endif %} -
    -
    -
    diff --git a/translations.yaml b/translations.yaml index 920c7ffc..9342cb56 100644 --- a/translations.yaml +++ b/translations.yaml @@ -468,6 +468,7 @@ portfolios: subheading: Team Settings title: '{application_name} Team Settings' user: User + add_to_environment: Add to existing environment team_text: Team update_button_text: Save members: