yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into feature/document-variants

Browse Source 
# Conflicts:
#	src/core/modal/modal.service.ts
This commit is contained in:
Niels Lyngsø
2023-02-21 23:41:28 +01:00
parent 07c46a80fa ee038d2ef9
commit c86de80d42
5 changed files with 122 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
View File

@@ -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`<uui-icon name="umb:bug"></uui-icon> Debug: Contexts`,
content: this._htmlContent(),
overlaySize: 'small'
});
}
@@ -130,14 +126,20 @@ export class UmbDebug extends UmbLitElement {
<div class="events ${this._debugPaneOpen ? 'open' : ''}">
<div>
<ul>
${this._renderContextAliases()}
</ul>
${this._htmlContent()}
</div>
</div>
</div>`;
}
private _htmlContent() {
return html `
<ul>
${this._renderContextAliases()}
</ul>
`;
}
private _renderContextAliases() {
const contextsTemplates: TemplateResult[] = [];

79
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts
View File

@@ -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<UmbDebugModalData> {
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`
<uui-dialog-layout>
<span slot="headline"> <uui-icon name="umb:bug"></uui-icon> Debug: Contexts </span>
<uui-scroll-container id="field-settings"> ${this.data?.content} </uui-scroll-container>
<uui-button slot="actions" look="primary" label="Close sidebar" @click="${this._handleClose}">Close</uui-button>
</uui-dialog-layout>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-debug-modal-layout': UmbDebugModalLayout;
}
}

51
src/Umbraco.Web.UI.Client/src/core/modal/layouts/basic/modal-layout-basic.element.ts Normal file
View File

@@ -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<UmbBasicModalData> {
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`
<umb-workspace-layout .headline=${this.data?.header}>
<uui-scroll-container>${this.data?.content}</uui-scroll-container>
<uui-button slot="actions" look="secondary" label="Close sidebar" @click="${this._close}">Close</uui-button>
</umb-workspace-layout>
`;
}
}
export default UmbModalLayoutBasicElement;
declare global {
interface HTMLElementTagNameMap {
'umb-modal-layout-basic': UmbModalLayoutBasicElement;
}
}

47
src/Umbraco.Web.UI.Client/src/core/modal/layouts/basic/modal-layout-basic.stories.ts Normal file
View File

@@ -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`
<uui-table aria-label="Example table" aria-describedby="#some-element-id">
<!-- Apply styles to the uui-table-column to style the columns. You must have the same number of this elements as you have columns -->
<uui-table-column style="width: 20%;"></uui-table-column>
<uui-table-column style="width: 80%;"></uui-table-column>
<uui-table-head>
<uui-table-head-cell>Title 1</uui-table-head-cell>
<uui-table-head-cell>Title 2</uui-table-head-cell>
</uui-table-head>
<uui-table-row>
<uui-table-cell>Cell 1</uui-table-cell>
<uui-table-cell>Cell 2</uui-table-cell>
</uui-table-row>
<uui-table-row>
<uui-table-cell>Cell 3</uui-table-cell>
<uui-table-cell>Cell 4</uui-table-cell>
</uui-table-row>
</uui-table>`;
const data: UmbBasicModalData = {
header: html`<uui-icon name="umb:bug"></uui-icon> Debug: Contexts`,
content: htmlContent,
overlaySize: 'small'
};
export const Overview: Story<UmbModalLayoutBasicElement> = () => html`
<!-- TODO: figure out if generics are allowed for properties:
https://github.com/runem/lit-analyzer/issues/149
https://github.com/runem/lit-analyzer/issues/163 -->
<umb-modal-layout-basic .data=${data as any}></umb-modal-layout-basic>
`;

14
src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts
View File

@@ -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',
});
}
/**