Multiple drop down sections for toggler
This commit is contained in:
George Drummond
parent
d963130674
commit
847c300d33
@ -1,14 +1,19 @@
|
||||
import ToggleMixin from '../mixins/toggle'
|
||||
|
||||
export default {
|
||||
name: 'toggler',
|
||||
|
||||
mixins: [ToggleMixin],
|
||||
data: function() {
|
||||
return {
|
||||
selectedSection: null,
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
defaultVisible: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
methods: {
|
||||
toggleSection: function(sectionName) {
|
||||
if (this.selectedSection === sectionName) {
|
||||
this.selectedSection = null
|
||||
} else {
|
||||
this.selectedSection = sectionName
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -37,10 +37,10 @@
|
||||
}
|
||||
|
||||
.accordion-table__item-content {
|
||||
padding-top: $gap*3;
|
||||
padding-top: $gap*2;
|
||||
padding-right: $gap;
|
||||
padding-bottom: $gap*3;
|
||||
padding-left: $gap*3;
|
||||
padding-bottom: $gap*2;
|
||||
padding-left: $gap*2;
|
||||
}
|
||||
|
||||
.accordion-table__items {
|
||||
@ -69,7 +69,6 @@
|
||||
float: right;
|
||||
color: $color-blue;
|
||||
padding: $gap;
|
||||
margin: -$gap 0;
|
||||
|
||||
.icon {
|
||||
@include icon-size(12);
|
||||
|
||||
@ -1,45 +1,22 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
|
||||
{% 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) }}
|
||||
{% macro ToggleButton(action, open_html, close_html, section_name) %}
|
||||
<span v-on:click="toggleSection('{{ section_name }}')">
|
||||
<div v-if="selectedSection === '{{ section_name }}'">
|
||||
{{ close_html }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ open_html }}
|
||||
</div>
|
||||
</span>
|
||||
{% endmacro %}
|
||||
|
||||
{% 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(
|
||||
("common.hide" | translate),
|
||||
item_type,
|
||||
length,
|
||||
"caret_up",
|
||||
)
|
||||
}}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{
|
||||
ToggleItem(
|
||||
("common.show" | translate),
|
||||
item_type,
|
||||
length,
|
||||
"caret_down",
|
||||
)
|
||||
}}
|
||||
</template>
|
||||
</div>
|
||||
<div v-show="props.isVisible">
|
||||
<div>
|
||||
{{ caller() }}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro ToggleSection(section_name) %}
|
||||
<div v-show="selectedSection === '{{ section_name }}'">
|
||||
{{ caller() }}
|
||||
</div>
|
||||
</template>
|
||||
</li>
|
||||
{% endmacro %}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/toggle_list.html" import ToggleList %}
|
||||
{% from "components/toggle_list.html" import ToggleList, ToggleButton, ToggleSection %}
|
||||
|
||||
<div class="application-list-item">
|
||||
<header>
|
||||
@ -22,7 +22,46 @@
|
||||
|
||||
<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)) %}
|
||||
<toggler inline-template>
|
||||
<li class="accordion-table__item">
|
||||
<div class="accordion-table__item-content">
|
||||
<span>
|
||||
{{ name }}
|
||||
</span>
|
||||
<span class="icon-link">
|
||||
{% macro EditEnvironmentButton() %}
|
||||
{{ Icon('edit') }}
|
||||
{% endmacro %}
|
||||
|
||||
{{
|
||||
ToggleButton(
|
||||
open_html=EditEnvironmentButton(),
|
||||
close_html=EditEnvironmentButton(),
|
||||
section_name="edit"
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
<span class="icon-link icon-link--large accordion-table__item__toggler">
|
||||
{% macro OpenEnvironmentsButton() %}
|
||||
{{ "common.show" | translate }} Environments ({{ members_list | length }})
|
||||
{% endmacro %}
|
||||
|
||||
{% macro CloseEnvironmentsButton() %}
|
||||
{{ "common.hide" | translate }} Environments ({{ members_list | length }})
|
||||
{% endmacro %}
|
||||
|
||||
{{
|
||||
ToggleButton(
|
||||
open_html=OpenEnvironmentsButton(),
|
||||
close_html=CloseEnvironmentsButton(),
|
||||
section_name="environments"
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{% call ToggleList() %}
|
||||
{% call ToggleSection(section_name="environments") %}
|
||||
<ul>
|
||||
{% for member in members_list %}
|
||||
<li class="accordion-table__item__expanded">
|
||||
@ -32,6 +71,19 @@
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endcall %}
|
||||
|
||||
{% call ToggleSection(section_name="edit") %}
|
||||
<ul>
|
||||
<li class="accordion-table__item__expanded">
|
||||
<div class="accordion-table__item__expanded_first">
|
||||
<strong>Edit section</strong>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
{% endcall %}
|
||||
{% endcall %}
|
||||
</li>
|
||||
</toggler>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
{% from "components/empty_state.html" import EmptyState %}
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/toggle_list.html" import ToggleList %}
|
||||
{% from "components/toggle_list.html" import ToggleList, ToggleButton, ToggleSection %}
|
||||
|
||||
{% set secondary_breadcrumb = 'portfolios.applications.team_settings.title' | translate({ "application_name": application.name }) %}
|
||||
|
||||
@ -67,22 +67,40 @@
|
||||
{% set user_info = environment_users[user.id] %}
|
||||
{% set user_permissions = user_info["permissions"] %}
|
||||
|
||||
{% set user_row %}
|
||||
|
||||
<toggler inline-template>
|
||||
<li class="accordion-table__item">
|
||||
<div class="accordion-table__item-content">
|
||||
<span>
|
||||
{{ name }}
|
||||
<span>{{ user.full_name }}</span>
|
||||
<span>{{ user_permissions["delete_access"] }}</span>
|
||||
<span>{{ user_permissions["environment_management"] }}</span>
|
||||
<span>{{ user_permissions["team_management"] }}</span>
|
||||
</span>
|
||||
<span class="icon-link icon-link--large accordion-table__item__toggler">
|
||||
{% set open_html %}
|
||||
{{ "common.show" | translate }} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }})
|
||||
{% endset %}
|
||||
|
||||
{% call ToggleList(
|
||||
item_name=user_row,
|
||||
item_type=("portfolios.applications.team_settings.environments" | translate),
|
||||
length=(user_info["environments"] | length)
|
||||
{% set close_html %}
|
||||
{{ "common.hide" | translate }} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }})
|
||||
{% endset %}
|
||||
|
||||
{{
|
||||
ToggleButton(
|
||||
open_html=open_html,
|
||||
close_html=close_html,
|
||||
section_name="environments"
|
||||
)
|
||||
%}
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
{% call ToggleList() %}
|
||||
{% call ToggleSection(section_name="environments") %}
|
||||
<ul>
|
||||
{% for environment in user_info["environments"] %}
|
||||
<li class="accordion-table__item__expanded">
|
||||
<li>
|
||||
<div class="accordion-table__item-content">
|
||||
{{ environment.name }}
|
||||
</div>
|
||||
@ -90,6 +108,9 @@
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endcall %}
|
||||
{% endcall %}
|
||||
</li>
|
||||
</toggler>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user