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

add insert sidebar and menu

Browse Source
This commit is contained in:
Julia Gru
2023-04-14 13:40:32 +02:00
parent f330616d14
commit b568c0d514
8 changed files with 242 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/button-with-dropdown/button-with-dropdown.element.ts
View File

@@ -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}>
<slot></slot>

2
src/Umbraco.Web.UI.Client/src/backoffice/templating/components/index.ts
View File

@@ -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';

111
src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts Normal file
View File

@@ -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`
<uui-button-group>
<uui-button look="secondary" @click=${this.#openChooseTypeModal}>
<uui-icon name="umb:add"></uui-icon>Insert</uui-button
>
<umb-button-with-dropdown
look="secondary"
compact
placement="bottom-start"
id="insert-button"
label="open insert menu">
<ul id="insert-menu" slot="dropdown">
<li>
<uui-menu-item class="insert-menu-item" target="_blank" label="Value" title="Value"> </uui-menu-item>
</li>
${this.hidePartialView
? ''
: html` <li>
<uui-menu-item class="insert-menu-item" label="Partial view" title="Partial view"> </uui-menu-item>
</li>`}
<li>
<uui-menu-item class="insert-menu-item" label="Dictionary item" title="Dictionary item"> </uui-menu-item>
</li>
<li>
<uui-menu-item class="insert-menu-item" label="Macro" title="Macro"> </uui-menu-item>
</li>
</ul>
</umb-button-with-dropdown>
</uui-button-group>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-templating-insert-menu': UmbTemplatingInsertMenuElement;
}
}

97
src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-sidebar.element.ts Normal file
View File

@@ -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`
<umb-workspace-layout headline="Insert">
<div id="main">
<uui-box>
<uui-button @click=${this._close} look="placeholder" label="Insert value"
><h3>Value</h3>
<p>
Displays the value of a named field from the current page, with options to modify the value or fallback
to alternative values.
</p></uui-button
>
${this.data?.hidePartialViews
? ''
: html`<uui-button @click=${this._close} look="placeholder" label="Insert value"
><h3>Partial view</h3>
<p>
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.
</p></uui-button
>`}
<uui-button @click=${this._close} look="placeholder" label="Insert Macro"
><h3>Macro</h3>
<p>
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.
</p></uui-button
>
<uui-button @click=${this._close} look="placeholder" label="Insert Dictionary item"
><h3>Dictionary item</h3>
<p>
A dictionary item is a placeholder for a translatable piece of text, which makes it easy to create
designs for multilingual websites.
</p></uui-button
>
</uui-box>
</div>
<div slot="actions">
<uui-button @click=${this._close} look="secondary">Close</uui-button>
</div>
</umb-workspace-layout>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-insert-sidebar': UmbInsertSidebarElement;
}
}

14
src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts Normal file
View File

@@ -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<ManifestModal> = [
{
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];

3
src/Umbraco.Web.UI.Client/src/backoffice/templating/components/manifests.ts Normal file
View File

@@ -0,0 +1,3 @@
import { manifests as insertSidebarManifest } from './insert-sidebar/manifest';
export const manifests = [...insertSidebarManifest];

9
src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts
View File

@@ -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<ManifestTypes>) => {
manifests.forEach((manifest) => umbExtensionsRegistry.register(manifest));

21
src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts
View File

@@ -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 {
><uui-icon name="umb:delete"></uui-icon
></uui-button>
</uui-button-group>
<umb-button-with-dropdown look="secondary" placement="bottom-start" id="insert-button" label="Insert">
<uui-icon name="umb:add"></uui-icon>Insert
<ul id="insert-menu" slot="dropdown">
<li>
<uui-menu-item class="insert-menu-item" target="_blank" label="Value" title="Value"> </uui-menu-item>
</li>
<li>
<uui-menu-item class="insert-menu-item" label="Partial view" title="Partial view"> </uui-menu-item>
</li>
<li>
<uui-menu-item class="insert-menu-item" label="Macro" title="Macro"> </uui-menu-item>
</li>
<li>
<uui-menu-item class="insert-menu-item" label="Dictionary item" title="Dictionary item">
</uui-menu-item>
</li>
</ul>
</umb-button-with-dropdown>
<umb-templating-insert-menu></umb-templating-insert-menu>
<uui-button look="secondary" id="query-builder-button" label="Query builder">
<uui-icon name="umb:wand"></uui-icon>Query builder
</uui-button>