From de28ff303c35456d27c90014f68fb12e421f4983 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Thu, 10 Oct 2019 14:54:38 -0400 Subject: [PATCH 1/8] Reorder elements in env panel and initial styling --- styles/components/_portfolio_layout.scss | 11 +--- styles/elements/_panels.scss | 5 -- templates/applications/settings.html | 72 ++++++++++-------------- templates/components/toggle_list.html | 10 ++-- 4 files changed, 38 insertions(+), 60 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 37658ac1..c58d2e0d 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -273,24 +273,17 @@ .accordion-table__item-content.form-row { margin-bottom: 0; margin-top: 0; - padding-bottom: 0; + padding: 0; } li.accordion-table__item__expanded { height: auto; } - .environment-list__item { - position: relative; - height: 7rem; - } - span.accordion-table__item__toggler.icon-link { font-size: $small-font-size; font-weight: $font-normal; - position: absolute; - left: -$gap * 1.25; - bottom: 0; + float: unset; } a.application-list-item__environment__csp_link.icon-link { 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/settings.html b/templates/applications/settings.html index 58a5b17d..49fad8d7 100644 --- a/templates/applications/settings.html +++ b/templates/applications/settings.html @@ -64,14 +64,12 @@ user_can_delete_app_member=user_can(permissions.DELETE_APPLICATION_MEMBER), ) }} -
- {{ 'common.resource_names.environments' | translate }} -
-
+

{{ 'common.resource_names.environments' | translate }}

