From f6b1f85a037e9d9f48321a119ae844cd2174ac37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Ostafin?= Date: Thu, 5 Dec 2024 14:26:39 +0100 Subject: [PATCH] IBX-9154: The dropdown for custom class is illegible (#193) --- .../custom-attributes/custom-attributes-ui.js | 10 +++++ .../ui/custom-attributes-form-view.js | 8 ++-- .../block-custom-tag/custom-tag-ui.js | 2 +- .../ui/custom-tag-attributes-view.js | 4 +- .../custom-tags/ui/custom-tag-form-view.js | 8 ++-- .../custom-panel-helper.js} | 9 ++-- .../Resources/public/scss/_balloon-form.scss | 1 - .../Resources/public/scss/_custom-panel.scss | 41 +++++++++++++++++++ .../Resources/public/scss/ckeditor.scss | 1 + 9 files changed, 68 insertions(+), 16 deletions(-) rename src/bundle/Resources/public/js/CKEditor/{custom-tags/helpers/panel-helper.js => helpers/custom-panel-helper.js} (75%) create mode 100644 src/bundle/Resources/public/scss/_custom-panel.scss 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 index 33fba98c..c7bc9861 100644 --- 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 index a38d435b..a37f2d23 100644 --- 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 index 6a94feb9..e7bbb18b 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 @@ -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 index 8636d776..b597e281 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 @@ -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 index cf8a2aef..7b4fc928 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 @@ -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/src/bundle/Resources/public/js/CKEditor/custom-tags/helpers/panel-helper.js b/src/bundle/Resources/public/js/CKEditor/helpers/custom-panel-helper.js similarity index 75% rename from src/bundle/Resources/public/js/CKEditor/custom-tags/helpers/panel-helper.js rename to src/bundle/Resources/public/js/CKEditor/helpers/custom-panel-helper.js index 49384d0c..1a137500 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-tags/helpers/panel-helper.js +++ b/src/bundle/Resources/public/js/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 index 8bb527a0..8c330784 100644 --- 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 new file mode 100644 index 00000000..2ad32032 --- /dev/null +++ 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 index 9edd45d7..d250a627 100644 --- 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';