From 17641ee32d61ef8a3d2fe36a7cdd5245be44fb9f Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Fri, 6 Sep 2024 14:23:26 +0200 Subject: [PATCH] IBX-8824: The popup for custom tags with multiple fields is not scrollable --- .../block-custom-tag/custom-tag-ui.js | 19 +++++++++++++++++++ .../inline-custom-tag/inline-custom-tag-ui.js | 18 ++++++++++++++++++ .../ui/custom-tag-attributes-view.js | 13 +++++++++++-- .../custom-tags/ui/custom-tag-form-view.js | 6 +++--- .../Resources/public/scss/_balloon-form.scss | 10 ++++++---- .../public/scss/_custom-tag-attributes.scss | 4 ++++ 6 files changed, 61 insertions(+), 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 index 262ff512..42f5cae8 100644 --- 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/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js index 4a1dd9bd..b865727a 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js +++ b/src/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 index 4a20b4f0..8636d776 100644 --- 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 index 300f5efa..cf8a2aef 100644 --- 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 index a68011a9..1c41459b 100644 --- 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 index c1cc73fa..74216ac0 100644 --- 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); }