diff --git a/Tests/IntegrationTests/Fixtures/1Dimension/imageEditor.e2e.js b/Tests/IntegrationTests/Fixtures/1Dimension/imageEditor.e2e.js index 19b1243a7d..c05d9487ae 100644 --- 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 index 7992c310bb..1aee1a2c68 100644 --- 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 index 689794f6e4..e782944f4d 100644 --- 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 index 58c2eace1e..52084497fc 100644 --- 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 index 58dda21c0d..0fb750a466 100644 --- 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;