From 8d863bb87314f15778b373986ca8aa951ceda99e Mon Sep 17 00:00:00 2001
From: Lukasz Ostafin <ostafin.lucas@gmail.com>
Date: Wed, 24 Jul 2024 16:10:27 +0200
Subject: [PATCH] IBX-8321: Taxonomy entry assignment field: Gap when empty
---
.../public/js/scripts/core/tag.view.select.js | 9 +++++
.../public/scss/_tag-view-select.scss | 5 +++
.../tag_view_select/tag_view_select.html.twig | 34 ++++++++++---------
3 files changed, 32 insertions(+), 16 deletions(-)
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) }}
</div>
{% endif %}
- <div
- class="ibexa-tag-view-select__selected-list"
- data-template="{{ include('@ibexadesign/ui/component/tag_view_select/tag_view_select_selected_item_tag.html.twig', {
- id: '{{ id }}',
- name: '{{ name }}',
- is_deletable: is_delete_visible,
- })|e('html_attr') }}"
- >
- {% 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 %}
+ <div
+ class="ibexa-tag-view-select__selected-list {{items|length == 0 ? 'ibexa-tag-view-select__selected-list--empty'}}"
+ data-template="{{ include('@ibexadesign/ui/component/tag_view_select/tag_view_select_selected_item_tag.html.twig', {
+ id: '{{ id }}',
+ name: '{{ name }}',
is_deletable: is_delete_visible,
- is_disabled
- }) }}
- {% endfor %}
- </div>
+ })|e('html_attr') }}"
+ >
+ {% 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 %}
+ </div>
+ {% endapply %}
{{ form_widget(form, {
attr: { hidden: true }
}) }}