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

Modals: Make Create Actions open a Dialogs (#20489)

Browse Source 
* generic create dialog

* document create dialog

* media create dialog

* member create

* partial view
This commit is contained in:
Niels Lyngsø
2025-10-13 20:53:29 +02:00
committed by GitHub
parent 11fcfba091
commit a6eb2a1527
10 changed files with 105 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.element.ts
View File

@@ -14,6 +14,7 @@ import {
repeat,
ifDefined,
type PropertyValues,
css,
} from '@umbraco-cms/backoffice/external/lit';
import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
@@ -101,25 +102,23 @@ export class UmbEntityCreateOptionActionListModalElement extends UmbModalBaseEle
override render() {
return html`
<umb-body-layout headline="${this.localize.term('general_create')}">
<uui-box>
${this._apiControllers.length === 0
? html`<div>No create options available.</div>`
: html`
<uui-ref-list>
${repeat(
this._apiControllers,
(controller) => controller.manifest?.alias,
(controller, index) => this.#renderRefItem(controller, index),
)}
</uui-ref-list>
`}
</uui-box>
<uui-dialog-layout headline="${this.localize.term('general_create')}">
${this._apiControllers.length === 0
? html`<div>No create options available.</div>`
: html`
<uui-ref-list>
${repeat(
this._apiControllers,
(controller) => controller.manifest?.alias,
(controller, index) => this.#renderRefItem(controller, index),
)}
</uui-ref-list>
`}
<uui-button
slot="actions"
label=${this.localize.term('general_cancel')}
@click=${this._rejectModal}></uui-button>
</umb-body-layout>
</uui-dialog-layout>
`;
}
@@ -143,6 +142,12 @@ export class UmbEntityCreateOptionActionListModalElement extends UmbModalBaseEle
</umb-ref-item>
`;
}
static override styles = css`
:host {
max-width: 800px;
}
`;
}
export { UmbEntityCreateOptionActionListModalElement as element };

3
src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.token.ts
View File

@@ -13,7 +13,6 @@ export const UMB_ENTITY_CREATE_OPTION_ACTION_LIST_MODAL = new UmbModalToken<
UmbEntityCreateOptionActionListModalValue
>('Umb.Modal.Entity.CreateOptionActionList', {
modal: {
type: 'sidebar',
size: 'small',
type: 'dialog',
},
});

86
src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/document-create-options-modal.element.ts
View File

@@ -120,10 +120,12 @@ export class UmbDocumentCreateOptionsModalElement extends UmbModalBaseElement<
}
override render() {
const renderBlueprint = this._availableBlueprints.length && this.#documentTypeUnique;
const headline = renderBlueprint ? this.localize.term('blueprints_selectBlueprint') : this._headline;
return html`
<umb-body-layout headline=${this.localize.term('actions_create')}>
<uui-dialog-layout headline=${headline}>
${when(
this._availableBlueprints.length && this.#documentTypeUnique,
renderBlueprint,
() => this.#renderBlueprints(),
() => this.#renderDocumentTypes(),
)}
@@ -132,7 +134,7 @@ export class UmbDocumentCreateOptionsModalElement extends UmbModalBaseElement<
id="cancel"
label=${this.localize.term('general_cancel')}
@click="${this._rejectModal}"></uui-button>
</umb-body-layout>
</uui-dialog-layout>
`;
}
@@ -164,52 +166,46 @@ export class UmbDocumentCreateOptionsModalElement extends UmbModalBaseElement<
}
#renderDocumentTypes() {
return html`
<uui-box .headline=${this._headline}>
${when(
this._allowedDocumentTypes.length === 0,
() => this.#renderNoDocumentTypes(),
() =>
repeat(
this._allowedDocumentTypes,
(documentType) => documentType.unique,
(documentType) => html`
<uui-ref-node-document-type
.name=${this.localize.string(documentType.name)}
.alias=${this.localize.string(documentType.description ?? '')}
select-only
selectable
@selected=${() => this.#onSelectDocumentType(documentType.unique)}
@open=${() => this.#onSelectDocumentType(documentType.unique)}>
<umb-icon slot="icon" name=${documentType.icon || 'icon-circle-dotted'}></umb-icon>
</uui-ref-node-document-type>
`,
),
)}
</uui-box>
`;
return when(
this._allowedDocumentTypes.length === 0,
() => this.#renderNoDocumentTypes(),
() =>
repeat(
this._allowedDocumentTypes,
(documentType) => documentType.unique,
(documentType) => html`
<uui-ref-node-document-type
.name=${this.localize.string(documentType.name)}
.alias=${this.localize.string(documentType.description ?? '')}
select-only
selectable
@selected=${() => this.#onSelectDocumentType(documentType.unique)}
@open=${() => this.#onSelectDocumentType(documentType.unique)}>
<umb-icon slot="icon" name=${documentType.icon || 'icon-circle-dotted'}></umb-icon>
</uui-ref-node-document-type>
`,
),
);
}
#renderBlueprints() {
return html`
<uui-box headline=${this.localize.term('blueprints_selectBlueprint')}>
<uui-menu-item
id="blank"
label=${this.localize.term('blueprints_blankBlueprint')}
@click=${() => this.#onNavigate(this.#documentTypeUnique)}>
<umb-icon slot="icon" name=${this.#documentTypeIcon}></umb-icon>
</uui-menu-item>
${repeat(
this._availableBlueprints,
(blueprint) => blueprint.unique,
(blueprint) =>
html`<uui-menu-item
label=${blueprint.name}
@click=${() => this.#onNavigate(this.#documentTypeUnique, blueprint.unique)}>
<umb-icon slot="icon" name="icon-blueprint"></umb-icon>
</uui-menu-item>`,
)}
</uui-box>
<uui-menu-item
id="blank"
label=${this.localize.term('blueprints_blankBlueprint')}
@click=${() => this.#onNavigate(this.#documentTypeUnique)}>
<umb-icon slot="icon" name=${this.#documentTypeIcon}></umb-icon>
</uui-menu-item>
${repeat(
this._availableBlueprints,
(blueprint) => blueprint.unique,
(blueprint) =>
html`<uui-menu-item
label=${blueprint.name}
@click=${() => this.#onNavigate(this.#documentTypeUnique, blueprint.unique)}>
<umb-icon slot="icon" name="icon-blueprint"></umb-icon>
</uui-menu-item>`,
)}
`;
}

3
src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/document-create-options-modal.token.ts
View File

@@ -16,7 +16,6 @@ export const UMB_DOCUMENT_CREATE_OPTIONS_MODAL = new UmbModalToken<
UmbDocumentCreateOptionsModalValue
>('Umb.Modal.Document.CreateOptions', {
modal: {
type: 'sidebar',
size: 'small',
type: 'dialog',
},
});

16
src/Umbraco.Web.UI.Client/src/packages/media/media/entity-actions/create/media-create-options-modal.element.ts
View File

@@ -63,20 +63,18 @@ export class UmbMediaCreateOptionsModalElement extends UmbModalBaseElement<
override render() {
return html`
<umb-body-layout headline=${this._headline ?? ''}>
<uui-box>
${when(
this._allowedMediaTypes.length === 0,
() => this.#renderNotAllowed(),
() => this.#renderAllowedMediaTypes(),
)}
</uui-box>
<uui-dialog-layout headline=${this._headline ?? ''}>
${when(
this._allowedMediaTypes.length === 0,
() => this.#renderNotAllowed(),
() => this.#renderAllowedMediaTypes(),
)}
<uui-button
slot="actions"
id="cancel"
label=${this.localize.term('general_cancel')}
@click="${this._rejectModal}"></uui-button>
</umb-body-layout>
</uui-dialog-layout>
`;
}

3
src/Umbraco.Web.UI.Client/src/packages/media/media/entity-actions/create/media-create-options-modal.token.ts
View File

@@ -16,7 +16,6 @@ export const UMB_MEDIA_CREATE_OPTIONS_MODAL = new UmbModalToken<
UmbMediaCreateOptionsModalValue
>('Umb.Modal.Media.CreateOptions', {
modal: {
type: 'sidebar',
size: 'small',
type: 'dialog',
},
});

35
src/Umbraco.Web.UI.Client/src/packages/members/member/entity-actions/create/member-create-options-modal.element.ts
View File

@@ -9,8 +9,7 @@ import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
import { UmbMemberTypeTreeRepository } from '@umbraco-cms/backoffice/member-type';
const elementName = 'umb-member-create-options-modal';
@customElement(elementName)
@customElement('umb-member-create-options-modal')
export class UmbMemberCreateOptionsModalElement extends UmbModalBaseElement<
UmbMemberCreateOptionsModalData,
UmbMemberCreateOptionsModalValue
@@ -53,33 +52,29 @@ export class UmbMemberCreateOptionsModalElement extends UmbModalBaseElement<
override render() {
return html`
<umb-body-layout headline=${this.localize.term('actions_create')}>
<uui-dialog-layout headline=${this.localize.term('actions_create')}>
${this.#renderOptions()}
<uui-button
slot="actions"
id="cancel"
label=${this.localize.term('general_cancel')}
@click="${this._rejectModal}"></uui-button>
</umb-body-layout>
</uui-dialog-layout>
`;
}
#renderOptions() {
return html`
<uui-box>
${repeat(
this._options,
(option) => option.unique,
(option) => html`
<uui-ref-node
.name=${this.localize.string(option.label)}
@open=${(event: Event) => this.#onOpen(event, option.unique)}>
<umb-icon slot="icon" name=${option.icon || 'icon-circle-dotted'}></umb-icon>
</uui-ref-node>
`,
)}
</uui-box>
`;
return repeat(
this._options,
(option) => option.unique,
(option) => html`
<uui-ref-node
.name=${this.localize.string(option.label)}
@open=${(event: Event) => this.#onOpen(event, option.unique)}>
<umb-icon slot="icon" name=${option.icon || 'icon-circle-dotted'}></umb-icon>
</uui-ref-node>
`,
);
}
static override styles = [
@@ -100,6 +95,6 @@ export { UmbMemberCreateOptionsModalElement as element };
declare global {
interface HTMLElementTagNameMap {
[elementName]: UmbMemberCreateOptionsModalElement;
'umb-member-create-options-modal': UmbMemberCreateOptionsModalElement;
}
}

3
src/Umbraco.Web.UI.Client/src/packages/members/member/entity-actions/create/member-create-options-modal.token.ts
View File

@@ -11,7 +11,6 @@ export const UMB_MEMBER_CREATE_OPTIONS_MODAL = new UmbModalToken<
UmbMemberCreateOptionsModalValue
>('Umb.Modal.Member.CreateOptions', {
modal: {
type: 'sidebar',
size: 'small',
type: 'dialog',
},
});

3
src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/options-modal/index.ts
View File

@@ -9,8 +9,7 @@ export const UMB_PARTIAL_VIEW_CREATE_OPTIONS_MODAL = new UmbModalToken<UmbPartia
'Umb.Modal.PartialView.CreateOptions',
{
modal: {
type: 'sidebar',
size: 'small',
type: 'dialog',
},
},
);

36
src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/options-modal/partial-view-create-options-modal.element.ts
View File

@@ -62,33 +62,31 @@ export class UmbPartialViewCreateOptionsModalElement extends UmbModalBaseElement
override render() {
return html`
<umb-body-layout headline="Create Partial View">
<uui-box>
<!-- TODO: construct url -->
<uui-menu-item
href=${this.#getCreateHref()}
label=${this.localize.term('create_newEmptyPartialView')}
@click=${this.#onNavigate}>
<uui-icon slot="icon" name="icon-document-html"></uui-icon>
</uui-menu-item>
<uui-dialog-layout headline="Create Partial View">
<!-- TODO: construct url -->
<uui-menu-item
href=${this.#getCreateHref()}
label=${this.localize.term('create_newEmptyPartialView')}
@click=${this.#onNavigate}>
<uui-icon slot="icon" name="icon-document-html"></uui-icon>
</uui-menu-item>
<uui-menu-item
@click=${this.#onCreateFromSnippetClick}
label="${this.localize.term('create_newPartialViewFromSnippet')}...">
<uui-icon slot="icon" name="icon-document-html"></uui-icon>
</uui-menu-item>
<uui-menu-item
@click=${this.#onCreateFromSnippetClick}
label="${this.localize.term('create_newPartialViewFromSnippet')}...">
<uui-icon slot="icon" name="icon-document-html"></uui-icon>
</uui-menu-item>
<uui-menu-item @click=${this.#onCreateFolderClick} label="${this.localize.term('create_newFolder')}...">
<uui-icon slot="icon" name="icon-folder"></uui-icon>
</uui-menu-item>
</uui-box>
<uui-menu-item @click=${this.#onCreateFolderClick} label="${this.localize.term('create_newFolder')}...">
<uui-icon slot="icon" name="icon-folder"></uui-icon>
</uui-menu-item>
<uui-button
slot="actions"
id="cancel"
label=${this.localize.term('buttons_confirmActionCancel')}
@click="${this._rejectModal}"></uui-button>
</umb-body-layout>
</uui-dialog-layout>
`;
}
}