IBX-1403: Removed grayed parts when scrolling in content type edit (#115

) Co-authored-by: Marek Nocoń <mnocon@users.noreply.github.com>
ibexa · Dec 15, 2021 · 21bb0f9 · 21bb0f9
1 parent 866601a
commit 21bb0f9
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 22 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
@@ -13,12 +13,6 @@
 
             btn.classList.toggle('ibexa-anchor-navigation-menu__item-btn--active', anchorTargetSectionId === sectionId);
         });
-
-        doc.querySelectorAll('.ibexa-anchor-navigation-sections__section').forEach((section) => {
-            const { anchorSectionId } = section.dataset;
-
-            section.classList.toggle('ibexa-anchor-navigation-sections__section--active', anchorSectionId === sectionId);
-        });
     };
     const navigateTo = (event) => {
         const { anchorTargetSectionId } = event.currentTarget.dataset;

diff --git a/src/bundle/Resources/public/scss/_anchor-navigation.scss b/src/bundle/Resources/public/scss/_anchor-navigation.scss
@@ -79,13 +79,3 @@
         }
     }
 }
-
-.ibexa-anchor-navigation-sections {
-    &__section {
-        opacity: 0.2;
-
-        &--active {
-            opacity: 1;
-        }
-    }
-}
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
@@ -36,7 +36,7 @@
 
                             <div
                                 data-anchor-section-id="#{{ sanitized_key }}"
-                                class="row ibexa-anchor-navigation-sections__section {{ loop.first ? 'ibexa-anchor-navigation-sections__section--active' }}"
+                                class="row ibexa-anchor-navigation-sections__section"
                             >
                                 <div class="offset-1 col-6">
                                     {% for field in group %}

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
@@ -3,7 +3,6 @@
 {% set attr = attr|default({})|merge({
     class: (attr.class|default('')
             ~ ' ibexa-anchor-navigation-sections__section row'
-            ~ (is_active|default(false) ? ' ibexa-anchor-navigation-sections__section--active')
         )|trim,
     'data-anchor-section-id': section_id,
 }) %}

diff --git a/src/lib/Behat/Page/ContentUpdateItemPage.php b/src/lib/Behat/Page/ContentUpdateItemPage.php
@@ -94,7 +94,6 @@ protected function specifyLocators(): array
             new VisibleCSSLocator('pageTitle', '.ibexa-edit-header__title'),
             new VisibleCSSLocator('formElement', '[name=ezplatform_content_forms_content_edit]'),
             new VisibleCSSLocator('closeButton', '.ibexa-anchor-navigation-menu__back'),
-            new VisibleCSSLocator('fieldLabel', '.ibexa-anchor-navigation-sections__section--active .ibexa-field-edit__label-wrapper label.ibexa-field-edit__label, .card-body > .row .ez-field-edit__label-wrapper label.ez-field-edit__label, .ez-field-edit__label-wrapper legend, .ez-card > .card-body > div > div > legend, .ibexa-field-edit--eznoneditable > legend.col-form-label'),
             new VisibleCSSLocator('nthField', '.ibexa-field-edit:nth-of-type(%s)'),
             new VisibleCSSLocator('noneditableFieldClass', 'ibexa-field-edit--eznoneditable'),
             new VisibleCSSLocator('fieldOfType', '.ibexa-field-edit--%s'),
@@ -110,10 +109,10 @@ protected function getRoute(): string
     public function getField(string $fieldName): FieldTypeComponent
     {
         $fieldLocator = new VisibleCSSLocator('', sprintf($this->getLocator('nthField')->getSelector(), $this->getFieldPosition($fieldName)));
-        $fieldtypeIdentifier = $this->getFieldtypeIdentifier($fieldLocator, $fieldName);
+        $fieldTypeIdentifier = $this->getFieldtypeIdentifier($fieldLocator, $fieldName);
 
         foreach ($this->fieldTypeComponents as $fieldTypeComponent) {
-            if ($fieldTypeComponent->getFieldTypeIdentifier() === $fieldtypeIdentifier) {
+            if ($fieldTypeComponent->getFieldTypeIdentifier() === $fieldTypeIdentifier) {
                 $fieldTypeComponent->setParentLocator($fieldLocator);
 
                 return $fieldTypeComponent;
@@ -123,7 +122,18 @@ public function getField(string $fieldName): FieldTypeComponent
 
     protected function getFieldPosition(string $fieldName): int
     {
-        $fieldElements = $this->getHTMLPage()->setTimeout(5)->findAll($this->getLocator('fieldLabel'));
+        $activeSections = $this->getHTMLPage()->findAll(new VisibleCSSLocator('activeSection', '.ibexa-anchor-navigation-menu__item-btn--active'));
+        $fieldLabelLocator = $activeSections->any() ?
+            new VisibleCSSLocator(
+                'fieldLabelWithCategories',
+                sprintf(
+                    '[data-anchor-section-id="%1$s"] .ibexa-field-edit .ibexa-field-edit__label, [data-anchor-section-id="%1$s"] .ibexa-field-edit--eznoneditable .ibexa-label',
+                    $activeSections->single()->getAttribute('data-anchor-target-section-id')
+                )
+            ) :
+            new VisibleCSSLocator('fieldLabel', ' .ibexa-field-edit .ibexa-field-edit__label, .ibexa-field-edit--eznoneditable .ibexa-label');
+
+        $fieldElements = $this->getHTMLPage()->setTimeout(5)->findAll($fieldLabelLocator);
 
         $foundFields = [];
         foreach ($fieldElements as $fieldPosition => $fieldElement) {