diff --git a/src/Umbraco.Web.UI.Client/.vscode/settings.json b/src/Umbraco.Web.UI.Client/.vscode/settings.json index 387d52b0f6..200408d1cb 100644 --- a/src/Umbraco.Web.UI.Client/.vscode/settings.json +++ b/src/Umbraco.Web.UI.Client/.vscode/settings.json @@ -1,6 +1,7 @@ { "cssVariables.lookupFiles": ["node_modules/@umbraco-ui/uui-css/dist/custom-properties.css"], "cSpell.words": [ + "Backoffice", "combobox", "Elementable", "templating", diff --git a/src/Umbraco.Web.UI.Client/src/app.ts b/src/Umbraco.Web.UI.Client/src/app.ts index 6449a08b26..be6f2b76cc 100644 --- a/src/Umbraco.Web.UI.Client/src/app.ts +++ b/src/Umbraco.Web.UI.Client/src/app.ts @@ -5,8 +5,6 @@ import 'element-internals-polyfill'; import './core/router/router-slot.element'; import './core/router/variant-router-slot.element'; -import './core/notification/layouts/default'; -import './core/modal/modal-element.element'; import { UUIIconRegistryEssential } from '@umbraco-ui/uui'; import { css, html } from 'lit'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts index 3e90e86cf2..d607346ee5 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts @@ -8,8 +8,6 @@ import { } from './core/components/backoffice-frame/backoffice.context'; import { UmbExtensionInitializer } from './packages/repository/server-extension.controller'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api'; -import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal'; -import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification'; import { UmbEntryPointExtensionInitializer } from '@umbraco-cms/backoffice/extensions-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -31,8 +29,6 @@ const CORE_PACKAGES = [ export class UmbBackofficeElement extends UmbLitElement { constructor() { super(); - this.provideContext(UMB_MODAL_CONTEXT_TOKEN, new UmbModalContext(this)); - this.provideContext(UMB_NOTIFICATION_CONTEXT_TOKEN, new UmbNotificationContext()); this.provideContext(UMB_BACKOFFICE_CONTEXT_TOKEN, new UmbBackofficeContext()); new UmbEntryPointExtensionInitializer(this, umbExtensionsRegistry); new UmbStoreExtensionInitializer(this); @@ -43,8 +39,7 @@ export class UmbBackofficeElement extends UmbLitElement { return html` - - + `; } @@ -60,9 +55,6 @@ export class UmbBackofficeElement extends UmbLitElement { font-size: 14px; box-sizing: border-box; } - umb-backoffice-modal-container { - z-index: 1000; - } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/backoffice-frame/backoffice-modal-container.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/backoffice-frame/backoffice-modal-container.element.ts index f30ca54206..2d430b65f0 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/backoffice-frame/backoffice-modal-container.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/backoffice-frame/backoffice-modal-container.element.ts @@ -7,8 +7,6 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @customElement('umb-backoffice-modal-container') export class UmbBackofficeModalContainerElement extends UmbLitElement { - - @state() private _modals?: UmbModalHandler[]; @@ -38,12 +36,13 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement { `; } - + static styles: CSSResultGroup = [ UUITextStyles, css` :host { position: absolute; + z-index: 1000; } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/backoffice-frame/backoffice-notification-container.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/backoffice-frame/backoffice-notification-container.element.ts index f3666c8f16..1125764ee2 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/backoffice-frame/backoffice-notification-container.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/backoffice-frame/backoffice-notification-container.element.ts @@ -11,8 +11,6 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @customElement('umb-backoffice-notification-container') export class UmbBackofficeNotificationContainerElement extends UmbLitElement { - - @state() private _notifications?: UmbNotificationHandler[]; @@ -48,7 +46,7 @@ export class UmbBackofficeNotificationContainerElement extends UmbLitElement { `; } - + static styles: CSSResultGroup = [ UUITextStyles, css` diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/index.ts index a04af35230..2350ed6611 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/index.ts @@ -2,11 +2,17 @@ import { manifests as componentManifests } from './components'; import { manifests as propertyActionManifests } from './property-actions/manifests'; import { manifests as propertyEditorManifests } from './property-editors/manifests'; import { manifests as modalManifests } from './modals/manifests'; + +import { UmbBackofficeNotificationContainerElement } from './components/backoffice-frame/backoffice-notification-container.element'; +import { UmbBackofficeModalContainerElement } from './components/backoffice-frame/backoffice-modal-container.element'; + import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification'; import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal'; import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api'; import type { UmbEntrypointOnInit } from '@umbraco-cms/backoffice/extensions-api'; +import './notification'; + export const manifests = [ ...componentManifests, ...propertyActionManifests, @@ -17,6 +23,12 @@ export const manifests = [ export const onInit: UmbEntrypointOnInit = (host, extensionRegistry) => { extensionRegistry.registerMany(manifests); - new UmbContextProviderController(host, UMB_MODAL_CONTEXT_TOKEN, new UmbModalContext(host)); + const notificationContainerElement = new UmbBackofficeNotificationContainerElement(); + host.appendChild(notificationContainerElement); + + const modalContainerElement = new UmbBackofficeModalContainerElement(); + host.appendChild(modalContainerElement); + new UmbContextProviderController(host, UMB_NOTIFICATION_CONTEXT_TOKEN, new UmbNotificationContext()); + new UmbContextProviderController(host, UMB_MODAL_CONTEXT_TOKEN, new UmbModalContext(host)); }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/notification/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/notification/index.ts new file mode 100644 index 0000000000..294bdcf5c3 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/notification/index.ts @@ -0,0 +1 @@ +import './layouts/default'; diff --git a/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/notification/layouts/default/index.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/index.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/core/notification/layouts/default/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/notification/layouts/default/notification-layout-default.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/core/notification/layouts/default/notification-layout-default.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/notification/layouts/default/notification-layout-default.stories.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.stories.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/core/notification/layouts/default/notification-layout-default.stories.ts diff --git a/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/notification/layouts/default/notification-layout-default.test.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.test.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/core/notification/layouts/default/notification-layout-default.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/core/notification/stories/notification.mdx b/src/Umbraco.Web.UI.Client/src/backoffice/core/notification/stories/notification.mdx similarity index 100% rename from src/Umbraco.Web.UI.Client/src/core/notification/stories/notification.mdx rename to src/Umbraco.Web.UI.Client/src/backoffice/core/notification/stories/notification.mdx diff --git a/src/Umbraco.Web.UI.Client/src/core/notification/stories/notification.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/notification/stories/notification.stories.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/core/notification/stories/notification.stories.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/core/notification/stories/notification.stories.ts diff --git a/src/Umbraco.Web.UI.Client/src/core/notification/stories/story-notification-default-example.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/notification/stories/story-notification-default-example.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/core/notification/stories/story-notification-default-example.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/core/notification/stories/story-notification-default-example.element.ts