IBX-8968: Fixed translation selector in search and dashboard (#1362)

ibexa · Oct 14, 2024 · 974dfdc · 974dfdc
1 parent c26b736
commit 974dfdc
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/button.translation.edit.js b/src/bundle/Resources/public/js/scripts/button.translation.edit.js
@@ -4,6 +4,9 @@
             this.container = config.container;
             this.toggler = config.container.querySelector('.ibexa-btn--translations-list-toggler');
             this.translationsList = config.container.querySelector('.ibexa-translation-selector__list-wrapper');
+            this.backdrop = config.backdrop;
+
+            this.tableNode = null;
 
             this.hideTranslationsList = this.hideTranslationsList.bind(this);
             this.showTranslationsList = this.showTranslationsList.bind(this);
@@ -28,15 +31,29 @@
                 return;
             }
 
+            if (this.tableNode) {
+                this.tableNode.classList.add('ibexa-table--last-column-sticky');
+
+                this.tableNode = null;
+            }
+
+            this.backdrop.hide();
             this.translationsList.classList.add('ibexa-translation-selector__list-wrapper--hidden');
             doc.removeEventListener('click', this.hideTranslationsList, false);
         }
 
-        showTranslationsList() {
+        showTranslationsList({ currentTarget }) {
             this.translationsList.classList.remove('ibexa-translation-selector__list-wrapper--hidden');
 
+            this.tableNode = currentTarget.closest('.ibexa-table--last-column-sticky');
+
+            if (this.tableNode) {
+                this.tableNode.classList.remove('ibexa-table--last-column-sticky');
+            }
+
             this.setPosition();
 
+            this.backdrop.show();
             doc.addEventListener('click', this.hideTranslationsList, false);
             ibexa.helpers.tooltips.hideAll();
         }
@@ -49,7 +66,8 @@
     const translationSelectors = doc.querySelectorAll('.ibexa-translation-selector');
 
     translationSelectors.forEach((translationSelector) => {
-        const editTranslation = new EditTranslation({ container: translationSelector });
+        const backdrop = new ibexa.core.Backdrop();
+        const editTranslation = new EditTranslation({ container: translationSelector, backdrop });
 
         editTranslation.init();
     });

diff --git a/src/bundle/Resources/public/scss/_translation-selector.scss b/src/bundle/Resources/public/scss/_translation-selector.scss
@@ -16,6 +16,7 @@
         opacity: 1;
         transform: scaleX(1);
         transform-origin: right center;
+        z-index: 200;
         transition:
             transform 0.4s ease-in,
             opacity 0.4s ease-in;

diff --git a/src/bundle/Resources/views/themes/admin/ui/edit_translation_button.html.twig b/src/bundle/Resources/views/themes/admin/ui/edit_translation_button.html.twig
@@ -16,7 +16,7 @@
         </svg>
     </button>
 {% else %}
-    {% set top_offset = top_offset is defined ? top_offset : 120 %}
+    {% set top_offset = top_offset is defined ? top_offset : 72 %}
     <div class="ibexa-translation-selector">
         <button
             class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text mx-2 ibexa-btn--translations-list-toggler"

diff --git a/src/bundle/Resources/views/themes/admin/ui/search/results.html.twig b/src/bundle/Resources/views/themes/admin/ui/search/results.html.twig
@@ -147,7 +147,6 @@
                         {% include '@ibexadesign/ui/edit_translation_button.html.twig' with {
                             'contentId': result.contentId,
                             'translations': result.available_enabled_translations,
-                            'top_offset': 100
                         }%}
                     {% endif %}
                 {% endset %}