pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1114 from dod-ccpo/app-settings-styling_part-2

Browse Source 
App settings styling - environments table
This commit is contained in:
leigh-mil 2019-10-16 18:10:09 -04:00 committed by GitHub
commit 1c79f1dfc9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 191 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/icons/exchange.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exchange-alt" class="svg-inline--fa fa-exchange-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M0 168v-16c0-13.255 10.745-24 24-24h360V80c0-21.367 25.899-32.042 40.971-16.971l80 80c9.372 9.373 9.372 24.569 0 33.941l-80 80C409.956 271.982 384 261.456 384 240v-48H24c-13.255 0-24-10.745-24-24zm488 152H128v-48c0-21.314-25.862-32.08-40.971-16.971l-80 80c-9.372 9.373-9.372 24.569 0 33.941l80 80C102.057 463.997 128 453.437 128 432v-48h360c13.255 0 24-10.745 24-24v-16c0-13.255-10.745-24-24-24z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 639 B

2
static/icons/link.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.321 10.68c-.256 0-.512-.098-.707-.293-1.953-1.954-1.953-5.132 0-7.085L7.465 1.45C8.411.504 9.67-.017 11.008-.017s2.596.521 3.542 1.467 1.468 2.205 1.468 3.543-.521 2.596-1.468 3.542c-.391.391-1.023.391-1.414 0s-.391-1.024 0-1.414c.568-.569.882-1.325.882-2.128 0-.804-.313-1.56-.882-2.129-1.137-1.137-3.12-1.137-4.257 0L7.028 4.715c-1.173 1.174-1.173 3.083 0 4.257.391.391.391 1.023 0 1.414-.195.196-.451.294-.707.294zm-1.293 5.302c-1.338 0-2.596-.521-3.542-1.468C.54 13.569.018 12.31.018 10.972S.539 8.376 1.485 7.43c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414c-.569.568-.882 1.325-.882 2.129s.313 1.56.882 2.128c1.138 1.137 3.119 1.137 4.257 0l1.699-1.699c.568-.568.882-1.324.882-2.128s-.313-1.56-.882-2.129c-.391-.39-.391-1.023 0-1.414s1.023-.391 1.414 0c.946.946 1.468 2.204 1.468 3.543 0 1.338-.521 2.597-1.468 3.542L8.57 14.515c-.946.946-2.204 1.467-3.542 1.467z"/></svg>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="external-link-alt" class="svg-inline--fa fa-external-link-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 953 B

After

Width:  |  Height:  |  Size: 598 B

124
styles/components/_accordion_table.scss
View File

@ -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 @@
}
}
&-toggle-content {
margin-top: $gap;
&__expanded {
font-size: $small-font-size;
font-weight: $font-normal;
background-color: $color-gray-lightest;
padding: ($gap * 2) ($gap * 4);
padding: $gap;
.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;
}
&:last-child {
border-bottom: none;
}
}
}
@ -210,11 +134,3 @@
}
}
}
#application-environments {
.row {
& > .col:first-child {
flex-grow: 5;
}
}
}

16
styles/components/_empty_state.scss
View File

@ -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 {

62
styles/components/_portfolio_layout.scss
View File

@ -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;
}
}
}

13
styles/elements/_labels.scss
View File

@ -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;
}
}

5
styles/elements/_panels.scss
View File

@ -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 {

8
templates/applications/fragments/add_new_environment.html
View File

@ -7,16 +7,13 @@
<div v-if="open">
<form method='POST' id="add-new-env" action='{{ url_for("applications.new_environment", application_id=application.id) }}' autocomplete="off" enctype="multipart/form-data">
{{ new_env_form.csrf_token }}
<div class="accordion-table__item-content new-env">
{{ Alert(
title=("portfolios.applications.create_new_env" | translate),
message=("portfolios.applications.create_new_env_info" | translate )
) }}
<div class="accordion-table__item-content new-env">
<div class="h4">{{ "portfolios.applications.enter_env_name" | translate }}</div>
{{ TextInput(new_env_form.name, label="", validation="requiredField", optional=False) }}
</div>
<div class="panel__footer">
<div class="action-group">
{{ SaveButton(text=('common.save' | translate), element="input", form="add-new-env") }}
<a class='action-group__action icon-link icon-link--default' v-on:click="toggle">
@ -26,8 +23,7 @@
</div>
</form>
</div>
<a class='icon-link icon-link__add' v-on:click="toggle">
{{ Icon('plus') }}
<a class="usa-button usa-button-secondary add-new-button" v-on:click="toggle">
{{ "portfolios.applications.add_environment" | translate }}
</a>
</div>

112
templates/applications/settings.html
View File

@ -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,104 +58,12 @@
user_can_delete_app_member=user_can(permissions.DELETE_APPLICATION_MEMBER),
) }}
<div class="subheading">
{{ 'common.resource_names.environments' | translate }}
</div>
<div class="panel">
{% if g.matchesPath("application-environments") %}
{% include "fragments/flash.html" %}
{% endif %}
<div class="panel__content">
<div class="accordion-table accordion-table-list">
<ul class="accordion-table__items">
{% for env in environments_obj %}
{% set edit_form = env['edit_form'] %}
<toggler inline-template>
<li class="accordion-table__item">
<div class="accordion-table__item-content form-row">
<div class="form-col form-col--two-thirds">
<div class="environment-list__item">
<span>
{{ env['name'] }}
</span>
{% if env['pending'] %}
<span class='usa-label'>PROCESSING</span>
{% endif %}
{% if env['pending'] %}
<span class="icon-link">
{% set edit_environment_button %}
{{ Icon('edit') }}
{% endset %}
{{
ToggleButton(
open_html=edit_environment_button,
close_html=edit_environment_button,
section_name="edit"
)
}}
</span>
{% endif %}
<span class="accordion-table__item__toggler icon-link">
{% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %}
{{
ToggleButton(
open_html=members_button,
close_html=members_button,
section_name="members"
)
}}
</span>
</div>
</div>
<div class="form-col form-col--third">
{% if env['pending'] %}
<em>Cloud service provider link unavailable</em>
{% else %}
<a href='{{ url_for("applications.access_environment", environment_id=env.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link icon-link'>
<span>{{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }}</span>
</a>
{% endif %}
</div>
</div>
{% call ToggleSection(section_name="members") %}
<ul>
{% for member in env['members'] %}
<li class="accordion-table__item__expanded">
{{ member }}
</li>
{% endfor %}
</ul>
{% endcall %}
{% call ToggleSection(section_name="edit") %}
<ul>
<li class="accordion-table__item__expanded">
<form action="{{ url_for('applications.update_environment', environment_id=env['id']) }}" method="post" v-on:submit="handleSubmit">
{{ edit_form.csrf_token }}
{{ TextInput(edit_form.name, validation='requiredField') }}
{{
SaveButton(
text=("common.save" | translate)
)
}}
</form>
</li>
</ul>
{% endcall %}
</li>
</toggler>
{% endfor %}
</ul>
</div>
</div>
{% if user_can(permissions.CREATE_ENVIRONMENT) %}
<div class='subheading'>
{% include "applications/fragments/add_new_environment.html" %}
</div>
{% endif %}
</div>
{{ EnvironmentManagementTemplate(
application,
environments_obj,
new_env_form,
user_can_create_environment=user_can(permissions.CREATE_ENVIRONMENT)
) }}
<hr>

