From be060f5259dba6c1fff508712ff71edcd0fb440e Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Tue, 2 Dec 2025 16:59:44 +0100 Subject: [PATCH 1/4] IBX-11029: Fixed z-indexes --- .../muti-file-upload/_upload.popup.scss | 2 +- .../modules/common/popup/popup.component.js | 33 +++++++++++++++++++ 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss index 74fb58723c..8b39663950 100644 --- a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss +++ b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss @@ -1,7 +1,7 @@ .c-upload-popup { background: rgba($ibexa-color-black, 0.35); position: fixed; - z-index: 10100; + z-index: 10250; top: 0; left: 0; height: 100vh; diff --git a/src/bundle/ui-dev/src/modules/common/popup/popup.component.js b/src/bundle/ui-dev/src/modules/common/popup/popup.component.js index 93f98b96d2..4849081e65 100644 --- a/src/bundle/ui-dev/src/modules/common/popup/popup.component.js +++ b/src/bundle/ui-dev/src/modules/common/popup/popup.component.js @@ -9,6 +9,9 @@ import { getRootDOMElement, } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; +const MODAL_Z_INDEX = 10260; +const MODAL_BACKDROP_Z_INDEX = 10250; + const CLASS_NON_SCROLLABLE = 'ibexa-non-scrollable'; const CLASS_MODAL_OPEN = 'modal-open'; const MODAL_CONFIG = { @@ -37,6 +40,7 @@ const Popup = ({ extraClasses, showTooltip, subheader, + controlZIndex, }) => { const rootDOMElement = getRootDOMElement(); const modalRef = useRef(null); @@ -56,6 +60,33 @@ const Popup = ({ latestBootstrapModal.current.hide(); } } + + const modalNode = modalRef.current; + const modalBackdrop = document.querySelector('.modal-backdrop'); + + if (!modalBackdrop || !modalNode || !controlZIndex) { + return; + } + + const backdropInitialZIndex = modalBackdrop.style.zIndex; + const modalInitialZIndex = modalNode.style.zIndex; + + modalBackdrop.style.zIndex = MODAL_BACKDROP_Z_INDEX; + modalNode.style.zIndex = MODAL_Z_INDEX; + + return () => { + if (backdropInitialZIndex) { + modalBackdrop.style.zIndex = backdropInitialZIndex; + } else { + modalBackdrop.style.removeProperty('z-index'); + } + + if (modalInitialZIndex) { + modalNode.style.zIndex = modalInitialZIndex; + } else { + modalNode.style.removeProperty('z-index'); + } + }; }, [isVisible]); useEffect(() => { @@ -196,6 +227,7 @@ Popup.propTypes = { extraClasses: PropTypes.string, showTooltip: PropTypes.bool, subheader: PropTypes.node, + controlZIndex: PropTypes.bool, }; Popup.defaultProps = { @@ -211,6 +243,7 @@ Popup.defaultProps = { subtitle: null, showTooltip: true, subheader: null, + controlZIndex: false, }; export default Popup; From 1257dca235a61a2c116dbb0357ea05a2c03fbabf Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Wed, 3 Dec 2025 10:32:32 +0100 Subject: [PATCH 2/4] After CR --- .../ui-dev/src/modules/common/popup/popup.component.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/bundle/ui-dev/src/modules/common/popup/popup.component.js b/src/bundle/ui-dev/src/modules/common/popup/popup.component.js index 4849081e65..e3ab53d9a6 100644 --- a/src/bundle/ui-dev/src/modules/common/popup/popup.component.js +++ b/src/bundle/ui-dev/src/modules/common/popup/popup.component.js @@ -11,7 +11,6 @@ import { const MODAL_Z_INDEX = 10260; const MODAL_BACKDROP_Z_INDEX = 10250; - const CLASS_NON_SCROLLABLE = 'ibexa-non-scrollable'; const CLASS_MODAL_OPEN = 'modal-open'; const MODAL_CONFIG = { @@ -68,8 +67,8 @@ const Popup = ({ return; } - const backdropInitialZIndex = modalBackdrop.style.zIndex; - const modalInitialZIndex = modalNode.style.zIndex; + const backdropInitialZIndex = window.getComputedStyle(modalBackdrop)['z-index']; + const modalInitialZIndex = window.getComputedStyle(modalNode)['z-index']; modalBackdrop.style.zIndex = MODAL_BACKDROP_Z_INDEX; modalNode.style.zIndex = MODAL_Z_INDEX; @@ -87,7 +86,7 @@ const Popup = ({ modalNode.style.removeProperty('z-index'); } }; - }, [isVisible]); + }, [isVisible, controlZIndex]); useEffect(() => { return () => { From 838da7fffc3b873590d1c77fc3a90a31ab4e480e Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Wed, 3 Dec 2025 12:22:32 +0100 Subject: [PATCH 3/4] After CR --- .../ui/modules/muti-file-upload/_upload.popup.scss | 6 +++++- .../components/upload-popup/upload.popup.component.js | 11 ++++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss index 8b39663950..63c4738b2b 100644 --- a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss +++ b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss @@ -1,7 +1,7 @@ .c-upload-popup { background: rgba($ibexa-color-black, 0.35); position: fixed; - z-index: 10250; + z-index: 10100; top: 0; left: 0; height: 100vh; @@ -15,6 +15,10 @@ line-height: calculateRem(18px); } + &--elevated { + z-index: 10250; + } + .c-tooltip-popup { width: 100%; max-height: 90vh; diff --git a/src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-popup/upload.popup.component.js b/src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-popup/upload.popup.component.js index fa3baa9721..a3744edc45 100644 --- a/src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-popup/upload.popup.component.js +++ b/src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-popup/upload.popup.component.js @@ -8,10 +8,14 @@ import { getContentTypeName } from '@ibexa-admin-ui/src/bundle/Resources/public/ import TooltipPopup from '../../../common/tooltip-popup/tooltip.popup.component'; import DropAreaComponent from '../drop-area/drop.area.component'; import UploadListComponent from '../upload-list/upload.list.component'; +import { UDWContext } from '../../../universal-discovery/universal.discovery.module'; +import { createCssClassNames } from '../../..//common/helpers/css.class.names'; const CLASS_SCROLL_DISABLED = 'ibexa-scroll-disabled'; export default class UploadPopupModule extends Component { + static contextType = UDWContext; + constructor(props) { super(props); @@ -47,6 +51,7 @@ export default class UploadPopupModule extends Component { } render() { + const isUDW = this.context; const Translator = getTranslator(); const hasAnyUploadedItems = !!this.props.uploadedItems.length; const hasAnyItemsToUpload = !!this.props.itemsToUpload.length; @@ -60,6 +65,10 @@ export default class UploadPopupModule extends Component { {}, 'ibexa_multi_file_upload', ); + const className = createCssClassNames({ + 'c-upload-popup': true, + 'c-upload-popup--elevated': !!isUDW, + }); const { addItemsToUpload, subtitle, @@ -120,7 +129,7 @@ export default class UploadPopupModule extends Component { } return ( -
+
{label}
Date: Wed, 3 Dec 2025 12:59:09 +0100 Subject: [PATCH 4/4] Fixed eslint error --- .../components/upload-popup/upload.popup.component.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-popup/upload.popup.component.js b/src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-popup/upload.popup.component.js index a3744edc45..5a559df759 100644 --- a/src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-popup/upload.popup.component.js +++ b/src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-popup/upload.popup.component.js @@ -13,9 +13,7 @@ import { createCssClassNames } from '../../..//common/helpers/css.class.names'; const CLASS_SCROLL_DISABLED = 'ibexa-scroll-disabled'; -export default class UploadPopupModule extends Component { - static contextType = UDWContext; - +class UploadPopupModule extends Component { constructor(props) { super(props); @@ -193,3 +191,7 @@ UploadPopupModule.defaultProps = { onAfterDelete: () => {}, enableUploadedItemEdit: true, }; + +UploadPopupModule.contextType = UDWContext; + +export default UploadPopupModule;