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

add insert value tab

Browse Source
This commit is contained in:
Julia Gru
2023-04-14 16:21:16 +02:00
parent b568c0d514
commit dab95de08a
5 changed files with 131 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +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';
import './insert-sidebar/insert-choose-type-sidebar.element';

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

@@ -4,6 +4,7 @@ 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';
import { UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL } from '../insert-sidebar/insert-choose-type-sidebar.element';
export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>(
UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS,
@@ -67,6 +68,10 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement {
});
};
#openInsertValueSidebar() {
this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL);
}
@property()
hidePartialView = false;
@@ -84,7 +89,13 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement {
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>
<uui-menu-item
class="insert-menu-item"
target="_blank"
label="Value"
title="Value"
@click=${this.#openInsertValueSidebar}>
</uui-menu-item>
</li>
${this.hidePartialView
? ''

19
src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-sidebar.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-choose-type-sidebar.element.ts
View File

@@ -1,8 +1,17 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS } from './manifest';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext } from '@umbraco-cms/backoffice/modal';
import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext, UmbModalToken } from '@umbraco-cms/backoffice/modal';
export const UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL = new UmbModalToken(
UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS,
{
type: 'sidebar',
size: 'small',
}
);
@customElement('umb-insert-sidebar')
export default class UmbInsertSidebarElement extends UmbModalBaseElement<{ hidePartialViews: boolean }> {
@@ -20,7 +29,7 @@ export default class UmbInsertSidebarElement extends UmbModalBaseElement<{ hideP
height: calc(100vh - 124px);
}
#main uui-button {
#main uui-button:not(:last-of-type) {
display: block;
margin-bottom: var(--uui-size-space-5);
}
@@ -45,12 +54,16 @@ export default class UmbInsertSidebarElement extends UmbModalBaseElement<{ hideP
});
}
#openInsertValueSidebar() {
this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL);
}
render() {
return html`
<umb-workspace-layout headline="Insert">
<div id="main">
<uui-box>
<uui-button @click=${this._close} look="placeholder" label="Insert value"
<uui-button @click=${this.#openInsertValueSidebar} 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

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

@@ -0,0 +1,94 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
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();
}
@state()
showDefaultValueInput = false;
render() {
return html`
<umb-workspace-layout headline="Insert">
<div id="main">
<uui-box>
<uui-form-layout-item>
<uui-label slot="label" for="field-selector">Choose field</uui-label>
<uui-combobox id="field-selector">
<uui-combobox-list>
<uui-combobox-list-option style="padding: 8px"> apple </uui-combobox-list-option>
<uui-combobox-list-option style="padding: 8px"> orange </uui-combobox-list-option>
<uui-combobox-list-option style="padding: 8px"> lemon </uui-combobox-list-option>
</uui-combobox-list>
</uui-combobox>
</uui-form-layout-item>
${this.showDefaultValueInput
? html` <uui-form-layout-item>
<uui-label slot="label" for="default-value">Default value</uui-label>
<uui-input id="default-value" type="text" name="default-value" label="default value"> </uui-input>
</uui-form-layout-item>`
: html` <uui-button
@click=${() => (this.showDefaultValueInput = true)}
look="placeholder"
label="Add default value "
>Add default value</uui-button
>`}
<uui-form-layout-item>
<uui-label slot="label" for="default-value">Recursive</uui-label>
<uui-checkbox>Yes, make it recursive</uui-checkbox>
</uui-form-layout-item>
<uui-form-layout-item>
<uui-label slot="label">Output sample</uui-label>
<uui-code-block> Some code that goes here... </uui-code-block>
</uui-form-layout-item>
</uui-box>
</div>
<div slot="actions">
<uui-button @click=${this._close} look="secondary">Close</uui-button>
<uui-button @click=${this._close} look="primary">Submit</uui-button>
</div>
</umb-workspace-layout>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-insert-value-sidebar': UmbInsertValueSidebarElement;
}
}

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

@@ -1,13 +1,20 @@
import { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry';
export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.ChooseType.Sidebar';
export const UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.InsertValue.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'),
loader: () => import('./insert-choose-type-sidebar.element'),
},
{
type: 'modal',
alias: UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS,
name: 'Insert value type sidebar',
loader: () => import('./insert-value-sidebar.element'),
},
];