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..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 @@ -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/common/popup/popup.component.js b/src/bundle/ui-dev/src/modules/common/popup/popup.component.js index 93f98b96d2..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 @@ -9,6 +9,8 @@ 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 +39,7 @@ const Popup = ({ extraClasses, showTooltip, subheader, + controlZIndex, }) => { const rootDOMElement = getRootDOMElement(); const modalRef = useRef(null); @@ -56,7 +59,34 @@ const Popup = ({ latestBootstrapModal.current.hide(); } } - }, [isVisible]); + + const modalNode = modalRef.current; + const modalBackdrop = document.querySelector('.modal-backdrop'); + + if (!modalBackdrop || !modalNode || !controlZIndex) { + return; + } + + 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; + + 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, controlZIndex]); useEffect(() => { return () => { @@ -196,6 +226,7 @@ Popup.propTypes = { extraClasses: PropTypes.string, showTooltip: PropTypes.bool, subheader: PropTypes.node, + controlZIndex: PropTypes.bool, }; Popup.defaultProps = { @@ -211,6 +242,7 @@ Popup.defaultProps = { subtitle: null, showTooltip: true, subheader: null, + controlZIndex: false, }; export default Popup; 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..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 @@ -8,10 +8,12 @@ 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 { +class UploadPopupModule extends Component { constructor(props) { super(props); @@ -47,6 +49,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 +63,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 +127,7 @@ export default class UploadPopupModule extends Component { } return ( -
+
{label}
{}, enableUploadedItemEdit: true, }; + +UploadPopupModule.contextType = UDWContext; + +export default UploadPopupModule;