IBX-5784, IBX-5743: CkEditor toolbar overflow

src/bundle/Resources/encore/ibexa.js.config.js

@@ -23,6 +23,7 @@ const layout = [
     path.resolve(__dirname, '../public/js/scripts/admin.format.date.js'),
     path.resolve(__dirname, '../public/js/scripts/core/draggable.js'),
     path.resolve(__dirname, '../public/js/scripts/core/dropdown.js'),
+    path.resolve(__dirname, '../public/js/scripts/core/backdrop.js'),
     path.resolve(__dirname, '../public/js/scripts/core/custom.tooltip.js'),
     path.resolve(__dirname, '../public/js/scripts/core/base.chart.js'),
     path.resolve(__dirname, '../public/js/scripts/core/line.chart.js'),

src/bundle/Resources/public/js/scripts/core/backdrop.js

@@ -0,0 +1,63 @@
+(function (global, doc, ibexa) {
+    let id = 0;
+
+    class Backdrop {
+        constructor(config = {}) {
+            this.isTransparent = config.isTransparent ?? false;
+            this.extraClasses = config.extraClasses ?? [];
+            this.backdrop = null;
+            this.id = id++;
+
+            this.get = this.get.bind(this);
+            this.toggle = this.toggle.bind(this);
+            this.remove = this.remove.bind(this);
+            this.hide = this.hide.bind(this);
+            this.show = this.show.bind(this);
+            this.init = this.init.bind(this);
+        }
+
+        get() {
+            return this.backdrop;
+        }
+
+        toggle(shouldBackdropDisplay) {
+            this.backdrop.classList.toggle('ibexa-backdrop--active', shouldBackdropDisplay);
+        }
+
+        remove() {
+            if (this.backdrop) {
+                this.backdrop.remove();
+                this.backdrop = null;
+            }
+        }
+
+        hide() {
+            this.toggle(false);
+        }
+
+        show() {
+            if (this.backdrop === null) {
+                this.init();
+            }
+
+            this.toggle(true);
+            doc.dispatchEvent(new CustomEvent('ibexa-backdrop:after-show'));
+        }
+
+        init() {
+            const classes = {
+                'ibexa-backdrop--transparent': this.isTransparent,
+            };
+            const backdropClasses = Object.keys(classes).filter((property) => classes[property]);
+            const bodyFirstNode = document.body.firstChild;
+
+            this.backdrop = doc.createElement('div');
+            this.backdrop.id = `ibexa-backdrop-no-${this.id}`;
+            this.backdrop.classList.add('ibexa-backdrop', ...backdropClasses, ...this.extraClasses);
+            doc.body.insertBefore(this.backdrop, bodyFirstNode);
+            ibexa.helpers.objectInstances.setInstance(this.backdrop, this);
+        }
+    }
+
+    ibexa.addConfig('core.Backdrop', Backdrop);
+})(window, window.document, window.ibexa);

src/bundle/Resources/public/js/scripts/sidebar/extra.actions.js

@@ -1,17 +1,14 @@
-(function (global, doc) {
+(function (global, doc, ibexa) {
     const CLASS_HIDDEN = 'ibexa-extra-actions--hidden';
     const CLASS_EXPANDED = 'ibexa-context-menu--expanded';
     const CLASS_PREVENT_SHOW = 'ibexa-extra-actions--prevent-show';
     const btns = [...doc.querySelectorAll('.ibexa-btn--extra-actions')];
     const menu = doc.querySelector('.ibexa-context-menu');
+    const backdrop = new ibexa.core.Backdrop();
     const haveHiddenPart = (element) => element.classList.contains(CLASS_HIDDEN) && !element.classList.contains(CLASS_PREVENT_SHOW);
     const removeBackdrop = () => {
-        const backdrop = doc.querySelector('.ibexa-backdrop');
-
-        if (backdrop) {
-            backdrop.remove();
-            doc.body.classList.remove('ibexa-scroll-disabled');
-        }
+        backdrop.hide();
+        doc.body.classList.remove('ibexa-scroll-disabled');
     };
     const closeExtraActions = (actions) => {
         actions.classList.add(CLASS_HIDDEN);
@@ -47,12 +44,8 @@
         }
 
         if (!actions.classList.contains(CLASS_HIDDEN)) {
-            const backdrop = doc.createElement('div');
-
-            backdrop.classList.add('ibexa-backdrop');
-
+            backdrop.show();
             doc.body.addEventListener('click', detectClickOutside, false);
-            doc.body.appendChild(backdrop);
             doc.body.classList.add('ibexa-scroll-disabled');
         } else {
             doc.body.removeEventListener('click', detectClickOutside);
@@ -84,4 +77,4 @@
             false,
         ),
     );
-})(window, window.document);
+})(window, window.document, window.ibexa);

