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

Style and formatting updates to environments and team tables.

Browse Source 
- Use the built-in grid system for columns.
- Add column heads to environments table.
- Add delete icon to environments table.
This commit is contained in:
dandds 2019-05-02 14:59:35 -04:00
parent e457e9a60d
commit 4289554e76
4 changed files with 87 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
styles/components/_accordion_table.scss
View File

@ -12,11 +12,6 @@
padding-left: 0;
}
&.accordion-table-list {
display: table;
width: 100%;
}
.accordion-table__head {
padding: $gap ($gap * 2);
font-size: $small-font-size;
@ -42,10 +37,7 @@
}
.accordion-table__item-content {
padding-top: $gap * 2;
padding-right: $gap;
padding-left: $gap * 2;
padding-bottom: $gap * 3;
padding: ($gap * 2);
}
.accordion-table__items {
@ -128,29 +120,27 @@
}
}
#application-members {
.application-list {
.accordion-table {
.accordion-table__item-content, .accordion-table__head {
display: flex;
& > span {
flex-grow: 3;
display: flex;
flex-basis: 0;
&.icon-link {
flex-grow: 1;
}
}
}
span {
flex-grow: 1;
flex-basis: 0;
}
.accordion-table__item__toggler {
text-align: right;
padding-right: 0;
padding-left: 0;
}
.accordion-table__item-content {
.icon-link {
padding-right: 0;
padding-left: 0;
}
}
}
}
#application-environments {
.row {
& > .col:first-child {
flex-grow: 5;
}
}
}

58
templates/fragments/applications/edit_environments.html
View File

@ -25,7 +25,7 @@
</div>
{% endmacro %}
<div class="application-list-item">
<div class="application-list-item application-list">
<header>
<div class="responsive-table-wrapper__header">
<div class='responsive-table-wrapper__title'>
@ -39,8 +39,11 @@
</header>
<div class="accordion-table accordion-table-list">
<div class="accordion-table__head">
<span>{{ "portfolios.applications.environments.name" | translate }}</span>
<div class="accordion-table__head row">
<div class="col col--grow">{{ "portfolios.applications.environments.name" | translate }}</div>
<div class="col col--grow">{{ "portfolios.applications.environments.edit_name" | translate }}</div>
<div class="col col--grow">{{ "common.delete" | translate }}</div>
<div class="col col--grow">{{ "common.members" | translate }}</div>
</div>
<ul class="accordion-table__items">
@ -51,40 +54,47 @@
<toggler inline-template>
<li class="accordion-table__item">
<div class="accordion-table__item-content">
<span>
<div class="accordion-table__item-content row">
<div class="col col--grow">
{{ env['name'] }}
</span>
<span class="icon-link">
{% set edit_environment_button %}
</div>
<div class="col col--grow">
<span class="icon-link">
{% set edit_environment_button %}
{{ Icon('edit') }}
{% endset %}
{% endset %}
{{
{{
ToggleButton(
open_html=edit_environment_button,
close_html=edit_environment_button,
section_name="edit"
open_html=edit_environment_button,
close_html=edit_environment_button,
section_name="edit"
)
}}
</span>
<span class="icon-link icon-link--large accordion-table__item__toggler">
}}
</span>
</div>
<div class="col col--grow">
<span class="icon-link icon-link--danger">
{{ Icon('trash') }}
</span>
</div>
<div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
{% set open_members_button %}
{{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_down') }}
{{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_down') }}
{% endset %}
{% set close_members_button %}
{{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_up') }}
{{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_up') }}
{% endset %}
{{
ToggleButton(
open_html=open_members_button,
close_html=close_members_button,
section_name="members"
)
ToggleButton(
open_html=open_members_button,
close_html=close_members_button,
section_name="members"
)
}}
</span>
</div>
</div>
{% call ToggleSection(section_name="members") %}

67
templates/portfolios/applications/team.html
View File

@ -23,7 +23,7 @@
{{ 'portfolios.applications.team_settings.subheading' | translate }}
</div>
<section class="member-list" id="application-members">
<section class="member-list application-list" id="application-members">
<div class='responsive-table-wrapper panel'>
{% if g.matchesPath("application-members") %}
{% include "fragments/flash.html" %}
@ -43,22 +43,22 @@
</header>
<div class="accordion-table accordion-table-list">
<div class="accordion-table__head">
<span>
<span>
{{ "common.name" | translate }}
</span>
<span>
{{ "portfolios.applications.team_settings.section.table.delete_access" | translate }}
</span>
<span>
{{ "portfolios.applications.team_settings.section.table.environment_management" | translate }}
</span>
<span>
{{ "portfolios.applications.team_settings.section.table.team_management" | translate }}
</span>
</span>
<span class="icon-link" />
<div class="accordion-table__head row">
<div class="col col--grow">
{{ "common.name" | translate }}
</div>
<div class="col col--grow">
{{ "portfolios.applications.team_settings.section.table.delete_access" | translate }}
</div>
<div class="col col--grow">
{{ "portfolios.applications.team_settings.section.table.environment_management" | translate }}
</div>
<div class="col col--grow">
{{ "portfolios.applications.team_settings.section.table.team_management" | translate }}
</div>
<div class="col col--grow">
&nbsp;
</div>
</div>
<ul class="accordion-table__items">
{% for member in application.members %}
@ -67,20 +67,17 @@
{% set user_permissions = user_info["permissions"] %}
{% macro PermissionField(value) %}
<span class="user-permission{% if "Edit" in value %} green{% endif %}">{{ value }}</span>
<div class="col col--grow user-permission{% if "Edit" in value %} green{% endif %}">{{ value }}</div>
{% endmacro %}
<toggler inline-template>
<li class="accordion-table__item">
<div class="accordion-table__item-content">
<span>
{{ name }}
<span>{{ user.full_name }}</span>
{{ PermissionField(user_permissions["delete_access"]) }}
{{ PermissionField(user_permissions["environment_management"]) }}
{{ PermissionField(user_permissions["team_management"]) }}
</span>
<span class="icon-link icon-link--large accordion-table__item__toggler">
<div class="accordion-table__item-content row">
<div class="col col--grow">{{ user.full_name }}</div>
{{ PermissionField(user_permissions["delete_access"]) }}
{{ PermissionField(user_permissions["environment_management"]) }}
{{ PermissionField(user_permissions["team_management"]) }}
<div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
{% set open_html %}
{{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_down') }}
{% endset %}
@ -89,14 +86,14 @@
{{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_up') }}
{% endset %}
{{
ToggleButton(
open_html=open_html,
close_html=close_html,
section_name="environments"
)
}}
</span>
{{
ToggleButton(
open_html=open_html,
close_html=close_html,
section_name="environments"
)
}}
</div>
</div>
{% call ToggleSection(section_name="environments") %}
<ul>

2
translations.yaml
View File

@ -22,6 +22,7 @@ common:
cancel: Cancel
confirm: Confirm
continue: Continue
delete: Delete
delete_confirm: 'Please type the word DELETE to confirm:'
edit: Edit
hide: Hide
@ -412,6 +413,7 @@ portfolios:
header: Are you sure you want to delete this application?
environments:
name: Name
edit_name: Edit name
environments_description: Each environment created within an application is logically separated from one another for easier management and security.
environments_heading: Application environments
existing_application_title: '{application_name} Application Settings'