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

stylesheet-rich-text-editor-style

Browse Source
This commit is contained in:
Niels Lyngsø
2023-12-06 11:58:25 +01:00
parent c5e0987c11
commit 9df276dc47
2 changed files with 23 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,14 @@
import { UmbStylesheetWorkspaceContext } from '../../stylesheet-workspace.context.js';
import { UMB_STYLESHEET_WORKSPACE_CONTEXT, UmbStylesheetWorkspaceContext } from '../../stylesheet-workspace.context.js';
import { UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL } from './stylesheet-workspace-view-rich-text-editor.element.js';
import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { RichTextRuleModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@customElement('umb-stylesheet-rich-text-editor-rule')
export default class UmbStylesheetRichTextEditorRuleElement extends UmbLitElement {
@property({ type: Object, attribute: false })
@property({ attribute: false })
private rule: RichTextRuleModel | null = null;
#context?: UmbStylesheetWorkspaceContext;
@@ -18,8 +17,8 @@ export default class UmbStylesheetRichTextEditorRuleElement extends UmbLitElemen
constructor() {
super();
this.consumeContext(UMB_WORKSPACE_CONTEXT, (workspaceContext) => {
this.#context = workspaceContext as UmbStylesheetWorkspaceContext;
this.consumeContext(UMB_STYLESHEET_WORKSPACE_CONTEXT, (workspaceContext) => {
this.#context = workspaceContext;
});
this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
@@ -27,32 +26,32 @@ export default class UmbStylesheetRichTextEditorRuleElement extends UmbLitElemen
});
}
openModal = () => {
#openModal() {
if (!this._modalContext) throw new Error('Modal context not found');
const modal = this._modalContext.open(UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL, {
value: {
rule: this.rule,
},
});
modal?.onSubmit().then((result) => {
if (result.rule && this.rule?.name) {
this.#context?.updateRule(this.rule?.name, result.rule);
modal?.onSubmit().then((value) => {
if (value.rule && this.rule?.name) {
this.#context?.updateRule(this.rule?.name, value.rule);
}
});
};
}
removeRule = () => {
#removeRule() {
//TODO: SPORTER BREAKS THAT - rules are removed from the data but not from the DOM
if (!this.#context) throw new Error('Context not found');
this.#context.setRules(this.#context.getRules().filter((r) => r.name !== this.rule?.name));
};
}
render() {
return html`
<div class="rule-name"><uui-icon name="icon-navigation"></uui-icon>${this.rule?.name}</div>
<div class="rule-actions">
<uui-button label="Edit" look="secondary" @click=${this.openModal}>Edit</uui-button
><uui-button label="Remove" look="secondary" color="danger" @click=${this.removeRule}>Remove</uui-button>
<uui-button label="Edit" look="secondary" @click=${this.#openModal}>Edit</uui-button
><uui-button label="Remove" look="secondary" color="danger" @click=${this.#removeRule}>Remove</uui-button>
</div>
`;
}

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

@@ -2,7 +2,6 @@ import { RichTextRuleModelSortable } from '../../stylesheet-workspace.context.js
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, ifDefined, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
import { RichTextRuleModel } from '@umbraco-cms/backoffice/backend-api';
export interface StylesheetRichTextEditorStyleModalValue {
rule: RichTextRuleModelSortable | null;
@@ -13,40 +12,37 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
never,
StylesheetRichTextEditorStyleModalValue
> {
@state()
private _rule: RichTextRuleModel | null = null;
#updateName(event: Event) {
const name = (event.target as HTMLInputElement).value;
this._value = {
this.updateValue({
rule: {
...this._value.rule,
name,
},
};
});
}
#updateSelector(event: Event) {
const selector = (event.target as HTMLInputElement).value;
this._value = {
this.updateValue({
rule: {
...this._value.rule,
selector,
},
};
});
}
#updateStyles(event: Event) {
const styles = (event.target as HTMLInputElement).value;
this._value = {
this.updateValue({
rule: {
...this._value.rule,
styles,
},
};
});
}
render() {
@@ -62,7 +58,7 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
<uui-input
id="name"
name="name"
.value=${this._rule?.name ?? ''}
.value=${this._value.rule?.name ?? ''}
label="Rule name"
required
@input=${this.#updateName}>
@@ -74,7 +70,7 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
<uui-input
id="selector"
name="selector"
.value=${this._rule?.selector ?? ''}
.value=${this._value.rule?.selector ?? ''}
label="Rule selector"
@input=${this.#updateSelector}
required>
@@ -89,14 +85,14 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
@input=${this.#updateStyles}
id="styles"
name="styles"
.value=${this._rule?.styles ?? ''}
.value=${this._value.rule?.styles ?? ''}
label="Rule styles">
</uui-textarea>
</uui-form-layout-item>
<uui-form-layout-item>
<uui-label for="styles" slot="label" required="">Preview</uui-label>
<span slot="description">How the text will look like in the rich text editor.</span>
<div style="${ifDefined(this._rule?.styles)}">
<div style="${ifDefined(this._value.rule?.styles)}">
a b c d e f g h i j k l m n o p q r s t u v w x t z
<br />
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z