From b568c0d5149bb0ce787eaa49f1cd765eb791276b Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Fri, 14 Apr 2023 13:40:32 +0200 Subject: [PATCH] add insert sidebar and menu --- .../button-with-dropdown.element.ts | 6 +- .../backoffice/templating/components/index.ts | 2 + .../templating-insert-menu.element.ts | 111 ++++++++++++++++++ .../insert-sidebar/insert-sidebar.element.ts | 97 +++++++++++++++ .../components/insert-sidebar/manifest.ts | 14 +++ .../templating/components/manifests.ts | 3 + .../src/backoffice/templating/index.ts | 9 +- .../template-workspace-edit.element.ts | 21 +--- 8 files changed, 242 insertions(+), 21 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-sidebar.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/components/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/button-with-dropdown/button-with-dropdown.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/button-with-dropdown/button-with-dropdown.element.ts index b9aeb923cd..af6cd0b69f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/button-with-dropdown/button-with-dropdown.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/button-with-dropdown/button-with-dropdown.element.ts @@ -12,7 +12,7 @@ export class UmbButtonWithDropdownElement extends LitElement { UUITextStyles, css` uui-symbol-expand { - margin-left: var(--uui-size-space-3); + margin-left: var(--umb-button-with-dropdown-symbol-expand-margin-left, var(--uui-size-space-3)); } `, ]; @@ -32,6 +32,9 @@ export class UmbButtonWithDropdownElement extends LitElement { @property() placement: PopoverPlacement = 'bottom-start'; + @property({ type: Boolean }) + compact = false; + @query('#symbol-expand') symbolExpand!: UUISymbolExpandElement; @@ -62,6 +65,7 @@ export class UmbButtonWithDropdownElement extends LitElement { .look=${this.look} .color=${this.color} .label=${this.label} + .compact=${this.compact} id="myPopoverBtn" @click=${this.#togglePopover}> diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/index.ts index 23987fc391..cbd3e2c4ae 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/index.ts @@ -1 +1,3 @@ import './file-system-tree-item/file-system-tree-item.element'; +import './insert-menu/templating-insert-menu.element'; +import './insert-sidebar/insert-sidebar.element'; \ No newline at end of file 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 new file mode 100644 index 0000000000..08ef2a0234 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts @@ -0,0 +1,111 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext, UmbModalToken } from '@umbraco-cms/backoffice/modal'; +import { UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS } from '../insert-sidebar/manifest'; + +export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>( + UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, + { + type: 'sidebar', + size: 'small', + } +); + +@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); + } + `, + ]; + + private _modalContext?: UmbModalContext; + + constructor() { + super(); + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; + }); + } + + #openChooseTypeModal = () => { + this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL, { + hidePartialView: this.hidePartialView, + }); + }; + + @property() + hidePartialView = false; + + render() { + return html` + + + Insert + + + + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-templating-insert-menu': UmbTemplatingInsertMenuElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-sidebar.element.ts new file mode 100644 index 0000000000..29c32bdf5e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-sidebar.element.ts @@ -0,0 +1,97 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; +import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext } from '@umbraco-cms/backoffice/modal'; + +@customElement('umb-insert-sidebar') +export default class UmbInsertSidebarElement extends UmbModalBaseElement<{ hidePartialViews: boolean }> { + 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 { + display: block; + margin-bottom: var(--uui-size-space-5); + } + + h3, + p { + text-align: left; + } + `, + ]; + + private _close() { + this.modalHandler?.submit(); + } + + private _modalContext?: UmbModalContext; + + constructor() { + super(); + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; + }); + } + + render() { + return html` + +
+ +

Value

+

+ Displays the value of a named field from the current page, with options to modify the value or fallback + to alternative values. +

+ ${this.data?.hidePartialViews + ? '' + : html`

Partial view

+

+ A partial view is a separate template file which can be rendered inside another template, it's great + for reusing markup or for separating complex templates into separate files. +

`} +

Macro

+

+ A Macro is a configurable component which is great for reusable parts of your design, where you need the + option to provide parameters, such as galleries, forms and lists. +

+

Dictionary item

+

+ A dictionary item is a placeholder for a translatable piece of text, which makes it easy to create + designs for multilingual websites. +

+ +
+
+ Close +
+ + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-insert-sidebar': UmbInsertSidebarElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts new file mode 100644 index 0000000000..21a7697661 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts @@ -0,0 +1,14 @@ +import { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry'; + +export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.ChooseType.Sidebar'; + +const modals: Array = [ + { + type: 'modal', + alias: UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, + name: 'Choose insert type sidebar', + loader: () => import('./insert-sidebar.element'), + }, +]; + +export const manifests = [...modals]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/manifests.ts new file mode 100644 index 0000000000..5ee3c524fe --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/manifests.ts @@ -0,0 +1,3 @@ +import { manifests as insertSidebarManifest } from './insert-sidebar/manifest'; + +export const manifests = [...insertSidebarManifest]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts index 0987adee6c..88d355d5a8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts @@ -2,12 +2,19 @@ import { manifests as menuManifests } from './menu.manifests'; import { manifests as templateManifests } from './templates/manifests'; import { manifests as stylesheetManifests } from './stylesheets/manifests'; import { manifests as partialManifests } from './partial-views/manifests'; +import { manifests as componentManifests } from './components/manifests'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api'; import { ManifestTypes } from '@umbraco-cms/backoffice/extensions-registry'; import './components'; -export const manifests = [...menuManifests, ...templateManifests, ...stylesheetManifests, ...partialManifests]; +export const manifests = [ + ...menuManifests, + ...templateManifests, + ...stylesheetManifests, + ...partialManifests, + ...componentManifests, +]; const registerExtensions = (manifests: Array) => { manifests.forEach((manifest) => umbExtensionsRegistry.register(manifest)); 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 6444260c55..40eb1cbb56 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 @@ -89,7 +89,7 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { }); this.observe(this.#templateWorkspaceContext.isNew, (isNew) => { - this.#isNew = isNew; + this.#isNew = !!isNew; console.log(this.#isNew); }); }); @@ -130,24 +130,7 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { > - - Insert -
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - - -
    • -
- + Query builder