diff --git a/static/icons/exchange.svg b/static/icons/exchange.svg new file mode 100644 index 00000000..03af661a --- /dev/null +++ b/static/icons/exchange.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/link.svg b/static/icons/link.svg index 14a65ba1..59575945 100644 --- a/static/icons/link.svg +++ b/static/icons/link.svg @@ -1 +1 @@ - + diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss index ba0718d1..5508bf43 100644 --- a/styles/components/_accordion_table.scss +++ b/styles/components/_accordion_table.scss @@ -1,25 +1,17 @@ -.float-right { - float: right; -} - .accordion-table { .usa-alert { margin: $gap * 2; - margin-bottom: 0; } ul { padding-left: 0; - } + margin: 0; - &__head { - padding: $gap ($gap * 2); - font-size: $small-font-size; - font-weight: 700; - color: $color-gray; - background-color: $color-gray-lightest; - border-bottom: 1px solid $color-gray-lightest; - border-top: none; + li { + list-style-type: none; + margin: 0; + border-bottom: 1px solid $color-gray-lighter; + } } thead th { @@ -37,36 +29,9 @@ } } - .new-env { - margin-top: 5rem; - padding: 0 5rem; - } - &__items { margin: 0; - li { - font-weight: $font-bold; - border-bottom: 1px solid $color-gray-lightest; - margin: 0; - list-style-type: none; - - .icon-link--large { - padding-top: $gap * 0.5; - padding-bottom: $gap * 0.5; - } - - ul { - margin-top: 0; - margin-bottom: 0; - background-color: $color-gray-lightest; - - li { - border-bottom: 1px solid $color-gray-lighter; - } - } - } - th, td, tr { @@ -79,8 +44,15 @@ } &__item { + border-bottom: 1px solid $color-gray-lightest; + padding: $gap 0; + + &:first-child { + padding-top: 0; + } + &-content { - padding: ($gap * 2); + font-weight: $font-bold; .usa-input { margin: 0; @@ -90,36 +62,9 @@ } } - #name { - max-width: none; - border-color: black; - } - .usa-alert { margin: 2.5rem 0; } - - select { - border: none; - font-weight: $font-normal; - } - } - - &__action-group { - padding: 1rem 3.2rem; - background-color: $color-gray-lightest; - text-align: right; - - button, - a { - margin: 0; - font-size: $small-font-size; - } - - .icon-link { - padding-top: 0.5rem; - float: none; - } } &__toggler { @@ -151,38 +96,17 @@ } } - &__expanded { - font-size: $small-font-size; - font-weight: $font-normal; - background-color: $color-gray-lightest; - padding: ($gap * 2) ($gap * 4); + &-toggle-content { + margin-top: $gap; - .col--grow { + &__expanded { + font-size: $small-font-size; font-weight: $font-normal; - } + background-color: $color-gray-lightest; + padding: $gap; - th, - td { - .icon-link { - font-weight: $font-normal; - font-size: $base-font-size; - } - - border-bottom: 1px dashed $color-white; - } - - &_first { - float: left; - } - - &-role { - .icon-link { - padding: 0; - vertical-align: text-top; - - .icon { - margin: 0 0 0 0.25rem; - } + &:last-child { + border-bottom: none; } } } @@ -210,11 +134,3 @@ } } } - -#application-environments { - .row { - & > .col:first-child { - flex-grow: 5; - } - } -} diff --git a/styles/components/_empty_state.scss b/styles/components/_empty_state.scss index 37630b1a..0e102a4d 100644 --- a/styles/components/_empty_state.scss +++ b/styles/components/_empty_state.scss @@ -1,30 +1,18 @@ .empty-state { text-align: center; - padding: 6rem ($gap * 2) 0; + padding: 5rem ($gap * 2) 2rem; display: flex; flex-direction: column; align-items: center; max-width: 100%; - @include media($medium-screen) { - padding: 8rem ($gap * 4) 0; - } - > .icon { @include icon-size(50); @include icon-color($color-gray-light); } &__message { - @include h2; - - line-height: 1.2; - max-width: 15em; - color: $color-gray; - - @include media($large-screen) { - @include h1; - } + font-weight: $font-bold; } &__sub-message { diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 37658ac1..826795b4 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -140,16 +140,19 @@ .panel { @include shadow-panel; + padding-bottom: $gap * 3; + } + + a.add-new-button { + display: inherit; + margin-left: auto; + margin-right: auto; + max-width: 50%; + margin-top: 3rem; } .member-list { - .panel { - @include shadow-panel; - padding-bottom: 0; - } - .responsive-table-wrapper { - padding-bottom: $gap * 3; margin-bottom: 0; } @@ -158,14 +161,6 @@ margin-top: 0; } - a.create-member { - display: inherit; - margin-left: auto; - margin-right: auto; - max-width: 50%; - margin-top: 3rem; - } - input.usa-button.usa-button-primary { width: 9rem; height: 4rem; @@ -228,6 +223,16 @@ } } + #add-new-env { + padding: $gap * 2; + + .new-env { + width: 50%; + max-width: 30em; + padding-top: $gap * 4; + } + } + .application-content { margin-top: $gap * 4; @@ -244,6 +249,7 @@ .panel { @include shadow-panel; + padding-bottom: 2rem; } .application-list-item { @@ -270,32 +276,26 @@ margin-top: $gap * 3; } - .accordion-table__item-content.form-row { - margin-bottom: 0; - margin-top: 0; - padding-bottom: 0; - } - li.accordion-table__item__expanded { height: auto; } - .environment-list__item { - position: relative; - height: 7rem; - } - - span.accordion-table__item__toggler.icon-link { + a.application-list-item__environment__csp_link { font-size: $small-font-size; font-weight: $font-normal; - position: absolute; - left: -$gap * 1.25; - bottom: 0; + + .icon { + @include icon-color($color-blue); + } } - a.application-list-item__environment__csp_link.icon-link { - font-size: $small-font-size; + span.accordion-table__item__toggler { font-weight: $font-normal; + + &.environment-list__item__members { + float: unset; + font-size: $small-font-size; + } } } diff --git a/styles/elements/_labels.scss b/styles/elements/_labels.scss index 6fdcab3d..4dae377f 100644 --- a/styles/elements/_labels.scss +++ b/styles/elements/_labels.scss @@ -4,7 +4,8 @@ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_labels.scss */ -.label { +.label, +.usa-label { @include h5; display: inline-block; @@ -15,7 +16,7 @@ vertical-align: middle; margin: 0 $gap; padding: 0 $gap; - border-radius: $gap / 2; + border-radius: $gap / 3; white-space: nowrap; &--info { @@ -37,4 +38,12 @@ &--purple { background-color: $color-purple; } + + &--below { + margin-left: 0; + } + + .icon { + @include icon-color($color-white) @include icon-size(12) margin: 0; + } } diff --git a/styles/elements/_panels.scss b/styles/elements/_panels.scss index 46b8917b..b8d306cf 100644 --- a/styles/elements/_panels.scss +++ b/styles/elements/_panels.scss @@ -61,11 +61,6 @@ &__content { margin: ($gap * 2) 0; padding: 0 ($gap * 2); - - @include media($medium-screen) { - margin: ($gap * 4) 0; - padding: 0 ($gap * 4); - } } &__body { diff --git a/templates/applications/fragments/add_new_environment.html b/templates/applications/fragments/add_new_environment.html index 68274062..9cbc507a 100644 --- a/templates/applications/fragments/add_new_environment.html +++ b/templates/applications/fragments/add_new_environment.html @@ -7,16 +7,13 @@
{{ new_env_form.csrf_token }} - + {{ Alert( + title=("portfolios.applications.create_new_env" | translate), + message=("portfolios.applications.create_new_env_info" | translate ) + ) }}
- {{ Alert( - title=("portfolios.applications.create_new_env" | translate), - message=("portfolios.applications.create_new_env_info" | translate ) - ) }}
{{ "portfolios.applications.enter_env_name" | translate }}
{{ TextInput(new_env_form.name, label="", validation="requiredField", optional=False) }} -
-
{{ SaveButton(text=('common.save' | translate), element="input", form="add-new-env") }} @@ -26,8 +23,7 @@
- - {{ Icon('plus') }} + {{ "portfolios.applications.add_environment" | translate }}
diff --git a/templates/applications/settings.html b/templates/applications/settings.html index 58a5b17d..121179a1 100644 --- a/templates/applications/settings.html +++ b/templates/applications/settings.html @@ -2,18 +2,12 @@ {% from "components/alert.html" import Alert %} {% from "components/delete_confirmation.html" import DeleteConfirmation %} -{% from "components/icon.html" import Icon %} -{% import "applications/fragments/new_member_modal_content.html" as member_steps %} +{% from "fragments/environments.html" import EnvironmentManagementTemplate %} {% from "fragments/members.html" import MemberManagementTemplate %} {% from "components/modal.html" import Modal %} {% from "components/pagination.html" import Pagination %} {% from "components/save_button.html" import SaveButton %} {% from "components/text_input.html" import TextInput %} -{% from "components/toggle_list.html" import ToggleButton, ToggleSection %} -{% from "components/icon.html" import Icon %} -{% from "components/text_input.html" import TextInput %} -{% from "components/checkbox_input.html" import CheckboxInput %} -{% from "components/phone_input.html" import PhoneInput %} {% set secondary_breadcrumb = 'portfolios.applications.existing_application_title' | translate({ "application_name": application.name }) %} @@ -64,105 +58,13 @@ user_can_delete_app_member=user_can(permissions.DELETE_APPLICATION_MEMBER), ) }} -
- {{ 'common.resource_names.environments' | translate }} -
-
- {% if g.matchesPath("application-environments") %} - {% include "fragments/flash.html" %} - {% endif %} -
-
-
    - {% for env in environments_obj %} - {% set edit_form = env['edit_form'] %} - -
  • -
    -
    -
    - - {{ env['name'] }} - - {% if env['pending'] %} - PROCESSING - {% endif %} - {% if env['pending'] %} - - {% set edit_environment_button %} - {{ Icon('edit') }} - {% endset %} + {{ EnvironmentManagementTemplate( + application, + environments_obj, + new_env_form, + user_can_create_environment=user_can(permissions.CREATE_ENVIRONMENT) + ) }} - {{ - ToggleButton( - open_html=edit_environment_button, - close_html=edit_environment_button, - section_name="edit" - ) - }} - - {% endif %} - - {% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %} - {{ - ToggleButton( - open_html=members_button, - close_html=members_button, - section_name="members" - ) - }} - -
    -
    -
    - {% if env['pending'] %} - Cloud service provider link unavailable - {% else %} - - {{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }} - - {% endif %} -
    -
    - - {% call ToggleSection(section_name="members") %} -
      - {% for member in env['members'] %} -
    • - {{ member }} -
      • - {% endfor %} -
    - {% endcall %} - - {% call ToggleSection(section_name="edit") %} -
      -
    • -
      - {{ edit_form.csrf_token }} - {{ TextInput(edit_form.name, validation='requiredField') }} - {{ - SaveButton( - text=("common.save" | translate) - ) - }} -
      -
      • -
    - {% endcall %} -
    • -     - {% endfor %} -
