Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-13 05:44:24 +00:00
Code Issues Actions Projects Releases Wiki Activity

fix show/hide in exports filter + better styles

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss
View File

@ -99,6 +99,8 @@ div.flex-table {
div.item-bloc { div.item-bloc {
flex-direction: column; flex-direction: column;
&:not(.no-altern) { // class to avoid even/odd
&:nth-child(even) { &:nth-child(even) {
background-color: $gray-200; background-color: $gray-200;
@ -106,6 +108,7 @@ div.flex-table {
background-color: shade-color($gray-200, 5%) background-color: shade-color($gray-200, 5%)
} }
} }
}
div.item-row { div.item-row {
flex-direction: row; flex-direction: row;

9
src/Bundle/ChillMainBundle/Resources/public/page/export/index.js
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';

79
src/Bundle/ChillMainBundle/Resources/views/Export/new.html.twig
View File

@ -16,18 +16,17 @@
* 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 %}
<div class="col-md-10">
<h1>{{ export.title|trans }}</h1> <h1>{{ export.title|trans }}</h1>
@ -37,23 +36,32 @@
{% if form.children.export.children.filters is defined %} {% if form.children.export.children.filters is defined %}
{% if form.children.export.children.filters is not empty%} {% if form.children.export.children.filters is not empty%}
<div style="clear:both; padding-top: 1.5em;">
<section class="filter mb-4">
<h2>{{ 'Filters'| trans }}</h2> <h2>{{ 'Filters'| trans }}</h2>
{{ form_errors(form.children.export.children.filters) }}
<div class="flex-table">
{% for filter_form in form.children.export.children.filters %} {% for filter_form in form.children.export.children.filters %}
<div> <div class="item-bloc no-altern">
<p>
{{ form_widget(filter_form.enabled, { 'attr' : { 'style' : 'vertical-align: middle;', 'data-display-target': filter_form.vars.id } }) }} {{ form_widget(filter_form.enabled, {
<span class="force-inline-label">{{ form_label(filter_form) }}</span> 'label': filter_form.vars.label,
</p> 'label_attr': { 'class': 'h6' },
'attr': { 'data-display-target': filter_form.vars.id }
}) }}
<div data-display-show-hide="{{ filter_form.vars.id }}"> <div data-display-show-hide="{{ filter_form.vars.id }}">
{{ form_widget(filter_form.form) }} {{ form_widget(filter_form.form) }}
{{ form_errors(filter_form) }} {{ form_errors(filter_form) }}
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
{{ form_errors(form.children.export.children.filters) }}
</div> </div>
</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.filters) }} {{ form_widget(form.children.export.children.filters) }}
@ -62,22 +70,30 @@
{% if form.children.export.children.aggregators is defined %} {% if form.children.export.children.aggregators is defined %}
{% if form.children.export.children.aggregators is not empty %} {% if form.children.export.children.aggregators is not empty %}
<div style="clear:both; padding-top: 1.5em;">
<section class="aggregator">
<h2>{{ 'Aggregators'| trans }}</h2> <h2>{{ 'Aggregators'| trans }}</h2>
<div class="flex-table">
{% for aggregator_form in form.children.export.children.aggregators %} {% for aggregator_form in form.children.export.children.aggregators %}
<div> <div class="item-bloc no-altern">
<p>
{{ form_widget(aggregator_form.enabled, { 'attr' : { 'style' : 'vertical-align: middle;', 'data-display-target': aggregator_form.vars.id } }) }} {{ form_widget(aggregator_form.enabled, {
<span class="force-inline-label">{{ form_label(aggregator_form) }}</span> 'label': aggregator_form.vars.label,
</p> 'label_attr': { 'class': 'h6' },
'attr': { 'data-display-target': aggregator_form.vars.id }
}) }}
<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>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</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) }} {{ form_widget(form.children.export.children.aggregators) }}
@ -86,26 +102,33 @@
{% if form.children.export.children.export.children|length > 0 %} {% if form.children.export.children.export.children|length > 0 %}
<div style="clear:both; padding-top: 1.5em;">
<h2>{{ 'Export parameters'|trans }}</h2> <section class="parameter">
<h2>
{{ 'Export parameters'|trans }}
</h2>
{{ form_widget(form.children.export.children.export) }} {{ form_widget(form.children.export.children.export) }}
</div> </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.export) }} {{ form_widget(form.children.export.children.export) }}
{% endif %} {% endif %}
{% if form.children.export.children.pick_formatter is defined %} {% if form.children.export.children.pick_formatter is defined %}
<div style="clear: both; padding-top: 1.5em;"> <section class="formatter">
<h2>{{ 'Formatter'| trans }}</h2> <h2>
{{ 'Formatter'| trans }}
<p> {{ 'Choose the formatter'|trans }}</p> </h2>
<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 %}