Improved styling of part multiselect action

This commit is contained in:
Jan Böhmer 2023-02-06 00:33:57 +01:00
parent 7ff1584eb9
commit 39765f05dd
2 changed files with 12 additions and 13 deletions

View file

@ -76,8 +76,7 @@ export default class extends DatatablesController {
tom_select.addOptions(json, false);
select_element.parentElement.classList.remove('d-none');
select_element.parentElement.classList.add('d-inline-block');
select_element.nextElementSibling.classList.remove('d-none');
//$(select_element).selectpicker('show');
@ -100,9 +99,8 @@ export default class extends DatatablesController {
});
});
} else {
//$(select_target).selectpicker('hide');
select_element.parentElement.classList.remove('d-inline-block');
select_target.parentElement.classList.add('d-none');
//Hide the select element (the tomselect button is the sibling of the select element)
select_target.nextElementSibling.classList.add('d-none');
}
}

View file

@ -30,10 +30,13 @@
<div class="d-none mb-2" {{ stimulus_target('elements/datatables/parts', 'selectPanel') }}>
{# <span id="select_count"></span> #}
<span class="badge bg-secondary">{% trans with {'%count%': '<span ' ~ stimulus_target('elements/datatables/parts', 'selectCount') ~ '></span>'} %}part_list.action.part_count{% endtrans %}</span>
<div class="d-inline-block w-25">
<select name="action" data-controller="elements--select" {{ stimulus_action('elements/datatables/parts', 'updateTargetPicker', 'change') }}
<div class="input-group">
<span class="input-group-text">
<span class="badge bg-primary">{% trans with {'%count%': '<span ' ~ stimulus_target('elements/datatables/parts', 'selectCount') ~ '></span>'} %}part_list.action.part_count{% endtrans %}</span>
</span>
<select class="form-select" name="action" data-controller="elements--select" {{ stimulus_action('elements/datatables/parts', 'updateTargetPicker', 'change') }}
title="{% trans %}part_list.action.action.title{% endtrans %}" required>
<optgroup label="{% trans %}part_list.action.action.group.favorite{% endtrans %}">
<option {% if not is_granted('@parts.change_favorite') %}disabled{% endif %} value="favorite">{% trans %}part_list.action.action.favorite{% endtrans %}</option>
@ -59,15 +62,13 @@
<option {% if not is_granted('@parts.delete') %}disabled{% endif %} value="delete">{% trans %}part_list.action.action.delete{% endtrans %}</option>
</select>
</div>
<div class="d-none w-25">
<select class="" data-controller="elements--structural-entity-select" name="target" {{ stimulus_target('elements/datatables/parts', 'selectTargetPicker') }}>
<select class="form-select d-none" data-controller="elements--structural-entity-select" name="target" {{ stimulus_target('elements/datatables/parts', 'selectTargetPicker') }}>
{# This is left empty, as this will be filled by Javascript #}
</select>
</div>
<button type="submit" class="btn btn-secondary" {% if not is_granted('@parts.edit') %}disabled{% endif %}>{% trans %}part_list.action.submit{% endtrans %}</button>
<button type="submit" class="btn btn-secondary" {% if not is_granted('@parts.edit') %}disabled{% endif %}>{% trans %}part_list.action.submit{% endtrans %}</button>
</div>
</div>
<div {{ stimulus_target('elements/datatables/parts', 'dt') }}>