src/bundle/Resources/public/scss/_backdrop.scss

@@ -1,4 +1,5 @@
 .ibexa-backdrop {
+    display: none;
     position: fixed;
     z-index: 100;
     top: 0;
@@ -7,7 +8,15 @@
     bottom: 0;
     background-color: rgba($ibexa-color-dark, 0.4);
 
+    &--active {
+        display: block;
+    }
+
     &--transparent {
         background-color: transparent;
     }
+
+    & ~ main .ibexa-edit-header {
+        z-index: auto;
+    }
 }

src/bundle/Resources/public/scss/_edit-header.scss

@@ -8,6 +8,7 @@
     border-top-left-radius: $ibexa-border-radius;
     border-top-right-radius: $ibexa-border-radius;
     transition: all $ibexa-admin-transition-duration $ibexa-admin-transition, border-bottom-width 0;
+    z-index: 2;
 
     &__container {
         display: flex;

src/bundle/Resources/public/scss/_main-container.scss

@@ -1,4 +1,6 @@
 .ibexa-main-container {
+    $edit-container-padding: calculateRem(16px);
+
     display: flex;
     flex-wrap: nowrap;
     overflow: hidden;
@@ -15,9 +17,27 @@
 
     &--edit-container {
         height: 100vh;
-        padding: calculateRem(16px);
+        padding: $edit-container-padding;
         background-color: $ibexa-color-dark;
 
+        &::before,
+        &::after {
+            content: '';
+            height: $edit-container-padding;
+            position: absolute;
+            width: 100%;
+            background-color: $ibexa-color-dark;
+            z-index: 2;
+        }
+
+        &::before {
+            top: 0;
+        }
+
+        &::after {
+            bottom: 0;
+        }
+
         .ibexa-main-container {
             &__side-column {
                 min-width: calculateRem(240px);

src/bundle/Resources/views/themes/admin/ui/layout.html.twig

@@ -119,7 +119,7 @@
         <div id="react-udw" data-filter-subtree-udw-config="{{ ibexa_udw_config('single_container', {}) }}"></div>
 
         {% block header_row %}
-            <div class="ibexa-main-header">
+            <header class="ibexa-main-header">
                 <div class="ibexa-main-header__brand-column">
                     <a class="ibexa-main-header__brand" href="{{ url('ibexa.dashboard') }}">
                         <img class="ibexa-main-header__brand-image" src="{{ asset('bundles/ibexaadminui/img/ibexa-logo.svg') }}" alt="Ibexa" />
@@ -136,11 +136,11 @@
                         }) }}
                     {% endblock %}
                 </div>
-            </div>
+            </header>
         {% endblock %}
 
         {% block main_container %}
-            <div class="ibexa-main-container {% block main_container_class %}{% endblock %}">
+            <main class="ibexa-main-container {% block main_container_class %}{% endblock %}">
                 {% block side_column %}
                     <div class="ibexa-main-container__side-column {% block side_column_class %}{% endblock %}">
                         {% block left_sidebar %}
@@ -194,7 +194,7 @@
                         </div>
                     </div>
                 {% endblock %}
-            </div>
+            </main>
         {% endblock %}
 
         <div