14
templates/components/toggle_list.html
View File

@ -1,16 +1,16 @@
{% macro ToggleButton(action, open_html, close_html, section_name) %}
<span v-on:click="toggleSection('{{ section_name }}')">
<div v-if="selectedSection === '{{ section_name }}'">
{% macro ToggleButton(action, open_html, close_html, section_name, classes="") %}
<span v-on:click="toggleSection('{{ section_name }}')" class="accordion-table__item__toggler {{ classes }}">
<span v-if="selectedSection === '{{ section_name }}'">
{{ close_html }}
</div>
<div v-else>
</span>
<span v-else>
{{ open_html }}
</div>
</span>
</span>
{% endmacro %}
{% macro ToggleSection(section_name, classes="") %}
<div v-show="selectedSection === '{{ section_name }}'" class='{{ classes }}'>
<div v-show="selectedSection === '{{ section_name }}'" class='accordion-table__item-toggle-content {{ classes }}'>
{{ caller() }}
</div>
{% endmacro %}

2
templates/fragments/dod_login.html
View File

@ -25,7 +25,7 @@
<li>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.</li>
</ul>
<a href='{{ redirect_url }}' class="usa-button usa-button-primary float-right">
<a href='{{ redirect_url }}' class="usa-button usa-button-primary right">
{{ "common.continue" | translate }}
</a>
</div>

101
templates/fragments/environments.html Normal file
View File

@ -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
) %}
<h3>{{ "portfolios.applications.settings.environments" | translate }}</h3>
<section class="panel" id="application-environments">
{% if g.matchesPath("application-environments") -%}
{% include "fragments/flash.html" %}
{%- endif %}
{% if 0 == environments_obj | length -%}
<div class="empty-state panel__content">
<p class="empty-state__message">
This Application has no environments
</p>
</div>
{% else %}
<div class="panel__content">
<div class="accordion-table accordion-table-list">
<ul class="accordion-table__items">
{% for env in environments_obj %}
{% set edit_form = env['edit_form'] %}
<toggler inline-template>
<li class="accordion-table__item">
<div class="accordion-table__item-content">
<div class="environment-list__item">
<span>
{{ env['name'] }}
</span>
{% 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"
)
}}
<br>
{% if env['pending'] -%}
<span class='usa-label label--below'>{{Icon('exchange')}} CHANGES PENDING</span>
{% else %}
<a href='{{ url_for("applications.access_environment", environment_id=env.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link'>
<span>{{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }}</span>
</a>
{%- endif %}
</div>
</div>
{% call ToggleSection(section_name="members") %}
<ul>
{% for member in env['members'] %}
<li class="accordion-table__item-toggle-content__expanded">
{{ member }}
</li>
{% endfor %}
</ul>
{% endcall %}
{% call ToggleSection(section_name="edit") %}
<ul>
<li class="accordion-table__item-toggle-content__expanded">
<form action="{{ url_for('applications.update_environment', environment_id=env['id']) }}" method="post" v-on:submit="handleSubmit">
{{ edit_form.csrf_token }}
{{ TextInput(edit_form.name, validation='requiredField') }}
{{
SaveButton(
text=("common.save" | translate)
)
}}
</form>
</li>
</ul>
{% endcall %}
</li>
</toggler>
{% endfor %}
</ul>
</div>
</div>
{%- endif %}
{% if user_can_create_environment -%}
{% include "applications/fragments/add_new_environment.html" %}
{%- endif %}
</section>
{% endmacro %}

2
templates/fragments/members.html
View File

@ -168,7 +168,7 @@
</tbody>
</table>
{% if user_can_create_app_member %}
<a class="usa-button usa-button-secondary create-member" v-on:click="openModal('{{ new_member_modal_name }}')">
<a class="usa-button usa-button-secondary add-new-button" v-on:click="openModal('{{ new_member_modal_name }}')">
{{ "portfolios.applications.add_member" | translate }}
</a>
{% endif %}

1
translations.yaml
View File

@ -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