From ba0a83a3d185c3daed998f2f8cdbcab81b455453 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Fri, 11 Aug 2023 09:02:43 +0200 Subject: [PATCH] the other workspace wip --- .../src/mocks/data/stylesheet.data.ts | 21 +++ .../repository/stylesheet.repository.ts | 18 +-- .../workspace/stylesheet-workspace.context.ts | 9 +- ...workspace-view-rich-text-editor.element.ts | 129 +++++++++++++++++- 4 files changed, 163 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/stylesheet.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/stylesheet.data.ts index 1fcfd1b7fb..d39dcc79d0 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/stylesheet.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/stylesheet.data.ts @@ -5,6 +5,7 @@ import { FileSystemTreeItemPresentationModel, PagedFileSystemTreeItemPresentationModel, PagedStylesheetOverviewResponseModel, + RichTextRuleModel, StylesheetResponseModel, } from '@umbraco-cms/backoffice/backend-api'; @@ -142,6 +143,26 @@ class UmbStylesheetData extends UmbEntityData { return this.data.find((item) => item.path === path && item.isFolder === true); } + getRules(path: string): Array { + return [ + { + "name": "bjjh", + "selector": "h1", + "styles": "color: blue;" + }, + { + "name": "comeone", + "selector": "h1", + "styles": "color: blue;" + }, + { + "name": "lol", + "selector": "h1", + "styles": "color: blue;" + } + ] + } + insertFolder(item: CreateTextFileViewModelBaseModel) { const newItem: StylesheetDBItem = { ...item, diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/repository/stylesheet.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/repository/stylesheet.repository.ts index bbb53ad195..82835cadca 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/repository/stylesheet.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/repository/stylesheet.repository.ts @@ -1,6 +1,12 @@ +import { Observable } from 'rxjs'; +import { StylesheetDetails } from '../index.js'; import { UmbStylesheetTreeStore, UMB_STYLESHEET_TREE_STORE_CONTEXT_TOKEN } from './stylesheet.tree.store.js'; import { UmbStylesheetTreeServerDataSource } from './sources/stylesheet.tree.server.data.js'; import { UmbStylesheetServerDataSource } from './sources/stylesheet.server.data.js'; +import { + StylesheetGetFolderResponse, + UmbStylesheetFolderServerDataSource, +} from './sources/stylesheet.folder.server.data.js'; import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api'; import { @@ -18,7 +24,7 @@ import { ExtractRichTextStylesheetRulesResponseModel, FileSystemTreeItemPresentationModel, FolderModelBaseModel, - FolderReponseModel, + FolderResponseModel, InterpolateRichTextStylesheetRequestModel, InterpolateRichTextStylesheetResponseModel, ProblemDetails, @@ -28,12 +34,6 @@ import { UpdateTextFileViewModelBaseModel, } from '@umbraco-cms/backoffice/backend-api'; import type { UmbTreeRootFileSystemModel } from '@umbraco-cms/backoffice/tree'; -import { StylesheetDetails } from '../index.js'; -import { Observable } from 'rxjs'; -import { - StylesheetGetFolderResponse, - UmbStylesheetFolderServerDataSource, -} from './sources/stylesheet.folder.server.data.js'; export class UmbStylesheetRepository implements @@ -65,8 +65,8 @@ export class UmbStylesheetRepository createFolderScaffold( parentId: string | null - ): Promise<{ data?: FolderReponseModel | undefined; error?: ProblemDetails | undefined }> { - const data: FolderReponseModel = { + ): Promise<{ data?: FolderResponseModel | undefined; error?: ProblemDetails | undefined }> { + const data: FolderResponseModel = { name: '', parentId, }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts index 34c354e1c7..c60225af89 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts @@ -4,9 +4,11 @@ import { UmbWorkspaceContext } from '@umbraco-cms/backoffice/workspace'; import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; import { UmbBooleanState, UmbObjectState, createObservablePart } from '@umbraco-cms/backoffice/observable-api'; import { loadCodeEditor } from '@umbraco-cms/backoffice/code-editor'; +import { RichTextStylesheetRulesResponseModel } from '@umbraco-cms/backoffice/backend-api'; export class UmbStylesheetWorkspaceContext extends UmbWorkspaceContext { #data = new UmbObjectState(undefined); + #rules = new UmbObjectState(undefined); data = this.#data.asObservable(); name = createObservablePart(this.#data, (data) => data?.name); content = createObservablePart(this.#data, (data) => data?.content); @@ -50,11 +52,16 @@ export class UmbStylesheetWorkspaceContext extends UmbWorkspaceContext { + this.#stylesheetWorkspaceContext = workspaceContext as UmbStylesheetWorkspaceContext; + + this.observe(this.#stylesheetWorkspaceContext.content, (content) => { + this._content = content; + }); + + this.observe(this.#stylesheetWorkspaceContext.path, (path) => { + this._path = path; + }); + + this.observe(this.#stylesheetWorkspaceContext.isNew, (isNew) => { + this.#isNew = !!isNew; + }); + + this.observe(this.#stylesheetWorkspaceContext.isCodeEditorReady, (isReady) => { + this._ready = isReady; + }); + }); } - static styles = [UUITextStyles, css``]; + renderRule(rule: RichTextRuleModel) { + return html`
+
${rule.name}
+
EditRemove
+
`; + } + render() { + return html` + +
+ +

Define the styles that should be available in the rich text editor for this stylesheet

+
+ ${this._rules?.map((rule) => this.renderRule(rule))} +
+
+ + `; + } + + static styles = [ + UUITextStyles, + css` + :host { + display: block; + width: 100%; + } + + #box-row { + display: flex; + gap: var(--uui-size-layout-1); + } + + #description { + flex: 0 0 250px + } + + #rules { + flex: 1 1 auto; + max-width: 600px; + } + + .rule { + display: flex; + width: 100%; + justify-content: space-between; + padding: var(--uui-size-2); + align-items: center; + border-radius: var(--uui-size-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; + } + + + `, + ]; } export default UmbStylesheetWorkspaceViewRichTextEditorElement;