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

Merge remote-tracking branch 'origin/main' into feature/localization-1

Browse Source
This commit is contained in:
JesmoDev
2024-05-20 16:18:17 +02:00
parent 3164e575eb 3d14ffb2ea
commit f7a21c1808
8 changed files with 55 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts
View File

@@ -172,6 +172,9 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
static styles = [
css`
:host {
position: relative;
}
uui-icon {
vertical-align: sub;
margin-right: var(--uui-size-space-4);

6
src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/grid/media-grid-collection-view.element.ts
View File

@@ -116,7 +116,6 @@ export class UmbMediaGridCollectionViewElement extends UmbLitElement {
}
#renderItem(item: UmbMediaCollectionItemModel) {
// TODO: Fix the file extension when media items have a file extension. [?]
return html`
<uui-card-media
.name=${item.name ?? 'Unnamed Media'}
@@ -126,8 +125,7 @@ export class UmbMediaGridCollectionViewElement extends UmbLitElement {
@open=${(event: Event) => this.#onOpen(event, item.unique)}
@selected=${() => this.#onSelect(item)}
@deselected=${() => this.#onDeselect(item)}
class="media-item"
file-ext="${item.icon}">
class="media-item">
${item.url ? html`<img src=${item.url} alt=${item.name} />` : html`<umb-icon name=${item.icon}></umb-icon>`}
<!-- TODO: [LK] I'd like to indicate a busy state when bulk actions are triggered. -->
<!-- <div class="container"><uui-loader></uui-loader></div> -->
@@ -156,7 +154,7 @@ export class UmbMediaGridCollectionViewElement extends UmbLitElement {
gap: var(--uui-size-space-5);
}
umb-icon {
font-size: var(--uui-size-24);
font-size: var(--uui-size-8);
}
`,
];

63
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts
View File

@@ -5,20 +5,15 @@ import { LitElement, css, html, nothing, customElement, property, query } from '
@customElement('umb-image-cropper-focus-setter')
export class UmbImageCropperFocusSetterElement extends LitElement {
@query('#image') imageElement?: HTMLImageElement;
@query('#image') imageElement!: HTMLImageElement;
@query('#wrapper') wrapperElement?: HTMLImageElement;
@query('#focal-point') focalPointElement?: HTMLImageElement;
@query('#focal-point') focalPointElement!: HTMLImageElement;
@property({ type: String }) src?: string;
@property({ attribute: false }) focalPoint: UmbImageCropperFocalPoint = { left: 0.5, top: 0.5 };
#DOT_RADIUS = 6 as const;
connectedCallback() {
super.connectedCallback();
this.#addEventListeners();
}
disconnectedCallback() {
super.disconnectedCallback();
this.#removeEventListeners();
@@ -33,33 +28,46 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
}
}
protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
super.update(changedProperties);
if (changedProperties.has('src')) {
if (this.src) {
this.#initializeImage();
}
}
}
protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
super.firstUpdated(_changedProperties);
this.style.setProperty('--dot-radius', `${this.#DOT_RADIUS}px`);
}
if (this.focalPointElement) {
this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
}
if (this.imageElement) {
this.imageElement.onload = () => {
if (!this.imageElement || !this.wrapperElement) return;
const imageAspectRatio = this.imageElement.naturalWidth / this.imageElement.naturalHeight;
const hostRect = this.getBoundingClientRect();
const image = this.imageElement.getBoundingClientRect();
async #initializeImage() {
await this.updateComplete; // Wait for the @query to be resolved
if (image.width > hostRect.width) {
this.imageElement.style.width = '100%';
}
if (image.height > hostRect.height) {
this.imageElement.style.height = '100%';
}
this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
this.imageElement.style.aspectRatio = `${imageAspectRatio}`;
this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`;
};
}
this.imageElement.onload = () => {
if (!this.imageElement || !this.wrapperElement) return;
const imageAspectRatio = this.imageElement.naturalWidth / this.imageElement.naturalHeight;
const hostRect = this.getBoundingClientRect();
const image = this.imageElement.getBoundingClientRect();
if (image.width > hostRect.width) {
this.imageElement.style.width = '100%';
}
if (image.height > hostRect.height) {
this.imageElement.style.height = '100%';
}
this.imageElement.style.aspectRatio = `${imageAspectRatio}`;
this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`;
};
this.#addEventListeners();
}
async #addEventListeners() {
@@ -134,6 +142,7 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
}
/* Wrapper is used to make the focal point position responsive to the image size */
#wrapper {
overflow: hidden;
position: relative;
display: flex;
margin: auto;

6
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts
View File

@@ -33,11 +33,7 @@ export class UmbImageCropperPreviewElement extends LitElement {
if (!this.crop) return;
await this.updateComplete; // Wait for the @query to be resolved
if (!this.imageElement.complete) {
// Wait for the image to load
await new Promise((resolve) => (this.imageElement.onload = () => resolve(this.imageElement)));
}
await new Promise((resolve) => (this.imageElement.onload = () => resolve(this.imageElement)));
const container = this.imageContainerElement.getBoundingClientRect();
const cropAspectRatio = this.crop.width / this.crop.height;

1
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper.element.ts
View File

@@ -376,6 +376,7 @@ export class UmbImageCropperElement extends LitElement {
#image {
display: block;
position: absolute;
user-select: none;
}
#slider {

8
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts
View File

@@ -199,7 +199,6 @@ export class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '')
}
#renderItem(item: UmbMediaCardItemModel) {
// TODO: `file-ext` value has been hardcoded here. Find out if API model has value for it. [LK]
return html`
<uui-card-media name=${ifDefined(item.name === null ? undefined : item.name)} detail=${ifDefined(item.unique)}>
${item.url
@@ -208,10 +207,11 @@ export class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '')
${this.#renderIsTrashed(item)}
<uui-action-bar slot="actions">
${this.#renderOpenButton(item)}
<uui-button label="Copy media">
<uui-button label="Copy media" look="secondary">
<uui-icon name="icon-documents"></uui-icon>
</uui-button>
<uui-button
look="secondary"
@click=${() => this.#pickerContext.requestRemoveItem(item.unique)}
label="Remove media ${item.name}">
<uui-icon name="icon-trash"></uui-icon>
@@ -264,6 +264,10 @@ export class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '')
margin: 0 auto;
}
uui-card-media umb-icon {
font-size: var(--uui-size-8);
}
uui-card-media[drag-placeholder] {
opacity: 0.2;
}

7
src/Umbraco.Web.UI.Client/src/packages/media/media/dropzone/dropzone.element.ts
View File

@@ -16,6 +16,9 @@ export class UmbDropzoneElement extends UmbLitElement {
@property({ type: Boolean })
createAsTemporary: boolean = false;
@property({ type: Array, attribute: false })
accept: Array<string> = [];
//TODO: logic to disable the dropzone?
#files: Array<UmbUploadableFileModel | UmbTemporaryFileModel> = [];
@@ -92,10 +95,10 @@ export class UmbDropzoneElement extends UmbLitElement {
render() {
return html`<uui-file-dropzone
id="dropzone"
.accept=${this.accept?.join(',')}
?multiple=${this.multiple}
@change=${this.#onDropFiles}
label="${this.localize.term('media_dragAndDropYourFilesIntoTheArea')}"
accept=""></uui-file-dropzone>`;
label="${this.localize.term('media_dragAndDropYourFilesIntoTheArea')}"></uui-file-dropzone>`;
}
static styles = [

2
src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/media-picker-modal.element.ts
View File

@@ -247,7 +247,7 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement<UmbMediaPick
padding-bottom: 5px; /** The modal is a bit jumpy due to the img card focus/hover border. This fixes the issue. */
}
umb-icon {
font-size: var(--uui-size-24);
font-size: var(--uui-size-8);
}
img {