IBX-10204: Updated create/edit content header (#1630)

Author: OstafinL

src/bundle/Resources/public/img/ibexa-icons.svg

@@ -9,11 +9,11 @@
         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 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();
@@ -43,6 +43,8 @@
 
         if (shouldHeaderBeSlim) {
             fitEllipsizedTitle();
+        } else {
+            headerBottomRowNode.style.width = '100%';
         }
     };
 

src/bundle/Resources/public/img/icons/translate.svg

@@ -30,7 +30,10 @@
         }
 
         &--full {
-            display: inline-block;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            white-space: normal;
             max-width: 100%;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -44,6 +47,7 @@
 
         &--top {
             height: calculateRem(48px);
+            margin-bottom: calculateRem(16px);
 
             .ibexa-edit-header__title {
                 height: 0;
@@ -73,31 +77,21 @@
                 fill: $ibexa-color-dark-400;
             }
         }
-
-        &--left {
-            max-width: 75%;
-
-            .ibexa-label {
-                margin-bottom: 0;
-                color: $ibexa-color-dark-400;
-            }
-        }
     }
 
     &__context-actions {
         display: flex;
         width: 100%;
     }
 
-    &__tooltip {
-        margin-left: calculateRem(8px);
+    &__info-bar {
         display: flex;
-        align-items: center;
-        justify-content: center;
+        transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
     }
 
-    &__action-name-container {
-        transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
+    &__info-bar-action-type {
+        display: flex;
+        align-items: center;
     }
 
     &__action-name {
@@ -108,6 +102,8 @@
     }
 
     &__subtitle {
+        margin-top: calculateRem(4px);
+        font-size: $ibexa-text-font-size-medium;
         opacity: 1;
         transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
     }
@@ -122,12 +118,30 @@
         transition-duration: $ibexa-admin-transition-duration;
     }
 
+    &__meta {
+        display: flex;
+        flex-direction: row;
+        gap: calculateRem(4px);
+    }
+
+    &__meta-item {
+        display: flex;
+        gap: calculateRem(4px);
+        align-items: center;
+        margin-top: calculateRem(8px);
+        padding: calculateRem(4px) calculateRem(8px);
+        font-size: calculateRem(10px);
+        color: $ibexa-color-dark-500;
+        border-radius: calculateRem(16px);
+        border: calculateRem(1px) solid $ibexa-color-light-600;
+    }
+
     &__extra-bottom-content {
         margin-top: calculateRem(10px);
     }
 
     .ibexa-autosave {
-        display: inline-block;
+        display: flex;
         border-left: calculateRem(1px) solid $ibexa-color-light;
         padding-left: calculateRem(12px);
         margin-left: calculateRem(12px);
@@ -152,7 +166,7 @@
                 border-bottom: none;
             }
 
-            &__action-name-container {
+            &__info-bar {
                 margin-top: calculateRem(-8px);
             }
 
@@ -170,6 +184,10 @@
                 min-height: calculateRem(34px);
             }
 
+            &__meta {
+                display: none;
+            }
+
             &__name {
                 &--ellipsized {
                     display: inline-block;

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

@@ -16,10 +16,10 @@
         <target state="new">Creating</target>
         <note>key: creating</note>
       </trans-unit>
-      <trans-unit id="750bead6705b295c7b7d66c27b2768c1b9329ed5" resname="editing_details">
-        <source>Location: %location% Translation: %language%</source>
-        <target state="new">Location: %location% Translation: %language%</target>
-        <note>key: editing_details</note>
+      <trans-unit id="582b09a837963ba464ba24493c8cc7c360b99708" resname="editing_details_subtitle">
+        <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">
         <source>New %contentType%</source>

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

@@ -16,6 +16,11 @@
         <target state="new">This Field Type is not editable</target>
         <note>key: content.field.non_editable</note>
       </trans-unit>
+      <trans-unit id="927b5658769b10a67f0aa5e9f3d8b35e746e0276" resname="content.meta.created_by">
+        <source>Created by %name%</source>
+        <target state="new">Created by %name%</target>
+        <note>key: content.meta.created_by</note>
+      </trans-unit>
       <trans-unit id="07d6fb7c02b8730592a3bb68a315caa63031d44e" resname="content.published.success">
         <source>Content published.</source>
         <target state="new">Content published.</target>
@@ -31,6 +36,11 @@
         <target state="new">Location: %location% Translation: %language%</target>
         <note>key: editing_details</note>
       </trans-unit>
+      <trans-unit id="582b09a837963ba464ba24493c8cc7c360b99708" resname="editing_details_subtitle">
+        <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">
         <source>Translating the %fieldName% Field is disabled. See content type definition for details.</source>
         <target state="new">Translating the %fieldName% Field is disabled. See content type definition for details.</target>

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

@@ -19,10 +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'|trans({
-            '%location%': parent_location.contentInfo.name,
-            '%language%': language.name
-        })|desc('Location: %location% Translation: %language%' ),
+        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/translations/ibexa_content_edit.en.xliff

@@ -22,10 +22,8 @@
         icon_name: 'edit',
         show_autosave_status: true,
         description: content_type.description,
-        subtitle: 'editing_details'|trans({
-            '%location%': parent_location.contentInfo.name,
-            '%language%': language.name
-        })|desc('Location: %location% Translation: %language%'),
+        language: language,
+        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 %}