Merge remote-tracking branch 'origin/4.6'

albozek · albozek · commit 78bf0ad9c7da · 2025-10-20T12:29:43.000+02:00
diff --git a/src/bundle/Resources/encore/ibexa.js.config.js b/src/bundle/Resources/encore/ibexa.js.config.js
@@ -40,6 +40,7 @@ const layout = [
     path.resolve(__dirname, '../public/js/scripts/admin.picker.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.notifications.modal.js'),
     path.resolve(__dirname, '../public/js/scripts/sidebar/side.panel.js'),
+    path.resolve(__dirname, '../public/js/scripts/quick.action.manager.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.location.add.translation.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.form.autosubmit.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.anchor.navigation'),
diff --git a/src/bundle/Resources/public/js/scripts/admin.back.to.top.js b/src/bundle/Resources/public/js/scripts/admin.back.to.top.js
@@ -1,18 +1,35 @@
-(function (global, doc) {
+(function (global, doc, ibexa) {
     const backToTopBtn = doc.querySelector('.ibexa-back-to-top__btn');
+    const backToTop = doc.querySelector('.ibexa-back-to-top');
     const backToTopAnchor = doc.querySelector('.ibexa-back-to-top-anchor');
     const backToTopScrollContainer = doc.querySelector('.ibexa-back-to-top-scroll-container');
 
     if (!backToTopBtn || !backToTopAnchor || !backToTopScrollContainer) {
         return;
     }
 
+    const checkIsVisible = () => {
+        if (!backToTop) {
+            return false;
+        }
+
+        return backToTopBtn.classList.contains('ibexa-back-to-top__btn--visible');
+    };
     const backToTopBtnTitle = backToTopBtn.querySelector('.ibexa-back-to-top__title');
     let currentBackToTopAnchorHeight = backToTopAnchor.offsetHeight;
     const setBackToTopBtnTextVisibility = (container) => {
         const isTitleVisible = Math.abs(container.scrollHeight - container.scrollTop - container.clientHeight) <= 2;
+        const shouldBeVisible = container.scrollTop !== 0;
+
+        if (backToTopBtn.classList.contains('ibexa-back-to-top__btn--visible') && !shouldBeVisible) {
+            backToTopBtn.classList.remove('ibexa-back-to-top__btn--visible');
+        }
+
+        if (!backToTopBtn.classList.contains('ibexa-back-to-top__btn--visible') && shouldBeVisible) {
+            backToTopBtn.classList.add('ibexa-back-to-top__btn--visible');
+            ibexa.quickAction.recalculateButtonsLayout();
+        }
 
-        backToTopBtn.classList.toggle('ibexa-back-to-top__btn--visible', container.scrollTop !== 0);
         backToTopBtn.classList.toggle('ibexa-btn--no-text', !isTitleVisible);
         backToTopBtnTitle.classList.toggle('ibexa-back-to-top__title--visible', isTitleVisible);
     };
@@ -37,6 +54,14 @@
 
         setBackToTopBtnTextVisibility(backToTopScrollContainer);
     });
+    const config = {
+        id: 'back-to-top',
+        zIndex: 10,
+        container: backToTop,
+        priority: 100,
+        checkVisibility: checkIsVisible,
+    };
 
+    ibexa.quickAction.registerButton(config);
     resizeObserver.observe(backToTopAnchor);
-})(window, window.document);
+})(window, window.document, window.ibexa);
diff --git a/src/bundle/Resources/public/js/scripts/core/backdrop.js b/src/bundle/Resources/public/js/scripts/core/backdrop.js
@@ -28,6 +28,7 @@
             if (this.backdrop) {
                 this.backdrop.remove();
                 this.backdrop = null;
+                this.extraClasses = [];
             }
         }
 
