UI improvements for the heade

Author: OstafinL

src/bundle/Resources/public/js/scripts/edit.header.js

@@ -1,6 +1,5 @@
 (function (global, doc, ibexa) {
     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');
@@ -13,20 +12,6 @@
     const { height: expandedHeaderHeight } = headerNode.getBoundingClientRect();
     const scrolledContent = doc.querySelector('.ibexa-edit-content > :first-child');
     const { controlZIndex } = ibexa.helpers.modal;
-    const fitEllipsizedTitle = () => {
-        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 bottomRowNodeWidthNew = firstMenuEntryNodeLeft - titleNodeLeft;
-        const titleNodeWidthNew = bottomRowNodeWidthNew - HEADER_RIGHT_MARGIN;
-
-        headerBottomRowNode.style.width = `${bottomRowNodeWidthNew}px`;
-
-        if (titleNodeWidth > titleNodeWidthNew) {
-            titleNode.style.width = `${titleNodeWidthNew}px`;
-        }
-    };
     const fitHeader = (event) => {
         const { height: formHeight } = scrolledContent.getBoundingClientRect();
         const contentHeightWithExpandedHeader = formHeight + expandedHeaderHeight;
@@ -40,12 +25,6 @@
         const shouldHeaderBeSlim = scrollTop > SCROLL_POSITION_TO_FIT;
 
         headerNode.classList.toggle('ibexa-edit-header--slim', shouldHeaderBeSlim);
-
-        if (shouldHeaderBeSlim) {
-            fitEllipsizedTitle();
-        } else {
-            headerBottomRowNode.style.width = '100%';
-        }
     };
 
     contentNode.addEventListener('scroll', fitHeader, false);

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

@@ -25,19 +25,7 @@
     }
 
     &__name {
-        &--ellipsized {
-            display: none;
-        }
-
-        &--full {
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            white-space: normal;
-            max-width: 100%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
+        max-width: calc(100vw - calculateRem(130px));
     }
 
     &__row {
@@ -153,23 +141,10 @@
         }
 
         .ibexa-edit-header {
-            &__row {
-                &--bottom {
-                    z-index: 1;
-                    min-width: initial;
-                    margin-top: calculateRem(-34px);
-                    min-height: initial;
-                }
-            }
-
             &__bottom-row-line {
                 border-bottom: none;
             }
 
-            &__info-bar {
-                margin-top: calculateRem(-8px);
-            }
-
             &__separate-div {
                 transform: scaleX(1);
             }
@@ -187,16 +162,6 @@
             &__meta {
                 display: none;
             }
-
-            &__name {
-                &--ellipsized {
-                    display: inline-block;
-                }
-
-                &--full {
-                    display: none;
-                }
-            }
         }
     }
 }

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

@@ -42,19 +42,12 @@
                         name: title,
                     }) }}
                 </span>
-                <span class="ibexa-edit-header__name ibexa-edit-header__name--full">
-                    {{ title }}
-                </span>
                 {% block after_title %}{% endblock %}
             </h1>
 
             {% if subtitle is defined %}
                 <div class="ibexa-edit-header__subtitle">{{ subtitle }}</div>
             {% endif %}
-            
-            {# {{ dump(ibexa_admin_ui_config.userContentTypes) }}
-            {{ dump(content_type.identifier) }}
-            {% set checkIsMetaVisible = (content is defined and content is not null) %} #}
 
             {% if content is defined and content is not null %}
                 <div class="ibexa-edit-header__meta">