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

Media Entity Picker: Swaps umb-input-entity with umb-input-media

Browse Source 
After discussions we agreed that `umb-input-media` should be
for picking media entities, not intended for richer usage
(e.g. crops, focal points).
This commit is contained in:
leekelleher
2024-04-18 11:35:35 +01:00
parent 79ad702cc3
commit 76c7924cc2
3 changed files with 9 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts
View File

@@ -122,7 +122,6 @@ export class UmbInputTreeElement extends UUIFormControlMixin(UmbLitElement, '')
}
#renderMediaPicker() {
// TODO: [LK] Review the data structure of this input editor.
return html`<umb-input-media
.selection=${this.#selection}
.allowedContentTypeIds=${this._allowedContentTypeIds}

19
src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts
View File

@@ -1,11 +1,9 @@
import { UmbMediaPickerContext } from '../../components/input-media/input-media.context.js';
import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbInputEntityElement } from '@umbraco-cms/backoffice/components';
import type { UmbMediaItemModel } from '@umbraco-cms/backoffice/media';
import type { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
@@ -28,30 +26,25 @@ export class UmbPropertyEditorUIMediaEntityPickerElement extends UmbLitElement i
if (!config) return;
const minMax = config?.getValueByAlias<NumberRangeValueType>('validationLimit');
if (!minMax) return;
this.#min = minMax.min ?? 0;
this.#max = minMax.max ?? Infinity;
this.#min = minMax?.min ?? 0;
this.#max = minMax?.max ?? Infinity;
}
public get config() {
return undefined;
}
#onChange(event: { target: UmbInputEntityElement }) {
#onChange(event: { target: UmbInputMediaElement }) {
this.value = event.target.selection?.join(',') ?? null;
this.dispatchEvent(new UmbPropertyValueChangeEvent());
}
render() {
return html`
<umb-input-entity
.getIcon=${(item: UmbMediaItemModel) => item.mediaType.icon ?? 'icon-picture'}
<umb-input-media
.min=${this.#min}
.max=${this.#max}
.pickerContext=${UmbMediaPickerContext}
.selection=${this.#selection}
@change=${this.#onChange}>
</umb-input-entity>
@change=${this.#onChange}></umb-input-media>
`;
}
}

12
src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts
View File

@@ -1,5 +1,4 @@
import { UmbDictionaryPickerContext } from '../../../dictionary/components/input-dictionary/input-dictionary.context.js';
import { UmbMediaPickerContext } from '../../../media/media/components/input-media/input-media.context.js';
import { UmbPackageRepository } from '../../package/repository/index.js';
import { UmbPartialViewPickerContext } from '../../../templating/partial-views/components/input-partial-view/input-partial-view.context.js';
import { UmbScriptPickerContext } from '../../../templating/scripts/components/input-script/input-script.context.js';
@@ -27,8 +26,8 @@ import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
import type { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
import type { UmbInputDocumentTypeElement } from '@umbraco-cms/backoffice/document-type';
import type { UmbInputEntityElement } from '@umbraco-cms/backoffice/components';
import type { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
import type { UmbInputMediaTypeElement } from '@umbraco-cms/backoffice/media-type';
import type { UmbMediaItemModel } from '@umbraco-cms/backoffice/media';
import type { UmbNotificationContext } from '@umbraco-cms/backoffice/notification';
import type {
UUIBooleanInputEvent,
@@ -225,7 +224,7 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
`;
}
#onMediaChange(event: { target: UmbInputEntityElement }) {
#onMediaChange(event: { target: UmbInputMediaElement }) {
if (!this._package) return;
this._package.mediaIds = event.target.selection ?? [];
@@ -242,12 +241,7 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
return html`
<umb-property-layout label="Media">
<div slot="editor">
<umb-input-entity
.getIcon=${(item: UmbMediaItemModel) => item.mediaType.icon ?? 'icon-picture'}
.pickerContext=${UmbMediaPickerContext}
.selection=${this._package.mediaIds ?? []}
@change=${this.#onMediaChange}>
</umb-input-entity>
<umb-input-media .selection=${this._package.mediaIds ?? []} @change=${this.#onMediaChange}></umb-input-media>
<uui-checkbox
label="Include child nodes"
.checked=${this._package.mediaLoadChildNodes ?? false}