diff --git a/src/bundle/Resources/public/js/scripts/quick.action.manager.js b/src/bundle/Resources/public/js/scripts/quick.action.manager.js
@@ -0,0 +1,50 @@
+(function (global) {
+    const ACTION_BTN_VERTICAL_SPACING = 4.3;
+    let actionButtonConfigs = [];
+
+    const registerButton = (config) => {
+        if (!config || !config.container || actionButtonConfigs.some((btn) => btn.id === config.id)) {
+            return;
+        }
+
+        actionButtonConfigs = [...actionButtonConfigs, config].sort((a, b) => a.priority - b.priority);
+        recalculateButtonsLayout();
+    };
+    const unregisterButton = (id) => {
+        actionButtonConfigs = actionButtonConfigs.filter((btn) => btn.id !== id);
+        recalculateButtonsLayout();
+    };
+    const recalculateButtonsLayout = () => {
+        const buttonsToRender = actionButtonConfigs.filter((btn) => {
+            if (typeof btn.checkVisibility === 'function') {
+                const isVisible = btn.checkVisibility();
+
+                return isVisible;
+            }
+
+            return false;
+        });
+
+        buttonsToRender.forEach((buttonConfig, index) => {
+            const { container } = buttonConfig;
+
+            if (!container.style.transition) {
+                container.style.transition = 'all 0.3s ease-in-out';
+            }
+
+            container.style.position = 'fixed';
+            container.style.right = '2rem';
+            container.style.zIndex = buttonConfig.zIndex || 1040;
+
+            const bottomPosition = `${index * ACTION_BTN_VERTICAL_SPACING + 2}rem`;
+
+            container.style.bottom = bottomPosition;
+        });
+    };
+
+    global.ibexa.quickAction = {
+        registerButton,
+        unregisterButton,
+        recalculateButtonsLayout,
+    };
+})(window);
diff --git a/src/bundle/Resources/public/js/scripts/sidebar/side.panel.js b/src/bundle/Resources/public/js/scripts/sidebar/side.panel.js
@@ -4,22 +4,42 @@
         '.ibexa-side-panel .ibexa-btn--close, .ibexa-side-panel .ibexa-side-panel__btn--cancel',
     );
     const sidePanelTriggers = [...doc.querySelectorAll('.ibexa-side-panel-trigger')];
