diff --git a/src/bundle/Resources/public/js/scripts/core/tag.view.select.js b/src/bundle/Resources/public/js/scripts/core/tag.view.select.js index 4118b05c30..719ba8c386 100644 --- a/src/bundle/Resources/public/js/scripts/core/tag.view.select.js +++ b/src/bundle/Resources/public/js/scripts/core/tag.view.select.js @@ -23,6 +23,7 @@ this.toggleDeleteButtons = this.toggleDeleteButtons.bind(this); this.attachDeleteEvents = this.attachDeleteEvents.bind(this); this.adjustButtonLabel = this.adjustButtonLabel.bind(this); + this.toggleEmptyListState = this.toggleEmptyListState.bind(this); ibexa.helpers.ellipsis.middle.parseAll(); this.attachDeleteEvents(); @@ -39,6 +40,12 @@ }); } + toggleEmptyListState() { + const addedTags = this.listContainer.querySelectorAll('.ibexa-tag-view-select__selected-item-tag'); + + this.listContainer.classList.toggle('ibexa-tag-view-select__selected-list--empty', !addedTags.length); + } + toggleDisabledState(isDisabled) { const removeBtns = this.listContainer.querySelectorAll('.ibexa-tag-view-select__selected-item-tag-remove-btn'); @@ -81,6 +88,7 @@ ibexa.helpers.ellipsis.middle.parseAll(); this.toggleDeleteButtons(); this.adjustButtonLabel(); + this.toggleEmptyListState(); } addItem(id, name, forceRecreate) { @@ -99,6 +107,7 @@ this.inputField.dispatchEvent(new Event('change')); this.toggleDeleteButtons(); this.adjustButtonLabel(); + this.toggleEmptyListState(); } removeItem(id) { diff --git a/src/bundle/Resources/public/scss/_tag-view-select.scss b/src/bundle/Resources/public/scss/_tag-view-select.scss index 5ec00aa69d..b21f642db8 100644 --- a/src/bundle/Resources/public/scss/_tag-view-select.scss +++ b/src/bundle/Resources/public/scss/_tag-view-select.scss @@ -18,6 +18,11 @@ flex-wrap: wrap; margin: calculateRem(10px) 0; min-height: calculateRem(24px); + + &--empty { + margin: 0; + min-height: 0; + } } &__selected-item-tag { diff --git a/src/bundle/Resources/views/themes/admin/ui/component/tag_view_select/tag_view_select.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/tag_view_select/tag_view_select.html.twig index fb31978ba8..211bacee59 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/tag_view_select/tag_view_select.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/tag_view_select/tag_view_select.html.twig @@ -27,23 +27,25 @@ {{ title|default(default_title) }} {% endif %} -
- {% for item in items %} - {{ include('@ibexadesign/ui/component/tag_view_select/tag_view_select_selected_item_tag.html.twig', { - id: item.id, - name: item.name, + {% apply spaceless %} +
+ {% for item in items %} + {{ include('@ibexadesign/ui/component/tag_view_select/tag_view_select_selected_item_tag.html.twig', { + id: item.id, + name: item.name, + is_deletable: is_delete_visible, + is_disabled + }) }} + {% endfor %} +
+ {% endapply %} {{ form_widget(form, { attr: { hidden: true } }) }}