diff --git a/src/bundle/Resources/public/img/icons/about.svg b/src/bundle/Resources/public/img/icons/about.svg index ef807ca158..ff2ac884e2 100755 --- a/src/bundle/Resources/public/img/icons/about.svg +++ b/src/bundle/Resources/public/img/icons/about.svg @@ -1,4 +1,4 @@ - + about diff --git a/src/bundle/Resources/public/img/icons/approved.svg b/src/bundle/Resources/public/img/icons/approved.svg index 28df2519da..524f21d36f 100644 --- a/src/bundle/Resources/public/img/icons/approved.svg +++ b/src/bundle/Resources/public/img/icons/approved.svg @@ -1,4 +1,4 @@ - + approved diff --git a/src/bundle/Resources/public/img/icons/create.svg b/src/bundle/Resources/public/img/icons/create.svg index a55079de8f..709835cdee 100755 --- a/src/bundle/Resources/public/img/icons/create.svg +++ b/src/bundle/Resources/public/img/icons/create.svg @@ -1,4 +1,4 @@ - + create - + diff --git a/src/bundle/Resources/public/img/icons/notice.svg b/src/bundle/Resources/public/img/icons/notice.svg index a1446a8139..c5a47a075b 100755 --- a/src/bundle/Resources/public/img/icons/notice.svg +++ b/src/bundle/Resources/public/img/icons/notice.svg @@ -1,4 +1,4 @@ - + notice - + diff --git a/src/bundle/Resources/public/img/icons/options.svg b/src/bundle/Resources/public/img/icons/options.svg index 68121b04ba..64fa6e9cc1 100755 --- a/src/bundle/Resources/public/img/icons/options.svg +++ b/src/bundle/Resources/public/img/icons/options.svg @@ -1,4 +1,5 @@ - + + options - + diff --git a/src/bundle/Resources/public/js/scripts/helpers/content.type.helper.js b/src/bundle/Resources/public/js/scripts/helpers/content.type.helper.js index 0d1d8ed005..73430a880c 100644 --- a/src/bundle/Resources/public/js/scripts/helpers/content.type.helper.js +++ b/src/bundle/Resources/public/js/scripts/helpers/content.type.helper.js @@ -67,6 +67,14 @@ const getContentTypeName = (contentTypeIdentifier) => { return contentTypesDataMap[contentTypeIdentifier].name; }; +const getContentTypeData = (contentTypeIdentifier) => { + if (!contentTypesDataMap) { + contentTypesDataMap = createContentTypeDataMap(); + } + + return contentTypesDataMap[contentTypeIdentifier] ?? null; +}; + const getContentTypeIconUrlByHref = (contentTypeHref) => { if (!contentTypesDataMapByHref) { contentTypesDataMapByHref = createContentTypeDataMapByHref(); @@ -97,4 +105,12 @@ const getContentTypeDataByHref = (contentTypeHref) => { return contentTypesDataMapByHref[contentTypeHref]; }; -export { getContentTypeIconUrl, getContentTypeName, getContentTypeIconUrlByHref, getContentTypeDataByHref, getContentTypeNameByHref }; +export { + createContentTypeDataMapByHref, + getContentTypeIconUrl, + getContentTypeName, + getContentTypeData, + getContentTypeIconUrlByHref, + getContentTypeDataByHref, + getContentTypeNameByHref, +}; diff --git a/src/bundle/Resources/public/js/scripts/helpers/context.helper.js b/src/bundle/Resources/public/js/scripts/helpers/context.helper.js index 66166aab15..736f0cf298 100644 --- a/src/bundle/Resources/public/js/scripts/helpers/context.helper.js +++ b/src/bundle/Resources/public/js/scripts/helpers/context.helper.js @@ -8,6 +8,10 @@ const restInfo = { siteaccess: document.querySelector('meta[name="SiteAccess"]')?.content, }; +export const SYSTEM_ROOT_LOCATION_ID = 1; +export const SYSTEM_ROOT_LOCATION_PATH = `/${SYSTEM_ROOT_LOCATION_ID}/`; +export const SYSTEM_ROOT_LOCATION = { pathString: SYSTEM_ROOT_LOCATION_PATH }; + export const setRestInfo = ({ instanceUrl, accessToken, token, siteaccess }) => { restInfo.instanceUrl = instanceUrl ?? restInfo.instanceUrl; restInfo.accessToken = accessToken ?? restInfo.accessToken; diff --git a/src/bundle/Resources/public/js/scripts/helpers/notification.helper.js b/src/bundle/Resources/public/js/scripts/helpers/notification.helper.js index fbaee33f5a..3c9b27e123 100644 --- a/src/bundle/Resources/public/js/scripts/helpers/notification.helper.js +++ b/src/bundle/Resources/public/js/scripts/helpers/notification.helper.js @@ -1,4 +1,4 @@ -const { document: doc } = window; +import { getRootDOMElement } from './context.helper'; const NOTIFICATION_INFO_LABEL = 'info'; const NOTIFICATION_SUCCESS_LABEL = 'success'; @@ -16,9 +16,10 @@ const NOTIFICATION_ERROR_LABEL = 'error'; * @param {Object} detail.rawPlaceholdersMap */ const showNotification = (detail) => { + const rootDOMElement = getRootDOMElement(); const event = new CustomEvent('ibexa-notify', { detail }); - doc.body.dispatchEvent(event); + rootDOMElement.dispatchEvent(event); }; /** diff --git a/src/bundle/Resources/public/scss/_custom.scss b/src/bundle/Resources/public/scss/_custom.scss index 344a38a7d5..9523611844 100644 --- a/src/bundle/Resources/public/scss/_custom.scss +++ b/src/bundle/Resources/public/scss/_custom.scss @@ -175,6 +175,11 @@ $ibexa-font-family: sans-serif !default; $ibexa-font-family-headings: 'Work Sans', sans-serif; +//Ibexa z-index +$ibexa-backdrop-zindex: 2175; +$ibexa-modal-zindex: 2180; +$ibexa-popover-zindex: 2185; + // boostrap variables $white: $ibexa-color-white; $gray-100: $ibexa-color-light-300; @@ -319,6 +324,12 @@ $modal-content-border-radius: $ibexa-border-radius; $modal-inner-padding: calculateRem(24px); $modal-footer-padding: calculateRem(24px) 0; $modal-footer-border-width: 0; +$zindex-modal-backdrop: $ibexa-backdrop-zindex; +$zindex-modal: $ibexa-modal-zindex; + +//Popover +$zindex-popover: $ibexa-popover-zindex; + //Components $border-radius: $ibexa-border-radius; diff --git a/src/bundle/Resources/public/scss/mixins/_modals.scss b/src/bundle/Resources/public/scss/mixins/_modals.scss index 4ef706862d..7ce2e877d7 100644 --- a/src/bundle/Resources/public/scss/mixins/_modals.scss +++ b/src/bundle/Resources/public/scss/mixins/_modals.scss @@ -39,6 +39,7 @@ cursor: pointer; opacity: 1; border: none; + background: transparent; .ibexa-icon { margin: 0; diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_main.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_main.scss index b8d80bb1b6..2699fd5841 100644 --- a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_main.scss +++ b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_main.scss @@ -1,6 +1,6 @@ .m-ud { position: fixed; - z-index: 99999; + z-index: 2100; top: 0; left: 0; height: 100vh; diff --git a/src/bundle/ui-dev/src/modules/common/icon/inculdedIcon.js b/src/bundle/ui-dev/src/modules/common/icon/inculdedIcon.js index 696d9a1afd..99f4eeb364 100644 --- a/src/bundle/ui-dev/src/modules/common/icon/inculdedIcon.js +++ b/src/bundle/ui-dev/src/modules/common/icon/inculdedIcon.js @@ -3,12 +3,14 @@ import PropTypes from 'prop-types'; import About from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/about.svg'; import AboutInfo from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/about-info.svg'; +import Approved from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/approved.svg'; import Article from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/article.svg'; import Back from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/back.svg'; import Blog from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/blog.svg'; import BlogPost from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/blog_post.svg'; import CaretDown from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/caret-down.svg'; import CaretUp from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/caret-up.svg'; +import Create from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/create.svg'; import Checkmark from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/checkmark.svg'; import ContentTree from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/content-tree.svg'; import Date from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/date.svg'; @@ -21,6 +23,8 @@ import Form from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/form.svg import Gallery from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/gallery.svg'; import Image from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/image.svg'; import LandingPage from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/landing_page.svg'; +import Notice from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/notice.svg'; +import Options from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/options.svg'; import Place from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/place.svg'; import Product from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/product.svg'; import Search from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/search.svg'; @@ -39,10 +43,12 @@ import Warning from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/warni const iconsMap = { about: About, 'about-info': AboutInfo, + approved: Approved, article: Article, back: Back, blog: Blog, blog_post: BlogPost, + create: Create, 'caret-down': CaretDown, 'caret-up': CaretUp, checkmark: Checkmark, @@ -57,6 +63,8 @@ const iconsMap = { gallery: Gallery, image: Image, landing_page: LandingPage, + notice: Notice, + options: Options, place: Place, product: Product, search: Search, 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 a539ddd9c3..4c9064be67 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 @@ -3,7 +3,11 @@ import PropTypes from 'prop-types'; import Icon from '../icon/icon'; import { createCssClassNames } from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/common/helpers/css.class.names'; -import { getTranslator, getBootstrap } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; +import { + getTranslator, + getBootstrap, + getRootDOMElement, +} from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; const CLASS_NON_SCROLLABLE = 'ibexa-non-scrollable'; const CLASS_MODAL_OPEN = 'modal-open'; @@ -32,13 +36,14 @@ const Popup = ({ extraClasses, showTooltip, }) => { + const rootDOMElement = getRootDOMElement(); const modalRef = useRef(null); const Translator = getTranslator(); const bootstrap = getBootstrap(); useEffect(() => { - document.body.classList.toggle(CLASS_MODAL_OPEN, isVisible); - document.body.classList.toggle(CLASS_NON_SCROLLABLE, isVisible); + rootDOMElement.classList.toggle(CLASS_MODAL_OPEN, isVisible); + rootDOMElement.classList.toggle(CLASS_NON_SCROLLABLE, isVisible); if (isVisible) { showPopup(); @@ -58,7 +63,7 @@ const Popup = ({ const closeBtnLabel = Translator.trans(/*@Desc("Close")*/ 'popup.close.label', {}, 'ibexa_universal_discovery_widget'); const hidePopup = () => { bootstrap.Modal.getOrCreateInstance(modalRef.current).hide(); - document.body.classList.remove(CLASS_MODAL_OPEN, CLASS_NON_SCROLLABLE); + rootDOMElement.classList.remove(CLASS_MODAL_OPEN, CLASS_NON_SCROLLABLE); }; const showPopup = () => { const bootstrapModal = bootstrap.Modal.getOrCreateInstance(modalRef.current, { @@ -66,6 +71,11 @@ const Popup = ({ keyboard: !noKeyboard, focus: hasFocus, }); + const initializedBackdropRootElement = bootstrapModal._backdrop._config.rootElement; + + if (initializedBackdropRootElement !== rootDOMElement) { + bootstrapModal._backdrop._config.rootElement = rootDOMElement; + } bootstrapModal.show(); }; @@ -97,14 +107,14 @@ const Popup = ({
{noHeader - ? renderCloseBtn + ? renderCloseBtn() : title && (

{title} {subtitle && {subtitle}}

- {renderCloseBtn} + {renderCloseBtn()}
)}
{children}
diff --git a/src/bundle/ui-dev/src/modules/content-tree/components/list-item/list.item.component.js b/src/bundle/ui-dev/src/modules/content-tree/components/list-item/list.item.component.js index 1061141f49..341bb2f5ae 100644 --- a/src/bundle/ui-dev/src/modules/content-tree/components/list-item/list.item.component.js +++ b/src/bundle/ui-dev/src/modules/content-tree/components/list-item/list.item.component.js @@ -4,7 +4,11 @@ import Icon from '../../../common/icon/icon'; import { showWarningNotification } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/notification.helper'; import { getContentTypeIconUrl } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/content.type.helper'; -import { getTranslator, getAdminUiConfig } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; +import { + getTranslator, + getAdminUiConfig, + SYSTEM_ROOT_LOCATION_ID, +} from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; class ListItem extends Component { constructor(props) { @@ -124,7 +128,7 @@ class ListItem extends Component { }; if (!this.state.isLoading || this.props.subitems.length) { - if (locationId === 1) { + if (locationId === SYSTEM_ROOT_LOCATION_ID) { iconAttrs.customPath = getContentTypeIconUrl('folder'); } else { iconAttrs.customPath = getContentTypeIconUrl(contentTypeIdentifier) || getContentTypeIconUrl('file'); @@ -184,7 +188,7 @@ class ListItem extends Component { renderItemLabel() { const { href, name, locationId, indent, onClick } = this.props; - if (locationId === 1) { + if (locationId === SYSTEM_ROOT_LOCATION_ID) { return null; } 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 1fe81233a1..dbca958fd3 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 @@ -16,11 +16,11 @@ export default class UploadPopupModule extends Component { super(props); this.refTooltip = React.createRef(); - this.rootNode = getRootDOMElement(); + this.rootDOMElement = getRootDOMElement(); } componentDidMount() { - this.rootNode.classList.add(CLASS_SCROLL_DISABLED); + this.rootDOMElement.classList.add(CLASS_SCROLL_DISABLED); parseTooltips(this.refTooltip.current); } diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/breadcrumbs/breadcrumbs.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/breadcrumbs/breadcrumbs.js index ba3bd7475a..8b6b767630 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/breadcrumbs/breadcrumbs.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/breadcrumbs/breadcrumbs.js @@ -2,7 +2,7 @@ import React, { useContext, useState, useMemo, useEffect, useCallback, useRef } import Icon from '../../../common/icon/icon'; -import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; +import { getTranslator, SYSTEM_ROOT_LOCATION_ID } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; import { createCssClassNames } from '../../../common/helpers/css.class.names'; import { getLoadedLocationsLimitedMap } from './breadcrumbs.helpers'; import { LoadedLocationsMapContext, MarkedLocationIdContext, GridActiveLocationIdContext } from '../../universal.discovery.module'; @@ -69,7 +69,7 @@ const Breadcrumbs = () => { {hiddenItems.map((item) => { const locationId = item.parentLocationId; const locationName = - locationId === 1 + locationId === SYSTEM_ROOT_LOCATION_ID ? Translator.trans( /*@Desc("Root Location")*/ 'breadcrumbs.root_location', {}, @@ -124,7 +124,7 @@ const Breadcrumbs = () => { {visibleItems.map((item, index) => { const locationId = item.parentLocationId; const locationName = - locationId === 1 + locationId === SYSTEM_ROOT_LOCATION_ID ? Translator.trans( /*@Desc("Root Location")*/ 'breadcrumbs.root_location', {}, diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js index 056f90a7db..67fdc9ccab 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js @@ -17,7 +17,11 @@ import { } from '../../universal.discovery.module'; import { parse as parseTooltip } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper'; -import { getAdminUiConfig, getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; +import { + getAdminUiConfig, + getTranslator, + SYSTEM_ROOT_LOCATION_ID, +} from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; const MINIMUM_ITEMS_COUNT_FOR_SEARCH_TO_APPEAR = 10; @@ -63,7 +67,7 @@ const ContentCreateWidget = () => { setFilterQuery(query); }; const updateSelectedLanguage = (value) => setSelectedLanguage(value); - const isConfirmDisabled = !selectedContentType || !selectedLanguage || markedLocationId === 1; + const isConfirmDisabled = !selectedContentType || !selectedLanguage || markedLocationId === SYSTEM_ROOT_LOCATION_ID; const createContent = () => { setContentOnTheFlyData({ locationId: markedLocationId, diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/content.meta.preview.module.js b/src/bundle/ui-dev/src/modules/universal-discovery/content.meta.preview.module.js index e9242e944d..d7ee80c8d0 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/content.meta.preview.module.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/content.meta.preview.module.js @@ -16,7 +16,12 @@ import { import { formatShortDateTime } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/timezone.helper'; import { parse as parseTooltip } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper'; -import { getTranslator, getRouting, getAdminUiConfig } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; +import { + getTranslator, + getRouting, + getAdminUiConfig, + SYSTEM_ROOT_LOCATION_ID, +} from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; const ContentMetaPreview = () => { const Translator = getTranslator(); @@ -42,7 +47,7 @@ const ContentMetaPreview = () => { parseTooltip(refContentMetaPreview.current); }); - if (!markedLocationId || markedLocationId === 1 || !locationData) { + if (!markedLocationId || markedLocationId === SYSTEM_ROOT_LOCATION_ID || !locationData) { return null; } diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js b/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js index 9a8741982f..f2a5bd63e4 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js @@ -18,7 +18,11 @@ import { parse as parseTooltips, hideAll as hideAllTooltips, } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper'; -import { getAdminUiConfig, getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; +import { + getAdminUiConfig, + getTranslator, + SYSTEM_ROOT_LOCATION_ID, +} from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; const { document } = window; @@ -409,7 +413,11 @@ const UniversalDiscoveryModule = (props) => { }, [currentView]); useEffect(() => { - if (!props.startingLocationId || props.startingLocationId === 1 || props.startingLocationId === props.rootLocationId) { + if ( + !props.startingLocationId || + props.startingLocationId === SYSTEM_ROOT_LOCATION_ID || + props.startingLocationId === props.rootLocationId + ) { return; }