diff --git a/src/bundle/Resources/public/js/scripts/button.translation.edit.js b/src/bundle/Resources/public/js/scripts/button.translation.edit.js index 030ad2eee8..6242d98a35 100644 --- 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 index 5ec98eba85..937163575d 100644 --- 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 index e0c009adfd..0ef5372791 100644 --- 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 @@ {% else %} - {% set top_offset = top_offset is defined ? top_offset : 120 %} + {% set top_offset = top_offset is defined ? top_offset : 72 %}