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 aa8226c844..1dc0a1d1a3 100644 --- a/src/bundle/Resources/public/js/scripts/admin.anchor.navigation.js +++ b/src/bundle/Resources/public/js/scripts/admin.anchor.navigation.js @@ -20,9 +20,7 @@ }; let currentlyVisibleSections = getSectionGroupActiveItems(); const attachSectionGroupsMenuListEvents = () => { - const items = doc.querySelectorAll( - '.ibexa-anchor-navigation-menu__section-groups--list .ibexa-anchor-navigation-menu__section-groups-item', - ); + const items = doc.querySelectorAll('.ibexa-anchor-navigation-menu__section-groups--list .ibexa-tab-switcher__item'); items.forEach((item) => item.addEventListener('click', onSelectSectionGroupsMenuList, false)); }; @@ -41,11 +39,11 @@ 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', + '.ibexa-anchor-navigation-menu__section-groups--list .ibexa-tab-switcher__item', ); sectionGroupsMenuItems.forEach((item) => { - item.classList.toggle('ibexa-anchor-navigation-menu__section-groups-item--active', item.isSameNode(event.currentTarget)); + item.classList.toggle('ibexa-tab-switcher__item--active', item.isSameNode(event.currentTarget)); }); showSectionGroup(targetId); showSectionsMenu(sectionsMenuNode); @@ -205,17 +203,17 @@ 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-tab-switcher__item[data-target-id="${id}"]`) ?? doc.querySelector(`.ibexa-anchor-navigation-menu .ibexa-dropdown__item[data-value="${id}"]`); if (!correspondingMenuItem) { return; } - const errorIconNode = correspondingMenuItem.querySelector('.ibexa-anchor-navigation-menu__item-error'); + const errorIconNode = correspondingMenuItem.querySelector('.ibexa-tab-switcher__item-error'); const dropdownWidget = doc.querySelector('.ibexa-anchor-navigation-menu .ibexa-dropdown'); - errorIconNode.classList.toggle('ibexa-anchor-navigation-menu__item-error--hidden', !hasGroupError); + errorIconNode.classList.toggle('ibexa-tab-switcher__item-error--hidden', !hasGroupError); if (dropdownWidget) { const hasError = !!dropdownWidget.querySelector( diff --git a/src/bundle/Resources/public/scss/_anchor-navigation.scss b/src/bundle/Resources/public/scss/_anchor-navigation.scss index 9d72a8eb09..36f9d06207 100644 --- a/src/bundle/Resources/public/scss/_anchor-navigation.scss +++ b/src/bundle/Resources/public/scss/_anchor-navigation.scss @@ -69,28 +69,6 @@ max-width: calculateRem(420px); width: calc(25vw - #{calculateRem(50px)}); 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 { diff --git a/src/bundle/Resources/public/scss/_switcher.scss b/src/bundle/Resources/public/scss/_switcher.scss new file mode 100644 index 0000000000..35be2b74e8 --- /dev/null +++ b/src/bundle/Resources/public/scss/_switcher.scss @@ -0,0 +1,35 @@ +.ibexa-tab-switcher { + padding: calculateRem(4px); + border-radius: $ibexa-border-radius; + background-color: $ibexa-color-light-300; + display: flex; + + &__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; + } + } + + &__item-label { + text-overflow: ellipsis; + overflow: hidden; + } + + &__item-error { + margin-top: calculateRem(-3px); + fill: $ibexa-color-danger; + + &--hidden { + display: none; + } + } +} diff --git a/src/bundle/Resources/public/scss/ibexa.scss b/src/bundle/Resources/public/scss/ibexa.scss index 09a2046778..b11f9420f6 100644 --- a/src/bundle/Resources/public/scss/ibexa.scss +++ b/src/bundle/Resources/public/scss/ibexa.scss @@ -121,3 +121,4 @@ @import 'steps'; @import 'summary-tile'; @import 'double-input-range'; +@import 'switcher'; 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 2112f8fbac..3a5ae099ca 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,9 +31,9 @@ {% block children_1st_level %} {% for item in currentItem.children %} - {%- set itemClass = 'ibexa-anchor-navigation-menu__section-groups-item' %} + {%- set itemClass = 'ibexa-tab-switcher__item' %} {%- if loop.first %} - {%- set itemClass = itemClass ~ ' ibexa-anchor-navigation-menu__section-groups-item--active' %} + {%- set itemClass = itemClass ~ ' ibexa-tab-switcher__item--active' %} {%- endif %} {%- do item.setAttribute('class', (item.getAttribute('class') ~ ' ' ~ itemClass)|trim) -%} {%- do item.setAttribute('data-target-id', "#" ~ item.getAttribute('data-target-id')) -%} @@ -140,9 +140,9 @@ {%- set itemTagElement = itemTagElement|default('button') %} <{{ itemTagElement }}{{ knp_menu.attributes(attributes) }}> -
+
{{ block('label') }} - +
@@ -164,7 +164,7 @@ {% block root %}
{% if item.count() < 4 %} - {% set listAttributes = item.childrenAttributes|merge({'class': (listAttributes.class|default('') ~ ' ibexa-anchor-navigation-menu__section-groups ibexa-anchor-navigation-menu__section-groups--list')|trim}) %} + {% set listAttributes = item.childrenAttributes|merge({'class': (listAttributes.class|default('') ~ ' ibexa-anchor-navigation-menu__section-groups ibexa-anchor-navigation-menu__section-groups--list ibexa-tab-switcher')|trim}) %} {% set innerChildrenBlock = 'children_1st_level' %} {% set innerItemBlock = 'item_1st_level' %} {% set tagElement = 'div' %} diff --git a/src/lib/Behat/Page/ContentUpdateItemPage.php b/src/lib/Behat/Page/ContentUpdateItemPage.php index a1c5e0242b..699d9b8476 100644 --- a/src/lib/Behat/Page/ContentUpdateItemPage.php +++ b/src/lib/Behat/Page/ContentUpdateItemPage.php @@ -112,7 +112,7 @@ protected function specifyLocators(): array new VisibleCSSLocator('noneditableFieldClass', 'ibexa-field-edit--eznoneditable'), new VisibleCSSLocator('fieldOfType', '.ibexa-field-edit--%s'), new VisibleCSSLocator('navigationTabs', '.ibexa-anchor-navigation-menu__sections-item-btn'), - new VisibleCSSLocator('navigationGroups', '.ibexa-anchor-navigation-menu__section-groups-item'), + new VisibleCSSLocator('navigationGroups', '.ibexa-tab-switcher__item'), new VisibleCSSLocator('autosaveIsOnInfo', '.ibexa-autosave__status-on'), new VisibleCSSLocator('autosaveSavedInfo', '.ibexa-autosave__status-saved'), new VisibleCSSLocator('autosaveIsOffInfo', '.ibexa-autosave__status-off'), @@ -239,12 +239,12 @@ public function switchToFieldTab(string $tabName): void ->click(); $this->getHTMLPage() ->setTimeout(10) - ->waitUntilCondition(new ElementHasTextCondition($this->getHTMLPage(), new VisibleCSSLocator('activeSection', '.ibexa-anchor-navigation-menu__section-groups-item--active'), $tabName)); + ->waitUntilCondition(new ElementHasTextCondition($this->getHTMLPage(), new VisibleCSSLocator('activeSection', '.ibexa-tab-switcher__item--active'), $tabName)); } public function verifyFieldCannotBeEditedDueToLimitation(string $fieldName) { - $activeSections = $this->getHTMLPage()->findAll(new VisibleCSSLocator('activeSection', '.ibexa-anchor-navigation-menu__section-groups-item--active')); + $activeSections = $this->getHTMLPage()->findAll(new VisibleCSSLocator('activeSection', '.ibexa-tab-switcher__item--active')); $fieldLocator = new VisibleCSSLocator('', sprintf($this ->getLocator('fieldGroupNthField')->getSelector(), $activeSections->single()->getAttribute('data-target-id'), $this->getFieldPosition($fieldName))); $this->getHTMLPage()->find($fieldLocator)->assert()->hasClass('ibexa-field-edit--disabled');