BUGFIX: Ensure that SecondaryInspector is always above UnappliedChang…

…es-overlay Also: Add failing e2e test for regression from 3491
neos · Jun 24, 2023 · 24b5844 · 24b5844
1 parent 8eec7d6
commit 24b5844
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git a/Tests/IntegrationTests/Fixtures/1Dimension/imageEditor.e2e.js b/Tests/IntegrationTests/Fixtures/1Dimension/imageEditor.e2e.js
@@ -20,10 +20,19 @@ test('Can crop an image', async t => {
     await t
         .click(imageEditor.findReact('IconButton').withProps('icon', 'crop'));
     const initialTopOffset = await imageEditor.find('img').getStyleProperty('top');
+
+    // Crop the image
+    await t.drag(ReactSelector('ReactCrop'), 50, 50, {offsetX: 5, offsetY: 5});
+
+    // Verify that there's no z-index interference between the secondary
+    // inspector and the "unapplied changes"-overlay
+    await t.click(ReactSelector('SecondaryInspector'));
+    await t.expect(Selector("#neos-UnappliedChangesDialog").exists).notOk();
+
     await t
-        .drag(ReactSelector('ReactCrop'), 50, 50, {offsetX: 5, offsetY: 5})
         .expect(imageEditor.find('img').getStyleProperty('top')).notEql(initialTopOffset, 'The preview image should reflect the cropping results')
         .click(Selector('#neos-Inspector-Apply'));
+
     await Page.waitForIframeLoading(t);
     await t.switchToIframe('[name="neos-content-main"]');
     await t.expect(Selector('.test-page-image').getAttribute('src')).notEql(initialImage, 'Header image should have changed after crop');

diff --git a/cssVariables.css b/cssVariables.css
@@ -24,13 +24,13 @@
     --transition-Default: .25s;
     --transition-Slow: .5s;
     --zIndex-SecondaryToolbar-LinkIconButtonFlyout: 1;
-    --zIndex-FlashMessageContainer: 60;
+    --zIndex-FlashMessageContainer: 70;
     --zIndex-LoadingIndicatorContainer: 50;
     --zIndex-SecondaryInspector-Context: 1;
     --zIndex-SecondaryInspector-Iframe: 2;
     --zIndex-SecondaryInspector-Close: 3;
-    --zIndex-SecondaryInspectorElevated-Context: 1;
-    --zIndex-SecondaryInspectorElevated-DropdownContents: 2;
+    --zIndex-SecondaryInspectorElevated: 60;
+    --zIndex-SecondaryInspectorElevated-DropdownContents: 70;
     --zIndex-Dialog: 55;
     --zIndex-FullScreenClose-Context: 1;
     --zIndex-Drawer: 45;

diff --git a/packages/build-essentials/src/styles/styleConstants.js b/packages/build-essentials/src/styles/styleConstants.js
@@ -18,10 +18,11 @@ const config = {
     },
     zIndex: {
         secondaryToolbar: ['linkIconButtonFlyout'],
-        flashMessageContainer: '6',
+        flashMessageContainer: '7',
         loadingIndicatorContainer: '5',
         secondaryInspector: ['context', 'iframe', 'close'],
-        secondaryInspectorElevated: ['context', 'dropdownContents'],
+        secondaryInspectorElevated: '6',
+        'secondaryInspectorElevated-DropDownContents': '7',
         dialog: '5',
         fullScreenClose: ['context'],
         drawer: ['context'],

diff --git a/packages/neos-ui-editors/src/SecondaryEditors/ImageCropper/AspectRatioDropDown/style.css b/packages/neos-ui-editors/src/SecondaryEditors/ImageCropper/AspectRatioDropDown/style.css
@@ -33,7 +33,7 @@
 .dropDown__contents {
     min-width: 160px;
     box-shadow: 0 5px 10px rgba(#000, .2);
-    z-index: var(--zIndex-SecondaryInspectorElevated-DropdownContents);
+    z-index: var(--zIndex-SecondaryInspectorElevated-DropDownContents);
 }
 .dropDown__item {
     height: 40px;

diff --git a/packages/neos-ui-inspector/src/SecondaryInspector/style.css b/packages/neos-ui-inspector/src/SecondaryInspector/style.css
@@ -17,7 +17,7 @@
     right: 0;
 }
 .secondaryInspector--isElevated {
-    z-index: var(--zIndex-SecondaryInspectorElevated-Context);
+    z-index: var(--zIndex-SecondaryInspectorElevated);
 }
 .secondaryInspector .close {
     position: absolute;