-
-
- {% if user_can(permissions.CREATE_ENVIRONMENT) %} -
- {% include "applications/fragments/add_new_environment.html" %} -
- {% endif %} -
-
{% if user_can(permissions.DELETE_APPLICATION) %} diff --git a/templates/components/toggle_list.html b/templates/components/toggle_list.html index bb16d87e..16556720 100644 --- a/templates/components/toggle_list.html +++ b/templates/components/toggle_list.html @@ -1,16 +1,16 @@ -{% macro ToggleButton(action, open_html, close_html, section_name) %} - -
+{% macro ToggleButton(action, open_html, close_html, section_name, classes="") %} + + {{ close_html }} -
-
+ + {{ open_html }} -
+ {% endmacro %} {% macro ToggleSection(section_name, classes="") %} -
+
{{ caller() }}
{% endmacro %} diff --git a/templates/fragments/dod_login.html b/templates/fragments/dod_login.html index c8116c5b..1ca20164 100644 --- a/templates/fragments/dod_login.html +++ b/templates/fragments/dod_login.html @@ -25,7 +25,7 @@
  • Notwithstanding the above, using this IS does not constitute consent to PM, LE or CI investigative searching or monitoring of the content of privileged communications, or work product, related to personal representation or services by attorneys, psychotherapists, or clergy, and their assistants. Such communications and work product are private and confidential. See User Agreement for details.
    • - + {{ "common.continue" | translate }}
    diff --git a/templates/fragments/environments.html b/templates/fragments/environments.html new file mode 100644 index 00000000..7b39f730 --- /dev/null +++ b/templates/fragments/environments.html @@ -0,0 +1,101 @@ +{% from "components/icon.html" import Icon %} +{% from 'components/save_button.html' import SaveButton %} +{% from "components/text_input.html" import TextInput %} +{% from "components/toggle_list.html" import ToggleButton, ToggleSection %} + +{% macro EnvironmentManagementTemplate( + application, + environments_obj, + new_env_form, + user_can_create_environment +) %} + +

    {{ "portfolios.applications.settings.environments" | translate }}

    +
    + {% if g.matchesPath("application-environments") -%} + {% include "fragments/flash.html" %} + {%- endif %} + {% if 0 == environments_obj | length -%} +
    +

    + This Application has no environments +

    +
    + {% else %} +
    +
    +
      + {% for env in environments_obj %} + {% set edit_form = env['edit_form'] %} + +
    • +
      +
      + + {{ env['name'] }} + + {% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %} + {{ + ToggleButton( + open_html=members_button, + close_html=members_button, + section_name="members", + classes="environment-list__item__members" + ) + }} + {% set edit_environment_button = "Edit" %} + {{ + ToggleButton( + open_html=edit_environment_button, + close_html=edit_environment_button, + section_name="edit" + ) + }} +
      + {% if env['pending'] -%} + {{Icon('exchange')}} CHANGES PENDING + {% else %} + + {{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }} + + {%- endif %} +
      +
      + + {% call ToggleSection(section_name="members") %} +
        + {% for member in env['members'] %} +
      • + {{ member }} +
        • + {% endfor %} +
      + {% endcall %} + + {% call ToggleSection(section_name="edit") %} +
        +
      • +
        + {{ edit_form.csrf_token }} + {{ TextInput(edit_form.name, validation='requiredField') }} + {{ + SaveButton( + text=("common.save" | translate) + ) + }} +
        +
        • +
      + {% endcall %} +
      • +       + {% endfor %} +
    +
    +
    + {%- endif %} + {% if user_can_create_environment -%} + {% include "applications/fragments/add_new_environment.html" %} + {%- endif %} +
    +{% endmacro %} diff --git a/templates/fragments/members.html b/templates/fragments/members.html index 96ff7f66..067934ac 100644 --- a/templates/fragments/members.html +++ b/templates/fragments/members.html @@ -168,7 +168,7 @@ {% if user_can_create_app_member %} - + {{ "portfolios.applications.add_member" | translate }} {% endif %} diff --git a/translations.yaml b/translations.yaml index 423151b8..0724f926 100644 --- a/translations.yaml +++ b/translations.yaml @@ -377,6 +377,7 @@ portfolios: settings: name_description: Application name and description team_members: Team Members + environments: Application Environments team_settings: blank_slate: action_label: Invite a new team member