-    const backdrop = new ibexa.core.Backdrop();
-    const removeBackdrop = () => {
-        backdrop.hide();
+    const panelBackdrops = new Map();
+    const defaultBackdrop = new ibexa.core.Backdrop();
+    const removeBackdrop = (sidePanel) => {
+        const backdrop = panelBackdrops.get(sidePanel) || defaultBackdrop;
+
+        backdrop.remove();
         doc.body.classList.remove('ibexa-scroll-disabled');
+
+        if (panelBackdrops.has(sidePanel)) {
+            panelBackdrops.delete(sidePanel);
+        }
     };
-    const showBackdrop = () => {
-        backdrop.show();
+    const showBackdrop = (sidePanel) => {
+        if (sidePanel.dataset.backdropClasses) {
+            const extraClasses = sidePanel.dataset.backdropClasses.split(' ').filter(Boolean);
+            const newBackdrop = new ibexa.core.Backdrop({ extraClasses });
+
+            newBackdrop.show();
+            panelBackdrops.set(sidePanel, newBackdrop);
+        } else {
+            defaultBackdrop.show();
+            panelBackdrops.set(sidePanel, defaultBackdrop);
+        }
+
         doc.body.classList.add('ibexa-scroll-disabled');
     };
     const toggleSidePanelVisibility = (sidePanel) => {
         const shouldBeVisible = sidePanel.classList.contains(CLASS_HIDDEN);
         const handleClickOutside = (event) => {
-            if (event.target.classList.contains('ibexa-backdrop')) {
+            const currentBackdrop = panelBackdrops.get(sidePanel);
+
+            if (event.target.classList.contains('ibexa-backdrop') && event.target === currentBackdrop.get()) {
+                event.stopPropagation();
                 sidePanel.classList.add(CLASS_HIDDEN);
-                doc.body.removeEventListener('click', handleClickOutside, false);
-                removeBackdrop();
+                doc.body.removeEventListener('click', handleClickOutside, { capture: true });
+                removeBackdrop(sidePanel);
 
                 if (sidePanel.dataset?.closeReload === 'true') {
                     global.location.reload();
@@ -30,11 +50,11 @@
         sidePanel.classList.toggle(CLASS_HIDDEN, !shouldBeVisible);
 
         if (shouldBeVisible) {
-            doc.body.addEventListener('click', handleClickOutside, false);
-            showBackdrop();
+            doc.body.addEventListener('click', handleClickOutside, { capture: true });
+            showBackdrop(sidePanel);
         } else {
-            doc.body.removeEventListener('click', handleClickOutside, false);
-            removeBackdrop();
+            doc.body.removeEventListener('click', handleClickOutside, { capture: true });
+            removeBackdrop(sidePanel);
         }
     };
 
diff --git a/src/bundle/Resources/public/scss/_back-to-top.scss b/src/bundle/Resources/public/scss/_back-to-top.scss
@@ -2,10 +2,6 @@
 @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/functions/calculate.rem' as *;
 
 .ibexa-back-to-top {
-    position: fixed;
-    bottom: calculateRem(16px);
-    right: calculateRem(32px);
-
     .btn.ibexa-back-to-top__btn {
         height: calculateRem(62px);
         min-width: calculateRem(62px);
diff --git a/src/bundle/Resources/public/scss/_tabs.scss b/src/bundle/Resources/public/scss/_tabs.scss
@@ -33,6 +33,13 @@
                     }
                 }
 
+                &--no-corner {
+                    .ibexa-tabs__link {
+                        font-weight: 600;
+                        background-color: $ibexa-color-light-400;
+                    }
+                }
+
                 &--hidden {
                     display: none;
                 }
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs.html.twig
@@ -16,6 +16,7 @@
     active_tab,
     hide_toggler: hide_toggler|default(false),
     include_tab_more: include_tab_more|default(false),
+    tab_corner_disabled: tab_corner_disabled|default(false),
 } %}
     {% block tabs_list_after %}
         {{ tabs_list_after_content }}
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_header.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_header.html.twig
@@ -17,6 +17,7 @@
                         label: tab.label,
                         active: tab == active_tab,
                         has_error: tab.has_error|default(false),
+                        tab_corner_disabled: tab_corner_disabled|default(false),
                     } %}
                 {% endfor %}
             {% endblock %}
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_tab.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/tab/tabs_tab.html.twig
@@ -10,5 +10,7 @@
             label: tab.label,
         } %}
     {% endblock %}
-    {% include '@ibexadesign/ui/component/tab/tab_corner.html.twig' %}
+    {% if not tab_corner_disabled|default(false) %}
+        {% include '@ibexadesign/ui/component/tab/tab_corner.html.twig' %}
+    {% endif %}
 </li>
diff --git a/src/bundle/Resources/views/themes/admin/ui/layout.html.twig b/src/bundle/Resources/views/themes/admin/ui/layout.html.twig
@@ -216,21 +216,23 @@
             })|e('html_attr')  }}"></div>
         <div class="ibexa-modal-wrapper"></div>
 
-        {% if not is_back_to_top_disabled|default(false) %}
-            {% block back_to_top %}
-                <div class="ibexa-back-to-top">
-                    <button type="button" class="btn ibexa-btn ibexa-btn--tertiary ibexa-btn--no-text ibexa-back-to-top__btn">
-                        <span class="ibexa-back-to-top__title">
-                            {{ 'back.to.top'|trans|desc('Go to top') }}
-                        </span>
-                        <svg class="ibexa-icon ibexa-icon--medium ibexa-back-to-top__icon">
-                            <use xlink:href="{{ ibexa_icon_path('back') }}"></use>
-                        </svg>
-                    </button>
-                </div>
-            {% endblock %}
-        {% endif %}
-
+        <div class="ibexa-quick-action-menu">
+            {% if not is_back_to_top_disabled|default(false) %}
+                {% block back_to_top %}
+                    <div class="ibexa-back-to-top">
+                        <button type="button" class="btn ibexa-btn ibexa-btn--tertiary ibexa-btn--no-text ibexa-back-to-top__btn">
+                            <span class="ibexa-back-to-top__title">
+                                {{ 'back.to.top'|trans|desc('Go to top') }}
+                            </span>
+                            <svg class="ibexa-icon ibexa-icon--medium ibexa-back-to-top__icon">
+                                <use xlink:href="{{ ibexa_icon_path('back') }}"></use>
+                            </svg>
+                        </button>
+                    </div>
+                {% endblock %}
+            {% endif %}
+            {{ ibexa_twig_component_group('admin-ui-quick-action-menu') }}
+        </div>
         {{ ibexa_twig_component_group('admin-ui-layout-content-after') }}
 
         {{ encore_entry_script_tags('ibexa-admin-ui-layout-js', null, 'ibexa') }}
