IBX-10429: [Collaboration] UI improvements for the header

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');
@@ -9,24 +8,9 @@
         return;
     }
 
-    const headerBottomRowNode = headerNode.querySelector('.ibexa-edit-header__row--bottom');
     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 +24,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/translations/ibexa_content_create.en.xliff

@@ -17,8 +17,8 @@
         <note>key: creating</note>
       </trans-unit>
       <trans-unit id="582b09a837963ba464ba24493c8cc7c360b99708" resname="editing_details_subtitle">
-        <source>under: %location%</source>
-        <target state="new">under: %location%</target>
+        <source>under %location%</source>
+        <target state="new">under %location%</target>
         <note>key: editing_details_subtitle</note>
       </trans-unit>
       <trans-unit id="32d50c07b2eacd6fa72742ff1c1f5963c26a251d" resname="new_content_item">

src/bundle/Resources/translations/ibexa_content_edit.en.xliff

@@ -32,8 +32,8 @@
         <note>key: editing</note>
       </trans-unit>
       <trans-unit id="582b09a837963ba464ba24493c8cc7c360b99708" resname="editing_details_subtitle">
-        <source>under: %location%</source>
-        <target state="new">under: %location%</target>
+        <source>under %location%</source>
+        <target state="new">under %location%</target>
         <note>key: editing_details_subtitle</note>
       </trans-unit>
       <trans-unit id="009667fab56f0bec66634f009a75ffd9425f2987" resname="fieldtype.translation_is_disabled">

src/bundle/Resources/translations/ibexa_user_create.en.xliff

@@ -12,8 +12,8 @@
         <note>key: Create</note>
       </trans-unit>
       <trans-unit id="582b09a837963ba464ba24493c8cc7c360b99708" resname="editing_details_subtitle">
-        <source>under: %location%</source>
-        <target state="new">under: %location%</target>
+        <source>under %location%</source>
+        <target state="new">under %location%</target>
         <note>key: editing_details_subtitle</note>
       </trans-unit>
       <trans-unit id="32d50c07b2eacd6fa72742ff1c1f5963c26a251d" resname="new_content_item">

src/bundle/Resources/translations/ibexa_user_edit.en.xliff

@@ -12,8 +12,8 @@
         <note>key: editing</note>
       </trans-unit>
       <trans-unit id="582b09a837963ba464ba24493c8cc7c360b99708" resname="editing_details_subtitle">
-        <source>under: %location%</source>
-        <target state="new">under: %location%</target>
+        <source>under %location%</source>
+        <target state="new">under %location%</target>
         <note>key: editing_details_subtitle</note>
       </trans-unit>
     </body>

src/bundle/Resources/views/themes/admin/content/create/create.html.twig

@@ -19,7 +19,7 @@
         title: 'new_content_item'|trans({'%contentType%': content_type.name})|desc('New %contentType%'),
         icon_name: content_type.name,
         show_autosave_status: true,
-        subtitle: 'editing_details_subtitle'|trans({ '%location%': parent_location.contentInfo.name })|desc('under: %location%'),
+        subtitle: 'editing_details_subtitle'|trans({ '%location%': parent_location.contentInfo.name })|desc('under %location%'),
         context_actions: knp_menu_render(content_create_sidebar_right, {'template': '@ibexadesign/ui/menu/context_menu.html.twig'})
     } %}
         {% block after_title %}

src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig

@@ -23,7 +23,7 @@
         show_autosave_status: true,
         description: content_type.description,
         language: language,
-        subtitle: 'editing_details_subtitle'|trans({ '%location%': parent_location.contentInfo.name })|desc('under: %location%'),
+        subtitle: 'editing_details_subtitle'|trans({ '%location%': parent_location.contentInfo.name })|desc('under %location%'),
         context_actions: knp_menu_render(content_edit_sidebar_right, { 'template': '@ibexadesign/ui/menu/context_menu.html.twig' })
     } %}
         {% block after_title %}

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

@@ -42,9 +42,6 @@
                         name: title,
                     }) }}
                 </span>
-                <span class="ibexa-edit-header__name ibexa-edit-header__name--full">
-                    {{ title }}
-                </span>
                 {% block after_title %}{% endblock %}
             </h1>
 

src/bundle/Resources/views/themes/admin/ui/on_the_fly/create_on_the_fly.html.twig

@@ -31,7 +31,7 @@
     {% include '@ibexadesign/ui/edit_header.html.twig' with {
         action_name: 'creating'|trans|desc('Creating'),
         title: 'new_content_item'|trans({'%contentType%': content_type.name})|desc('New %contentType%'),
-        subtitle: 'editing_details_subtitle'|trans({ '%location%': parent_location.contentInfo.name })|desc('under: %location%'),
+        subtitle: 'editing_details_subtitle'|trans({ '%location%': parent_location.contentInfo.name })|desc('under %location%'),
         icon_name: content_type.identifier,
         show_autosave_status: true,
         description: content_type.description,

src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig

@@ -35,7 +35,7 @@
         content_type_name: content_type.name,
         show_autosave_status: true,
         description: content_type.description,
-        subtitle: 'editing_details_subtitle'|trans({ '%location%': parent_location.contentInfo.name })|desc('under: %location%'),
+        subtitle: 'editing_details_subtitle'|trans({ '%location%': parent_location.contentInfo.name })|desc('under %location%'),
         context_actions: context_actions,
     } %}
 {% endblock %}

src/bundle/Resources/views/themes/admin/user/create.html.twig

@@ -17,7 +17,7 @@
         icon_name: content_type.name,
         show_autosave_status: false,
         title: 'new_content_item'|trans({'%contentType%': content_type.name})|desc('New %contentType%'),
-        subtitle: 'editing_details_subtitle'|trans({ '%location%': parent_location.contentInfo.name })|desc('under: %location%'),
+        subtitle: 'editing_details_subtitle'|trans({ '%location%': parent_location.contentInfo.name })|desc('under %location%'),
         context_actions: knp_menu_render(user_content_edit_menu, {'template': '@ibexadesign/ui/menu/context_menu.html.twig'})
     } %}
 {% endblock %}

src/bundle/Resources/views/themes/admin/user/edit.html.twig

@@ -18,7 +18,7 @@
         icon_name: content_type.name,
         show_autosave_status: false,
         title: "%s %s"|format(user.getFieldValue('first_name'), user.getFieldValue('last_name')),
-        subtitle: parent_location ? 'editing_details_subtitle'|trans({ '%location%': parent_location.contentInfo.name })|desc('under: %location%') : null,
+        subtitle: parent_location ? 'editing_details_subtitle'|trans({ '%location%': parent_location.contentInfo.name })|desc('under %location%') : null,
         context_actions: knp_menu_render(user_content_edit_menu, {'template': '@ibexadesign/ui/menu/context_menu.html.twig'})
     } %}
 {% endblock %}