fix show/hide in exports filter + better styles

This commit is contained in:
Mathieu Jaumotte 2022-07-07 15:20:50 +02:00
parent 989c4e90e5
commit 7b64269bb5
3 changed files with 111 additions and 84 deletions

View File

@ -99,11 +99,14 @@ div.flex-table {
div.item-bloc { div.item-bloc {
flex-direction: column; flex-direction: column;
&:nth-child(even) { &:not(.no-altern) { // class to avoid even/odd
background-color: $gray-200;
.chill-user-quote { &:nth-child(even) {
background-color: shade-color($gray-200, 5%) background-color: $gray-200;
.chill-user-quote {
background-color: shade-color($gray-200, 5%)
}
} }
} }

View File

@ -1,5 +1,6 @@
import { ShowHide } from 'ShowHide'; // old method to show/hide filters when checking checkbox
import { chill } from 'ChillMainAssets/chill/js/chill';
console.log('coucou'); window.addEventListener("DOMContentLoaded", chill.listenerDisplayCheckbox);
// TODO should be replaced by more recent showHide library
//import { ShowHide } from 'ShowHide';

View File

@ -16,96 +16,119 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
#} #}
{% extends "@ChillMain/layoutWithVerticalMenu.html.twig" %} {% extends "@ChillMain/layout.html.twig" %}
{% block title %}{{ export.title|trans }}{% endblock %} {% block title %}{{ export.title|trans }}{% endblock %}
{% block js %} {% block js %}
{{ encore_entry_script_tags('page_export') }} {{ encore_entry_script_tags('page_export') }}
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", chill.listenerDisplayCheckbox);
</script>
{% endblock js %} {% endblock js %}
{% block layout_wvm_content %} {% block content %}
<h1>{{ export.title|trans }}</h1>
<p>{{ export.description|trans }}</p>
{{ form_start(form) }} <div class="col-md-10">
{% if form.children.export.children.filters is defined %} <h1>{{ export.title|trans }}</h1>
{% if form.children.export.children.filters is not empty%}
<div style="clear:both; padding-top: 1.5em;"> <p>{{ export.description|trans }}</p>
<h2>{{ 'Filters'| trans }}</h2>
{% for filter_form in form.children.export.children.filters %} {{ form_start(form) }}
<div>
<p> {% if form.children.export.children.filters is defined %}
{{ form_widget(filter_form.enabled, { 'attr' : { 'style' : 'vertical-align: middle;', 'data-display-target': filter_form.vars.id } }) }} {% if form.children.export.children.filters is not empty%}
<span class="force-inline-label">{{ form_label(filter_form) }}</span>
</p> <section class="filter mb-4">
<h2>{{ 'Filters'| trans }}</h2>
<div data-display-show-hide="{{ filter_form.vars.id }}">
{{ form_widget(filter_form.form) }} {{ form_errors(form.children.export.children.filters) }}
{{ form_errors(filter_form) }}
<div class="flex-table">
{% for filter_form in form.children.export.children.filters %}
<div class="item-bloc no-altern">
{{ form_widget(filter_form.enabled, {
'label': filter_form.vars.label,
'label_attr': { 'class': 'h6' },
'attr': { 'data-display-target': filter_form.vars.id }
}) }}
<div data-display-show-hide="{{ filter_form.vars.id }}">
{{ form_widget(filter_form.form) }}
{{ form_errors(filter_form) }}
</div>
</div>
{% endfor %}
</div> </div>
</div> </section>
{% endfor %}
{{ form_errors(form.children.export.children.filters) }} {% else %}
</div> {# render the children, to mark the widget as 'rendered' #}
{% else %} {{ form_widget(form.children.export.children.filters) }}
{# render the children, to mark the widget as 'rendered' #} {% endif %}
{{ form_widget(form.children.export.children.filters) }}
{% endif %} {% endif %}
{% endif %}
{% if form.children.export.children.aggregators is defined %}
{% if form.children.export.children.aggregators is not empty %}
<section class="aggregator">
<h2>{{ 'Aggregators'| trans }}</h2>
{% if form.children.export.children.aggregators is defined %} <div class="flex-table">
{% if form.children.export.children.aggregators is not empty %} {% for aggregator_form in form.children.export.children.aggregators %}
<div style="clear:both; padding-top: 1.5em;"> <div class="item-bloc no-altern">
<h2>{{ 'Aggregators'| trans }}</h2>
{% for aggregator_form in form.children.export.children.aggregators %} {{ form_widget(aggregator_form.enabled, {
<div> 'label': aggregator_form.vars.label,
<p> 'label_attr': { 'class': 'h6' },
{{ form_widget(aggregator_form.enabled, { 'attr' : { 'style' : 'vertical-align: middle;', 'data-display-target': aggregator_form.vars.id } }) }} 'attr': { 'data-display-target': aggregator_form.vars.id }
<span class="force-inline-label">{{ form_label(aggregator_form) }}</span> }) }}
</p>
<div data-display-show-hide="{{ aggregator_form.vars.id }}">
<div data-display-show-hide="{{ aggregator_form.vars.id }}"> {{ form_widget(aggregator_form.form) }}
{{ form_widget(aggregator_form.form) }} {{ form_errors(aggregator_form) }}
{{ form_errors(aggregator_form) }} </div>
</div>
{% endfor %}
</div> </div>
</div> </section>
{% endfor %}
</div> {% else %}
{# render the children, to mark the widget as 'rendered' #}
{{ form_widget(form.children.export.children.aggregators) }}
{% endif %}
{% endif %}
{% if form.children.export.children.export.children|length > 0 %}
<section class="parameter">
<h2>
{{ 'Export parameters'|trans }}
</h2>
{{ form_widget(form.children.export.children.export) }}
</section>
{% else %} {% else %}
{# render the children, to mark the widget as 'rendered' #} {# render the children, to mark the widget as 'rendered' #}
{{ form_widget(form.children.export.children.aggregators) }}
{% endif %}
{% endif %}
{% if form.children.export.children.export.children|length > 0 %}
<div style="clear:both; padding-top: 1.5em;">
<h2>{{ 'Export parameters'|trans }}</h2>
{{ form_widget(form.children.export.children.export) }} {{ form_widget(form.children.export.children.export) }}
</div> {% endif %}
{% else %}
{# render the children, to mark the widget as 'rendered' #} {% if form.children.export.children.pick_formatter is defined %}
{{ form_widget(form.children.export.children.export) }} <section class="formatter">
{% endif %} <h2>
{{ 'Formatter'| trans }}
{% if form.children.export.children.pick_formatter is defined %} </h2>
<div style="clear: both; padding-top: 1.5em;"> <p>
<h2>{{ 'Formatter'| trans }}</h2> {{ 'Choose the formatter'|trans }}
</p>
<p> {{ 'Choose the formatter'|trans }}</p>
{{ form_row(form.children.export.children.pick_formatter.children.alias, { 'label' : 'Formatter' }) }} {{ form_row(form.children.export.children.pick_formatter.children.alias, { 'label' : 'Formatter' }) }}
</div> </section>
{% endif %} {% endif %}
<p>{{ form_widget(form.submit, { 'attr' : { 'class' : 'btn btn-create' }, 'label' : 'Go to formatter options' } ) }}</p> <p>{{ form_widget(form.submit, { 'attr' : { 'class' : 'btn btn-create' }, 'label' : 'Go to formatter options' } ) }}</p>
{{ form_end(form) }} {{ form_end(form) }}
{% endblock layout_wvm_content %} </div>
{% endblock content %}