IBX-9154: The dropdown for custom class is illegible (#193)

ibexa · Dec 5, 2024 · f6b1f85 · f6b1f85
1 parent 27e36a9
commit f6b1f85
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 16 deletions.
diff --git a/src/bundle/Resources/public/js/CKEditor/custom-attributes/custom-attributes-ui.js b/src/bundle/Resources/public/js/CKEditor/custom-attributes/custom-attributes-ui.js
@@ -3,6 +3,7 @@ import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsid
 
 import IbexaCustomAttributesFormView from './ui/custom-attributes-form-view';
 import IbexaButtonView from '../common/button-view/button-view';
+import { setPanelContentMaxHeight } from '../helpers/custom-panel-helper';
 
 import { getCustomAttributesElementConfig, getCustomClassesElementConfig } from './helpers/config-helper';
 
@@ -16,6 +17,15 @@ class IbexaAttributesUI extends Plugin {
         this.formView = this.createFormView();
 
         this.showForm = this.showForm.bind(this);
+
+        let timeoutId = null;
+
+        this.listenTo(this.balloon.view, 'change:top', () => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                setPanelContentMaxHeight(this.balloon.view);
+            }, 0);
+        });
     }
 
     getModelElement() {

diff --git a/src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js b/src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js
@@ -44,13 +44,13 @@ class IbexaCustomAttributesFormView extends View {
         this.setTemplate({
             tag: 'div',
             attributes: {
-                class: 'ibexa-ckeditor-balloon-form',
+                class: 'ibexa-ckeditor-balloon-form ibexa-custom-panel',
             },
             children: [
                 {
                     tag: 'div',
                     attributes: {
-                        class: 'ibexa-ckeditor-balloon-form__header',
+                        class: 'ibexa-ckeditor-balloon-form__header ibexa-custom-panel__header',
                     },
                     children: ['Custom Attributes'],
                 },
@@ -63,14 +63,14 @@ class IbexaCustomAttributesFormView extends View {
                         {
                             tag: 'div',
                             attributes: {
-                                class: 'ibexa-ckeditor-balloon-form__fields',
+                                class: 'ibexa-ckeditor-balloon-form__fields ibexa-custom-panel__content ibexa-custom-panel__content--overflow-with-scroll',
                             },
                             children: this.children,
                         },
                         {
                             tag: 'div',
                             attributes: {
-                                class: 'ibexa-ckeditor-balloon-form__actions',
+                                class: 'ibexa-ckeditor-balloon-form__actions ibexa-custom-panel__footer',
                             },
                             children: [this.saveButtonView, this.revertButtonView, this.cancelButtonView],
                         },

diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js
@@ -2,7 +2,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler';
 import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver';
 
-import { setPanelContentMaxHeight } from '../helpers/panel-helper';
+import { setPanelContentMaxHeight } from '../../helpers/custom-panel-helper';
 import IbexaCustomTagFormView from '../ui/custom-tag-form-view';
 import IbexaCustomTagAttributesView from '../ui/custom-tag-attributes-view';
 import IbexaButtonView from '../../common/button-view/button-view';

diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-attributes-view.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-attributes-view.js
@@ -38,7 +38,7 @@ class IbexaCustomTagAttributesView extends View {
             {
                 tag: 'div',
                 attributes: {
-                    class: 'ibexa-custom-tag-attributes__header ibexa-custom-tag-panel-header',
+                    class: 'ibexa-custom-tag-attributes__header ibexa-custom-panel__header',
                 },
                 children: [
                     {
@@ -91,7 +91,7 @@ class IbexaCustomTagAttributesView extends View {
         children.push({
             tag: 'div',
             attributes: {
-                class: 'ibexa-custom-tag-attributes__items ibexa-custom-tag-panel-content',
+                class: 'ibexa-custom-tag-attributes__items ibexa-custom-panel__content',
             },
             children: items,
         });

diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-form-view.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-form-view.js
@@ -115,13 +115,13 @@ class IbexaCustomTagFormView extends View {
         this.setTemplate({
             tag: 'div',
             attributes: {
-                class: 'ibexa-ckeditor-balloon-form',
+                class: 'ibexa-ckeditor-balloon-form ibexa-custom-panel',
             },
             children: [
                 {
                     tag: 'div',
                     attributes: {
-                        class: 'ibexa-ckeditor-balloon-form__header ibexa-custom-tag-panel-header',
+                        class: 'ibexa-ckeditor-balloon-form__header ibexa-custom-panel__header',
                     },
                     children: [label],
                 },
@@ -134,14 +134,14 @@ class IbexaCustomTagFormView extends View {
                         {
                             tag: 'div',
                             attributes: {
-                                class: 'ibexa-ckeditor-balloon-form__fields ibexa-custom-tag-panel-content',
+                                class: 'ibexa-ckeditor-balloon-form__fields ibexa-custom-panel__content ibexa-custom-panel__content--overflow-with-scroll',
                             },
                             children: this.children,
                         },
                         {
                             tag: 'div',
                             attributes: {
-                                class: 'ibexa-ckeditor-balloon-form__actions ibexa-custom-tag-panel-footer',
+                                class: 'ibexa-ckeditor-balloon-form__actions ibexa-custom-panel__footer',
                             },
                             children: [this.saveButtonView, this.cancelButtonView],
                         },

diff --git a/...ditor/custom-tags/helpers/panel-helper.js → ...s/CKEditor/helpers/custom-panel-helper.js b/...ditor/custom-tags/helpers/panel-helper.js → ...s/CKEditor/helpers/custom-panel-helper.js
@@ -1,17 +1,18 @@
 const setPanelContentMaxHeight = (balloonView) => {
     const MIN_HEIGHT_VALUE = 100;
     const MARGIN = 50;
+    const BOTTOM_ARROW_CLASSES = ['ck-balloon-panel_arrow_s', 'ck-balloon-panel_arrow_se', 'ck-balloon-panel_arrow_sw'];
     const { innerHeight: windowHeight } = window;
     const { element: panelNode } = balloonView;
-    const panelHeader = panelNode.querySelector('.ibexa-custom-tag-panel-header');
-    const panelContent = panelNode.querySelector('.ibexa-custom-tag-panel-content');
-    const panelFooter = panelNode.querySelector('.ibexa-custom-tag-panel-footer');
+    const panelHeader = panelNode.querySelector('.ibexa-custom-panel__header');
+    const panelContent = panelNode.querySelector('.ibexa-custom-panel__content');
+    const panelFooter = panelNode.querySelector('.ibexa-custom-panel__footer');
 
     if (!panelContent) {
         return;
     }
 
-    const isBalloonAbovePivot = panelNode.classList.contains('ck-balloon-panel_arrow_s');
+    const isBalloonAbovePivot = [...panelNode.classList].some((className) => BOTTOM_ARROW_CLASSES.includes(className));
     const panelInitialHeight = panelNode.offsetHeight;
     const panelTopPosition = parseInt(panelNode.style.top, 10);
     const panelHeaderHeight = panelHeader?.offsetHeight ?? 0;

diff --git a/src/bundle/Resources/public/scss/_balloon-form.scss b/src/bundle/Resources/public/scss/_balloon-form.scss
@@ -10,7 +10,6 @@
         }
 
         &__fields {
-            overflow: auto;
             padding: calculateRem(8px) calculateRem(16px);
 
             &--attributes {

diff --git a/src/bundle/Resources/public/scss/_custom-panel.scss b/src/bundle/Resources/public/scss/_custom-panel.scss
@@ -0,0 +1,41 @@
+.ibexa-custom-panel {
+    min-width: calculateRem(320px);
+
+    &__content {
+        &--overflow-with-scroll {
+            overflow: auto;
+
+            &.ibexa-ckeditor-balloon-form__fields {
+                .ck.ck-labeled-field-view {
+                    .ck.ck-input {
+                        width: 100%;
+                    }
+
+                    .ck.ck-dropdown {
+                        width: 100%;
+
+                        .ck.ck-button {
+                            display: block;
+
+                            .ck.ck-button__label {
+                                width: calc(100% - calculateRem(20px));
+                                height: fit-content;
+                                white-space: normal;
+                                overflow: hidden;
+                            }
+                        }
+                    }
+
+                    .ck-dropdown__panel-visible {
+                        position: static;
+                        bottom: 0;
+                        height: fit-content;
+                        max-height: 100%;
+                        border: none;
+                        box-shadow: none;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/bundle/Resources/public/scss/ckeditor.scss b/src/bundle/Resources/public/scss/ckeditor.scss
@@ -5,6 +5,7 @@
 @import 'general';
 @import 'custom-tag';
 @import 'custom-tag-attributes';
+@import 'custom-panel';
 @import 'elements-path';
 @import 'tools';
 @import 'character-counter';