IBX-8824: The popup for custom tags with multiple fields is not scrol…

…lable
ibexa · Sep 6, 2024 · 17641ee · 17641ee
1 parent dac171d
commit 17641ee
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 9 deletions.
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
@@ -150,6 +150,7 @@ class IbexaCustomTagUI extends Plugin {
             position: { target },
         });
 
+        this.setPanelContentMaxHeight();
         this.balloon.updatePosition({ target });
     }
 
@@ -183,6 +184,7 @@ class IbexaCustomTagUI extends Plugin {
             position: this.getBalloonPositionData(),
         });
 
+        this.setPanelContentMaxHeight();
         this.balloon.updatePosition(this.getBalloonPositionData());
     }
 
@@ -217,6 +219,23 @@ class IbexaCustomTagUI extends Plugin {
         return { target: view.domConverter.viewRangeToDom(range) };
     }
 
+    setPanelContentMaxHeight() {
+        const { innerHeight: windowHeight } = window;
+        const { top: panelTopPosition } = this.balloon.view;
+        const { element: panelNode } = this.balloon.view;
+        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 panelHeaderHeight = panelHeader?.offsetHeight || 0;
+        const panelFooterHeight = panelFooter?.offsetHeight || 0;
+        const isPanelOverTopWindowEdge = panelTopPosition < 0;
+        const maxHeightValue = isPanelOverTopWindowEdge
+            ? panelContent.offsetHeight - Math.abs(panelTopPosition)
+            : windowHeight - panelTopPosition - panelHeaderHeight - panelFooterHeight;
+
+        panelContent.style.maxHeight = `${maxHeightValue}px`;
+    }
+
     addCustomTag() {
         const values = Object.entries(this.config.attributes).reduce((outputValues, [attributeName, config]) => {
             outputValues[attributeName] = config.defaultValue;

diff --git a/...bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js b/...bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js
@@ -90,6 +90,7 @@ class IbexaInlineCustomTagUI extends Plugin {
             position: this.getBalloonPositionData(),
         });
 
+        this.setPanelContentMaxHeight();
         this.balloon.updatePosition(this.getBalloonPositionData());
     }
 
@@ -115,6 +116,23 @@ class IbexaInlineCustomTagUI extends Plugin {
         return { target: view.domConverter.viewRangeToDom(range) };
     }
 
+    setPanelContentMaxHeight() {
+        const { innerHeight: windowHeight } = window;
+        const { top: panelTopPosition } = this.balloon.view;
+        const { element: panelNode } = this.balloon.view;
+        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 panelHeaderHeight = panelHeader?.offsetHeight || 0;
+        const panelFooterHeight = panelFooter?.offsetHeight || 0;
+        const isPanelOverTopWindowEdge = panelTopPosition < 0;
+        const maxHeightValue = isPanelOverTopWindowEdge
+            ? panelContent.offsetHeight - Math.abs(panelTopPosition)
+            : windowHeight - panelTopPosition - panelHeaderHeight - panelFooterHeight;
+
+        panelContent.style.maxHeight = `${maxHeightValue}px`;
+    }
+
     addInlineCustomTag() {
         const values = Object.entries(this.config.attributes).reduce((outputValues, [attributeName, config]) => {
             outputValues[attributeName] = config.defaultValue;

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
@@ -33,11 +33,12 @@ class IbexaCustomTagAttributesView extends View {
 
         buttonView.delegate('execute').to(this, 'edit-attributes');
 
+        const items = [];
         const children = [
             {
                 tag: 'div',
                 attributes: {
-                    class: 'ibexa-custom-tag-attributes__header',
+                    class: 'ibexa-custom-tag-attributes__header ibexa-custom-tag-panel-header',
                 },
                 children: [
                     {
@@ -63,7 +64,7 @@ class IbexaCustomTagAttributesView extends View {
             const getValueLabelMethods = window.ibexa.richText.CKEditor.customTags?.getValueLabelMethods || {};
             const valueLabel = getValueLabelMethods[name] && value !== '-' ? getValueLabelMethods[name](value, config) : value;
 
-            children.push({
+            items.push({
                 tag: 'div',
                 attributes: {
                     class: 'ibexa-custom-tag-attributes__item',
@@ -87,6 +88,14 @@ class IbexaCustomTagAttributesView extends View {
             });
         });
 
+        children.push({
+            tag: 'div',
+            attributes: {
+                class: 'ibexa-custom-tag-attributes__items ibexa-custom-tag-panel-content',
+            },
+            children: items,
+        });
+
         return children;
     }
 }

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
@@ -121,7 +121,7 @@ class IbexaCustomTagFormView extends View {
                 {
                     tag: 'div',
                     attributes: {
-                        class: 'ibexa-ckeditor-balloon-form__header',
+                        class: 'ibexa-ckeditor-balloon-form__header ibexa-custom-tag-panel-header',
                     },
                     children: [label],
                 },
@@ -134,14 +134,14 @@ class IbexaCustomTagFormView extends View {
                         {
                             tag: 'div',
                             attributes: {
-                                class: 'ibexa-ckeditor-balloon-form__fields',
+                                class: 'ibexa-ckeditor-balloon-form__fields ibexa-custom-tag-panel-content',
                             },
                             children: this.children,
                         },
                         {
                             tag: 'div',
                             attributes: {
-                                class: 'ibexa-ckeditor-balloon-form__actions',
+                                class: 'ibexa-ckeditor-balloon-form__actions ibexa-custom-tag-panel-footer',
                             },
                             children: [this.saveButtonView, this.cancelButtonView],
                         },

diff --git a/src/bundle/Resources/public/scss/_balloon-form.scss b/src/bundle/Resources/public/scss/_balloon-form.scss
@@ -1,16 +1,18 @@
 .ck.ck-reset_all {
     .ibexa-ckeditor-balloon-form {
-        padding: 0 calculateRem(16px);
+        position: relative;
 
         &__header {
             border-top-left-radius: $ibexa-border-radius;
             border-top-right-radius: $ibexa-border-radius;
-            padding: calculateRem(2px) 0;
+            padding: calculateRem(2px) calculateRem(16px);
             font-weight: bold;
         }
 
         &__fields {
-            padding: calculateRem(8px) 0;
+            overflow: auto;
+
+            padding: calculateRem(8px) calculateRem(16px);
 
             &--attributes {
                 border-bottom: calculateRem(1px) solid $ibexa-color-light;
@@ -135,7 +137,7 @@
         }
 
         &__actions {
-            padding: 0 0 calculateRem(16px);
+            padding: calculateRem(8px) calculateRem(16px);
         }
     }
 

diff --git a/src/bundle/Resources/public/scss/_custom-tag-attributes.scss b/src/bundle/Resources/public/scss/_custom-tag-attributes.scss
@@ -17,6 +17,10 @@
             font-weight: bold;
         }
 
+        &__items {
+            overflow: auto;
+        }
+
         &__item {
             padding: calculateRem(8px) calculateRem(16px);
         }