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

add modal

Browse Source
This commit is contained in:
Julia Gru
2023-08-11 12:43:05 +02:00
parent ba0a83a3d1
commit 9b98497b0c
3 changed files with 153 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/manifests.ts
View File

@@ -1,4 +1,5 @@
import type {
ManifestModal,
ManifestWorkspace,
ManifestWorkspaceAction,
ManifestWorkspaceEditorView,
@@ -73,4 +74,16 @@ const workspaceActions: Array<ManifestWorkspaceAction> = [
},
];
export const manifests = [workspace, ...workspaceEditorViews, ...workspaceActions];
export const UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR =
'Umb.Modal.Templating.Stylesheet.RichTextEditorStyle.Sidebar';
const modals: Array<ManifestModal> = [
{
type: 'modal',
alias: UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR,
name: 'Rich text editor style modal',
loader: () => import('./views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.js'),
},
];
export const manifests = [workspace, ...workspaceEditorViews, ...workspaceActions, ...modals];

74
src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.ts Normal file
View File

@@ -0,0 +1,74 @@
import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
import { RichTextRuleModel } from '@umbraco-cms/backoffice/backend-api';
export interface StylesheetRichTextEditorStyleModalData {
rule?: RichTextRuleModel;
}
export interface StylesheetRichTextEditorStyleModalResult {
rule: RichTextRuleModel;
}
@customElement('umb-stylesheet-rich-text-editor-style-modal')
export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbModalBaseElement<
StylesheetRichTextEditorStyleModalData,
StylesheetRichTextEditorStyleModalResult
> {
private _close() {
this.modalContext?.reject();
}
render() {
return html`
<umb-body-layout headline="Insert">
<div id="main">
<uui-box>
<h3>Rule</h3>
<p>${this.data?.rule?.name}</p>
<p>${this.data?.rule?.selector}</p>
<p>${this.data?.rule?.styles}</p>
</uui-box>
</div>
<div slot="actions">
<uui-button @click=${this._close} look="secondary" label="Close">Close</uui-button>
</div>
</umb-body-layout>
`;
}
static styles = [
UUITextStyles,
css`
:host {
display: block;
color: var(--uui-color-text);
--umb-header-layout-height: 70px;
}
#main {
box-sizing: border-box;
height: calc(
100dvh - var(--umb-header-layout-height) - var(--umb-footer-layout-height) - 2 * var(--uui-size-layout-1)
);
}
#main uui-button:not(:last-of-type) {
display: block;
margin-bottom: var(--uui-size-space-5);
}
h3,
p {
text-align: left;
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
'umb-stylesheet-rich-text-editor-style-modal': UmbStylesheetRichTextEditorStyleModalElement;
}
}

97
src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
View File

@@ -1,16 +1,28 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement, query, state } from 'lit/decorators.js';
import { customElement, state } from 'lit/decorators.js';
import { UmbStylesheetWorkspaceContext } from '../../stylesheet-workspace.context.js';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
import { UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
import { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
import { UmbStylesheetWorkspaceContext } from '../../stylesheet-workspace.context.js';
import {
UMB_MODAL_MANAGER_CONTEXT_TOKEN,
UmbModalContext,
UmbModalManagerContext,
UmbModalToken,
} from '@umbraco-cms/backoffice/modal';
import { RichTextRuleModel } from '@umbraco-cms/backoffice/backend-api';
import { UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR } from '../../manifests.js';
import { StylesheetRichTextEditorStyleModalResult } from './stylesheet-workspace-view-rich-text-editor-style-sidebar.js';
export const UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL = new UmbModalToken<{ rule: RichTextRuleModel }>(
UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR,
{
type: 'sidebar',
size: 'small',
},
);
@customElement('umb-stylesheet-workspace-view-rich-text-editor')
export class UmbStylesheetWorkspaceViewRichTextEditorElement extends UmbLitElement {
@state()
private _content?: string | null = '';
@@ -23,26 +35,27 @@ export class UmbStylesheetWorkspaceViewRichTextEditorElement extends UmbLitEleme
@state()
private _rules?: RichTextRuleModel[] = [
{
"name": "bjjh",
"selector": "h1",
"styles": "color: blue;"
name: 'bjjh',
selector: 'h1',
styles: 'color: blue;',
},
{
"name": "comeone",
"selector": "h1",
"styles": "color: blue;"
name: 'comeone',
selector: 'h1',
styles: 'color: blue;',
},
{
"name": "lol",
"selector": "h1",
"styles": "color: blue;"
}
name: 'lol',
selector: 'h1',
styles: 'color: blue;',
},
];
#stylesheetWorkspaceContext?: UmbStylesheetWorkspaceContext;
private _modalContext?: UmbModalManagerContext;
#isNew = false;
#modal?: UmbModalContext;
constructor() {
super();
@@ -67,25 +80,40 @@ export class UmbStylesheetWorkspaceViewRichTextEditorElement extends UmbLitEleme
this._ready = isReady;
});
});
this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
this._modalContext = instance;
});
}
#openModal = (rule: RichTextRuleModel = {}) => {
if (!this._modalContext) throw new Error('Modal context not found');
const modal = this._modalContext.open(UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL, {
rule,
});
modal?.onSubmit().then((closedModal) => {
console.log(closedModal);
});
};
renderRule(rule: RichTextRuleModel) {
return html`<div class="rule">
<div class="rule-name"><uui-icon name="umb:move"></uui-icon>${rule.name}</div>
<div class="rule-actions"><uui-button label="Edit" look="secondary">Edit</uui-button><uui-button label="Remove" look="secondary" color="danger">Remove</uui-button></div>
<div class="rule-name"><uui-icon name="umb:navigation"></uui-icon>${rule.name}</div>
<div class="rule-actions">
<uui-button label="Edit" look="secondary" @click=${() => this.#openModal(rule)}>Edit</uui-button
><uui-button label="Remove" look="secondary" color="danger">Remove</uui-button>
</div>
</div>`;
}
render() {
return html` <uui-box headline="Rich text editor styles">
<div id="box-row">
<div id="description"><p>Define the styles that should be available in the rich text editor for this stylesheet</p></div>
<div id="rules">
${this._rules?.map((rule) => this.renderRule(rule))}
</div>
</div>
<div id="box-row">
<p id="description">Define the styles that should be available in the rich text editor for this stylesheet.</p>
<div id="rules">
${this._rules?.map((rule) => this.renderRule(rule))}
<uui-button label="Add rule" look="primary" @click=${this.#openModal}>Add</uui-button>
</div>
</div>
</uui-box>`;
}
@@ -103,7 +131,8 @@ export class UmbStylesheetWorkspaceViewRichTextEditorElement extends UmbLitEleme
}
#description {
flex: 0 0 250px
margin-top: 0;
flex: 0 0 250px;
}
#rules {
@@ -111,24 +140,28 @@ export class UmbStylesheetWorkspaceViewRichTextEditorElement extends UmbLitEleme
max-width: 600px;
}
.rule-name {
display: flex;
align-items: center;
gap: var(--uui-size-2);
padding-left: var(--uui-size-2);
font-weight: bold;
}
.rule {
display: flex;
width: 100%;
justify-content: space-between;
padding: var(--uui-size-2);
align-items: center;
border-radius: var(--uui-size-border-radius);
border-radius: var(--uui-border-radius);
background-color: var(--uui-color-surface-alt);
margin-bottom: var(--uui-size-space-4);
}
uui-box {
margin: var(--uui-size-layout-1);
/* remove header border bottom as code editor looks better in this box */
--uui-color-divider-standalone: transparent;
}
`,
];
}