diff --git a/src/lib/Behat/BrowserContext/UserPreferencesContext.php b/src/lib/Behat/BrowserContext/UserPreferencesContext.php
@@ -56,4 +56,14 @@ public function iSetAutosaveDraftValue(): void
         $this->userSettingsPage->verifyIsLoaded();
         $this->userSettingsPage->disableAutosave();
     }
+
+    /**
+     * @Given I disable Help center
+     */
+    public function iDisableHelpCenter(): void
+    {
+        $this->userSettingsPage->openBrowsingEditionPage();
+        $this->userSettingsPage->verifyIsLoaded();
+        $this->userSettingsPage->disableHelpCenter();
+    }
 }
diff --git a/src/lib/Behat/Page/UserSettingsPage.php b/src/lib/Behat/Page/UserSettingsPage.php
@@ -34,7 +34,7 @@ public function __construct(
     public function verifyIsLoaded(): void
     {
         $pageHeaderText = $this->getHTMLPage()->find($this->getLocator('title'))->getText();
-        Assert::AssertContains($pageHeaderText, ['User settings', 'Content authoring']);
+        Assert::AssertContains($pageHeaderText, ['User settings', 'Content authoring', 'Browsing']);
     }
 
     public function switchTab(string $tabName): void
@@ -57,6 +57,7 @@ protected function specifyLocators(): array
             new VisibleCSSLocator('title', '.ibexa-edit-header__title,.ibexa-page-title__content'),
             new VisibleCSSLocator('autosaveDraftValueDropdown', '#user_setting_update_autosave div.ibexa-dropdown__wrapper > ul'),
             new VisibleCSSLocator('autosaveIntervalEdit', '#user_setting_update_autosave_interval_value'),
+            new VisibleCSSLocator('helpCenterValueDropdown', '#user_setting_update_help_center div.ibexa-dropdown__wrapper > ul'),
         ];
     }
 
@@ -91,4 +92,21 @@ public function getName(): string
     {
         return 'User settings';
     }
+
+    public function openBrowsingEditionPage(): void
+    {
+        $this->getHTMLPage()
+            ->findAll(new VisibleCSSLocator('settingsSection', '#ibexa-tab-my-preferences .ibexa-details'))
+            ->getByCriterion(new ChildElementTextCriterion(new VisibleCSSLocator('settingHeader', '.ibexa-table-header__headline'), 'Browsing'))
+            ->find(new VisibleCSSLocator('editButton', ' .ibexa-btn__label'))
+            ->assert()->textEquals('Edit')
+            ->click();
+    }
+
+    public function disableHelpCenter(): void
+    {
+        $this->contentActionsMenu->verifyIsLoaded();
+        $this->getHTMLPage()->find($this->getLocator('helpCenterValueDropdown'))->click();
+        $this->ibexaDropdown->selectOption('Disabled');
+    }
 }

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,7 @@`
`28`	`28`	`if (this.backdrop) {`
`29`	`29`	`this.backdrop.remove();`
`30`	`30`	`this.backdrop = null;`
	`31`	`+ this.extraClasses = [];`
`31`	`32`	`}`
`32`	`33`	`}`
`33`	`34`
Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,13 @@`
`33`	`33`	`}`
`34`	`34`	`}`
`35`	`35`
	`36`	`+ &--no-corner {`
	`37`	`+ .ibexa-tabs__link {`
	`38`	`+ font-weight: 600;`
	`39`	`+ background-color: $ibexa-color-light-400;`
	`40`	`+ }`
	`41`	`+ }`
	`42`	`+`
`36`	`43`	`&--hidden {`
`37`	`44`	`display: none;`
`38`	`45`	`}`