diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts index f9891df58f..d92762935a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts @@ -27,43 +27,6 @@ export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModa @customElement('umb-templating-insert-menu') export class UmbTemplatingInsertMenuElement extends UmbLitElement { - static styles = [ - UUITextStyles, - css` - #insert-menu { - margin: 0; - padding: 0; - margin-top: var(--uui-size-space-3); - background-color: var(--uui-color-surface); - box-shadow: var(--uui-shadow-depth-3); - min-width: 150px; - } - - #insert-menu > li, - ul { - padding: 0; - width: 100%; - list-style: none; - } - - ul { - transform: translateX(-100px); - } - - .insert-menu-item { - width: 100%; - } - - umb-button-with-dropdown { - --umb-button-with-dropdown-symbol-expand-margin-left: 0; - } - - uui-icon[name='umb:add'] { - margin-right: var(--uui-size-4); - } - `, - ]; - @property() value = ''; @@ -154,6 +117,43 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { `; } + + static styles = [ + UUITextStyles, + css` + #insert-menu { + margin: 0; + padding: 0; + margin-top: var(--uui-size-space-3); + background-color: var(--uui-color-surface); + box-shadow: var(--uui-shadow-depth-3); + min-width: 150px; + } + + #insert-menu > li, + ul { + padding: 0; + width: 100%; + list-style: none; + } + + ul { + transform: translateX(-100px); + } + + .insert-menu-item { + width: 100%; + } + + umb-button-with-dropdown { + --umb-button-with-dropdown-symbol-expand-margin-left: 0; + } + + uui-icon[name='umb:add'] { + margin-right: var(--uui-size-4); + } + `, + ]; } declare global { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts index 06e18cde9b..961a7f4398 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts @@ -41,32 +41,6 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement ChooseInsertTypeModalData, ChooseInsertTypeModalResult > { - static styles = [ - UUITextStyles, - css` - :host { - display: block; - color: var(--uui-color-text); - } - - #main { - box-sizing: border-box; - padding: var(--uui-size-space-5); - height: calc(100vh - 124px); - } - - #main uui-button:not(:last-of-type) { - display: block; - margin-bottom: var(--uui-size-space-5); - } - - h3, - p { - text-align: left; - } - `, - ]; - private _close() { this.modalHandler?.reject(); } @@ -150,6 +124,32 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement `; } + + static styles = [ + UUITextStyles, + css` + :host { + display: block; + color: var(--uui-color-text); + } + + #main { + box-sizing: border-box; + padding: var(--uui-size-space-5); + height: calc(100vh - 124px); + } + + #main uui-button:not(:last-of-type) { + display: block; + margin-bottom: var(--uui-size-space-5); + } + + h3, + p { + text-align: left; + } + `, + ]; } declare global { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts index c60737763b..cbed735108 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts @@ -7,36 +7,6 @@ import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; @customElement('umb-insert-value-sidebar') export default class UmbInsertValueSidebarElement extends UmbModalBaseElement { - static styles = [ - UUITextStyles, - css` - :host { - display: block; - color: var(--uui-color-text); - } - - #main { - box-sizing: border-box; - padding: var(--uui-size-space-5); - height: calc(100vh - 124px); - } - - #main uui-button { - width: 100%; - } - - h3, - p { - text-align: left; - } - - uui-combobox, - uui-input { - width: 100%; - } - `, - ]; - private _close() { this.modalHandler?.submit(); } @@ -74,8 +44,6 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement @@ -125,6 +93,36 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement `; } + + static styles = [ + UUITextStyles, + css` + :host { + display: block; + color: var(--uui-color-text); + } + + #main { + box-sizing: border-box; + padding: var(--uui-size-space-5); + height: calc(100vh - 124px); + } + + #main uui-button { + width: 100%; + } + + h3, + p { + text-align: left; + } + + uui-combobox, + uui-input { + width: 100%; + } + `, + ]; } declare global { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts index add874a6b4..353442936c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts @@ -10,31 +10,6 @@ export default class UmbPartialViewPickerModalElement extends UmbModalBaseElemen UmbPartialViewPickerModalData, UmbPartialViewPickerModalResult > { - static styles = [ - UUITextStyles, - css` - :host { - display: block; - color: var(--uui-color-text); - } - - #main { - box-sizing: border-box; - padding: var(--uui-size-space-5); - height: calc(100vh - 124px); - } - - #main uui-button { - width: 100%; - } - - h3, - p { - text-align: left; - } - `, - ]; - @state() _selection: Array = []; @@ -80,6 +55,31 @@ export default class UmbPartialViewPickerModalElement extends UmbModalBaseElemen `; } + + static styles = [ + UUITextStyles, + css` + :host { + display: block; + color: var(--uui-color-text); + } + + #main { + box-sizing: border-box; + padding: var(--uui-size-space-5); + height: calc(100vh - 124px); + } + + #main uui-button { + width: 100%; + } + + h3, + p { + text-align: left; + } + `, + ]; } declare global { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts index db3079d057..2b22856bcb 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts @@ -8,31 +8,6 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @customElement('umb-partial-views-workspace-edit') export class UmbPartialViewsWorkspaceEditElement extends UmbLitElement { - static styles = [ - UUITextStyles, - css` - :host { - display: block; - width: 100%; - height: 100%; - } - - umb-code-editor { - --editor-height: calc(100vh - 300px); - } - - uui-box { - margin: 1em; - --uui-box-default-padding: 0; - } - - uui-input { - width: 100%; - margin: 1em; - } - `, - ]; - @state() private _name?: string | null = ''; @@ -59,7 +34,7 @@ export class UmbPartialViewsWorkspaceEditElement extends UmbLitElement { }); this.observe(this.#partialViewsWorkspaceContext.isNew, (isNew) => { - this.#isNew = isNew; + this.#isNew = !!isNew; console.log(this.#isNew); }); }); @@ -103,6 +78,31 @@ export class UmbPartialViewsWorkspaceEditElement extends UmbLitElement { `; } + + static styles = [ + UUITextStyles, + css` + :host { + display: block; + width: 100%; + height: 100%; + } + + umb-code-editor { + --editor-height: calc(100vh - 300px); + } + + uui-box { + margin: 1em; + --uui-box-default-padding: 0; + } + + uui-input { + width: 100%; + margin: 1em; + } + `, + ]; } export default UmbPartialViewsWorkspaceEditElement; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.element.ts index bff129aac8..2ba6b08e7a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.element.ts @@ -2,15 +2,14 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { UmbPartialViewsWorkspaceContext } from './partial-views-workspace.context'; -import { UmbRouterSlotInitEvent, IRoute, IRoutingInfo } from '@umbraco-cms/internal/router'; +import { UmbRouterSlotInitEvent } from '@umbraco-cms/internal/router'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import './partial-views-workspace-edit.element'; +import { IRoute, IRoutingInfo, PageComponent } from '@umbraco-cms/backoffice/router'; @customElement('umb-partial-views-workspace') export class UmbPartialViewsWorkspaceElement extends UmbLitElement { - static styles = [UUITextStyles, css``]; - #partialViewsWorkspaceContext = new UmbPartialViewsWorkspaceContext(this); #routerPath? = ''; @@ -23,7 +22,7 @@ export class UmbPartialViewsWorkspaceElement extends UmbLitElement { { path: 'create/:parentKey', component: () => this.#element, - setup: async (component: HTMLElement, info: IRoutingInfo) => { + setup: async (component: PageComponent, info: IRoutingInfo) => { const parentKey = info.match.params.parentKey; this.#partialViewsWorkspaceContext.createScaffold(parentKey); }, @@ -31,7 +30,7 @@ export class UmbPartialViewsWorkspaceElement extends UmbLitElement { { path: 'edit/:key', component: () => this.#element, - setup: (component: HTMLElement, info: IRoutingInfo) => { + setup: (component: PageComponent, info: IRoutingInfo) => { const key = info.match.params.key; this.#partialViewsWorkspaceContext.load(key); }, @@ -45,6 +44,8 @@ export class UmbPartialViewsWorkspaceElement extends UmbLitElement { this.#routerPath = event.target.absoluteRouterPath; }}>`; } + + static styles = [UUITextStyles, css``]; } export default UmbPartialViewsWorkspaceElement; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts index 5a00ac95f7..31f2306199 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts @@ -3,67 +3,12 @@ import { css, html } from 'lit'; import { customElement, query, state } from 'lit/decorators.js'; import { UUIInputElement } from '@umbraco-ui/uui'; import { UmbCodeEditorElement } from '../../../shared/components/code-editor/code-editor.element'; +import { UmbTemplatingInsertMenuElement } from '../../components/insert-menu/templating-insert-menu.element'; import { UmbTemplateWorkspaceContext } from './template-workspace.context'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UmbTemplatingInsertMenuElement } from '../../components/insert-menu/templating-insert-menu.element'; @customElement('umb-template-workspace-edit') export class UmbTemplateWorkspaceEditElement extends UmbLitElement { - static styles = [ - UUITextStyles, - css` - :host { - display: block; - width: 100%; - height: 100%; - } - - umb-code-editor { - --editor-height: calc(100vh - 300px); - } - - uui-box { - margin: 1em; - --uui-box-default-padding: 0; - } - - uui-input { - width: 100%; - margin: 1em; - } - - #code-editor-menu-container uui-icon { - margin-right: var(--uui-size-space-3); - } - - #insert-menu { - margin: 0; - padding: 0; - margin-top: var(--uui-size-space-3); - background-color: var(--uui-color-surface); - box-shadow: var(--uui-shadow-depth-3); - min-width: calc(100% + var(--uui-size-8, 24px)); - } - - #insert-menu > li, - ul { - padding: 0; - width: 100%; - list-style: none; - } - - .insert-menu-item { - width: 100%; - } - - #code-editor-menu-container { - display: flex; - justify-content: flex-end; - gap: var(--uui-size-space-3); - } - `, - ]; - @state() private _name?: string | null = ''; @@ -144,6 +89,61 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { `; } + + static styles = [ + UUITextStyles, + css` + :host { + display: block; + width: 100%; + height: 100%; + } + + umb-code-editor { + --editor-height: calc(100vh - 300px); + } + + uui-box { + margin: 1em; + --uui-box-default-padding: 0; + } + + uui-input { + width: 100%; + margin: 1em; + } + + #code-editor-menu-container uui-icon { + margin-right: var(--uui-size-space-3); + } + + #insert-menu { + margin: 0; + padding: 0; + margin-top: var(--uui-size-space-3); + background-color: var(--uui-color-surface); + box-shadow: var(--uui-shadow-depth-3); + min-width: calc(100% + var(--uui-size-8, 24px)); + } + + #insert-menu > li, + ul { + padding: 0; + width: 100%; + list-style: none; + } + + .insert-menu-item { + width: 100%; + } + + #code-editor-menu-container { + display: flex; + justify-content: flex-end; + gap: var(--uui-size-space-3); + } + `, + ]; } export default UmbTemplateWorkspaceEditElement; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts index b595fcb077..0d44e8c0a4 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts @@ -11,25 +11,16 @@ import { UmbTemplateWorkspaceContext } from './template-workspace.context'; @customElement('umb-template-workspace') export class UmbTemplateWorkspaceElement extends UmbLitElement { - public load(entityId: string) { this.#templateWorkspaceContext.load(entityId); } - public create(parentId: string | null) { - this.#isNew = true; - this.#templateWorkspaceContext.createScaffold(parentId); - } - @state() private _name?: string | null = ''; @state() private _content?: string | null = ''; - @query('umb-code-editor') - private _codeEditor?: UmbCodeEditorElement; - #templateWorkspaceContext = new UmbTemplateWorkspaceContext(this); #routerPath? = ''; @@ -64,7 +55,7 @@ export class UmbTemplateWorkspaceElement extends UmbLitElement { this.#routerPath = event.target.absoluteRouterPath; }}>`; } - + static styles = [ UUITextStyles, css`