${item.meta.label}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dynamic-root/modals/dynamic-root-query-step-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dynamic-root/modals/dynamic-root-query-step-picker-modal.element.ts index 1a1eeb259b..f322d47a7a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/dynamic-root/modals/dynamic-root-query-step-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/dynamic-root/modals/dynamic-root-query-step-picker-modal.element.ts @@ -2,7 +2,7 @@ import { UmbDocumentTypePickerContext } from '../../documents/document-types/com import { UmbId } from '@umbraco-cms/backoffice/id'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement, map, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import type { UmbTreePickerDynamicRootQueryStep } from '@umbraco-cms/backoffice/components'; import type { ManifestDynamicRootQueryStep } from '@umbraco-cms/backoffice/extension-registry'; @@ -58,8 +58,9 @@ export class UmbDynamicRootQueryStepPickerModalModalElement extends UmbModalBase${item.meta.label}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/components/index.ts index bf7b1d04a5..f70c22af23 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/components/index.ts @@ -1 +1 @@ -export * from './insert-menu/templating-insert-menu.element.js'; +export * from './templating-item-menu/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/components/templating-item-menu/index.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/components/templating-item-menu/index.ts new file mode 100644 index 0000000000..6d80bac0d8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/components/templating-item-menu/index.ts @@ -0,0 +1 @@ +export * from './templating-item-menu.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/components/templating-item-menu/templating-item-menu.element.ts similarity index 65% rename from src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/templating/components/templating-item-menu/templating-item-menu.element.ts index aab57ae965..59bb18f5b4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/components/templating-item-menu/templating-item-menu.element.ts @@ -1,7 +1,13 @@ -import { UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS } from '../../modals/manifests.js'; +import { + UMB_PARTIAL_VIEW_PICKER_MODAL, + type UmbPartialViewPickerModalValue, +} from '../../modals/partial-view-picker/partial-view-picker-modal.token.js'; +import { CodeSnippetType } from '../../types.js'; +import { + UMB_TEMPLATING_ITEM_PICKER_MODAL, + type UmbTemplatingItemPickerModalValue, +} from '../../modals/templating-item-picker/templating-item-picker-modal.token.js'; import { getInsertDictionarySnippet, getInsertPartialSnippet } from '../../utils/index.js'; -import type { UmbChooseInsertTypeModalValue } from '../../modals/insert-choose-type-sidebar.element.js'; -import { CodeSnippetType } from '../../modals/insert-choose-type-sidebar.element.js'; import { UmbDictionaryDetailRepository } from '@umbraco-cms/backoffice/dictionary'; import { customElement, property, css, html } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; @@ -9,26 +15,10 @@ import type { UmbDictionaryItemPickerModalValue, UmbModalManagerContext, UmbModalContext, - UmbPartialViewPickerModalValue, -} from '@umbraco-cms/backoffice/modal'; -import { - UMB_DICTIONARY_ITEM_PICKER_MODAL, - UMB_MODAL_MANAGER_CONTEXT, - UMB_PARTIAL_VIEW_PICKER_MODAL, - UmbModalToken, } from '@umbraco-cms/backoffice/modal'; +import { UMB_DICTIONARY_ITEM_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>( - UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, - { - modal: { - type: 'sidebar', - size: 'small', - }, - }, -); - @customElement('umb-templating-insert-menu') export class UmbTemplatingInsertMenuElement extends UmbLitElement { @property() @@ -47,7 +37,7 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { }); } - async determineInsertValue(modalValue: UmbChooseInsertTypeModalValue) { + async determineInsertValue(modalValue: UmbTemplatingItemPickerModalValue) { const { type, value } = modalValue; switch (type) { @@ -76,16 +66,20 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { }; #openChooseTypeModal = () => { - this.#openModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL, { + this.#openModal = this._modalContext?.open(UMB_TEMPLATING_ITEM_PICKER_MODAL, { data: { - hidePartialView: this.hidePartialView, + hidePartialViews: this.hidePartialView, }, }); - this.#openModal?.onSubmit().then((closedModal: UmbChooseInsertTypeModalValue) => { + this.#openModal?.onSubmit().then((closedModal: UmbTemplatingItemPickerModalValue) => { this.determineInsertValue(closedModal); }); }; + #openInsertPageFieldSidebar() { + //this.#openModel = this._modalContext?.open(); + } + #openInsertPartialViewSidebar() { this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL); this.#openModal?.onSubmit().then((value) => { @@ -98,6 +92,7 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { #openInsertDictionaryItemModal() { this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, { data: { + hideTreeRoot: true, pickableFilter: (item) => item.id !== null, }, }); @@ -118,14 +113,30 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { render() { return 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. -
-
-
-
- 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
-
-
-
-
-
-
- Close
-
-
+ console.log('to be continued')}
+ look="placeholder"
+ label=${this.localize.term('template_insert')}>
+
+
+
+
+
+
+
+
+
`;
+ }
+
+ static styles = [
+ UmbTextStyles,
+ css`
+ #main uui-button:not(:last-of-type) {
+ display: block;
+ margin-bottom: var(--uui-size-space-5);
+ }
+
+ h3,
+ p {
+ text-align: left;
+ }
+ `,
+ ];
+}
+
+export default UmbTemplatingItemPickerModalElement;
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'umb-templating-item-picker-modal': UmbTemplatingItemPickerModalElement;
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-item-picker/templating-item-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-item-picker/templating-item-picker-modal.token.ts
new file mode 100644
index 0000000000..79e593dae8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-item-picker/templating-item-picker-modal.token.ts
@@ -0,0 +1,21 @@
+import type { CodeSnippetType } from '../../types.js';
+import { type UmbDictionaryItemPickerModalValue, UmbModalToken } from '@umbraco-cms/backoffice/modal';
+
+export interface UmbTemplatingItemPickerModalData {
+ hidePartialViews?: boolean;
+}
+
+export type UmbTemplatingItemPickerModalValue = {
+ value: string | UmbDictionaryItemPickerModalValue;
+ type: CodeSnippetType;
+};
+
+export const UMB_TEMPLATING_ITEM_PICKER_MODAL = new UmbModalToken<
+ UmbTemplatingItemPickerModalData,
+ UmbTemplatingItemPickerModalValue
+>('Umb.Modal.TemplatingItemPicker', {
+ modal: {
+ type: 'sidebar',
+ size: 'small',
+ },
+});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-section-picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-section-picker/index.ts
new file mode 100644
index 0000000000..5bb66c95b5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-section-picker/index.ts
@@ -0,0 +1,2 @@
+export * from './templating-section-picker-input.element.js';
+export * from './templating-section-picker-modal.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-section-picker/templating-section-picker-input.element.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-input.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-section-picker/templating-section-picker-input.element.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-section-picker/templating-section-picker-modal.element.ts
similarity index 59%
rename from src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-section-picker/templating-section-picker-modal.element.ts
index 602b206ca1..c8aa7f5056 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-section-picker/templating-section-picker-modal.element.ts
@@ -1,31 +1,18 @@
-import { UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS } from '../manifests.js';
import { getAddSectionSnippet, getRenderBodySnippet, getRenderSectionSnippet } from '../../utils/index.js';
+import type {
+ UmbTemplatingSectionPickerModalData,
+ UmbTemplatingSectionPickerModalValue,
+} from './templating-section-picker-modal.token.js';
+import type { UmbInsertSectionCheckboxElement } from './templating-section-picker-input.element.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, queryAll, state } from '@umbraco-cms/backoffice/external/lit';
-import { UmbModalToken, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+import './templating-section-picker-input.element.js';
-import './insert-section-input.element.js';
-// eslint-disable-next-line local-rules/ensure-relative-import-use-js-extension
-import type { UmbInsertSectionCheckboxElement } from './insert-section-input.element';
-
-export const UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL = new UmbModalTokenValue (Not implemented)
+
+
Partial view
+
+
Dictionary Item
+
+
- Renders the contents of a child template, by inserting a @RenderBody() placeholder.
+ @RenderBody() placeholder.
+
- Renders a named area of a child template, by inserting a @RenderSection(name) placeholder.
- This renders an area of a child template which is wrapped in a corresponding
- @section [name]{ ... } definition.
+ @RenderSection(name) placeholder. This renders an area of a child template which is
+ wrapped in a corresponding @section [name]{ ... } definition.
+
- Defines a part of your template as a named section by wrapping it in @section { ... }. This
- can be rendered in a specific area of the parent of this template, by using @RenderSection.
+ @RenderSection(name) placeholder. This renders an area of a child template which is
+ wrapped in a corresponding @section [name]{ ... } definition.
+