Skip to content

Commit

Permalink
IBX-8824: The popup for custom tags with multiple fields is not scrol…
Browse files Browse the repository at this point in the history
…lable (#183)

Co-authored-by: tischsoic <[email protected]>
  • Loading branch information
lucasOsti and tischsoic authored Sep 30, 2024
1 parent c237fd7 commit 2ef456b
Show file tree
Hide file tree
Showing 6 changed files with 67 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +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 IbexaCustomTagFormView from '../ui/custom-tag-form-view';
import IbexaCustomTagAttributesView from '../ui/custom-tag-attributes-view';
import IbexaButtonView from '../../common/button-view/button-view';
Expand All @@ -18,6 +19,14 @@ class IbexaCustomTagUI extends Plugin {
this.addCustomTag = this.addCustomTag.bind(this);

this.isNew = false;

let timeoutId = null;
this.listenTo(this.balloon.view, 'change:top', () => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
setPanelContentMaxHeight(this.balloon.view);
}, 0);
});
}

isCustomTagSelected(eventData) {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
const setPanelContentMaxHeight = (balloonView) => {
const MIN_HEIGHT_VALUE = 100;
const MARGIN = 50;
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');

if (!panelContent) {
return;
}

const isBalloonAbovePivot = panelNode.classList.contains('ck-balloon-panel_arrow_s');
const panelInitialHeight = panelNode.offsetHeight;
const panelTopPosition = parseInt(panelNode.style.top, 10);
const panelHeaderHeight = panelHeader?.offsetHeight ?? 0;
const panelFooterHeight = panelFooter?.offsetHeight ?? 0;
const maxHeightValue = isBalloonAbovePivot
? panelInitialHeight + panelTopPosition - panelHeaderHeight - panelFooterHeight - MARGIN
: windowHeight - panelTopPosition - panelHeaderHeight - panelFooterHeight - MARGIN;
const panelMaxHeight = maxHeightValue < MIN_HEIGHT_VALUE ? MIN_HEIGHT_VALUE : maxHeightValue;

panelContent.style.maxHeight = `${panelMaxHeight}px`;

if (isBalloonAbovePivot) {
const panelNewHeight = panelNode.offsetHeight;
const panelHeightChange = panelInitialHeight - panelNewHeight;
const panelNewTopPosition = panelTopPosition + panelHeightChange;

panelNode.style.top = `${panelNewTopPosition}px`;
}
};

export { setPanelContentMaxHeight };
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
{
Expand All @@ -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',
Expand All @@ -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;
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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],
},
Expand All @@ -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],
},
Expand Down
9 changes: 5 additions & 4 deletions src/bundle/Resources/public/scss/_balloon-form.scss
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
.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;
Expand Down Expand Up @@ -135,7 +136,7 @@
}

&__actions {
padding: 0 0 calculateRem(16px);
padding: calculateRem(8px) calculateRem(16px);
}
}

Expand Down
4 changes: 4 additions & 0 deletions src/bundle/Resources/public/scss/_custom-tag-attributes.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@
font-weight: bold;
}

&__items {
overflow: auto;
}

&__item {
padding: calculateRem(8px) calculateRem(16px);
}
Expand Down

0 comments on commit 2ef456b

Please sign in to comment.