From 23dd06c0dfdf96a39310c38810f7fb0f9dcae962 Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Thu, 14 Aug 2025 13:49:23 +0200 Subject: [PATCH 1/7] IBX-10429: [Collaboration] UI improvements for the header --- .../Resources/translations/ibexa_content_create.en.xliff | 4 ++-- src/bundle/Resources/translations/ibexa_content_edit.en.xliff | 4 ++-- src/bundle/Resources/translations/ibexa_user_create.en.xliff | 4 ++-- src/bundle/Resources/translations/ibexa_user_edit.en.xliff | 4 ++-- .../views/themes/admin/content/create/create.html.twig | 2 +- .../Resources/views/themes/admin/content/edit/edit.html.twig | 2 +- .../Resources/views/themes/admin/ui/edit_header.html.twig | 4 ++++ .../themes/admin/ui/on_the_fly/create_on_the_fly.html.twig | 2 +- .../themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig | 2 +- src/bundle/Resources/views/themes/admin/user/create.html.twig | 2 +- src/bundle/Resources/views/themes/admin/user/edit.html.twig | 2 +- 11 files changed, 18 insertions(+), 14 deletions(-) diff --git a/src/bundle/Resources/translations/ibexa_content_create.en.xliff b/src/bundle/Resources/translations/ibexa_content_create.en.xliff index 2eeedca5c4..fac827a4bc 100644 --- a/src/bundle/Resources/translations/ibexa_content_create.en.xliff +++ b/src/bundle/Resources/translations/ibexa_content_create.en.xliff @@ -17,8 +17,8 @@ key: creating - under: %location% - under: %location% + under %location% + under %location% key: editing_details_subtitle diff --git a/src/bundle/Resources/translations/ibexa_content_edit.en.xliff b/src/bundle/Resources/translations/ibexa_content_edit.en.xliff index cf99bbde5a..044761dab0 100644 --- a/src/bundle/Resources/translations/ibexa_content_edit.en.xliff +++ b/src/bundle/Resources/translations/ibexa_content_edit.en.xliff @@ -32,8 +32,8 @@ key: editing - under: %location% - under: %location% + under %location% + under %location% key: editing_details_subtitle diff --git a/src/bundle/Resources/translations/ibexa_user_create.en.xliff b/src/bundle/Resources/translations/ibexa_user_create.en.xliff index 61522bb7a4..3aacdb420a 100644 --- a/src/bundle/Resources/translations/ibexa_user_create.en.xliff +++ b/src/bundle/Resources/translations/ibexa_user_create.en.xliff @@ -12,8 +12,8 @@ key: Create - under: %location% - under: %location% + under %location% + under %location% key: editing_details_subtitle diff --git a/src/bundle/Resources/translations/ibexa_user_edit.en.xliff b/src/bundle/Resources/translations/ibexa_user_edit.en.xliff index b512daa225..1533373940 100644 --- a/src/bundle/Resources/translations/ibexa_user_edit.en.xliff +++ b/src/bundle/Resources/translations/ibexa_user_edit.en.xliff @@ -12,8 +12,8 @@ key: editing - under: %location% - under: %location% + under %location% + under %location% key: editing_details_subtitle diff --git a/src/bundle/Resources/views/themes/admin/content/create/create.html.twig b/src/bundle/Resources/views/themes/admin/content/create/create.html.twig index dcef8764cf..f56ca10a40 100644 --- a/src/bundle/Resources/views/themes/admin/content/create/create.html.twig +++ b/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 %} diff --git a/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig b/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig index 7b1078c3a2..cfc96fc821 100644 --- a/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig +++ b/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 %} 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 1b2ec95584..2455046436 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 @@ -54,6 +54,10 @@ {% if subtitle is defined %}
{{ subtitle }}
{% endif %} + + {# {{ dump(ibexa_admin_ui_config.userContentTypes) }} + {{ dump(content_type.identifier) }} + {% set checkIsMetaVisible = (content is defined and content is not null) %} #} {% if content is not null and not is_user_content_type %}
diff --git a/src/bundle/Resources/views/themes/admin/ui/on_the_fly/create_on_the_fly.html.twig b/src/bundle/Resources/views/themes/admin/ui/on_the_fly/create_on_the_fly.html.twig index 3a1839248d..e9a3f39533 100644 --- a/src/bundle/Resources/views/themes/admin/ui/on_the_fly/create_on_the_fly.html.twig +++ b/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, diff --git a/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig b/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig index 44c8f3c12f..af4888207b 100644 --- a/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig +++ b/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 %} diff --git a/src/bundle/Resources/views/themes/admin/user/create.html.twig b/src/bundle/Resources/views/themes/admin/user/create.html.twig index cf21afba0d..88cb55a2a9 100644 --- a/src/bundle/Resources/views/themes/admin/user/create.html.twig +++ b/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 %} diff --git a/src/bundle/Resources/views/themes/admin/user/edit.html.twig b/src/bundle/Resources/views/themes/admin/user/edit.html.twig index 81f7cd9414..a9066231f5 100644 --- a/src/bundle/Resources/views/themes/admin/user/edit.html.twig +++ b/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 %} From c5169e510418caf200e2c590ac364056e1fabc28 Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Thu, 21 Aug 2025 15:49:25 +0200 Subject: [PATCH 2/7] UI improvements for the heade --- .../public/js/scripts/admin.content.edit.js | 93 +++++--- .../public/js/scripts/edit.header.js | 32 +-- .../Resources/public/scss/_autosave.scss | 26 ++- .../Resources/public/scss/_edit-header.scss | 210 ++++++++---------- .../ui/component/autosave/autosave.html.twig | 29 ++- .../themes/admin/ui/edit_header.html.twig | 77 +++---- src/lib/Behat/Page/ContentUpdateItemPage.php | 8 +- 7 files changed, 235 insertions(+), 240 deletions(-) diff --git a/src/bundle/Resources/public/js/scripts/admin.content.edit.js b/src/bundle/Resources/public/js/scripts/admin.content.edit.js index 665ab83a19..ef62dad3c0 100644 --- a/src/bundle/Resources/public/js/scripts/admin.content.edit.js +++ b/src/bundle/Resources/public/js/scripts/admin.content.edit.js @@ -1,4 +1,4 @@ -(function (global, doc, ibexa, Translator, moment) { +(function (global, doc, ibexa, Translator, bootstrap, moment) { const ENTER_KEY_CODE = 13; const STATUS_ERROR = 'error'; const STATUS_OFF = 'off'; @@ -30,6 +30,7 @@ const submitBtns = form.querySelectorAll('[type="submit"]:not([formnovalidate])'); const menuButtonsToValidate = doc.querySelectorAll('button[data-validate]'); const fields = doc.querySelectorAll('.ibexa-field-edit'); + const autosaveNode = doc.querySelector('.ibexa-autosave'); const getValidationResults = (validator) => { const isValid = validator.isValid(); const validatorName = validator.constructor.name; @@ -130,31 +131,35 @@ return ibexa.adminUiConfig.autosave.enabled && form.querySelector('[name="ezplatform_content_forms_content_edit[autosave]"]'); }; - if (isAutosaveEnabled()) { - const AUTOSAVE_SUBMIT_BUTTON_NAME = 'ezplatform_content_forms_content_edit[autosave]'; - const autosave = doc.querySelector('.ibexa-autosave'); - const autosaveStatusSavedNode = autosave.querySelector('.ibexa-autosave__status-saved'); - let currentAutosaveStatus = autosave.classList.contains('ibexa-autosave--on') ? STATUS_ON : STATUS_OFF; + if (autosaveNode) { + let currentAutosaveStatus = autosaveNode.classList.contains('ibexa-autosave--on') ? STATUS_ON : STATUS_OFF; + let isAutosaveSimple = autosaveNode.classList.contains('ibexa-autosave--simple'); + const tooltipInstance = bootstrap.Tooltip.getOrCreateInstance(autosaveNode); const generateCssStatusClass = (status) => `ibexa-autosave--${status}`; const setAutosaveStatus = (newStatus) => { - if (!autosave) { - return; - } - const oldCssStatusClass = generateCssStatusClass(currentAutosaveStatus); const newCssStatusClass = generateCssStatusClass(newStatus); - autosave.classList.remove(oldCssStatusClass); - autosave.classList.remove('ibexa-autosave--saved'); - autosave.classList.add(newCssStatusClass); + autosaveNode.classList.remove(oldCssStatusClass); + autosaveNode.classList.remove('ibexa-autosave--saved'); + autosaveNode.classList.add(newCssStatusClass); currentAutosaveStatus = newStatus; + setAutosaveTooltipContent(); }; - const setDraftSavedMessage = () => { - if (!autosave) { - return; - } - + const setAutosaveTooltipContent = () => { + const statusMsgFromNode = autosaveNode.querySelector(`.ibexa-autosave__status--${currentAutosaveStatus}`).innerText; + const tooltipContent = isAutosaveSimple + ? statusMsgFromNode + : Translator.trans( + /*@Desc("You can turn autosave off in your user settings")*/ 'content.autosave.turn_off.message', + {}, + 'ibexa_content', + ); + + tooltipInstance.setContent({ '.tooltip-inner': tooltipContent }); + }; + const setDraftSavedMessage = (autosaveStatusSavedNode) => { const userPreferredTimezone = ibexa.adminUiConfig.timezone; const saveDate = ibexa.helpers.timezone.convertDateToTimezone(new Date(), userPreferredTimezone); const saveTime = moment(saveDate).formatICU('HH:mm'); @@ -165,25 +170,41 @@ ); autosaveStatusSavedNode.innerHTML = saveMessage; - autosave.classList.add('ibexa-autosave--saved'); + autosaveNode.classList.add('ibexa-autosave--saved'); }; - setInterval(() => { - const formData = new FormData(form); - - formData.set(AUTOSAVE_SUBMIT_BUTTON_NAME, true); - setAutosaveStatus(STATUS_SAVING); - - fetch(form.target || window.location.href, { method: 'POST', body: formData }) - .then(ibexa.helpers.request.getStatusFromResponse) - .then(() => { - setAutosaveStatus(STATUS_SAVED); - setDraftSavedMessage(); - }) - .catch(() => { - setAutosaveStatus(STATUS_ERROR); - }); - }, ibexa.adminUiConfig.autosave.interval); + setAutosaveTooltipContent(); + + doc.body.addEventListener('ibexa:edit-content-change-header-size', ({ detail }) => { + isAutosaveSimple = detail.isHeaderSlim; + autosaveNode.classList.toggle('ibexa-autosave--simple', isAutosaveSimple); + setAutosaveTooltipContent(); + }); + + if (isAutosaveEnabled()) { + const AUTOSAVE_SUBMIT_BUTTON_NAME = 'ezplatform_content_forms_content_edit[autosave]'; + const autosaveStatusSavedNode = autosaveNode.querySelector('.ibexa-autosave__status--saved'); + + setInterval(() => { + const formData = new FormData(form); + + formData.set(AUTOSAVE_SUBMIT_BUTTON_NAME, true); + setAutosaveStatus(STATUS_SAVING); + + fetch(form.target || window.location.href, { method: 'POST', body: formData }) + .then(ibexa.helpers.request.getStatusFromResponse) + .then(() => { + setAutosaveStatus(STATUS_SAVED); + setDraftSavedMessage(autosaveStatusSavedNode); + }) + .catch(() => { + setAutosaveStatus(STATUS_ERROR); + }) + .finally(() => { + setAutosaveTooltipContent(); + }); + }, ibexa.adminUiConfig.autosave.interval); + } } form.setAttribute('novalidate', true); @@ -204,4 +225,4 @@ menuButtonsToValidate.forEach((btn) => { btn.addEventListener('click', validateHandler, false); }); -})(window, window.document, window.ibexa, window.Translator, window.moment); +})(window, window.document, window.ibexa, window.Translator, window.bootstrap, window.moment); diff --git a/src/bundle/Resources/public/js/scripts/edit.header.js b/src/bundle/Resources/public/js/scripts/edit.header.js index 7e852a5ca9..67559f9d52 100644 --- a/src/bundle/Resources/public/js/scripts/edit.header.js +++ b/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,10 @@ return; } - const headerBottomRowNode = headerNode.querySelector('.ibexa-edit-header__row--bottom'); + const detailsContainer = headerNode.querySelector('.ibexa-edit-header__container--details'); const { height: expandedHeaderHeight } = headerNode.getBoundingClientRect(); const scrolledContent = doc.querySelector('.ibexa-edit-content > :first-child'); const { controlManyZIndexes } = 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,17 +25,16 @@ const shouldHeaderBeSlim = scrollTop > SCROLL_POSITION_TO_FIT; headerNode.classList.toggle('ibexa-edit-header--slim', shouldHeaderBeSlim); - - if (shouldHeaderBeSlim) { - fitEllipsizedTitle(); - } else { - headerBottomRowNode.style.width = '100%'; - } + doc.body.dispatchEvent( + new CustomEvent('ibexa:edit-content-change-header-size', { + detail: { isHeaderSlim: shouldHeaderBeSlim }, + }), + ); }; const items = [{ container: headerNode }]; - if (headerBottomRowNode) { - items.push({ container: headerBottomRowNode }); + if (detailsContainer) { + items.push({ container: detailsContainer }); } contentNode.addEventListener('scroll', fitHeader, false); diff --git a/src/bundle/Resources/public/scss/_autosave.scss b/src/bundle/Resources/public/scss/_autosave.scss index 2094ebf03b..6c572925dc 100644 --- a/src/bundle/Resources/public/scss/_autosave.scss +++ b/src/bundle/Resources/public/scss/_autosave.scss @@ -18,22 +18,22 @@ $states: 'error', 'off', 'on', 'saved', 'saving'; @each $state in $states { - &__icon-#{$state} { + &__icon--#{$state} { margin-right: calculateRem(8px); } - &__status-#{$state} { + &__status--#{$state} { white-space: nowrap; } - &__icon-#{$state}, - &__status-#{$state} { + &__icon--#{$state}, + &__status--#{$state} { display: none; } &--#{$state} { - .ibexa-autosave__icon-#{$state}, - .ibexa-autosave__status-#{$state} { + .ibexa-autosave__icon--#{$state}, + .ibexa-autosave__status--#{$state} { display: initial; } } @@ -42,8 +42,20 @@ &--error { color: $ibexa-color-danger; - .ibexa-autosave__icon-error { + .ibexa-autosave__icon--error { fill: $ibexa-color-danger; } } + + &--simple { + .ibexa-autosave { + &__status { + display: none; + } + + &__icon { + margin: 0; + } + } + } } diff --git a/src/bundle/Resources/public/scss/_edit-header.scss b/src/bundle/Resources/public/scss/_edit-header.scss index 660cfa8f8d..237d30da9b 100644 --- a/src/bundle/Resources/public/scss/_edit-header.scss +++ b/src/bundle/Resources/public/scss/_edit-header.scss @@ -1,92 +1,93 @@ .ibexa-edit-header { - display: flex; - flex-direction: column; background-color: $ibexa-color-white; - border-width: calculateRem(1px) calculateRem(1px) 0; border-style: solid; border-color: $ibexa-color-light-400; + border-width: calculateRem(1px) calculateRem(1px) 0; border-top-left-radius: $ibexa-border-radius; border-top-right-radius: $ibexa-border-radius; - transition: - all $ibexa-admin-transition-duration $ibexa-admin-transition, - border-bottom-width 0; + transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; + border-bottom-width: 0; z-index: 1050; - &__container { + &__containers { display: flex; - flex-direction: column; + flex-wrap: wrap; + row-gap: calculateRem(16px); padding: calculateRem(24px) calculateRem(32px); border-bottom: calculateRem(1px) solid $ibexa-color-light; } - &__title { - display: flex; - margin: 0; - } + &__container { + &--info-bar { + flex: 0 0 40%; + max-width: 40%; + box-sizing: border-box; + } - &__name { - &--ellipsized { - display: none; + &--context-actions { + flex: 0 0 60%; + max-width: 60%; + box-sizing: border-box; } - &--full { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - white-space: normal; + &--details { + flex: 0 0 100%; max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; + box-sizing: border-box; } } - &__row { + &__title-section { display: flex; - flex-wrap: nowrap; - transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; + align-items: center; + width: fit-content; + max-width: 100%; + margin: 0; + } - &--top { - height: calculateRem(48px); - margin-bottom: calculateRem(16px); + &__title { + flex: 1 1 0%; + min-width: 0; + margin-bottom: calculateRem(4px); + overflow: hidden; + white-space: nowrap; + } - .ibexa-edit-header__title { - height: 0; - opacity: 0; - } - } + &__after-title { + flex: 0 0 auto; + white-space: nowrap; + } - &--bottom { - flex-direction: column; - min-width: 60%; - } + &__subtitle { + margin-top: calculateRem(4px); + font-size: $ibexa-text-font-size-medium; + transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; } - &__column { - position: static; + &__info-bar { + display: flex; + align-items: center; + height: calculateRem(48px); - &--main { - display: flex; - flex-direction: column; - justify-content: center; - white-space: nowrap; - padding-left: 0; - align-self: flex-start; + & > div:not(:empty) { + height: calculateRem(26px); + padding: 0 calculateRem(8px); + border-left: calculateRem(1px) solid $ibexa-color-light; - .ibexa-icon { - margin-right: calculateRem(8px); - fill: $ibexa-color-dark-400; + &:first-child { + border: none; + padding-left: 0; } - } - } - &__context-actions { - display: flex; - width: 100%; - } + &:last-child { + padding-right: 0; + } + } - &__info-bar { - display: flex; - transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; + .ibexa-icon { + margin-right: calculateRem(8px); + fill: $ibexa-color-dark-400; + } } &__info-bar-action-type { @@ -96,32 +97,14 @@ &__action-name { color: $ibexa-color-dark-400; - opacity: 1; - transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; margin: 0; } - &__subtitle { - margin-top: calculateRem(4px); - font-size: $ibexa-text-font-size-medium; - opacity: 1; - transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; - } - - &__separate-div { - position: relative; - z-index: 1; - width: 100%; - height: calculateRem(1px); - background: $ibexa-color-light; - transform: scaleX(0); - transition-duration: $ibexa-admin-transition-duration; - } - &__meta { display: flex; flex-direction: row; gap: calculateRem(4px); + transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; } &__meta-item { @@ -136,66 +119,63 @@ border: calculateRem(1px) solid $ibexa-color-light-600; } - &__extra-bottom-content { + &__details-extra-content { margin-top: calculateRem(10px); } - .ibexa-autosave { - display: flex; - border-left: calculateRem(1px) solid $ibexa-color-light; - padding-left: calculateRem(12px); - margin-left: calculateRem(12px); - } - &--slim { &.ibexa-edit-header--has-extra-content { border-bottom: calculateRem(1px) solid $ibexa-color-light; } .ibexa-edit-header { - &__row { - &--bottom { - z-index: 1; - min-width: initial; - margin-top: calculateRem(-34px); - min-height: initial; - } + &__containers { + flex-wrap: nowrap; + align-items: flex-start; + gap: calculateRem(8px); } - &__bottom-row-line { - border-bottom: none; - } + &__container { + &--details { + flex: 0 1 auto; + order: 1; + max-width: calc(50% - calculateRem(16px)); + white-space: nowrap; + overflow: hidden; + } + + &--info-bar { + flex: 0 1 auto; + order: 2; + white-space: nowrap; + } - &__info-bar { - margin-top: calculateRem(-8px); + &--context-actions { + flex: 1 1 0%; + order: 3; + min-width: 0; + margin-left: auto; + } } - &__separate-div { - transform: scaleX(1); + &__info-bar-action-type { + display: none; } - &__subtitle { - opacity: 0; - height: 0; - overflow: hidden; + &__title-section { + height: calculateRem(48px); } &__title { - min-height: calculateRem(34px); + margin-bottom: 0; } + &__subtitle, &__meta { - display: none; - } - - &__name { - &--ellipsized { - display: inline-block; - } - - &--full { - display: none; - } + opacity: 0; + width: 0; + height: 0; + overflow: hidden; } } } diff --git a/src/bundle/Resources/views/themes/admin/ui/component/autosave/autosave.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/autosave/autosave.html.twig index 9c277595ea..69587d184c 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/autosave/autosave.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/autosave/autosave.html.twig @@ -1,38 +1,43 @@ {% trans_default_domain 'ibexa_content' %} +{% set title = is_enabled + ? 'content_edit.autosave.status_off.message'|trans()|desc('Autosave is off, draft not created') + : 'content.autosave.turn_off.message'|trans()|desc('You can turn autosave off in your user settings') +%} +
- + - + - + - + - + -
+
{{ 'content_edit.autosave.status_error.message'|trans()|desc('Saving error') }}
-
+
{{ 'content_edit.autosave.status_off.message'|trans()|desc('Autosave is off, draft not created') }}
-
- {{ 'content_edit.autosave.status_on.message'|trans|desc('Autosave is on, draft created') }} +
+ {{ 'content_edit.autosave.status_on.message'|trans()|desc('Autosave is on, draft created') }}
-
-
+
+
{{ 'content_edit.autosave.status_saving.message'|trans()|desc('Saving') }}
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 2455046436..ae03585d99 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 @@ -5,61 +5,55 @@ {% set is_user_content_type = content_type is defined and content_type.identifier in ibexa_admin_ui_config.userContentTypes %}
-
-
-
-
-
- {% if icon_name is defined %} - - - - {% endif %} +
+
+
+
+ {% if icon_name is defined %} + + + + {% endif %} -
- {{ action_name|default('') }} - {{ action_object|default('') }} - {{ content_type_name|default('') }} -
+
+ {{ action_name|default('') }} + {{ action_object|default('') }} + {{ content_type_name|default('') }}
+
- {% if show_autosave_status|default(false) %} - {% include '@ibexadesign/ui/autosave.html.twig' %} - {% endif %} + {% if show_autosave_status|default(false) %} + {% include '@ibexadesign/ui/autosave.html.twig' %} + {% endif %} - {% block after_action_name %} - {{ ibexa_render_component_group('content-form-edit-header-info-bar-extras', {}) }} - {% endblock %} -
+ {% block after_action_name %} + {{ ibexa_render_component_group('content-form-edit-header-info-bar-extras', {}) }} + {% endblock %}
-
-
- {{ context_actions|default('')|raw }} -
+
+
+
+ {{ context_actions|default('')|raw }}
-
-

- +
+
+

{{ include('@ibexadesign/ui/component/middle_ellipsis/middle_ellipsis.html.twig', { name: title, }) }} - - - {{ title }} - - {% block after_title %}{% endblock %} -

+

+ +
+ {% block after_title %}{% endblock %} +
+
{% if subtitle is defined %}
{{ subtitle }}
{% endif %} - - {# {{ dump(ibexa_admin_ui_config.userContentTypes) }} - {{ dump(content_type.identifier) }} - {% set checkIsMetaVisible = (content is defined and content is not null) %} #} - {% if content is not null and not is_user_content_type %} + {% if content is defined and content is not null %}
@@ -85,11 +79,10 @@ {% endif %} {% if show_extra_bottom_content %} -
+
{{ block('extra_bottom_content') }}
{% endif %}
- diff --git a/src/lib/Behat/Page/ContentUpdateItemPage.php b/src/lib/Behat/Page/ContentUpdateItemPage.php index 88928e5390..430a48e996 100644 --- a/src/lib/Behat/Page/ContentUpdateItemPage.php +++ b/src/lib/Behat/Page/ContentUpdateItemPage.php @@ -105,7 +105,7 @@ public function verifyValidationMessage(string $fieldName, string $expectedMessa protected function specifyLocators(): array { return [ - new VisibleCSSLocator('pageTitle', '.ibexa-edit-header__name--full'), + new VisibleCSSLocator('pageTitle', '.ibexa-edit-header__title .ibexa-middle-ellipsis__name--start .ibexa-middle-ellipsis__name-ellipsized'), new VisibleCSSLocator('formElement', 'form.ibexa-form, .ibexa-edit-content'), new VisibleCSSLocator('nthField', 'div.ibexa-field-edit:nth-of-type(%s)'), new VisibleCSSLocator('nthFieldWithSection', '[data-id="%s"] div.ibexa-field-edit:nth-of-type(%s)'), @@ -114,9 +114,9 @@ protected function specifyLocators(): array new VisibleCSSLocator('fieldOfType', '.ibexa-field-edit--%s'), new VisibleCSSLocator('navigationTabs', '.ibexa-anchor-navigation-menu__sections-item-btn'), new VisibleCSSLocator('navigationGroups', 'li.nav-item'), - new VisibleCSSLocator('autosaveIsOnInfo', '.ibexa-autosave__status-on'), - new VisibleCSSLocator('autosaveSavedInfo', '.ibexa-autosave__status-saved'), - new VisibleCSSLocator('autosaveIsOffInfo', '.ibexa-autosave__status-off'), + new VisibleCSSLocator('autosaveIsOnInfo', '.ibexa-autosave__status--on'), + new VisibleCSSLocator('autosaveSavedInfo', '.ibexa-autosave__status--saved'), + new VisibleCSSLocator('autosaveIsOffInfo', '.ibexa-autosave__status--off'), new VisibleCSSLocator('section', '[data-id="%1$s"] .ibexa-field-edit .ibexa-field-edit__label, [data-id="%1$s"] .ibexa-field-edit--eznoneditable .ibexa-label'), new VisibleCSSLocator('fieldLabel', ' .ibexa-field-edit .ibexa-field-edit__label, .ibexa-field-edit--eznoneditable .ibexa-label'), ]; From ed62918c715932ab8942603f6a541d13e477c98e Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Wed, 10 Sep 2025 07:39:46 +0200 Subject: [PATCH 3/7] After CR --- src/bundle/Resources/public/js/scripts/admin.content.edit.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/bundle/Resources/public/js/scripts/admin.content.edit.js b/src/bundle/Resources/public/js/scripts/admin.content.edit.js index ef62dad3c0..40777830ed 100644 --- a/src/bundle/Resources/public/js/scripts/admin.content.edit.js +++ b/src/bundle/Resources/public/js/scripts/admin.content.edit.js @@ -26,6 +26,7 @@ 'time', 'url', ]; + const { escapeHTML } = ibexa.helpers.text; const form = doc.querySelector('.ibexa-form-validate'); const submitBtns = form.querySelectorAll('[type="submit"]:not([formnovalidate])'); const menuButtonsToValidate = doc.querySelectorAll('button[data-validate]'); @@ -150,7 +151,7 @@ const setAutosaveTooltipContent = () => { const statusMsgFromNode = autosaveNode.querySelector(`.ibexa-autosave__status--${currentAutosaveStatus}`).innerText; const tooltipContent = isAutosaveSimple - ? statusMsgFromNode + ? escapeHTML(statusMsgFromNode) : Translator.trans( /*@Desc("You can turn autosave off in your user settings")*/ 'content.autosave.turn_off.message', {}, From 278968b402d7394a7afe4b144c3aa3a15fc2f5a0 Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Tue, 30 Sep 2025 13:46:31 +0200 Subject: [PATCH 4/7] After QA --- src/bundle/Resources/public/scss/_edit-header.scss | 1 + .../Resources/views/themes/admin/ui/edit_header.html.twig | 7 +------ 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/bundle/Resources/public/scss/_edit-header.scss b/src/bundle/Resources/public/scss/_edit-header.scss index 237d30da9b..d5b5750710 100644 --- a/src/bundle/Resources/public/scss/_edit-header.scss +++ b/src/bundle/Resources/public/scss/_edit-header.scss @@ -51,6 +51,7 @@ margin-bottom: calculateRem(4px); overflow: hidden; white-space: nowrap; + text-overflow: ellipsis; } &__after-title { 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 ae03585d99..bf23084da2 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 @@ -38,12 +38,7 @@
-

- {{ include('@ibexadesign/ui/component/middle_ellipsis/middle_ellipsis.html.twig', { - name: title, - }) }} -

- +

{{ title }}

{% block after_title %}{% endblock %}
From 22c3a97356706975929f5da70893c62824972353 Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Wed, 1 Oct 2025 13:29:42 +0200 Subject: [PATCH 5/7] Fixed browser tests --- src/lib/Behat/Page/ContentUpdateItemPage.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/Behat/Page/ContentUpdateItemPage.php b/src/lib/Behat/Page/ContentUpdateItemPage.php index 430a48e996..bfecdb2c43 100644 --- a/src/lib/Behat/Page/ContentUpdateItemPage.php +++ b/src/lib/Behat/Page/ContentUpdateItemPage.php @@ -105,7 +105,7 @@ public function verifyValidationMessage(string $fieldName, string $expectedMessa protected function specifyLocators(): array { return [ - new VisibleCSSLocator('pageTitle', '.ibexa-edit-header__title .ibexa-middle-ellipsis__name--start .ibexa-middle-ellipsis__name-ellipsized'), + new VisibleCSSLocator('pageTitle', '.ibexa-edit-header__title'), new VisibleCSSLocator('formElement', 'form.ibexa-form, .ibexa-edit-content'), new VisibleCSSLocator('nthField', 'div.ibexa-field-edit:nth-of-type(%s)'), new VisibleCSSLocator('nthFieldWithSection', '[data-id="%s"] div.ibexa-field-edit:nth-of-type(%s)'), From 59a884409340528da81cc8542274563469400fc8 Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Wed, 1 Oct 2025 14:33:58 +0200 Subject: [PATCH 6/7] Fixed browser-test.yaml and ci.yaml --- .github/workflows/browser-tests.yaml | 7 ++++++- .github/workflows/ci.yaml | 14 ++++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/.github/workflows/browser-tests.yaml b/.github/workflows/browser-tests.yaml index 5ed9b960b2..4ec33c05fb 100644 --- a/.github/workflows/browser-tests.yaml +++ b/.github/workflows/browser-tests.yaml @@ -19,6 +19,9 @@ jobs: job-count: 2 timeout: 40 secrets: + AUTOMATION_CLIENT_ID: ${{ secrets.AUTOMATION_CLIENT_ID }} + AUTOMATION_CLIENT_INSTALLATION: ${{ secrets.AUTOMATION_CLIENT_INSTALLATION }} + AUTOMATION_CLIENT_SECRET: ${{ secrets.AUTOMATION_CLIENT_SECRET }} SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} admin-ui-headless: name: "AdminUI-Headless" @@ -65,7 +68,9 @@ jobs: test-setup-phase-1: '--profile=setup --suite=personas --tags=@setup --mode=standard' timeout: 40 secrets: + AUTOMATION_CLIENT_ID: ${{ secrets.AUTOMATION_CLIENT_ID }} + AUTOMATION_CLIENT_INSTALLATION: ${{ secrets.AUTOMATION_CLIENT_INSTALLATION }} + AUTOMATION_CLIENT_SECRET: ${{ secrets.AUTOMATION_CLIENT_SECRET }} SATIS_NETWORK_KEY: ${{ secrets.SATIS_NETWORK_KEY }} SATIS_NETWORK_TOKEN: ${{ secrets.SATIS_NETWORK_TOKEN }} - TRAVIS_GITHUB_TOKEN: ${{ secrets.TRAVIS_GITHUB_TOKEN }} SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index 0212f4458d..85d45c4d61 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -16,6 +16,13 @@ jobs: php: - '8.0' steps: + - uses: actions/create-github-app-token@v2 + id: generate_token + with: + app-id: ${{ secrets.AUTOMATION_CLIENT_ID }} + private-key: ${{ secrets.AUTOMATION_CLIENT_SECRET }} + owner: ${{ github.repository_owner }} + - uses: actions/checkout@v4 - name: Setup PHP Action @@ -47,6 +54,13 @@ jobs: - '8.1' steps: + - uses: actions/create-github-app-token@v2 + id: generate_token + with: + app-id: ${{ secrets.AUTOMATION_CLIENT_ID }} + private-key: ${{ secrets.AUTOMATION_CLIENT_SECRET }} + owner: ${{ github.repository_owner }} + - uses: actions/checkout@v4 - name: Setup PHP Action From b67e84b227628a7a6f34bdbd9cc5c84bf503f26d Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Wed, 1 Oct 2025 15:28:11 +0200 Subject: [PATCH 7/7] Reverted changes for ci.yaml --- .github/workflows/ci.yaml | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index 85d45c4d61..0212f4458d 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -16,13 +16,6 @@ jobs: php: - '8.0' steps: - - uses: actions/create-github-app-token@v2 - id: generate_token - with: - app-id: ${{ secrets.AUTOMATION_CLIENT_ID }} - private-key: ${{ secrets.AUTOMATION_CLIENT_SECRET }} - owner: ${{ github.repository_owner }} - - uses: actions/checkout@v4 - name: Setup PHP Action @@ -54,13 +47,6 @@ jobs: - '8.1' steps: - - uses: actions/create-github-app-token@v2 - id: generate_token - with: - app-id: ${{ secrets.AUTOMATION_CLIENT_ID }} - private-key: ${{ secrets.AUTOMATION_CLIENT_SECRET }} - owner: ${{ github.repository_owner }} - - uses: actions/checkout@v4 - name: Setup PHP Action