IBX-5138: The header in content edit view is displayed incorrectly when scrolling

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);

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);

src/bundle/Resources/public/scss/_edit-header.scss

@@ -19,6 +19,19 @@
         display: flex;
     }
 
+    &__name {
+        &--ellipsized {
+            display: none;
+        }
+
+        &--full {
+            display: inline-block;
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
     &__row {
         display: flex;
         flex-wrap: nowrap;
@@ -135,6 +148,7 @@
         .ibexa-edit-header {
             &__row {
                 &--bottom {
+                    z-index: 1;
                     margin-top: calculateRem(-45px);
                 }
             }
@@ -166,6 +180,16 @@
             &__title {
                 min-height: calculateRem(34px);
             }
+
+            &__name {
+                &--ellipsized {
+                    display: inline-block;
+                }
+
+                &--full {
+                    display: none;
+                }
+            }
         }
 
         .ibexa-autosave {

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;
     }
 

src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig

@@ -32,7 +32,14 @@
         <div class="ibexa-edit-header__row ibexa-edit-header__row--bottom">
             <div class="ibexa-edit-header__column ibexa-edit-header__column--left">
                 <h1 class="ibexa-edit-header__title">
-                    {{ title }}
+                    <span class="ibexa-edit-header__name ibexa-edit-header__name--ellipsized">
+                        {{ include('@ibexadesign/ui/component/middle_ellipsis/middle_ellipsis.html.twig', {
+                            name: title,
+                        }) }}
+                    </span>
+                    <span class="ibexa-edit-header__name ibexa-edit-header__name--full">
+                        {{ title }}
+                    </span>
                     {% if (description is defined and description|length) or content is defined and content is not null %}
                         <div
                             class="ibexa-edit-header__tooltip"