Merge pull request #1839 from umbraco/feature/cards-same-size-icon

Chore: Card with same size icons

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

@@ -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);

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

@@ -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);
 			}
 		`,
 	];

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

@@ -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;
 			}

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

@@ -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 = [

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

@@ -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 {