IBX-8321: Taxonomy entry assignment field: Gap when empty (#1300)

ibexa · Jul 29, 2024 · 78b919d · 78b919d
1 parent 89905e9
commit 78b919d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 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
@@ -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
@@ -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/...undle/Resources/views/themes/admin/ui/component/tag_view_select/tag_view_select.html.twig b/...undle/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 }
     }) }}