+
{% if g.matchesPath("application-environments") %} {% include "fragments/flash.html" %} {% endif %} -
+
    {% for env in environments_obj %} @@ -84,44 +82,36 @@ {{ env['name'] }} - {% if env['pending'] %} + {% 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'] -%} PROCESSING - {% endif %} - {% if env['pending'] %} - - {% set edit_environment_button %} - {{ Icon('edit') }} - {% endset %} - - {{ - 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" - ) - }} - + {% else %} + + {{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }} + + {%- endif %}
- {% if env['pending'] %} - Cloud service provider link unavailable - {% else %} - - {{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }} - - {% endif %} + {% set edit_environment_button %} + Edit + {% endset %} + + {{ + ToggleButton( + open_html=edit_environment_button, + close_html=edit_environment_button, + section_name="edit" + ) + }}
@@ -161,8 +151,8 @@ {% 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..ce649f69 100644 --- a/templates/components/toggle_list.html +++ b/templates/components/toggle_list.html @@ -1,11 +1,11 @@ {% macro ToggleButton(action, open_html, close_html, section_name) %} - -
+ + {{ close_html }} -
-
+ + {{ open_html }} -
+ {% endmacro %} From ce9a551b2dddf67053efd5983f7ea6333b1d49a6 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Thu, 10 Oct 2019 16:05:22 -0400 Subject: [PATCH 2/8] More styling updates --- styles/components/_accordion_table.scss | 76 +++++++++++++----------- styles/components/_portfolio_layout.scss | 21 +++---- templates/applications/settings.html | 68 ++++++++++----------- templates/components/toggle_list.html | 6 +- 4 files changed, 87 insertions(+), 84 deletions(-) diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss index ba0718d1..060913ab 100644 --- a/styles/components/_accordion_table.scss +++ b/styles/components/_accordion_table.scss @@ -10,6 +10,11 @@ ul { padding-left: 0; + + li { + list-style-type: none; + margin: 0; + } } &__head { @@ -45,11 +50,14 @@ &__items { margin: 0; - li { + .accordion-table__item { font-weight: $font-bold; border-bottom: 1px solid $color-gray-lightest; - margin: 0; - list-style-type: none; + padding: $gap 0; + + &:first-child { + padding-top: 0; + } .icon-link--large { padding-top: $gap * 0.5; @@ -151,37 +159,45 @@ } } - &__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; + &:last-child { + border-bottom: none; } - border-bottom: 1px dashed $color-white; - } + .col--grow { + font-weight: $font-normal; + } - &_first { - float: left; - } + th, + td { + .icon-link { + font-weight: $font-normal; + font-size: $base-font-size; + } - &-role { - .icon-link { - padding: 0; - vertical-align: text-top; + border-bottom: 1px dashed $color-white; + } - .icon { - margin: 0 0 0 0.25rem; + &_first { + float: left; + } + + &-role { + .icon-link { + padding: 0; + vertical-align: text-top; + + .icon { + margin: 0 0 0 0.25rem; + } } } } @@ -210,11 +226,3 @@ } } } - -#application-environments { - .row { - & > .col:first-child { - flex-grow: 5; - } - } -} diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index c58d2e0d..a07fd984 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -270,25 +270,26 @@ margin-top: $gap * 3; } - .accordion-table__item-content.form-row { - margin-bottom: 0; - margin-top: 0; - padding: 0; - } - li.accordion-table__item__expanded { height: auto; } - span.accordion-table__item__toggler.icon-link { + a.application-list-item__environment__csp_link { font-size: $small-font-size; font-weight: $font-normal; - float: unset; + + .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/templates/applications/settings.html b/templates/applications/settings.html index 49fad8d7..ccb342e4 100644 --- a/templates/applications/settings.html +++ b/templates/applications/settings.html @@ -76,49 +76,43 @@ {% 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" - ) - }} -
    - {% if env['pending'] -%} - PROCESSING - {% else %} - - {{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }} - - {%- endif %} -
    -
    -
    - {% set edit_environment_button %} - Edit - {% endset %} - - {{ +
    +
    + + {{ env['name'] }} + + {% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %} + {{ ToggleButton( - open_html=edit_environment_button, - close_html=edit_environment_button, - section_name="edit" - ) - }} + 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'] -%} + PROCESSING + {% else %} + + {{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }} + + {%- endif %}
    {% call ToggleSection(section_name="members") %}
      {% for member in env['members'] %} -
    • +
    • {{ member }}
      • {% endfor %} @@ -127,7 +121,7 @@ {% call ToggleSection(section_name="edit") %}
        -
      • +
      • {{ edit_form.csrf_token }} {{ TextInput(edit_form.name, validation='requiredField') }} diff --git a/templates/components/toggle_list.html b/templates/components/toggle_list.html index ce649f69..16556720 100644 --- a/templates/components/toggle_list.html +++ b/templates/components/toggle_list.html @@ -1,5 +1,5 @@ -{% macro ToggleButton(action, open_html, close_html, section_name) %} - +{% macro ToggleButton(action, open_html, close_html, section_name, classes="") %} + {{ close_html }} @@ -10,7 +10,7 @@ {% endmacro %} {% macro ToggleSection(section_name, classes="") %} -
        +
        {{ caller() }}
        {% endmacro %} From 47e5a402622ca2832d8cc3c599ad23b400b9578c Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Thu, 10 Oct 2019 16:30:20 -0400 Subject: [PATCH 3/8] Clean up css in accordion-table file --- styles/components/_accordion_table.scss | 112 +++--------------------- templates/fragments/dod_login.html | 2 +- 2 files changed, 11 insertions(+), 103 deletions(-) diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss index 060913ab..5508bf43 100644 --- a/styles/components/_accordion_table.scss +++ b/styles/components/_accordion_table.scss @@ -1,32 +1,19 @@ -.float-right { - float: right; -} - .accordion-table { .usa-alert { margin: $gap * 2; - margin-bottom: 0; } ul { padding-left: 0; + margin: 0; li { list-style-type: none; margin: 0; + border-bottom: 1px solid $color-gray-lighter; } } - &__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; - } - thead th { text-transform: uppercase; border-bottom: 1px solid $color-gray-lightest; @@ -42,39 +29,9 @@ } } - .new-env { - margin-top: 5rem; - padding: 0 5rem; - } - &__items { margin: 0; - .accordion-table__item { - font-weight: $font-bold; - border-bottom: 1px solid $color-gray-lightest; - padding: $gap 0; - - &:first-child { - padding-top: 0; - } - - .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 { @@ -87,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; @@ -98,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 { @@ -171,35 +108,6 @@ &:last-child { border-bottom: none; } - - .col--grow { - font-weight: $font-normal; - } - - 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; - } - } - } } } } 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 }}
    From 22a912439a1ce429f8b711abe5bc4187368083b7 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Thu, 10 Oct 2019 16:50:56 -0400 Subject: [PATCH 4/8] Update pending label --- static/icons/exchange.svg | 1 + static/icons/link.svg | 2 +- styles/elements/_labels.scss | 15 +++++++++++++-- templates/applications/settings.html | 2 +- 4 files changed, 16 insertions(+), 4 deletions(-) create mode 100644 static/icons/exchange.svg 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/elements/_labels.scss b/styles/elements/_labels.scss index 6fdcab3d..02347168 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,14 @@ &--purple { background-color: $color-purple; } + + &--below { + margin-left: 0; + } + + .icon { + @include icon-color($color-white) + @include icon-size(12) + margin: 0; + } } diff --git a/templates/applications/settings.html b/templates/applications/settings.html index ccb342e4..d047ce7c 100644 --- a/templates/applications/settings.html +++ b/templates/applications/settings.html @@ -100,7 +100,7 @@ }}
    {% if env['pending'] -%} - PROCESSING + {{Icon('exchange')}} CHANGES PENDING {% else %} {{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }} From 041e16a26d7665c66e34efca70c9b08f0a8aa096 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Mon, 14 Oct 2019 11:41:28 -0400 Subject: [PATCH 5/8] Update add new button styling --- styles/components/_portfolio_layout.scss | 24 ++++++++----------- .../fragments/add_new_environment.html | 3 +-- templates/applications/settings.html | 2 -- templates/fragments/members.html | 2 +- 4 files changed, 12 insertions(+), 19 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index a07fd984..999f4e43 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; @@ -244,6 +239,7 @@ .panel { @include shadow-panel; + padding-bottom: 0; } .application-list-item { diff --git a/templates/applications/fragments/add_new_environment.html b/templates/applications/fragments/add_new_environment.html index 68274062..61fa096d 100644 --- a/templates/applications/fragments/add_new_environment.html +++ b/templates/applications/fragments/add_new_environment.html @@ -26,8 +26,7 @@
    - - {{ Icon('plus') }} + {{ "portfolios.applications.add_environment" | translate }} diff --git a/templates/applications/settings.html b/templates/applications/settings.html index d047ce7c..4e2581a4 100644 --- a/templates/applications/settings.html +++ b/templates/applications/settings.html @@ -141,9 +141,7 @@ {% if user_can(permissions.CREATE_ENVIRONMENT) %} -
    {% include "applications/fragments/add_new_environment.html" %} -
    {% endif %} diff --git a/templates/fragments/members.html b/templates/fragments/members.html index 041637f4..60a844c1 100644 --- a/templates/fragments/members.html +++ b/templates/fragments/members.html @@ -165,7 +165,7 @@ {% if user_can_create_app_member %} - + {{ "portfolios.applications.add_member" | translate }} {% endif %} From e4b1bc33c4c2b0032286d01e8eeb4c606a297a6e Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Mon, 14 Oct 2019 13:09:02 -0400 Subject: [PATCH 6/8] Create env management macro and delete a bunch of unused imports --- .../fragments/add_new_environment.html | 2 +- templates/applications/settings.html | 94 ++----------------- templates/fragments/environments.html | 87 +++++++++++++++++ 3 files changed, 95 insertions(+), 88 deletions(-) create mode 100644 templates/fragments/environments.html diff --git a/templates/applications/fragments/add_new_environment.html b/templates/applications/fragments/add_new_environment.html index 61fa096d..dbe499d1 100644 --- a/templates/applications/fragments/add_new_environment.html +++ b/templates/applications/fragments/add_new_environment.html @@ -26,7 +26,7 @@ - + {{ "portfolios.applications.add_environment" | translate }} diff --git a/templates/applications/settings.html b/templates/applications/settings.html index 4e2581a4..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,86 +58,12 @@ 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'] }} - - {% 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 %} -
    -
    -
    - {% if user_can(permissions.CREATE_ENVIRONMENT) %} - {% include "applications/fragments/add_new_environment.html" %} - {% endif %} -
    + {{ EnvironmentManagementTemplate( + application, + environments_obj, + new_env_form, + user_can_create_environment=user_can(permissions.CREATE_ENVIRONMENT) + ) }}
    diff --git a/templates/fragments/environments.html b/templates/fragments/environments.html new file mode 100644 index 00000000..dcd1638c --- /dev/null +++ b/templates/fragments/environments.html @@ -0,0 +1,87 @@ +{% 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) %} +

    {{ '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'] }} + + {% 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 %} +
    +
    +
    + {% if user_can_create_environment %} + {% include "applications/fragments/add_new_environment.html" %} + {% endif %} +
    +{% endmacro %} From 595995cf03c9a4fd0e59952706697ad6340150ad Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Mon, 14 Oct 2019 13:48:35 -0400 Subject: [PATCH 7/8] Update styling for empty state and the app environments panel --- styles/components/_empty_state.scss | 16 +-- styles/components/_portfolio_layout.scss | 2 +- styles/elements/_labels.scss | 4 +- templates/fragments/environments.html | 166 ++++++++++++----------- translations.yaml | 1 + 5 files changed, 95 insertions(+), 94 deletions(-) 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 999f4e43..899359ee 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -239,7 +239,7 @@ .panel { @include shadow-panel; - padding-bottom: 0; + padding-bottom: 2rem; } .application-list-item { diff --git a/styles/elements/_labels.scss b/styles/elements/_labels.scss index 02347168..4dae377f 100644 --- a/styles/elements/_labels.scss +++ b/styles/elements/_labels.scss @@ -44,8 +44,6 @@ } .icon { - @include icon-color($color-white) - @include icon-size(12) - margin: 0; + @include icon-color($color-white) @include icon-size(12) margin: 0; } } diff --git a/templates/fragments/environments.html b/templates/fragments/environments.html index dcd1638c..7b39f730 100644 --- a/templates/fragments/environments.html +++ b/templates/fragments/environments.html @@ -3,85 +3,99 @@ {% 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) %} -

    {{ 'common.resource_names.environments' | translate }}

    +{% macro EnvironmentManagementTemplate( + application, + environments_obj, + new_env_form, + user_can_create_environment +) %} + +

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

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

    + This Application has no environments +

    -
    - {% if user_can_create_environment %} + {% 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 %} + {%- endif %}
    {% endmacro %} 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 From e94e7c68cb3c74fadf73ddfc9102bb47507bfaf0 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Mon, 14 Oct 2019 13:57:53 -0400 Subject: [PATCH 8/8] Fix styling of new env form so it doesn't look terrible --- styles/components/_portfolio_layout.scss | 10 ++++++++++ .../applications/fragments/add_new_environment.html | 11 ++++------- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 899359ee..826795b4 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -223,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; diff --git a/templates/applications/fragments/add_new_environment.html b/templates/applications/fragments/add_new_environment.html index dbe499d1..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") }}