diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts index c3567dd204..195e409e60 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts @@ -101,15 +101,11 @@ export class UmbDebug extends UmbLitElement { this._debugPaneOpen = !this._debugPaneOpen; } - private async _openDialog() { - // Open a modal that uses the HTML component called 'umb-debug-modal-layout' - await import('./debug.modal.element.js'); - this._modalService?.open('umb-debug-modal-layout', { - size: 'small', - type: 'sidebar', - data: { - content: this._renderContextAliases(), - }, + private _openDialog() { + this._modalService?.openBasic({ + header: html` Debug: Contexts`, + content: this._htmlContent(), + overlaySize: 'small' }); } @@ -130,14 +126,20 @@ export class UmbDebug extends UmbLitElement {
- + ${this._htmlContent()}
`; } + private _htmlContent() { + return html ` + + `; + } + private _renderContextAliases() { const contextsTemplates: TemplateResult[] = []; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts deleted file mode 100644 index d9d370aaf0..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { css, html, TemplateResult } from 'lit'; -import { customElement } from 'lit/decorators.js'; -import { UUITextStyles } from '@umbraco-ui/uui-css'; -import { UmbModalLayoutElement } from '@umbraco-cms/modal'; - -export interface UmbDebugModalData { - content: TemplateResult | string; -} - -@customElement('umb-debug-modal-layout') -export default class UmbDebugModalLayout extends UmbModalLayoutElement { - static styles = [ - UUITextStyles, - css` - uui-dialog-layout { - display: flex; - flex-direction: column; - height: 100%; - - padding: var(--uui-size-space-5); - box-sizing: border-box; - } - - uui-scroll-container { - overflow-y: scroll; - max-height: 100%; - min-height: 0; - flex: 1; - } - - uui-icon { - vertical-align: text-top; - color: var(--uui-color-danger); - } - - .context { - padding: 15px 0; - border-bottom: 1px solid var(--uui-color-danger-emphasis); - } - - h3 { - margin-top: 0; - margin-bottom: 0; - } - - h3 > span { - border-radius: var(--uui-size-4); - background-color: var(--uui-color-danger); - color: var(--uui-color-danger-contrast); - padding: 8px; - font-size: 12px; - } - - ul { - margin-top: 0; - } - `, - ]; - - private _handleClose() { - this.modalHandler?.close(); - } - - render() { - return html` - - Debug: Contexts - ${this.data?.content} - Close - - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'umb-debug-modal-layout': UmbDebugModalLayout; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/basic/modal-layout-basic.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/basic/modal-layout-basic.element.ts new file mode 100644 index 0000000000..593f2415ab --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/basic/modal-layout-basic.element.ts @@ -0,0 +1,51 @@ +import { css, html, TemplateResult } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement } from 'lit/decorators.js'; +import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar'; +import { UmbModalLayoutElement } from '../modal-layout.element'; + +export interface UmbBasicModalData { + header: TemplateResult | string; + content: TemplateResult | string; + overlaySize?: UUIModalSidebarSize; +} + +@customElement('umb-modal-layout-basic') +export class UmbModalLayoutBasicElement extends UmbModalLayoutElement { + static styles = [ + UUITextStyles, + css` + uui-scroll-container { + background-color: var(--uui-color-surface); + } + `, + ]; + + private _close() { + // As this is a basic modal designed for viewing readonly info + // Then we don't need to pass any data back to the parent when + // we close/save the modal etc... + this.modalHandler?.close(); + } + + connectedCallback(): void { + super.connectedCallback(); + } + + render() { + return html` + + ${this.data?.content} + Close + + `; + } +} + +export default UmbModalLayoutBasicElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-modal-layout-basic': UmbModalLayoutBasicElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/basic/modal-layout-basic.stories.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/basic/modal-layout-basic.stories.ts new file mode 100644 index 0000000000..7f04471515 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/basic/modal-layout-basic.stories.ts @@ -0,0 +1,47 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit'; +import { UmbModalLayoutBasicElement, UmbBasicModalData } from './modal-layout-basic.element'; + +export default { + title: 'API/Modals/Layouts/Basic', + component: 'umb-modal-layout-basic', + id: 'modal-layout-basic', +} as Meta; + + +const htmlContent = html` + + + + + + + Title 1 + Title 2 + + + + Cell 1 + Cell 2 + + + + Cell 3 + Cell 4 + + `; + + +const data: UmbBasicModalData = { + header: html` Debug: Contexts`, + content: htmlContent, + overlaySize: 'small' +}; + + +export const Overview: Story = () => html` + + +`; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts b/src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts index 1bb11b9a25..30f5ec05d2 100644 --- a/src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts +++ b/src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts @@ -7,6 +7,7 @@ import './layouts/modal-layout-current-user.element'; import './layouts/icon-picker/modal-layout-icon-picker.element'; import '../../backoffice/settings/languages/language-picker/language-picker-modal-layout.element'; import './layouts/link-picker/modal-layout-link-picker.element'; +import './layouts/basic/modal-layout-basic.element'; import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar'; import { BehaviorSubject } from 'rxjs'; @@ -20,6 +21,7 @@ import type { UmbModalMediaPickerData } from './layouts/media-picker/modal-layou import type { UmbModalLinkPickerData } from './layouts/link-picker/modal-layout-link-picker.element'; import { UmbModalHandler } from './modal-handler'; import { UmbContextToken } from '@umbraco-cms/context-api'; +import { UmbBasicModalData } from './layouts/basic/modal-layout-basic.element'; export type UmbModalType = 'dialog' | 'sidebar'; @@ -118,7 +120,7 @@ export class UmbModalService { } /** - * Opens the user settings sidebar modal + * Opens the change password sidebar modal * @public * @return {*} {UmbModalHandler} * @memberof UmbModalService @@ -128,13 +130,17 @@ export class UmbModalService { } /** - * Opens a language picker sidebar modal + * Opens a basic sidebar modal to display readonly information * @public * @return {*} {UmbModalHandler} * @memberof UmbModalService */ - public languagePicker(data: UmbLanguagePickerModalData): UmbModalHandler { - return this.open('umb-language-picker-modal-layout', { data, type: 'sidebar' }); + public openBasic(data: UmbBasicModalData): UmbModalHandler { + return this.open('umb-modal-layout-basic', { + data, + type: 'sidebar', + size: data?.overlaySize || 'small', + }); } /**