From fc495c2fe24372c20e7f42fa84d538c2d4cbd695 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Fri, 24 Feb 2023 15:55:07 +0100 Subject: [PATCH 1/4] IBX-5138: The header in content edit view is displayed incorrectly when scrolling --- .../public/js/scripts/edit.header.js | 16 +++++++++++++++ .../js/scripts/helpers/middle.ellipsis.js | 11 +++++++++- .../Resources/public/scss/_edit-header.scss | 20 +++++++++++++++++++ .../public/scss/_middle-ellipsis.scss | 6 +++++- .../themes/admin/ui/edit_header.html.twig | 9 ++++++++- 5 files changed, 59 insertions(+), 3 deletions(-) diff --git a/src/bundle/Resources/public/js/scripts/edit.header.js b/src/bundle/Resources/public/js/scripts/edit.header.js index a16c52bb1c..11c0e54271 100644 --- a/src/bundle/Resources/public/js/scripts/edit.header.js +++ b/src/bundle/Resources/public/js/scripts/edit.header.js @@ -1,5 +1,6 @@ (function (global, doc) { const SCROLL_POSITION_TO_FIT = 50; + const HEADER_RIGHT_MARGIN = 50; const MIN_HEIGHT_DIFF_FOR_FITTING_HEADER = 150; const headerNode = doc.querySelector('.ibexa-edit-header'); const contentNode = doc.querySelector('.ibexa-edit-content'); @@ -10,6 +11,17 @@ const { height: expandedHeaderHeight } = headerNode.getBoundingClientRect(); const scrolledContent = doc.querySelector('.ibexa-edit-content > :first-child'); + const fitEllipsizedTitle = () => { + const titleNode = headerNode.querySelector('.ibexa-edit-header__name--ellipsized'); + const firstMenuEntryNode = headerNode.querySelector('.ibexa-context-menu .ibexa-context-menu__item'); + const { left: titleNodeLeft, width: titleNodeWidth } = titleNode.getBoundingClientRect(); + const { left: firstMenuEntryNodeLeft } = firstMenuEntryNode.getBoundingClientRect(); + const titleNodeWidthNew = firstMenuEntryNodeLeft - titleNodeLeft - HEADER_RIGHT_MARGIN; + + if (titleNodeWidth > titleNodeWidthNew) { + titleNode.style.width = `${titleNodeWidthNew}px`; + } + }; const fitHeader = (event) => { const { height: formHeight } = scrolledContent.getBoundingClientRect(); const contentHeightWithExpandedHeader = formHeight + expandedHeaderHeight; @@ -23,6 +35,10 @@ const shouldHeaderBeSlim = scrollTop > SCROLL_POSITION_TO_FIT; headerNode.classList.toggle('ibexa-edit-header--slim', shouldHeaderBeSlim); + + if (shouldHeaderBeSlim) { + fitEllipsizedTitle(); + } }; contentNode.addEventListener('scroll', fitHeader, false); diff --git a/src/bundle/Resources/public/js/scripts/helpers/middle.ellipsis.js b/src/bundle/Resources/public/js/scripts/helpers/middle.ellipsis.js index dcd3144930..84629fcf18 100644 --- a/src/bundle/Resources/public/js/scripts/helpers/middle.ellipsis.js +++ b/src/bundle/Resources/public/js/scripts/helpers/middle.ellipsis.js @@ -21,8 +21,17 @@ middleEllipsisContainers.forEach((middleEllipsisContainer) => { const partStart = middleEllipsisContainer.querySelector('.ibexa-middle-ellipsis__name--start'); + const isEllipsized = partStart.scrollWidth > partStart.offsetWidth; - middleEllipsisContainer.classList.toggle('ibexa-middle-ellipsis--ellipsized', partStart.scrollWidth > partStart.offsetWidth); + if (!isEllipsized) { + middleEllipsisContainer.dataset.bsOriginalTitle = ''; + } else { + const partStartContentNode = partStart.querySelector('.ibexa-middle-ellipsis__name-ellipsized'); + + baseElement.dataset.bsOriginalTitle = partStartContentNode.innerHTML; + } + + middleEllipsisContainer.classList.toggle('ibexa-middle-ellipsis--ellipsized', isEllipsized); ibexa.helpers.tooltips.parse(middleEllipsisContainer); resizeEllipsisObserver.observe(middleEllipsisContainer); diff --git a/src/bundle/Resources/public/scss/_edit-header.scss b/src/bundle/Resources/public/scss/_edit-header.scss index e149735d7d..6d29038508 100644 --- a/src/bundle/Resources/public/scss/_edit-header.scss +++ b/src/bundle/Resources/public/scss/_edit-header.scss @@ -19,6 +19,16 @@ display: flex; } + &__name { + &--ellipsized { + display: none; + } + + &--full { + display: inline-block; + } + } + &__row { display: flex; flex-wrap: nowrap; @@ -166,6 +176,16 @@ &__title { min-height: calculateRem(34px); } + + &__name { + &--ellipsized { + display: inline-block; + } + + &--full { + display: none; + } + } } .ibexa-autosave { diff --git a/src/bundle/Resources/public/scss/_middle-ellipsis.scss b/src/bundle/Resources/public/scss/_middle-ellipsis.scss index 06b386fdc4..f6710f7957 100644 --- a/src/bundle/Resources/public/scss/_middle-ellipsis.scss +++ b/src/bundle/Resources/public/scss/_middle-ellipsis.scss @@ -1,4 +1,5 @@ .ibexa-middle-ellipsis { + position: relative; display: inline-flex; max-width: 100%; @@ -11,7 +12,7 @@ &--end { margin-left: calculateRem(-10px); - width: initial; + width: 100%; } } @@ -22,6 +23,9 @@ } &__separator { + position: absolute; + left: 50%; + transform: translateX(-50%); display: none; } diff --git a/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig b/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig index 6f9949bbef..3f700b6a83 100644 --- a/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig @@ -32,7 +32,14 @@

- {{ title }} + + {{ include('@ibexadesign/ui/component/middle_ellipsis/middle_ellipsis.html.twig', { + name: title, + }) }} + + + {{ title }} + {% if (description is defined and description|length) or content is defined and content is not null %}
Date: Thu, 2 Mar 2023 15:20:14 +0100 Subject: [PATCH 2/4] fix longword ellipsis --- src/bundle/Resources/public/scss/_edit-header.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/bundle/Resources/public/scss/_edit-header.scss b/src/bundle/Resources/public/scss/_edit-header.scss index 6d29038508..4a82e3544b 100644 --- a/src/bundle/Resources/public/scss/_edit-header.scss +++ b/src/bundle/Resources/public/scss/_edit-header.scss @@ -26,6 +26,9 @@ &--full { display: inline-block; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; } } From 07a95c58b822d981a8286de0c1c4dd9b1df4975e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Mon, 6 Mar 2023 14:36:36 +0100 Subject: [PATCH 3/4] fix overflowing menu --- src/bundle/Resources/public/scss/_edit-header.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/bundle/Resources/public/scss/_edit-header.scss b/src/bundle/Resources/public/scss/_edit-header.scss index 4a82e3544b..336618a58e 100644 --- a/src/bundle/Resources/public/scss/_edit-header.scss +++ b/src/bundle/Resources/public/scss/_edit-header.scss @@ -148,6 +148,7 @@ .ibexa-edit-header { &__row { &--bottom { + z-index: 1; margin-top: calculateRem(-45px); } } From 91f06f1bdf6eb11e4af204520f6a8a785757f999 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Tue, 7 Mar 2023 11:51:47 +0100 Subject: [PATCH 4/4] fit bottom row line with buttons --- src/bundle/Resources/public/js/scripts/edit.header.js | 8 ++++++-- src/bundle/Resources/public/scss/_edit-header.scss | 1 + 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/bundle/Resources/public/js/scripts/edit.header.js b/src/bundle/Resources/public/js/scripts/edit.header.js index 11c0e54271..4d69dc167b 100644 --- a/src/bundle/Resources/public/js/scripts/edit.header.js +++ b/src/bundle/Resources/public/js/scripts/edit.header.js @@ -12,11 +12,15 @@ const { height: expandedHeaderHeight } = headerNode.getBoundingClientRect(); const scrolledContent = doc.querySelector('.ibexa-edit-content > :first-child'); const fitEllipsizedTitle = () => { - const titleNode = headerNode.querySelector('.ibexa-edit-header__name--ellipsized'); + const headerBottomRowNode = headerNode.querySelector('.ibexa-edit-header__row--bottom'); + const titleNode = headerBottomRowNode.querySelector('.ibexa-edit-header__name--ellipsized'); const firstMenuEntryNode = headerNode.querySelector('.ibexa-context-menu .ibexa-context-menu__item'); const { left: titleNodeLeft, width: titleNodeWidth } = titleNode.getBoundingClientRect(); const { left: firstMenuEntryNodeLeft } = firstMenuEntryNode.getBoundingClientRect(); - const titleNodeWidthNew = firstMenuEntryNodeLeft - titleNodeLeft - HEADER_RIGHT_MARGIN; + const bottomRowNodeWidthNew = firstMenuEntryNodeLeft - titleNodeLeft; + const titleNodeWidthNew = bottomRowNodeWidthNew - HEADER_RIGHT_MARGIN; + + headerBottomRowNode.style.width = `${bottomRowNodeWidthNew}px`; if (titleNodeWidth > titleNodeWidthNew) { titleNode.style.width = `${titleNodeWidthNew}px`; diff --git a/src/bundle/Resources/public/scss/_edit-header.scss b/src/bundle/Resources/public/scss/_edit-header.scss index 336618a58e..05fc350e57 100644 --- a/src/bundle/Resources/public/scss/_edit-header.scss +++ b/src/bundle/Resources/public/scss/_edit-header.scss @@ -149,6 +149,7 @@ &__row { &--bottom { z-index: 1; + min-width: initial; margin-top: calculateRem(-45px); } }