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

improvements to nested list

Browse Source
This commit is contained in:
dandds 2019-04-12 13:05:44 -04:00 committed by George Drummond
parent b1dd769e1b
commit 3ab84ba6f4
No known key found for this signature in database
GPG Key ID: 296DD6077123BF17
3 changed files with 48 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
styles/components/_accordion_table.scss
View File

@ -33,21 +33,39 @@
}
}
.accordion-table__item-content {
padding-top: $gap*3;
padding-right: $gap;
padding-bottom: $gap*3;
padding-left: $gap*3;
}
.accordion-table__items {
margin: 0;
li {
padding: $gap*2;
border-bottom: 1px dashed $color-gray-lightest;
list-style-type: none;
border-bottom: 1px solid $color-gray-lightest;
margin: 0;
ul {
margin-top: 0;
margin-bottom: 0;
background-color: $color-gray-lightest;
li {
border-bottom: 1px solid $color-gray-lighter;
}
}
}
.accordion-table__item__toggler {
@include icon-link-color($color-blue, $color-gray-lightest);
float: right;
margin-left: -$gap;
color: $color-blue;
padding: 0;
.icon {
@include icon-size(12);
@ -76,8 +94,6 @@
}
.accordion-table__item__expanded {
margin-left: 2 * $gap;
th, td {
.icon-link {
font-weight: $font-normal;

38
templates/components/toggle_list.html
View File

@ -1,24 +1,26 @@
{% from "components/icon.html" import Icon %}
{% macro ToggleList(item_name, item_type, length) %}
<li is="toggler">
<template slot-scope="props">
<span v-on:click="props.toggle">{{ item_name }}</span>
{% macro ToggleItem(action, item_type, length, icon) %}
<span
v-on:click="props.toggle"
class="icon-link icon-link--large accordion-table__item__toggler">
{{ action }} {{ item_type }} ({{ length }}){{ Icon(icon) }}
</span>
{% endmacro %}
<template v-if="props.isVisible">
<span
v-on:click="props.toggle"
class='icon-link icon-link--large accordion-table__item__toggler' >
Hide {{ item_type }} ({{ length }}){{ Icon('caret_up') }}
</span>
</template>
<template v-else>
<span
v-on:click="props.toggle"
class='icon-link icon-link--large accordion-table__item__toggler'>
Show {{ item_type }} ({{ length }}){{ Icon('caret_down') }}
</span>
</template>
{% macro ToggleList(item_name, item_type, length) %}
<li is="toggler" class="accordion-table__item">
<template slot-scope="props">
<div class="accordion-table__item-content">
<span v-on:click="props.toggle">{{ item_name }}</span>
<template v-if="props.isVisible">
{{ ToggleItem("Hide", item_type, length, "caret_up") }}
</template>
<template v-else>
{{ ToggleItem("Show", item_type, length, "caret_down") }}
</template>
</div>
<div v-show="props.isVisible">
{{ caller() }}
</div>

48
templates/fragments/applications/environments.html
View File

@ -20,52 +20,18 @@
<span class="float-right">{{ "portfolios.applications.environments.members" | translate }}</span>
</div>
<ul class='accordion-table__items'>
<ul class="accordion-table__items">
{% for name, members_list in environments_obj.items() %}
{% call ToggleList(item_name=name, item_type="Members", length=(members_list|length)) %}
{% for member in members_list %}
<li>
{{ member }}
<ul>
{% for member in members_list %}
<li class="accordion-table__item__expanded">
<div class="accordion-table__item-content">{{ member }}</div>
</li>
{% endfor %}
{% endfor %}
</ul>
{% endcall %}
{% endfor %}
</ul>
</div>
<environments-table
v-cloak
v-bind:environments='{{ environments_obj }}'
inline-template>
<table>
<thead>
<th scope='col'>{{ "portfolios.applications.environments.name" | translate }}</th>
<th scope='col' class='table-cell--align-right'>{{ "portfolios.applications.environments.members" | translate }}</th>
</thead>
<tbody v-for='(members_list, name) in environments' class='accordion-table__items'>
<tr>
<th scope='rowgroup' v-on:click="toggle($event, name)" v-html='name'></th>
<template v-if="environmentsState[name].isVisible">
<td v-on:click="toggle($event, name)" class='icon-link icon-link--large accordion-table__item__toggler'>Hide Members (<span v-html='members_list.length'></span>){{ Icon('caret_up') }}</td>
</template>
<template v-else>
<td v-on:click="toggle($event, name)" class='icon-link icon-link--large accordion-table__item__toggler'>Show Members (<span v-html='members_list.length'></span>){{ Icon('caret_down') }}</td>
</template>
</tr>
<tr scope='rowgroup' v-for='member in members_list' v-show='environmentsState[name].isVisible' class='accordion-table__item__expanded'>
<td>
<div>
<span v-html='member'></span>
</div>
</td>
<td class='table-cell--expand'></td>
</tr>
</tbody>
</table>
</environments-table>
</div>