Merge pull request #780 from dod-ccpo/toggle-multiple

Toggle multiple
This commit is contained in:
George Drummond
2019-04-22 11:45:30 -04:00
committed by GitHub
6 changed files with 149 additions and 97 deletions

View File

@@ -1,5 +1,5 @@
{% from "components/icon.html" import Icon %}
{% from "components/toggle_list.html" import ToggleList %}
{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
<div class="application-list-item">
<header>
@@ -22,16 +22,72 @@
<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)) %}
<ul>
{% for member in members_list %}
<li class="accordion-table__item__expanded">
<div class="accordion-table__item__expanded_first">{{ member.name }}</div>
<div class="right">{{ member.role }}</div>
</li>
{% endfor %}
</ul>
{% endcall %}
<toggler inline-template>
<li class="accordion-table__item">
<div class="accordion-table__item-content">
<span>
{{ name }}
</span>
<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>
<span class="icon-link icon-link--large accordion-table__item__toggler">
{% set open_environments_button %}
{{ "common.show" | translate }} Environments ({{ members_list | length }}) {{ Icon('caret_down') }}
{% endset %}
{% set close_environments_button %}
{{ "common.hide" | translate }} Environments ({{ members_list | length }}) {{ Icon('caret_up') }}
{% endset %}
{{
ToggleButton(
open_html=open_environments_button,
close_html=close_environments_button,
section_name="environments"
)
}}
</span>
</div>
{% call ToggleSection(section_name="environments") %}
<ul>
{% for member in members_list %}
<li class="accordion-table__item__expanded">
<div class="accordion-table__item__expanded_first">{{ member.name }}</div>
<div class="right">{{ member.role }}</div>
</li>
{% endfor %}
</ul>
{% endcall %}
{% call ToggleSection(section_name="edit") %}
<ul>
<li class="accordion-table__item__expanded">
<div>
<form>
<div class="form-row">
<div class="form-col form-col--half">
Row here
</div>
</div>
</form>
</div>
</li>
</ul>
{% endcall %}
</li>
</toggler>
{% endfor %}
</ul>
</div>