From 3fa0ebe2b390a68666949c16de71dda71ab15c5d Mon Sep 17 00:00:00 2001 From: Aleksandra Mickiewicz Date: Wed, 17 Dec 2025 15:19:00 +0100 Subject: [PATCH 1/2] IBX-11010: Improved anchor links and switcher --- .../js/scripts/admin.anchor.navigation.js | 12 +++- .../public/scss/_anchor-navigation.scss | 55 +++++++++++-------- .../Resources/public/scss/_content-edit.scss | 4 ++ .../translations/ibexa_anchor_menu.en.xliff | 5 ++ .../Resources/translations/messages.en.xliff | 45 +++++++-------- .../themes/admin/content/edit/edit.html.twig | 1 + .../themes/admin/content/edit_base.html.twig | 10 +--- .../admin/content_type/edit_base.html.twig | 4 +- .../admin/ui/anchor_navigation_menu.html.twig | 21 ++----- .../views/themes/admin/ui/edit_base.html.twig | 20 +++---- .../admin/ui/menu/anchor_menu.html.twig | 3 + 11 files changed, 92 insertions(+), 88 deletions(-) diff --git a/src/bundle/Resources/public/js/scripts/admin.anchor.navigation.js b/src/bundle/Resources/public/js/scripts/admin.anchor.navigation.js index b00415af16..b817a31a46 100644 --- a/src/bundle/Resources/public/js/scripts/admin.anchor.navigation.js +++ b/src/bundle/Resources/public/js/scripts/admin.anchor.navigation.js @@ -7,6 +7,7 @@ const header = doc.querySelector('.ibexa-edit-header'); const headerContainer = header?.querySelector('.ibexa-edit-header__container'); + const anchorNavigationSwitcher = doc.querySelector('.ibexa-tabs--switcher'); const SECTION_ADJUST_MARGIN_TOP = 36; const formContainerNode = doc.querySelector('.ibexa-edit-content'); const lastSectionObserver = new ResizeObserver(() => { @@ -88,8 +89,15 @@ let firstVisibleSection = visibleSections.find((section) => { const { top, height } = section.getBoundingClientRect(); const headerBottomContainerHeight = header.offsetHeight - headerContainer?.offsetHeight; - - return top + height >= headerContainer?.offsetHeight + headerBottomContainerHeight + SECTION_ADJUST_MARGIN_TOP; + const anchorNavigationSwitcherHeight = anchorNavigationSwitcher?.offsetHeight || 0; + + return ( + top + height >= + headerContainer?.offsetHeight + + headerBottomContainerHeight + + anchorNavigationSwitcherHeight + + SECTION_ADJUST_MARGIN_TOP + ); }); if (!firstVisibleSection) { diff --git a/src/bundle/Resources/public/scss/_anchor-navigation.scss b/src/bundle/Resources/public/scss/_anchor-navigation.scss index 7e046286b9..9d1fb08825 100644 --- a/src/bundle/Resources/public/scss/_anchor-navigation.scss +++ b/src/bundle/Resources/public/scss/_anchor-navigation.scss @@ -3,6 +3,8 @@ .ibexa-anchor-navigation { $self: &; + background-color: $ibexa-color-white; + padding: calculateRem(24px) calculateRem(32px) 0 calculateRem(32px); &__sections { .card { @@ -49,13 +51,10 @@ &__header { height: calculateRem(87px); padding: calculateRem(20px) 0 0 calculateRem(17px); - border-bottom: calculateRem(1px) solid $ibexa-color-light; } &__body { height: calc(100% - #{calculateRem(87px)}); - overflow: auto; - padding: calculateRem(25px); font-size: $ibexa-text-font-size-medium; } @@ -73,39 +72,48 @@ &__sections { min-width: calculateRem(240px); + max-width: calculateRem(240px); list-style: none; display: none; margin: calculateRem(24px) 0 0; - padding: calculateRem(24px) 0 0; - border-top: calculateRem(1px) solid $ibexa-color-light; + position: absolute; + right: calculateRem(30px); + z-index: 1; &--active { display: block; } + } - &--no-border { - border: 0; - margin-top: 0; - padding-top: 0; - } + &__sections-header { + font-size: $ibexa-text-font-size-extra-large; + font-weight: 600; + color: $ibexa-color-primary; + margin: calculateRem(16px) 0; + } + + &__sections-item { + height: calculateRem(32px); } &__sections-item-btn { display: inline-flex; width: 100%; - padding: calculateRem(11px) calculateRem(15px); + padding: 0; border: calculateRem(1px) solid transparent; - border-radius: $ibexa-border-radius; text-align: left; + color: $ibexa-color-dark-400; + align-items: center; + font-weight: 600; + border-left: 1px solid $ibexa-color-light; &::before { content: ''; display: block; - width: calculateRem(8px); - height: calculateRem(8px); - margin: calculateRem(8px) calculateRem(16px) 0 0; - border-radius: 50%; - background-color: $ibexa-color-light; + width: calculateRem(2px); + height: calculateRem(32px); + margin: 0 calculateRem(16px) 0 0; + opacity: 0; } &::after { @@ -119,21 +127,20 @@ } &:hover { - color: $ibexa-color-info; - font-weight: 600; + color: $ibexa-color-primary; &::before { - background-color: $ibexa-color-info; + opacity: 1; + background-color: $ibexa-color-primary; } } &--active { - color: $ibexa-color-info; - background: $ibexa-color-info-100; - font-weight: 600; + color: $ibexa-color-primary; &::before { - background-color: $ibexa-color-info; + opacity: 1; + background-color: $ibexa-color-primary; } } diff --git a/src/bundle/Resources/public/scss/_content-edit.scss b/src/bundle/Resources/public/scss/_content-edit.scss index 74936859d1..a91bfaf812 100644 --- a/src/bundle/Resources/public/scss/_content-edit.scss +++ b/src/bundle/Resources/public/scss/_content-edit.scss @@ -4,6 +4,10 @@ .ibexa-edit-content { @include edit-right-side-container; + &-width-wrapper { + width: calc(100% - calculateRem(300px)); + } + &__container { max-width: calculateRem(820px); diff --git a/src/bundle/Resources/translations/ibexa_anchor_menu.en.xliff b/src/bundle/Resources/translations/ibexa_anchor_menu.en.xliff index f6e555ad7b..0261143efd 100644 --- a/src/bundle/Resources/translations/ibexa_anchor_menu.en.xliff +++ b/src/bundle/Resources/translations/ibexa_anchor_menu.en.xliff @@ -11,6 +11,11 @@ More key: anchor_menu.more + + Sections + Sections + key: anchor_menu.sections + diff --git a/src/bundle/Resources/translations/messages.en.xliff b/src/bundle/Resources/translations/messages.en.xliff index 8bf65a87b5..709ed00552 100644 --- a/src/bundle/Resources/translations/messages.en.xliff +++ b/src/bundle/Resources/translations/messages.en.xliff @@ -6,11 +6,6 @@ The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message. - - Close - Close - key: anchor_navigation.close - Your current password will expire in %days% day(s). You can change it in User settings/My account settings. Your current password will expire in %days% day(s). You can change it in User settings/My account settings. @@ -351,6 +346,16 @@ We’ve sent to your email account a link to reset your password. key: ibexa.forgot_user_password.success.alert + + From + From + key: ibexa.notifications.search_form.label.from + + + To + To + key: ibexa.notifications.search_form.label.to + Email Email @@ -371,6 +376,16 @@ Name key: ibexa_author.name + + Notifications + Notifications + key: ibexa_notifications + + + Mark all as read + Mark all as read + key: ibexa_notifications.btn.mark_all_as_read + Set up a Relation with one or several Items Set up a Relation with one or several Items @@ -396,26 +411,6 @@ Delete key: ibexa_object_relation_list.delete_selected_relations - - From - From - key: ibexa.notifications.search_form.label.from - - - To - To - key: ibexa.notifications.search_form.label.to - - - Notifications - Notifications - key: ibexa_notifications - - - Mark all as read - Mark all as read - key: ibexa_notifications.btn.mark_all_as_read - Delete Delete 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 cfc96fc821..93a62596a0 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 @@ -69,6 +69,7 @@ 'parent_location': parent_location, 'language': language, 'grouped_fields': grouped_fields, + 'title': content.name, }) %} {% embed '@ibexadesign/ui/anchor_navigation_menu.html.twig' with anchor_params %} diff --git a/src/bundle/Resources/views/themes/admin/content/edit_base.html.twig b/src/bundle/Resources/views/themes/admin/content/edit_base.html.twig index f0cfa5ceaa..b8d94750f5 100644 --- a/src/bundle/Resources/views/themes/admin/content/edit_base.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/edit_base.html.twig @@ -17,14 +17,8 @@ {% form_theme form with form_templates %} -{% block left_sidebar %} - {% if without_close_button is not defined or without_close_button != true %} - {% set referrer_location = content is defined and is_published ? location : parent_location %} - {% endif %} - - {% block anchor_menu %} - {% include '@ibexadesign/ui/anchor_navigation_menu.html.twig' with anchor_params %} - {% endblock %} +{% block anchor_menu %} + {% include '@ibexadesign/ui/anchor_navigation_menu.html.twig' with anchor_params %} {% endblock %} {% block content %} diff --git a/src/bundle/Resources/views/themes/admin/content_type/edit_base.html.twig b/src/bundle/Resources/views/themes/admin/content_type/edit_base.html.twig index 100377a5a7..2cc192211f 100644 --- a/src/bundle/Resources/views/themes/admin/content_type/edit_base.html.twig +++ b/src/bundle/Resources/views/themes/admin/content_type/edit_base.html.twig @@ -10,9 +10,9 @@ ] } %} -{% block main_container_class %}{{ parent() }} ibexa-content-type-edit ibexa-main-container--with-anchor-menu-items{% endblock %} +{% block main_container_class %}{{ parent() }} ibexa-content-type-edit ibexa-main-container--without-anchor-menu-items{% endblock %} -{% block left_sidebar %} +{% block anchor_menu %} {% set content_type_edit_anchor_menu = knp_menu_get('ibexa.admin_ui.menu.content_type_edit.anchor_menu', [], { 'content_type': content_type, }) %} diff --git a/src/bundle/Resources/views/themes/admin/ui/anchor_navigation_menu.html.twig b/src/bundle/Resources/views/themes/admin/ui/anchor_navigation_menu.html.twig index def19d1a7e..6e1ef97dd6 100644 --- a/src/bundle/Resources/views/themes/admin/ui/anchor_navigation_menu.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/anchor_navigation_menu.html.twig @@ -1,24 +1,13 @@ -
-
- {% if close_href is defined and close_href is not null %} - - - - - - {{ 'anchor_navigation.close'|trans|desc('Close') }} - - - {% endif %} -
+{% trans_default_domain 'ibexa_anchor_menu' %} +
{% block navigation_menu_body %} {% if items|default([])|length > 1 %}
    +
  • + {{ 'anchor_menu.sections'|trans|desc('Sections') }} +
    • {% for item in items %} {% set item_label = item is iterable ? item.label : item %} {% set sanitized_item = item is iterable and item.target_id is defined ? item.target_id : item_label|lower|slug %} diff --git a/src/bundle/Resources/views/themes/admin/ui/edit_base.html.twig b/src/bundle/Resources/views/themes/admin/ui/edit_base.html.twig index c944b506d6..8ecf0e0541 100644 --- a/src/bundle/Resources/views/themes/admin/ui/edit_base.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/edit_base.html.twig @@ -2,28 +2,26 @@ {% block main_container_class %} ibexa-main-container--edit-container - - {%- set has_anchor_menu_items = anchor_params.items|default([])|length > 1 or ignored_content_fields|default([]) is not empty -%} - {%- set has_anchor_close_btn = anchor_params.close_href|default(null) is not empty -%} - - {{- has_anchor_menu_items ? ' ibexa-main-container--with-anchor-menu-items ' : ' ibexa-main-container--without-anchor-menu-items ' -}} - {{- not has_anchor_close_btn ? ' ibexa-main-container--without-anchor-close-btn ' -}} + ibexa-main-container--without-anchor-menu-items {% endblock %} {% block header_row %}{% endblock %} -{% block left_sidebar %} - {% include '@ibexadesign/ui/anchor_navigation_menu.html.twig' with anchor_params|default({}) %} -{% endblock %} +{% block left_sidebar %}{% endblock %} {% block back_to_top %}{% endblock %} {% block content_column %}
    {% block header %}{% endblock %} - + {% block anchor_menu %} + {% include '@ibexadesign/ui/anchor_navigation_menu.html.twig' with anchor_params|default({}) %} + {% endblock %}
    - {% block content %}{% endblock %} +
    + {% block content %}{% endblock %} +
    +
{% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/menu/anchor_menu.html.twig b/src/bundle/Resources/views/themes/admin/ui/menu/anchor_menu.html.twig index bc7bbecefb..a226ec83fb 100644 --- a/src/bundle/Resources/views/themes/admin/ui/menu/anchor_menu.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/menu/anchor_menu.html.twig @@ -44,6 +44,9 @@ {% endblock %} {% block children_2nd_level %} +
+ {{ 'anchor_menu.sections'|trans|desc('Sections') }} +
{% for item in currentItem.children %} {%- set itemClass = 'ibexa-anchor-navigation-menu__sections-item-btn' %} {%- if loop.first %} From a830e84a8dc89556ad013063839bcd9c30677821 Mon Sep 17 00:00:00 2001 From: Aleksandra Mickiewicz Date: Wed, 17 Dec 2025 15:22:32 +0100 Subject: [PATCH 2/2] Removed unused code --- .../Resources/views/themes/admin/content/edit/edit.html.twig | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 93a62596a0..4a421a9e19 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 @@ -68,8 +68,7 @@ 'location': location, 'parent_location': parent_location, 'language': language, - 'grouped_fields': grouped_fields, - 'title': content.name, + 'grouped_fields': grouped_fields }) %} {% embed '@ibexadesign/ui/anchor_navigation_menu.html.twig' with anchor_params %}