diff --git a/src/bundle/Resources/encore/ibexa.js.config.js b/src/bundle/Resources/encore/ibexa.js.config.js index 1d8f564589..8b24447919 100644 --- a/src/bundle/Resources/encore/ibexa.js.config.js +++ b/src/bundle/Resources/encore/ibexa.js.config.js @@ -55,7 +55,6 @@ const layout = [ path.resolve(__dirname, '../public/js/scripts/autogenerate.identifier.js'), path.resolve(__dirname, '../public/js/scripts/admin.back.to.top.js'), path.resolve(__dirname, '../public/js/scripts/admin.middle.ellipsis.js'), - path.resolve(__dirname, '../public/js/scripts/admin.anchor.sections.navigation'), path.resolve(__dirname, '../public/js/scripts/widgets/flatpickr.js'), ]; const fieldTypes = []; 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 cef0bbdfcf..cf6d6e738b 100644 --- a/src/bundle/Resources/public/js/scripts/admin.anchor.navigation.js +++ b/src/bundle/Resources/public/js/scripts/admin.anchor.navigation.js @@ -1,72 +1,223 @@ -(function (global, doc) { - if (doc.querySelector('.ibexa-navigation-menu')) { +(function (global, doc, ibexa) { + const navigationMenu = doc.querySelector('.ibexa-anchor-navigation-menu'); + + if (!navigationMenu) { return; } - const EDIT_CONTENT_TOP_PADDING = 42; + const header = doc.querySelector('.ibexa-edit-header'); + const headerContainer = header.querySelector('.ibexa-edit-header__container'); + const SECTION_ADJUST_MARGIN_TOP = 20; const formContainerNode = doc.querySelector('.ibexa-edit-content'); - const allSections = [...doc.querySelectorAll('.ibexa-anchor-navigation-sections__section, .ibexa-edit-content__secondary-section')]; - const isVerticalScrollVisible = () => { - const { scrollHeight, offsetHeight } = formContainerNode; + const getSectionGroupActiveItems = () => { + const sectionGroupNode = formContainerNode.querySelector('.ibexa-anchor-navigation__section-group') ?? formContainerNode; + const sections = sectionGroupNode.querySelectorAll('.ibexa-anchor-navigation__section'); + + return [...sections]; + }; + let currentlyVisibleSections = getSectionGroupActiveItems(); + const attachSectionGroupsMenuListEvents = () => { + const items = doc.querySelectorAll( + '.ibexa-anchor-navigation-menu__section-groups--list .ibexa-anchor-navigation-menu__section-groups-item', + ); - return scrollHeight > offsetHeight; + items.forEach((item) => item.addEventListener('click', onSelectSectionGroupsMenuList, false)); }; - const removeStartingHashChar = (sectionId) => { - if (sectionId && sectionId[0] === '#') { - return sectionId.slice(1); + const attachSectionGroupsMenuDropdownEvents = () => { + const sourceSelect = doc.querySelector( + '.ibexa-anchor-navigation-menu__section-groups--dropdown .ibexa-dropdown__source .ibexa-input', + ); + + if (!sourceSelect) { + return; } - return sectionId; + sourceSelect.addEventListener('change', onSelectSectionGroupsMenuDropdown, false); }; - const showSection = (sectionId) => { - doc.querySelectorAll('.ibexa-anchor-navigation-menu__item-btn').forEach((btn) => { - const { anchorTargetSectionId } = btn.dataset; + const onSelectSectionGroupsMenuList = (event) => { + const { targetId } = event.currentTarget.dataset; + const sectionsMenuNode = doc.querySelector(`.ibexa-anchor-navigation-menu__sections[data-id="${targetId}"]`); + const sectionGroupsMenuItems = doc.querySelectorAll( + '.ibexa-anchor-navigation-menu__section-groups--list .ibexa-anchor-navigation-menu__section-groups-item', + ); - btn.classList.toggle( - 'ibexa-anchor-navigation-menu__item-btn--active', - removeStartingHashChar(anchorTargetSectionId) === removeStartingHashChar(sectionId), - ); + sectionGroupsMenuItems.forEach((item) => { + item.classList.toggle('ibexa-anchor-navigation-menu__section-groups-item--active', item.isSameNode(event.currentTarget)); }); + showSectionGroup(targetId); + showSectionsMenu(sectionsMenuNode); }; - const navigateTo = (event) => { - const { anchorTargetSectionId } = event.currentTarget.dataset; - const targetSection = [ - ...doc.querySelectorAll('.ibexa-anchor-navigation-sections__section, .ibexa-edit-content__secondary-section'), - ].find((section) => { - const sectionId = section.dataset.id || section.dataset.anchorSectionId; + const onSelectSectionGroupsMenuDropdown = (event) => { + const targetId = event.currentTarget.value; + const sectionsMenuNode = doc.querySelector(`.ibexa-anchor-navigation-menu__sections[data-id="${targetId}"]`); - return removeStartingHashChar(sectionId) === removeStartingHashChar(anchorTargetSectionId); + showSectionGroup(targetId); + showSectionsMenu(sectionsMenuNode); + }; + const showSectionsMenu = (node) => { + const items = doc.querySelectorAll('.ibexa-anchor-navigation-menu__sections'); + + items.forEach((item) => item.classList.toggle('ibexa-anchor-navigation-menu__sections--active', item.isSameNode(node))); + }; + const showSectionGroup = (id) => { + const sectionGroupItems = formContainerNode.querySelectorAll('.ibexa-anchor-navigation__section-group'); + + sectionGroupItems.forEach((item) => { + item.classList.toggle('ibexa-anchor-navigation__section-group--active', item.dataset.id === id); }); - if (isVerticalScrollVisible()) { - formContainerNode.scrollTo({ - top: targetSection.offsetTop + EDIT_CONTENT_TOP_PADDING, - behavior: 'smooth', - }); - } else { - showSection(anchorTargetSectionId); + currentlyVisibleSections = getSectionGroupActiveItems(); + + fitSections(); + }; + const attachSectionsMenuEvents = () => { + const items = doc.querySelectorAll('.ibexa-anchor-navigation-menu .ibexa-anchor-navigation-menu__sections-item-btn'); + + items.forEach((item) => item.addEventListener('click', onSelectSectionsMenu, false)); + }; + const onSelectSectionsMenu = (event) => { + const { targetId } = event.currentTarget.dataset; + + navigateTo(targetId); + }; + const navigateTo = (targetId) => { + const sectionNode = formContainerNode.querySelector(`.ibexa-anchor-navigation__section[data-id="${targetId}"]`); + + formContainerNode.scrollTo({ + top: sectionNode.offsetTop, + behavior: 'smooth', + }); + }; + const getFirstSection = (sectionGroup) => { + return sectionGroup.querySelector('.ibexa-anchor-navigation__section'); + }; + const getLastSection = (sectionGroup) => { + const sections = [...sectionGroup.querySelectorAll('.ibexa-anchor-navigation__section')]; + + return sections[sections.length - 1]; + }; + const fitSections = () => { + const sectionGroup = + formContainerNode.querySelector('.ibexa-anchor-navigation__section-group--active') ?? + formContainerNode.querySelector('.ibexa-anchor-navigation-sections'); + + if (!sectionGroup) { + return; + } + + const contentColumn = doc.querySelector('.ibexa-main-container__content-column'); + const firstSection = getFirstSection(sectionGroup); + const lastSection = getLastSection(sectionGroup); + + if (!firstSection) { + return; + } + + const contentContainer = lastSection.closest('.ibexa-edit-content__container'); + + contentContainer.style.paddingBottom = '0px'; + + if (!firstSection.isSameNode(lastSection) && lastSection.offsetHeight) { + const heightFromLastSection = contentContainer.offsetHeight + contentContainer.offsetTop - lastSection.offsetTop; + const contentColumnBodyHeight = contentColumn.offsetHeight - headerContainer.offsetHeight; + const heightDiff = contentColumnBodyHeight - heightFromLastSection; + + if (heightDiff > 0) { + contentContainer.style.paddingBottom = `${heightDiff}px`; + } } }; + const attachScrollContainerEvents = () => { + const allSections = [...formContainerNode.querySelectorAll('.ibexa-anchor-navigation__section')]; + let previousFirstVisibleSection = null; + + if (formContainerNode && allSections.length) { + formContainerNode.addEventListener('scroll', () => { + let firstVisibleSection = currentlyVisibleSections.find((section) => { + const { top, height } = section.getBoundingClientRect(); + const headerBottomContainerHeight = header.offsetHeight - headerContainer.offsetHeight; - doc.querySelectorAll('.ibexa-anchor-navigation-menu__item-btn').forEach((btn) => { - btn.addEventListener('click', navigateTo, false); - }); + return top + height >= headerContainer.offsetHeight + headerBottomContainerHeight + SECTION_ADJUST_MARGIN_TOP; + }); - if (formContainerNode && allSections.length) { - formContainerNode.addEventListener('scroll', () => { - const position = formContainerNode.scrollTop; - const activeSection = allSections.find((section) => { - const start = section.offsetTop; - const end = section.offsetHeight + section.offsetTop; + if (!firstVisibleSection) { + firstVisibleSection = currentlyVisibleSections.at(-1); + } - return position >= start && position < end; + if (previousFirstVisibleSection === firstVisibleSection) { + return; + } + + previousFirstVisibleSection = firstVisibleSection; + + const targetId = firstVisibleSection.dataset.id; + const secondaryMenuNode = doc.querySelector( + `.ibexa-anchor-navigation-menu__sections--active .ibexa-anchor-navigation-menu__sections-item-btn[data-target-id="${targetId}"]`, + ); + + setActiveSecondaryMenu(secondaryMenuNode); }); + } + }; + const setActiveSecondaryMenu = (node) => { + const secondaryMenuItems = doc.querySelectorAll( + '.ibexa-anchor-navigation-menu__sections--active .ibexa-anchor-navigation-menu__sections-item-btn', + ); - if (activeSection) { - const activeSectionId = activeSection.dataset.id ?? activeSection.dataset.anchorSectionId; + secondaryMenuItems.forEach((item) => { + item.classList.toggle('ibexa-anchor-navigation-menu__sections-item-btn--active', item.isSameNode(node)); + }); + }; + const attachListenForIsInvalidClass = () => { + const classChangedCallback = (mutationList) => { + mutationList.forEach((mutation) => { + const { oldValue, target } = mutation; + const hadIsInvalidClass = oldValue.includes('.is-invalid'); + const hasIsInvalidClass = target.classList.contains('is-invalid'); - showSection(activeSectionId); - } + if (hadIsInvalidClass !== hasIsInvalidClass) { + const sectionGroup = target.closest('.ibexa-anchor-navigation__section-group'); + + if (!sectionGroup) { + return; + } + + const { id } = sectionGroup.dataset; + const hasGroupError = !!sectionGroup.querySelector('.is-invalid'); + const correspondingMenuItem = + doc.querySelector(`.ibexa-anchor-navigation-menu__section-groups-item[data-target-id="${id}"]`) ?? + doc.querySelector(`.ibexa-anchor-navigation-menu .ibexa-dropdown__item[data-value="${id}"]`); + const errorIconNode = correspondingMenuItem.querySelector('.ibexa-anchor-navigation-menu__item-error'); + const dropdownWidget = doc.querySelector('.ibexa-anchor-navigation-menu .ibexa-dropdown'); + + errorIconNode.classList.toggle('ibexa-anchor-navigation-menu__item-error--hidden', !hasGroupError); + + if (dropdownWidget) { + const hasError = !!dropdownWidget.querySelector( + '.ibexa-anchor-navigation-menu__item-error:not(ibexa-anchor-navigation-menu__item-error--hidden)', + ); + const errorDropdownContainer = doc.querySelector('.ibexa-anchor-navigation-menu__error'); + + errorDropdownContainer.classList.toggle('ibexa-anchor-navigation-menu__error--hidden', !hasError); + } + } + }); + }; + const observer = new MutationObserver(classChangedCallback); + + observer.observe(formContainerNode, { + subtree: true, + attributes: true, + attributeFilter: ['class'], + attributeOldValue: true, }); - } -})(window, window.document); + }; + + attachSectionGroupsMenuListEvents(); + attachSectionGroupsMenuDropdownEvents(); + attachSectionsMenuEvents(); + attachScrollContainerEvents(); + attachListenForIsInvalidClass(); + fitSections(); + ibexa.helpers.tooltips.parse(navigationMenu); +})(window, window.document, window.ibexa); diff --git a/src/bundle/Resources/public/js/scripts/admin.anchor.sections.navigation.js b/src/bundle/Resources/public/js/scripts/admin.anchor.sections.navigation.js index 04e05ea009..7a939ed7d6 100644 --- a/src/bundle/Resources/public/js/scripts/admin.anchor.sections.navigation.js +++ b/src/bundle/Resources/public/js/scripts/admin.anchor.sections.navigation.js @@ -1,168 +1,5 @@ -(function (global, doc, ibexa) { - const navigationMenu = doc.querySelector('.ibexa-navigation-menu'); - - if (!navigationMenu) { - return; - } - - const SECTION_ADJUST_MARGIN_TOP = 20; - const CONTENT_PADDING_TOP = 42; - const formContainerNode = doc.querySelector('.ibexa-edit-content'); - const getSecondarySectionActiveItems = () => { - const secondarySectionItems = formContainerNode.querySelectorAll( - '.ibexa-edit-content__primary-section--active .ibexa-edit-content__secondary-section', - ); - - return [...secondarySectionItems]; - }; - let currentlyVisibleSections = getSecondarySectionActiveItems(); - const getFirstSection = (sectionGroup) => { - return sectionGroup.querySelector('.ibexa-edit-content__secondary-section'); - }; - const getLastSection = (sectionGroup) => { - const sections = [...sectionGroup.querySelectorAll('.ibexa-edit-content__secondary-section')]; - - return sections[sections.length - 1]; - }; - const fitSecondarySections = () => { - const primarySection = doc.querySelector('.ibexa-edit-content__primary-section--active'); - const contentColumn = doc.querySelector('.ibexa-main-container__content-column'); - const firstSection = getFirstSection(primarySection); - const lastSection = getLastSection(primarySection); - const contentContainer = contentColumn.querySelector('.ibexa-edit-content__container'); - - contentContainer.style.paddingBottom = '0px'; - - if (!firstSection.isSameNode(lastSection) && lastSection.offsetHeight) { - const headerContainer = doc.querySelector('.ibexa-edit-header__container'); - const heightFromLastSection = contentContainer.offsetHeight - lastSection.offsetTop; - const contentColumnBodyHeight = contentColumn.offsetHeight - headerContainer.offsetHeight; - const heightDiff = contentColumnBodyHeight - heightFromLastSection; - - if (heightDiff > 0) { - contentContainer.style.paddingBottom = `${heightDiff}px`; - } - } - }; - const navigateTo = (targetId) => { - const secondarySectionNode = formContainerNode.querySelector(`.ibexa-edit-content__secondary-section[data-id="${targetId}"]`); - - formContainerNode.scrollTo({ - top: secondarySectionNode.offsetTop + CONTENT_PADDING_TOP, - behavior: 'smooth', - }); - }; - const setActiveSecondaryMenu = (node) => { - const secondaryMenuItems = doc.querySelectorAll( - '.ibexa-navigation-menu__secondary--active .ibexa-navigation-menu__secondary-item-btn', - ); - - secondaryMenuItems.forEach((item) => { - item.classList.toggle('ibexa-navigation-menu__secondary-item-btn--active', item.isSameNode(node)); - }); - }; - const showPrimarySection = (id) => { - const primarySectionItems = formContainerNode.querySelectorAll('.ibexa-edit-content__primary-section'); - - primarySectionItems.forEach((item) => { - item.classList.toggle('ibexa-edit-content__primary-section--active', item.dataset.id === id); - }); - - currentlyVisibleSections = getSecondarySectionActiveItems(); - - fitSecondarySections(); - }; - const showSecondaryMenu = (node) => { - const items = doc.querySelectorAll('.ibexa-navigation-menu__secondary'); - - items.forEach((item) => item.classList.toggle('ibexa-navigation-menu__secondary--active', item.isSameNode(node))); - }; - const onSelectPrimaryMenuList = (event) => { - const { targetId } = event.currentTarget.dataset; - const secondaryMenuNode = doc.querySelector(`.ibexa-navigation-menu__secondary[data-id="${targetId}"]`); - const primaryMenuItems = doc.querySelectorAll('.ibexa-navigation-menu__primary--list .ibexa-navigation-menu__primary-item'); - - primaryMenuItems.forEach((item) => { - item.classList.toggle('ibexa-navigation-menu__primary-item--active', item.isSameNode(event.currentTarget)); - }); - showPrimarySection(targetId); - - if (secondaryMenuNode) { - showSecondaryMenu(secondaryMenuNode); - } - }; - const onSelectPrimaryMenuDropdown = (event) => { - const targetId = event.currentTarget.value; - const secondaryMenuNode = doc.querySelector(`.ibexa-navigation-menu__secondary[data-id="${targetId}"]`); - - showPrimarySection(targetId); - - if (secondaryMenuNode) { - showSecondaryMenu(secondaryMenuNode); - } - }; - const onSelectSecondaryMenu = (event) => { - const { targetId } = event.currentTarget.dataset; - - navigateTo(targetId); - }; - const attachPrimaryMenuListEvents = () => { - const items = doc.querySelectorAll('.ibexa-navigation-menu__primary--list .ibexa-navigation-menu__primary-item'); - - items.forEach((item) => item.addEventListener('click', onSelectPrimaryMenuList, false)); - }; - const attachPrimaryMenuDropdownEvents = () => { - const sourceSelect = doc.querySelector('.ibexa-navigation-menu__primary--dropdown .ibexa-dropdown__source .ibexa-input'); - - if (!sourceSelect) { - return; - } - - sourceSelect.addEventListener('change', onSelectPrimaryMenuDropdown, false); - }; - const attachSecondaryMenuEvents = () => { - const items = doc.querySelectorAll('.ibexa-navigation-menu .ibexa-navigation-menu__secondary-item-btn'); - - items.forEach((item) => item.addEventListener('click', onSelectSecondaryMenu, false)); - }; - const attachScrollContainerEvents = () => { - const allSections = [...formContainerNode.querySelectorAll('.ibexa-edit-content__secondary-section')]; - const headerContainer = doc.querySelector('.ibexa-edit-header__container'); - let previousFirstVisibleSection = null; - - if (formContainerNode && allSections.length) { - formContainerNode.addEventListener('scroll', () => { - let firstVisibleSection = currentlyVisibleSections.find((section) => { - const { top, height } = section.getBoundingClientRect(); - - return top + height >= headerContainer.offsetHeight + SECTION_ADJUST_MARGIN_TOP; - }); - - if (!firstVisibleSection) { - firstVisibleSection = currentlyVisibleSections.at(-1); - } - - if (previousFirstVisibleSection === firstVisibleSection) { - return; - } - - previousFirstVisibleSection = firstVisibleSection; - - const targetId = firstVisibleSection.dataset.id; - - const secondaryMenuNode = doc.querySelector( - `.ibexa-navigation-menu__secondary--active .ibexa-navigation-menu__secondary-item-btn[data-target-id="${targetId}"]`, - ); - - setActiveSecondaryMenu(secondaryMenuNode); - }); - } - }; - - attachPrimaryMenuListEvents(); - attachPrimaryMenuDropdownEvents(); - attachSecondaryMenuEvents(); - attachScrollContainerEvents(); - fitSecondarySections(); - ibexa.helpers.tooltips.parse(navigationMenu); -})(window, window.document, window.ibexa); +(function () { + // depraacted, will be removed in 5.0 + // code that was in this file was mostly moved and unified with admin.anchor.navigation.js + console.warn('admin.anchor.sections.navigation.js has been depracted in favor for admin.anchor.navigation.js'); +})(); diff --git a/src/bundle/Resources/public/scss/_anchor-navigation.scss b/src/bundle/Resources/public/scss/_anchor-navigation.scss index 4813dc0b2c..5220be1455 100644 --- a/src/bundle/Resources/public/scss/_anchor-navigation.scss +++ b/src/bundle/Resources/public/scss/_anchor-navigation.scss @@ -1,3 +1,19 @@ +.ibexa-anchor-navigation { + &__section-group { + display: none; + + &--active { + display: block; + } + } + + &__sections { + .card { + position: unset; + } + } +} + .ibexa-anchor-navigation-menu { &__header { height: calculateRem(87px); @@ -8,19 +24,61 @@ &__body { height: calc(100% - #{calculateRem(87px)}); overflow: auto; + padding: calculateRem(25px); + font-size: $ibexa-text-font-size-medium; } &__close { font-weight: 600; } - &__items { - margin: 0; - padding: calculateRem(16px); + &__section-groups { + min-width: calculateRem(350px); + max-width: calculateRem(400px); + width: 25vw; + height: calculateRem(48px); + + &--list { + padding: calculateRem(4px); + border-radius: $ibexa-border-radius; + background-color: $ibexa-color-light-300; + display: flex; + } + } + + &__section-groups-item { + height: calculateRem(40px); + padding: calculateRem(10px); + border-radius: $ibexa-border-radius; + border: 0; + flex-basis: 100%; + text-align: center; + overflow: hidden; + + &--active { + background-color: $ibexa-color-white; + font-weight: 600; + } + } + + &__sections { + min-width: calculateRem(240px); list-style: none; + display: none; + padding-left: 0; + + &:not(:first-child) { + margin: calculateRem(24px) 0 0; + padding: calculateRem(24px) 0 0; + border-top: calculateRem(1px) solid $ibexa-color-light; + } + + &--active { + display: block; + } } - &__item-btn { + &__sections-item-btn { display: inline-flex; width: 100%; padding: calculateRem(11px) calculateRem(15px); @@ -52,7 +110,7 @@ color: $ibexa-color-info; font-weight: 600; - &:before { + &::before { background-color: $ibexa-color-info; } } @@ -62,19 +120,39 @@ background: $ibexa-color-info-100; font-weight: 600; - &:before { + &::before { background-color: $ibexa-color-info; } } &--invalid { - &:after { + &::after { opacity: 1; } } } - &__item-btn-label { + &__sections-item-label { max-width: calc(100% - #{calculateRem(45px)}); } + + &__item-label { + text-overflow: ellipsis; + overflow: hidden; + } + + &__item-error { + margin-top: calculateRem(-3px); + fill: $ibexa-color-danger; + + &--hidden { + display: none; + } + } + + &__error { + &--hidden { + display: none; + } + } } diff --git a/src/bundle/Resources/public/scss/_content-edit.scss b/src/bundle/Resources/public/scss/_content-edit.scss index f05c3da525..210616d651 100644 --- a/src/bundle/Resources/public/scss/_content-edit.scss +++ b/src/bundle/Resources/public/scss/_content-edit.scss @@ -8,12 +8,4 @@ max-width: calculateRem(1600px); } } - - &__primary-section { - display: none; - - &--active { - display: block; - } - } } diff --git a/src/bundle/Resources/public/scss/_main-container.scss b/src/bundle/Resources/public/scss/_main-container.scss index 384117ae57..698738d5a5 100644 --- a/src/bundle/Resources/public/scss/_main-container.scss +++ b/src/bundle/Resources/public/scss/_main-container.scss @@ -7,39 +7,12 @@ &__content-column { display: flex; flex-direction: column; - width: 100%; + flex: 1; height: 100%; overflow-y: auto; box-shadow: $ibexa-edit-content-box-shadow; } - &--without-anchor-menu-items { - .ibexa-main-container { - &__side-column { - min-width: calculateRem(240px); - max-width: calculateRem(240px); - } - - &__content-column { - width: 100%; - } - } - } - - &--with-anchor-menu-items { - .ibexa-main-container { - &__side-column { - width: 25%; - min-width: calculateRem(300px); - max-width: calculateRem(400px); - } - - &__content-column { - width: 100%; - } - } - } - &--edit-container { height: 100vh; padding: calculateRem(16px); @@ -47,7 +20,7 @@ .ibexa-main-container { &__side-column { - overflow: hidden; + min-width: calculateRem(240px); border-top-left-radius: $ibexa-border-radius; border-bottom-left-radius: $ibexa-border-radius; background-color: $ibexa-color-light-100; diff --git a/src/bundle/Resources/public/scss/_navigation-menu.scss b/src/bundle/Resources/public/scss/_navigation-menu.scss deleted file mode 100644 index 11d85805ed..0000000000 --- a/src/bundle/Resources/public/scss/_navigation-menu.scss +++ /dev/null @@ -1,102 +0,0 @@ -.ibexa-navigation-menu { - padding: calculateRem(25px); - font-size: $ibexa-text-font-size-medium; - - &__primary { - height: calculateRem(48px); - padding: calculateRem(4px); - border-radius: $ibexa-border-radius; - background-color: $ibexa-color-light-300; - display: flex; - } - - &__primary-item { - height: calculateRem(40px); - padding: calculateRem(10px); - border-radius: $ibexa-border-radius; - border: 0; - flex-basis: 100%; - text-align: center; - overflow: hidden; - - &--active { - background-color: $ibexa-color-white; - font-weight: 600; - } - } - - &__secondary { - margin: calculateRem(24px) 0 0; - padding: calculateRem(24px) 0 0; - list-style: none; - display: none; - border-top: calculateRem(1px) solid $ibexa-color-light; - - &--active { - display: block; - } - } - - &__secondary-item-btn { - display: inline-flex; - width: 100%; - padding: calculateRem(11px) calculateRem(15px); - border: calculateRem(1px) solid transparent; - border-radius: $ibexa-border-radius; - text-align: left; - - &::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; - } - - &::after { - content: '*'; - width: calculateRem(16px); - display: inline-block; - opacity: 0; - margin: calculateRem(4px) 0 0 calculateRem(4px); - color: $ibexa-color-danger; - font-size: $ibexa-text-font-size-small; - } - - &:hover { - color: $ibexa-color-info; - font-weight: 600; - - &::before { - background-color: $ibexa-color-info; - } - } - - &--active { - color: $ibexa-color-info; - background: $ibexa-color-info-100; - font-weight: 600; - - &::before { - background-color: $ibexa-color-info; - } - } - - &--invalid { - &::after { - opacity: 1; - } - } - } - - &__secondary-item-label { - max-width: calc(100% - #{calculateRem(45px)}); - } - - &__item-label { - text-overflow: ellipsis; - overflow: hidden; - } -} diff --git a/src/bundle/Resources/public/scss/ibexa.scss b/src/bundle/Resources/public/scss/ibexa.scss index ee0fa08d7b..f1c14b25a3 100644 --- a/src/bundle/Resources/public/scss/ibexa.scss +++ b/src/bundle/Resources/public/scss/ibexa.scss @@ -118,4 +118,3 @@ @import 'user-group-invitation'; @import 'user-invitation-modal'; @import 'default-location'; -@import 'navigation-menu'; diff --git a/src/bundle/Resources/views/themes/admin/content/components/meta_fields.html.twig b/src/bundle/Resources/views/themes/admin/content/components/meta_fields.html.twig index 83d5566b9c..cb965c7bf9 100644 --- a/src/bundle/Resources/views/themes/admin/content/components/meta_fields.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/components/meta_fields.html.twig @@ -1,10 +1,10 @@ -{% extends '@ibexadesign/ui/component/anchor_navigation/primary_section.html.twig' %} +{% extends '@ibexadesign/ui/component/anchor_navigation/section_group.html.twig' %} {% set data_id = 'ibexa-edit-content-sections-meta' %} {% block sections %} {% for identifier in meta_fields %} - {% embed '@ibexadesign/ui/component/anchor_navigation/secondary_section.html.twig' with {'form': form, 'identifier': identifier} %} + {% embed '@ibexadesign/ui/component/anchor_navigation/section.html.twig' with {'form': form, 'identifier': identifier} %} {% set data_id = 'ibexa-edit-content-sections-meta-' ~ identifier %} {% block content %} {% import '@ibexadesign/content/edit_base.html.twig' as edit_base %} 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 cca91a9171..9d0d597ff6 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 @@ -55,10 +55,10 @@ {% block form %} {{ form_start(form, {'attr': {'class': 'ibexa-form-validate ibexa-form'}}) }} -
+
{% block form_fields %}
@@ -77,7 +77,7 @@ {% endembed %} {% endfor %} {% else %} -
+
{% for identifier, formField in form.fieldsData %} {% if identifier not in ignored_content_fields|default([]) %} {{ _self.renderFormField(formField) }} 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 4533a18b5b..de61726083 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 @@ -18,16 +18,16 @@
{% block navigation_menu_body %} {% if items|default([])|length > 1 %} -
    +
      {% for item in items %} {% set sanitized_item = item|slug %} -
    • +
      • {% endfor %} diff --git a/src/bundle/Resources/views/themes/admin/ui/anchor_navigation_section.html.twig b/src/bundle/Resources/views/themes/admin/ui/anchor_navigation_section.html.twig index 4d8bc446fe..7c6566156d 100644 --- a/src/bundle/Resources/views/themes/admin/ui/anchor_navigation_section.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/anchor_navigation_section.html.twig @@ -1,6 +1,6 @@
      {% block anchor_section_content %} {% block anchor_section_header %}{% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/component/anchor_navigation/secondary_section.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/anchor_navigation/section.html.twig similarity index 61% rename from src/bundle/Resources/views/themes/admin/ui/component/anchor_navigation/secondary_section.html.twig rename to src/bundle/Resources/views/themes/admin/ui/component/anchor_navigation/section.html.twig index 51b867d564..08484b08bd 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/anchor_navigation/secondary_section.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/anchor_navigation/section.html.twig @@ -1,6 +1,6 @@
      {% block content %}{% endblock %}
      diff --git a/src/bundle/Resources/views/themes/admin/ui/component/anchor_navigation/primary_section.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/anchor_navigation/section_group.html.twig similarity index 59% rename from src/bundle/Resources/views/themes/admin/ui/component/anchor_navigation/primary_section.html.twig rename to src/bundle/Resources/views/themes/admin/ui/component/anchor_navigation/section_group.html.twig index 019eba797e..7b1ae9fac5 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/anchor_navigation/primary_section.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/anchor_navigation/section_group.html.twig @@ -1,6 +1,6 @@
      {% block sections %}{% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig index fc8e028d0d..5ad04a46aa 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig @@ -16,6 +16,8 @@ {% set is_disabled = is_disabled|default(false) %} {% set is_selector = is_selector|default(false) %} {% set has_select_all_toggler = has_select_all_toggler|default(false) %} +{% set item_icon = item_icon|default() %} +{% set item_icon_class = item_icon_class|default('') %} {% macro get_translated_label(label, translation_domain) %} {{ translation_domain is same as(false) ? label : label|trans({}, translation_domain) }} @@ -134,6 +136,8 @@ class="ibexa-dropdown__items-list" data-template="{{ include('@ibexadesign/ui/component/dropdown/dropdown_item.html.twig', { custom_form: true, + icon: item_icon, + icon_class: item_icon_class, choice: { value: '{{ value }}', label: '{{ label }}', @@ -148,13 +152,13 @@ {% include '@ibexadesign/ui/component/dropdown/dropdown_item.html.twig' with { choice: placeholder_choice, custom_form: true, icon: 'interface-block' } %} {% endif %} {% for choice in preferred_choices %} - {% include '@ibexadesign/ui/component/dropdown/dropdown_item.html.twig' with { choice, preferred_choice: true, custom_form } %} + {% include '@ibexadesign/ui/component/dropdown/dropdown_item.html.twig' with { choice, preferred_choice: true, custom_form, icon: item_icon, icon_class: item_icon_class } %} {% endfor %} {% if preferred_choices|length > 0 %}
      {% endif %} {% for choice in choices %} - {% include '@ibexadesign/ui/component/dropdown/dropdown_item.html.twig' with { choice, custom_form } %} + {% include '@ibexadesign/ui/component/dropdown/dropdown_item.html.twig' with { choice, custom_form, icon: item_icon, icon_class: item_icon_class } %} {% endfor %}
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig index 73a8383a75..bc9cccefb0 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig @@ -26,7 +26,7 @@ {% endif %} {% if icon is defined %} - + {% endif %} diff --git a/src/bundle/Resources/views/themes/admin/ui/edit_section.html.twig b/src/bundle/Resources/views/themes/admin/ui/edit_section.html.twig index 38f9729e76..cabe0bb56d 100644 --- a/src/bundle/Resources/views/themes/admin/ui/edit_section.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/edit_section.html.twig @@ -2,9 +2,9 @@ {% set attr = attr|default({})|merge({ class: (attr.class|default('') - ~ ' ibexa-anchor-navigation-sections__section' + ~ ' ibexa-anchor-navigation-sections__section ibexa-anchor-navigation__section' )|trim, - 'data-anchor-section-id': section_id, + 'data-id': section_id, }) %}
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 a7efceebb7..2e116deef0 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 @@ -31,11 +31,12 @@ {% block children_1st_level %} {% for item in currentItem.children %} - {%- set itemClass = 'ibexa-navigation-menu__primary-item' %} + {%- set itemClass = 'ibexa-anchor-navigation-menu__section-groups-item' %} {%- if loop.first %} - {%- set itemClass = itemClass ~ ' ibexa-navigation-menu__primary-item--active' %} + {%- set itemClass = itemClass ~ ' ibexa-anchor-navigation-menu__section-groups-item--active' %} {%- endif %} {%- do item.setAttribute('class', (item.getAttribute('class') ~ ' ' ~ itemClass)|trim) -%} + {%- do item.setAttribute('data-target-id', "#" ~ item.getAttribute('data-target-id')) -%} {%- do item.setAttribute('type', 'button') -%} {{ block('anchor_menu_item') }} {% endfor %} @@ -43,9 +44,9 @@ {% block children_1st_level_dropdown %} {% for item in currentItem.children %} - {%- set itemClass = 'ibexa-navigation-menu__primary-item' %} + {%- set itemClass = 'ibexa-anchor-navigation-menu__section-groups-item' %} {%- if loop.first %} - {%- set itemClass = itemClass ~ ' ibexa-navigation-menu__primary-item--active' %} + {%- set itemClass = itemClass ~ ' ibexa-anchor-navigation-menu__section-groups-item--active' %} {%- endif %} {%- do item.setAttribute('class', (item.getAttribute('class') ~ ' ' ~ itemClass)|trim) -%} {%- do item.setAttribute('type', 'button') -%} @@ -55,10 +56,10 @@ {% set choices = [] %} {% for item in currentItem.children %} {% if loop.first %} - {% set value = item.getAttribute('data-target-id') %} + {% set value = "#" ~ item.getAttribute('data-target-id') %} {% endif %} {% set choices = choices|merge([{ - value: item.getAttribute('data-target-id'), + value: "#" ~ item.getAttribute('data-target-id'), label: block('label'), }]) %} {% endfor %} @@ -66,7 +67,7 @@ {% set source %}