Adds additional buttons and functionality to app team settings.
"Add to existing environment" table, "delete member", and environment roles and env role edit buttons added for every user in the team settings list. Accompanying CSS changes.
This commit is contained in:
dandds
parent
802c62e3e9
commit
ff41a20ad8
@ -91,6 +91,30 @@
|
||||
border-bottom: 1px solid $color-gray-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-table__item__action-group {
|
||||
padding: 1rem 3.2rem;
|
||||
background-color: $color-gray-lightest;
|
||||
|
||||
button,
|
||||
a {
|
||||
margin: 0;
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
|
||||
.icon-link {
|
||||
padding-top: 0.5rem;
|
||||
float: none;
|
||||
}
|
||||
|
||||
> *:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-table__item__toggler {
|
||||
@ -100,6 +124,10 @@
|
||||
color: $color-blue;
|
||||
padding: $gap;
|
||||
|
||||
> span {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include icon-size(12);
|
||||
|
||||
@ -147,6 +175,17 @@
|
||||
.accordion-table__item__expanded_first {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.accordion-table__item__expanded-role {
|
||||
.icon-link {
|
||||
padding: 0;
|
||||
vertical-align: text-top;
|
||||
|
||||
.icon {
|
||||
margin: 0 0 0 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
.portfolio-panel-container {
|
||||
@include media($large-screen) {
|
||||
@include grid-row;
|
||||
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
@ -38,7 +37,6 @@
|
||||
&.icon-link--disabled {
|
||||
color: $color-gray-dark;
|
||||
opacity: 1;
|
||||
|
||||
.icon {
|
||||
@include icon-color($color-gray-dark);
|
||||
}
|
||||
@ -53,7 +51,6 @@
|
||||
.icon-link {
|
||||
color: $color-gray-medium;
|
||||
pointer-events: none;
|
||||
|
||||
&.icon-link--disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -63,7 +60,6 @@
|
||||
|
||||
.portfolio-header {
|
||||
flex-direction: column;
|
||||
|
||||
@include media($small-screen) {
|
||||
flex-direction: row;
|
||||
}
|
||||
@ -103,10 +99,8 @@
|
||||
|
||||
.icon-link {
|
||||
padding: 0.8rem 1.2rem;
|
||||
|
||||
&.active {
|
||||
color: $color-gray;
|
||||
|
||||
.icon {
|
||||
@include icon-color($color-gray);
|
||||
}
|
||||
@ -150,7 +144,6 @@
|
||||
|
||||
.unfunded {
|
||||
color: $color-red;
|
||||
|
||||
.icon {
|
||||
@include icon-color($color-red);
|
||||
}
|
||||
@ -166,7 +159,7 @@
|
||||
}
|
||||
|
||||
.portfolio-content {
|
||||
margin: (6 * $gap) $gap 0 $gap;
|
||||
margin: 6 * $gap $gap 0 $gap;
|
||||
|
||||
.panel {
|
||||
@include shadow-panel;
|
||||
@ -175,7 +168,6 @@
|
||||
.member-list {
|
||||
.panel {
|
||||
@include shadow-panel;
|
||||
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@ -191,7 +183,7 @@
|
||||
}
|
||||
|
||||
tr:first-child {
|
||||
padding: 0 (2 * $gap) 0 (5 * $gap);
|
||||
padding: 0 2 * $gap 0 5 * $gap;
|
||||
}
|
||||
|
||||
td {
|
||||
@ -203,14 +195,14 @@
|
||||
|
||||
th {
|
||||
background-color: $color-gray-lightest;
|
||||
padding: $gap (2 * $gap);
|
||||
padding: $gap 2 * $gap;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
padding: (2 * $gap) (2 * $gap) (2 * $gap) (5 * $gap);
|
||||
padding: 2 * $gap 2 * $gap 2 * $gap 5 * $gap;
|
||||
}
|
||||
|
||||
tbody {
|
||||
@ -218,7 +210,7 @@
|
||||
border-bottom: 1px solid $color-gray-lightest;
|
||||
font-size: 1.6rem;
|
||||
border-top: 0;
|
||||
padding: (3 * $gap) (2 * $gap);
|
||||
padding: 3 * $gap 2 * $gap;
|
||||
|
||||
.usa-button-disabled {
|
||||
color: $color-gray-medium;
|
||||
@ -318,6 +310,11 @@
|
||||
.alert {
|
||||
margin: 4rem;
|
||||
}
|
||||
|
||||
.member-list__subhead {
|
||||
font-weight: $font-normal;
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
.application-content {
|
||||
@ -333,7 +330,6 @@
|
||||
.block-list__footer {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.application-edit__env-list-item {
|
||||
label {
|
||||
color: $color-black;
|
||||
@ -373,7 +369,6 @@
|
||||
.portfolio-applications__header--actions {
|
||||
color: $color-blue;
|
||||
font-size: $small-font-size;
|
||||
|
||||
.icon {
|
||||
@include icon-color($color-blue);
|
||||
@include icon-size(14);
|
||||
@ -384,7 +379,6 @@
|
||||
.application-list {
|
||||
.toggle-link {
|
||||
background-color: $color-blue-light;
|
||||
|
||||
.icon {
|
||||
margin: $gap / 2;
|
||||
}
|
||||
@ -402,7 +396,6 @@
|
||||
.application-list-item__environment__csp_link {
|
||||
font-size: $small-font-size;
|
||||
font-weight: normal;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-aqua-light;
|
||||
}
|
||||
@ -420,7 +413,6 @@
|
||||
|
||||
.subheading {
|
||||
@include subheading;
|
||||
|
||||
margin-top: 6 * $gap;
|
||||
margin-bottom: 2 * $gap;
|
||||
}
|
||||
@ -431,6 +423,7 @@
|
||||
|
||||
.pending-task-order {
|
||||
background-color: $color-gold-lightest;
|
||||
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
margin-bottom: 2 * $gap;
|
||||
@ -462,7 +455,6 @@
|
||||
|
||||
.icon--tiny {
|
||||
@include icon-size(10);
|
||||
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
@ -487,7 +479,7 @@
|
||||
|
||||
th {
|
||||
background-color: $color-gray-lightest;
|
||||
padding: $gap (2 * $gap);
|
||||
padding: $gap 2 * $gap;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
color: $color-gray;
|
||||
@ -566,7 +558,6 @@
|
||||
|
||||
.panel {
|
||||
@include shadow-panel;
|
||||
|
||||
margin-bottom: 4 * $gap;
|
||||
}
|
||||
}
|
||||
@ -586,7 +577,6 @@
|
||||
input {
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
.icon-validation {
|
||||
left: 30em;
|
||||
}
|
||||
@ -615,3 +605,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.member-list__name {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@ -11,7 +11,11 @@
|
||||
<toggler inline-template>
|
||||
<li class="accordion-table__item">
|
||||
<div class="accordion-table__item-content row">
|
||||
<div class="col col--grow">{{ member_form.user_name.data }}</div>
|
||||
<div class="col col--grow">
|
||||
<div class="member-list__name">
|
||||
{{ member_form.user_name.data }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col--grow">{{ OptionsInput(permissions_form.perms_team_mgmt, label=False, watch=True) }}</div>
|
||||
<div class="col col--grow">{{ OptionsInput(permissions_form.perms_env_mgmt, label=False, watch=True) }}</div>
|
||||
<div class="col col--grow">{{ OptionsInput(permissions_form.perms_del_env, label=False, watch=True) }}</div>
|
||||
@ -32,22 +36,39 @@
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
{% call ToggleSection(section_name="environments") %}
|
||||
<ul>
|
||||
{% for environment_form in environment_roles_form %}
|
||||
<li class="accordion-table__item__expanded">
|
||||
<li class="accordion-table__item__expanded row">
|
||||
<div class="col col--grow">
|
||||
{{ environment_form.environment_name.data }}
|
||||
</div>
|
||||
<div class="accordion-table__item__expanded-role col col--grow">
|
||||
<div class="right">
|
||||
<span>
|
||||
{{ environment_form.role.data }}
|
||||
</span>
|
||||
<div class="icon-link">
|
||||
{{ Icon("edit") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% if user_can(permissions.DELETE_APPLICATION_MEMBER) %}
|
||||
<li class="accordion-table__item__expanded action-group">
|
||||
<span class="usa-button button-danger" v-on:click="openModal('{{ delete_modal_id }}')">
|
||||
{{ "portfolios.applications.remove_member.button" | translate }}
|
||||
</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<div class="accordion-table__item__action-group">
|
||||
<a class="icon-link">
|
||||
{{ "portfolios.applications.team_settings.add_to_environment" | translate }}
|
||||
{{ Icon("plus") }}
|
||||
</a>
|
||||
<button
|
||||
id="delete-application"
|
||||
type="button"
|
||||
class='usa-button button-danger'
|
||||
>
|
||||
{{ "portfolios.members.archive_button" | translate }}
|
||||
</button>
|
||||
</div>
|
||||
{% endcall %}
|
||||
{{ member_form.user_id() }}
|
||||
</li>
|
||||
|
||||
@ -57,11 +57,9 @@
|
||||
<div class="responsive-table-wrapper__title row">
|
||||
<div class="h3">
|
||||
{{ "portfolios.applications.team_settings.section.title" | translate({ "application_name": application.name }) }}
|
||||
<p class="member-list__subhead">Members ({{ team_form.members | length }})</p>
|
||||
</div>
|
||||
</div>
|
||||
<a class="icon-link">
|
||||
{{ Icon('info') }}
|
||||
{{ "portfolios.admin.settings_info" | translate }}
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
@ -468,6 +468,7 @@ portfolios:
|
||||
subheading: Team Settings
|
||||
title: '{application_name} Team Settings'
|
||||
user: User
|
||||
add_to_environment: Add to existing environment
|
||||
team_text: Team
|
||||
update_button_text: Save
|
||||
members:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user