Merge pull request #1114 from dod-ccpo/app-settings-styling_part-2
App settings styling - environments table
This commit is contained in:
commit
1c79f1dfc9
1
static/icons/exchange.svg
Normal file
1
static/icons/exchange.svg
Normal 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>
|
After Width: | Height: | Size: 639 B |
@ -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>
|
||||||
|
Before Width: | Height: | Size: 953 B After Width: | Height: | Size: 598 B |
@ -1,25 +1,17 @@
|
|||||||
.float-right {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accordion-table {
|
.accordion-table {
|
||||||
.usa-alert {
|
.usa-alert {
|
||||||
margin: $gap * 2;
|
margin: $gap * 2;
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
margin: 0;
|
||||||
|
|
||||||
&__head {
|
li {
|
||||||
padding: $gap ($gap * 2);
|
list-style-type: none;
|
||||||
font-size: $small-font-size;
|
margin: 0;
|
||||||
font-weight: 700;
|
border-bottom: 1px solid $color-gray-lighter;
|
||||||
color: $color-gray;
|
}
|
||||||
background-color: $color-gray-lightest;
|
|
||||||
border-bottom: 1px solid $color-gray-lightest;
|
|
||||||
border-top: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
thead th {
|
thead th {
|
||||||
@ -37,36 +29,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.new-env {
|
|
||||||
margin-top: 5rem;
|
|
||||||
padding: 0 5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__items {
|
&__items {
|
||||||
margin: 0;
|
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,
|
th,
|
||||||
td,
|
td,
|
||||||
tr {
|
tr {
|
||||||
@ -79,8 +44,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
|
border-bottom: 1px solid $color-gray-lightest;
|
||||||
|
padding: $gap 0;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&-content {
|
&-content {
|
||||||
padding: ($gap * 2);
|
font-weight: $font-bold;
|
||||||
|
|
||||||
.usa-input {
|
.usa-input {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -90,36 +62,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#name {
|
|
||||||
max-width: none;
|
|
||||||
border-color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.usa-alert {
|
.usa-alert {
|
||||||
margin: 2.5rem 0;
|
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 {
|
&__toggler {
|
||||||
@ -151,38 +96,17 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__expanded {
|
&-toggle-content {
|
||||||
font-size: $small-font-size;
|
margin-top: $gap;
|
||||||
font-weight: $font-normal;
|
|
||||||
background-color: $color-gray-lightest;
|
|
||||||
padding: ($gap * 2) ($gap * 4);
|
|
||||||
|
|
||||||
.col--grow {
|
&__expanded {
|
||||||
|
font-size: $small-font-size;
|
||||||
font-weight: $font-normal;
|
font-weight: $font-normal;
|
||||||
}
|
background-color: $color-gray-lightest;
|
||||||
|
padding: $gap;
|
||||||
|
|
||||||
th,
|
&:last-child {
|
||||||
td {
|
border-bottom: none;
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -210,11 +134,3 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#application-environments {
|
|
||||||
.row {
|
|
||||||
& > .col:first-child {
|
|
||||||
flex-grow: 5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
@ -1,30 +1,18 @@
|
|||||||
.empty-state {
|
.empty-state {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 6rem ($gap * 2) 0;
|
padding: 5rem ($gap * 2) 2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
||||||
@include media($medium-screen) {
|
|
||||||
padding: 8rem ($gap * 4) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .icon {
|
> .icon {
|
||||||
@include icon-size(50);
|
@include icon-size(50);
|
||||||
@include icon-color($color-gray-light);
|
@include icon-color($color-gray-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__message {
|
&__message {
|
||||||
@include h2;
|
font-weight: $font-bold;
|
||||||
|
|
||||||
line-height: 1.2;
|
|
||||||
max-width: 15em;
|
|
||||||
color: $color-gray;
|
|
||||||
|
|
||||||
@include media($large-screen) {
|
|
||||||
@include h1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__sub-message {
|
&__sub-message {
|
||||||
|
@ -140,16 +140,19 @@
|
|||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
@include shadow-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 {
|
.member-list {
|
||||||
.panel {
|
|
||||||
@include shadow-panel;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.responsive-table-wrapper {
|
.responsive-table-wrapper {
|
||||||
padding-bottom: $gap * 3;
|
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -158,14 +161,6 @@
|
|||||||
margin-top: 0;
|
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 {
|
input.usa-button.usa-button-primary {
|
||||||
width: 9rem;
|
width: 9rem;
|
||||||
height: 4rem;
|
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 {
|
.application-content {
|
||||||
margin-top: $gap * 4;
|
margin-top: $gap * 4;
|
||||||
|
|
||||||
@ -244,6 +249,7 @@
|
|||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
@include shadow-panel;
|
@include shadow-panel;
|
||||||
|
padding-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-list-item {
|
.application-list-item {
|
||||||
@ -270,32 +276,26 @@
|
|||||||
margin-top: $gap * 3;
|
margin-top: $gap * 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.accordion-table__item-content.form-row {
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.accordion-table__item__expanded {
|
li.accordion-table__item__expanded {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.environment-list__item {
|
a.application-list-item__environment__csp_link {
|
||||||
position: relative;
|
|
||||||
height: 7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.accordion-table__item__toggler.icon-link {
|
|
||||||
font-size: $small-font-size;
|
font-size: $small-font-size;
|
||||||
font-weight: $font-normal;
|
font-weight: $font-normal;
|
||||||
position: absolute;
|
|
||||||
left: -$gap * 1.25;
|
.icon {
|
||||||
bottom: 0;
|
@include icon-color($color-blue);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a.application-list-item__environment__csp_link.icon-link {
|
span.accordion-table__item__toggler {
|
||||||
font-size: $small-font-size;
|
|
||||||
font-weight: $font-normal;
|
font-weight: $font-normal;
|
||||||
|
|
||||||
|
&.environment-list__item__members {
|
||||||
|
float: unset;
|
||||||
|
font-size: $small-font-size;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -4,7 +4,8 @@
|
|||||||
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_labels.scss
|
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_labels.scss
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.label {
|
.label,
|
||||||
|
.usa-label {
|
||||||
@include h5;
|
@include h5;
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -15,7 +16,7 @@
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin: 0 $gap;
|
margin: 0 $gap;
|
||||||
padding: 0 $gap;
|
padding: 0 $gap;
|
||||||
border-radius: $gap / 2;
|
border-radius: $gap / 3;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
&--info {
|
&--info {
|
||||||
@ -37,4 +38,12 @@
|
|||||||
&--purple {
|
&--purple {
|
||||||
background-color: $color-purple;
|
background-color: $color-purple;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--below {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
@include icon-color($color-white) @include icon-size(12) margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -61,11 +61,6 @@
|
|||||||
&__content {
|
&__content {
|
||||||
margin: ($gap * 2) 0;
|
margin: ($gap * 2) 0;
|
||||||
padding: 0 ($gap * 2);
|
padding: 0 ($gap * 2);
|
||||||
|
|
||||||
@include media($medium-screen) {
|
|
||||||
margin: ($gap * 4) 0;
|
|
||||||
padding: 0 ($gap * 4);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__body {
|
&__body {
|
||||||
|
@ -7,16 +7,13 @@
|
|||||||
<div v-if="open">
|
<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">
|
<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 }}
|
{{ new_env_form.csrf_token }}
|
||||||
|
{{ 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="accordion-table__item-content new-env">
|
||||||
{{ Alert(
|
|
||||||
title=("portfolios.applications.create_new_env" | translate),
|
|
||||||
message=("portfolios.applications.create_new_env_info" | translate )
|
|
||||||
) }}
|
|
||||||
<div class="h4">{{ "portfolios.applications.enter_env_name" | translate }}</div>
|
<div class="h4">{{ "portfolios.applications.enter_env_name" | translate }}</div>
|
||||||
{{ TextInput(new_env_form.name, label="", validation="requiredField", optional=False) }}
|
{{ TextInput(new_env_form.name, label="", validation="requiredField", optional=False) }}
|
||||||
</div>
|
|
||||||
<div class="panel__footer">
|
|
||||||
<div class="action-group">
|
<div class="action-group">
|
||||||
{{ SaveButton(text=('common.save' | translate), element="input", form="add-new-env") }}
|
{{ 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">
|
<a class='action-group__action icon-link icon-link--default' v-on:click="toggle">
|
||||||
@ -26,8 +23,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<a class='icon-link icon-link__add' v-on:click="toggle">
|
<a class="usa-button usa-button-secondary add-new-button" v-on:click="toggle">
|
||||||
{{ Icon('plus') }}
|
|
||||||
{{ "portfolios.applications.add_environment" | translate }}
|
{{ "portfolios.applications.add_environment" | translate }}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -2,18 +2,12 @@
|
|||||||
|
|
||||||
{% from "components/alert.html" import Alert %}
|
{% from "components/alert.html" import Alert %}
|
||||||
{% from "components/delete_confirmation.html" import DeleteConfirmation %}
|
{% from "components/delete_confirmation.html" import DeleteConfirmation %}
|
||||||
{% from "components/icon.html" import Icon %}
|
{% from "fragments/environments.html" import EnvironmentManagementTemplate %}
|
||||||
{% import "applications/fragments/new_member_modal_content.html" as member_steps %}
|
|
||||||
{% from "fragments/members.html" import MemberManagementTemplate %}
|
{% from "fragments/members.html" import MemberManagementTemplate %}
|
||||||
{% from "components/modal.html" import Modal %}
|
{% from "components/modal.html" import Modal %}
|
||||||
{% from "components/pagination.html" import Pagination %}
|
{% from "components/pagination.html" import Pagination %}
|
||||||
{% from "components/save_button.html" import SaveButton %}
|
{% from "components/save_button.html" import SaveButton %}
|
||||||
{% from "components/text_input.html" import TextInput %}
|
{% 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 }) %}
|
{% 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),
|
user_can_delete_app_member=user_can(permissions.DELETE_APPLICATION_MEMBER),
|
||||||
) }}
|
) }}
|
||||||
|
|
||||||
<div class="subheading">
|
{{ EnvironmentManagementTemplate(
|
||||||
{{ 'common.resource_names.environments' | translate }}
|
application,
|
||||||
</div>
|
environments_obj,
|
||||||
<div class="panel">
|
new_env_form,
|
||||||
{% if g.matchesPath("application-environments") %}
|
user_can_create_environment=user_can(permissions.CREATE_ENVIRONMENT)
|
||||||
{% 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>
|
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
|
@ -1,16 +1,16 @@
|
|||||||
{% macro ToggleButton(action, open_html, close_html, section_name) %}
|
{% macro ToggleButton(action, open_html, close_html, section_name, classes="") %}
|
||||||
<span v-on:click="toggleSection('{{ section_name }}')">
|
<span v-on:click="toggleSection('{{ section_name }}')" class="accordion-table__item__toggler {{ classes }}">
|
||||||
<div v-if="selectedSection === '{{ section_name }}'">
|
<span v-if="selectedSection === '{{ section_name }}'">
|
||||||
{{ close_html }}
|
{{ close_html }}
|
||||||
</div>
|
</span>
|
||||||
<div v-else>
|
<span v-else>
|
||||||
{{ open_html }}
|
{{ open_html }}
|
||||||
</div>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|
||||||
{% macro ToggleSection(section_name, classes="") %}
|
{% 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() }}
|
{{ caller() }}
|
||||||
</div>
|
</div>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
@ -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>
|
<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>
|
</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 }}
|
{{ "common.continue" | translate }}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
101
templates/fragments/environments.html
Normal file
101
templates/fragments/environments.html
Normal 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 %}
|
@ -168,7 +168,7 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
{% if user_can_create_app_member %}
|
{% 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 }}
|
{{ "portfolios.applications.add_member" | translate }}
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
@ -377,6 +377,7 @@ portfolios:
|
|||||||
settings:
|
settings:
|
||||||
name_description: Application name and description
|
name_description: Application name and description
|
||||||
team_members: Team Members
|
team_members: Team Members
|
||||||
|
environments: Application Environments
|
||||||
team_settings:
|
team_settings:
|
||||||
blank_slate:
|
blank_slate:
|
||||||
action_label: Invite a new team member
|
action_label: Invite a new team member
|
||||||
|
Loading…
x
Reference in New Issue
Block a user