Feature: Link Picker modal refactor (#2477)

leekelleher · web-flow · commit 38373f7ab7e1 · 2024-10-23T12:56:27.000+02:00
* Adds `hideTarget` flag

* Sets default modal size to "medium"

* Code tidy-up

* Updates "defaultdialogs_linkinternal" localizations

to remove the `:` suffix (from all languages)

* Applied `standalone` to single Document Picker item

* Adds `icon` to the document/media detail types

* Link Picker modal: total refactor!

Swaps the inline trees with input pickers.
Makes use of `&lt;umb-property-layout&gt;` component.
+ plenty of TLC in the UI/UX!

* Sets the `allowedMediaTypeIds` for media picker filtering

e.g. folders are not selectable
diff --git a/src/assets/lang/ar.ts b/src/assets/lang/ar.ts
@@ -481,7 +481,7 @@ export default {
 			'قد يكون تغيير الثقافة للغة عملية مكلفة وستؤدي إلى إعادة بناء ذاكرة التخزين المؤقت للمحتوى والفهارس',
 		lastEdited: 'آخر تحرير',
 		link: 'رابط',
-		linkinternal: 'رابط داخلي:',
+		linkinternal: 'رابط داخلي',
 		linklocaltip: 'عند استخدام الروابط المحلية، أدخل "#" أمام الرابط',
 		linknewwindow: 'فتح في نافذة جديدة؟',
 		macroDoesNotHaveProperties: 'هذا الماكرو لا يحتوي على خصائص يمكنك تحريرها',
diff --git a/src/assets/lang/bs.ts b/src/assets/lang/bs.ts
@@ -482,7 +482,7 @@ export default {
 			'Promjena kulture jezika može biti skupa operacija i rezultirat će\n       u kešu sadržaja i indeksima koji se rekonstruišu\n    ',
 		lastEdited: 'Posljednji put uređeno',
 		link: 'Link',
-		linkinternal: 'Interni link:',
+		linkinternal: 'Interni link',
 		linklocaltip: 'Kada koristite lokalne veze, umetnite "#" ispred linka',
 		linknewwindow: 'Otvori u novom prozoru?',
 		macroDoesNotHaveProperties: 'Ovaj makro ne sadrži svojstva koja možete uređivati',
diff --git a/src/assets/lang/cs-cz.ts b/src/assets/lang/cs-cz.ts
@@ -429,7 +429,7 @@ export default {
 			'Změna kultury jazyka může být náročná operace a bude mít za následek opětovné sestavení mezipaměti obsahu a indexů',
 		lastEdited: 'Naposledy editováno',
 		link: 'Odkaz',
-		linkinternal: 'Místní odkaz:',
+		linkinternal: 'Místní odkaz',
 		linklocaltip: 'Při používání místních odkazů vložte znak "#" před odkaz',
 		linknewwindow: 'Otevřít v novém okně?',
 		macroDoesNotHaveProperties: 'Toto makro nemá žádné vlastnosti, které by bylo možno editovat',
diff --git a/src/assets/lang/cy-gb.ts b/src/assets/lang/cy-gb.ts
@@ -504,7 +504,7 @@ export default {
 			"Gall newid y diwylliant ar gyfer iaith fod yn weithrediad drud a bydd yn arwain at ailadeiladu'r storfa cynnwys a'r mynegeion",
 		lastEdited: 'Golygwyd ddiwethaf',
 		link: 'Dolen',
-		linkinternal: 'Dolen fewnol:',
+		linkinternal: 'Dolen fewnol',
 		linklocaltip: 'Wrth ddefnyddio dolenni leol, defnyddiwch "#" o flaen y ddolen',
 		linknewwindow: 'Agor mewn ffenestr newydd?',
 		macroDoesNotHaveProperties: "Nid yw'r macro yma yn cynnwys unrhyw briodweddau gallwch chi olygu",
diff --git a/src/assets/lang/da-dk.ts b/src/assets/lang/da-dk.ts
@@ -499,7 +499,7 @@ export default {
 			'Ændring af kulturen for et sprog kan forsage en krævende opration og vil\n      resultere i indholds cache og indeksering vil blive genlavet\n    ',
 		lastEdited: 'Sidst redigeret',
 		link: 'Link',
-		linkinternal: 'Internt link:',
+		linkinternal: 'Internt link',
 		linklocaltip: 'Ved lokalt link, indsæt da en "#" foran linket',
 		linknewwindow: 'Åben i nyt vindue?',
 		macroDoesNotHaveProperties: 'Denne makro har ingen egenskaber du kan redigere',
diff --git a/src/assets/lang/de-de.ts b/src/assets/lang/de-de.ts
@@ -503,7 +503,7 @@ export default {
 			'\n      Die Kultur-Variante einer Sprache zu ändern ist möglicherweise eine aufwendige Operation und führt zum Erneuern von Inhalts-Zwischenspeicher und Such-Index.\n    ',
 		lastEdited: 'Zuletzt bearbeitet',
 		link: 'Verknüpfung',
-		linkinternal: 'Anker:',
+		linkinternal: 'Internen Link',
 		linklocaltip: 'Wenn lokale Links verwendet werden, füge ein "#" vor den Link ein',
 		linknewwindow: 'In einem neuen Fenster öffnen?',
 		macroDoesNotHaveProperties: 'Dieses Makro enthält keine einstellbaren Eigenschaften.',
diff --git a/src/assets/lang/en-us.ts b/src/assets/lang/en-us.ts
@@ -521,7 +521,7 @@ export default {
 			'Changing the culture for a language may be an expensive operation and will result\n      in the content cache and indexes being rebuilt\n    ',
 		lastEdited: 'Last Edited',
 		link: 'Link',
-		linkinternal: 'Internal link:',
+		linkinternal: 'Internal link',
 		linklocaltip: 'When using local links, insert "#" in front of link',
 		linknewwindow: 'Open in new window?',
 		macroDoesNotHaveProperties: 'This macro does not contain any properties you can edit',
@@ -553,7 +553,7 @@ export default {
 		relateToOriginalLabel: 'Relate to original',
 		includeDescendants: 'Include descendants',
 		theFriendliestCommunity: 'The friendliest community',
-		linkToPage: 'Link to page',
+		linkToPage: 'Link to document',
 		openInNewWindow: 'Opens the linked document in a new window or tab',
 		linkToMedia: 'Link to media',
 		selectContentStartNode: 'Select content start node',
diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
@@ -519,7 +519,7 @@ export default {
 			'Changing the culture for a language may be an expensive operation and will result\n      in the content cache and indexes being rebuilt\n    ',
 		lastEdited: 'Last Edited',
 		link: 'Link',
-		linkinternal: 'Internal link:',
+		linkinternal: 'Internal link',
 		linklocaltip: 'When using local links, insert "#" in front of link',
 		linknewwindow: 'Open in new window?',
 		macroDoesNotHaveProperties: 'This macro does not contain any properties you can edit',
@@ -551,7 +551,7 @@ export default {
 		relateToOriginalLabel: 'Relate to original',
 		includeDescendants: 'Include descendants',
 		theFriendliestCommunity: 'The friendliest community',
-		linkToPage: 'Link to page',
+		linkToPage: 'Link to document',
 		openInNewWindow: 'Opens the linked document in a new window or tab',
 		linkToMedia: 'Link to media',
 		selectContentStartNode: 'Select content start node',
diff --git a/src/assets/lang/fr-fr.ts b/src/assets/lang/fr-fr.ts
@@ -442,7 +442,7 @@ export default {
 			"Modifier la culture d'une langue peut être une opération lourde qui aura pour conséquence la réinitialisation de la cache de contenu et des index",
 		lastEdited: 'Dernière modification',
 		link: 'Lien',
-		linkinternal: 'Lien interne :',
+		linkinternal: 'Lien interne',
 		linklocaltip: 'Si vous utilisez des ancres, insérez # au début du lien',
 		linknewwindow: 'Ouvrir dans une nouvelle fenêtre?',
 		macroDoesNotHaveProperties: 'Cette macro ne contient aucune propriété éditable',
diff --git a/src/assets/lang/he-il.ts b/src/assets/lang/he-il.ts
@@ -178,7 +178,7 @@ export default {
 		inserttable: 'הוסף טבלה',
 		lastEdited: 'נערך לאחרונה',
 		link: 'קישור',
-		linkinternal: 'קישור פנימי:',
+		linkinternal: 'קישור פנימי',
 		linklocaltip: 'בעת שימוש בקישוריים פנימיים, הוסף "#" בתחילת הקישור',
 		linknewwindow: 'לפתוח בחלון חדש?',
 		macroDoesNotHaveProperties: 'המאקרו לא מכיל מאפיינים שניתן לערוך',
diff --git a/src/assets/lang/hr-hr.ts b/src/assets/lang/hr-hr.ts
@@ -484,7 +484,7 @@ export default {
 			'Promjena kulture jezika može biti skupa operacija i rezultirat će promjenama u predmemoriji sadržaja i indeksima koji se rekonstruiraju\n    ',
 		lastEdited: 'Zadnje uređivano',
 		link: 'Link',
-		linkinternal: 'Interni link:',
+		linkinternal: 'Interni link',
 		linklocaltip: 'Kada koristite lokalni linkovi, umetnite "#" ispred linka',
 		linknewwindow: 'Otvoriti u novom prozoru?',
 		macroDoesNotHaveProperties: 'Ovaj makro ne sadrži svojstva koja možete uređivati',
diff --git a/src/assets/lang/it-it.ts b/src/assets/lang/it-it.ts
@@ -495,7 +495,7 @@ export default {
 			"La modifica della cultura di una lingua può essere un'operazione costosa e comporterà la ricostruzione della cache dei contenuti e degli indici",
 		lastEdited: 'Ultima modifica',
 		link: 'Link',
-		linkinternal: 'Link interno:',
+		linkinternal: 'Link interno',
 		linklocaltip: 'Quando usi il link locale, inserisci # prima del link',
 		linknewwindow: 'Apri in nuova finestra?',
 		macroContainerSettings: 'Impostazioni della macro',
diff --git a/src/assets/lang/ja-jp.ts b/src/assets/lang/ja-jp.ts
@@ -227,7 +227,7 @@ export default {
 		inserttable: '表の挿入',
 		lastEdited: '最近の更新',
 		link: 'リンク',
-		linkinternal: '内部リンク:',
+		linkinternal: '内部リンク',
 		linklocaltip: '内部リンクを使うときは、リンクの前に "#" を挿入してください。',
 		linknewwindow: '新規ウィンドウで開きますか?',
 		macroDoesNotHaveProperties: 'このマクロは編集できるプロパティがありません',
diff --git a/src/assets/lang/ko-kr.ts b/src/assets/lang/ko-kr.ts
@@ -178,7 +178,7 @@ export default {
 		inserttable: '테이블 삽입',
 		lastEdited: '마지막 수정',
 		link: '링크',
-		linkinternal: '내부링크:',
+		linkinternal: '내부링크',
 		linklocaltip: '내부링크를 사용하실 때 링크앞에 "#"를 넣어주세요',
 		linknewwindow: '새 창으로 여시겠습니까?',
 		macroDoesNotHaveProperties: '이 매크로에는 편집할 수 있는 항목이 포함되어 있지 않습니다.',
diff --git a/src/assets/lang/nb-no.ts b/src/assets/lang/nb-no.ts
@@ -222,7 +222,7 @@ export default {
 		inserttable: 'Sett inn tabell',
 		lastEdited: 'Sist redigert',
 		link: 'Lenke',
-		linkinternal: 'Intern link:',
+		linkinternal: 'Intern link',
 		linklocaltip: 'Ved lokal link, sett inn "#" foran link',
 		linknewwindow: 'Åpne i nytt vindu?',
 		macroDoesNotHaveProperties: 'Denne makroen har ingen egenskaper du kan endre',
diff --git a/src/assets/lang/nl-nl.ts b/src/assets/lang/nl-nl.ts
@@ -452,7 +452,7 @@ export default {
 			'De cultuur veranderen voor een taal kan een langdurige operatie zijn en zal ertoe\n      leiden dat de inhoudscache en indexen opnieuw worden opgebouwd\n    ',
 		lastEdited: 'Laatst aangepast op',
 		link: 'Link',
-		linkinternal: 'Interne link:',
+		linkinternal: 'Interne link',
 		linklocaltip: 'Plaats een hekje (“#”) voor voor interne links.',
 		linknewwindow: 'In nieuw venster openen?',
 		macroDoesNotHaveProperties: 'Deze macro heeft geen eigenschappen die u kunt bewerken',
diff --git a/src/assets/lang/pl-pl.ts b/src/assets/lang/pl-pl.ts
@@ -302,7 +302,7 @@ export default {
 		inserttable: 'Wstaw tabelę',
 		lastEdited: 'Ostatnio edytowane',
 		link: 'Link',
-		linkinternal: 'Link wewnętrzny:',
+		linkinternal: 'Link wewnętrzny',
 		linklocaltip: 'Kiedy używasz odnośników lokalnych, wstaw znak "#" na początku linku',
 		linknewwindow: 'Otworzyć w nowym oknie?',
 		macroDoesNotHaveProperties: 'To makro nie posiada żadnych właściwości, które można edytować',
diff --git a/src/assets/lang/pt-br.ts b/src/assets/lang/pt-br.ts
@@ -178,7 +178,7 @@ export default {
 		inserttable: 'Inserir tabela',
 		lastEdited: 'Última Edição',
 		link: 'Link',
-		linkinternal: 'Link interno:',
+		linkinternal: 'Link interno',
 		linklocaltip: 'Ao usar links locais insira "#" na frente do link',
 		linknewwindow: 'Abrir em nova janela?',
 		macroDoesNotHaveProperties: 'Este macro não contém nenhuma propriedade que possa ser editada',
diff --git a/src/assets/lang/ru-ru.ts b/src/assets/lang/ru-ru.ts
@@ -359,7 +359,7 @@ export default {
 		inserttable: 'Вставить таблицу',
 		lastEdited: 'Последняя правка',
 		link: 'Ссылка',
-		linkinternal: 'Внутренняя ссылка:',
+		linkinternal: 'Внутренняя ссылка',
 		linklocaltip: 'Для того чтобы определить локальную ссылку, используйте "#" первым символом',
 		linknewwindow: 'Открыть в новом окне?',
 		macroDoesNotHaveProperties: 'Этот макрос не имеет редактируемых свойств',
diff --git a/src/assets/lang/sv-se.ts b/src/assets/lang/sv-se.ts
@@ -372,7 +372,7 @@ export default {
 		inserttable: 'Infoga tabell',
 		lastEdited: 'Senast redigerad',
 		link: 'Länk',
-		linkinternal: 'Intern länk:',
+		linkinternal: 'Intern länk',
 		linklocaltip: 'När du använder lokala länkar, lägg till "#" framför länken',
 		linknewwindow: 'Öppna i nytt fönster?',
 		macroDoesNotHaveProperties: 'Detta makro innehåller inga egenskaper som du kan redigera',
diff --git a/src/assets/lang/tr-tr.ts b/src/assets/lang/tr-tr.ts
@@ -437,7 +437,7 @@ export default {
 			'Bir dil için kültürü değiştirmek pahalı bir işlem olabilir ve içerik önbelleğinin ve dizinlerin yeniden oluşturulmasına neden olabilir',
 		lastEdited: 'Son Düzenleme',
 		link: 'Bağlantı',
-		linkinternal: 'Dahili bağlantı:',
+		linkinternal: 'Dahili bağlantı',
 		linklocaltip: 'Yerel bağlantıları kullanırken, bağlantının önüne "#" ekleyin',
 		linknewwindow: 'Yeni pencerede açılsın mı?',
 		macroDoesNotHaveProperties: 'Bu makro düzenleyebileceğiniz herhangi bir özellik içermiyor',
diff --git a/src/assets/lang/uk-ua.ts b/src/assets/lang/uk-ua.ts
@@ -358,7 +358,7 @@ export default {
 		inserttable: 'Вставити таблицю',
 		lastEdited: 'Остання зміна',
 		link: 'Посилання',
-		linkinternal: 'Внутрішнє посилання:',
+		linkinternal: 'Внутрішнє посилання',
 		linklocaltip: 'Для визначення локального посилання, використовуйте "#" першим символом',
 		linknewwindow: 'Відкрити у новому вікні?',
 		macroDoesNotHaveProperties: 'Цей макрос не має властивостей, що редагуються.',
diff --git a/src/assets/lang/zh-cn.ts b/src/assets/lang/zh-cn.ts
@@ -233,7 +233,7 @@ export default {
 		inserttable: '插入表格',
 		lastEdited: '最近编辑',
 		link: '链接',
-		linkinternal: '内部链接：',
+		linkinternal: '内部链接',
 		linklocaltip: '本地链接请用“#”号开头',
 		linknewwindow: '在新窗口中打开？',
 		macroDoesNotHaveProperties: '该宏没有可编辑的属性',
diff --git a/src/assets/lang/zh-tw.ts b/src/assets/lang/zh-tw.ts
@@ -232,7 +232,7 @@ export default {
 		inserttable: '插入表格',
 		lastEdited: '最近編輯',
 		link: '連結',
-		linkinternal: '內部連結：',
+		linkinternal: '內部連結',
 		linklocaltip: '本地連結請用“#”號開頭',
 		linknewwindow: '在新視窗中打開？',
 		macroDoesNotHaveProperties: '本巨集沒有包含您可以編輯的屬性',
diff --git a/src/packages/documents/documents/components/input-document/input-document.element.ts b/src/packages/documents/documents/components/input-document/input-document.element.ts
@@ -4,10 +4,12 @@ import {
 	css,
 	customElement,
 	html,
+	ifDefined,
 	nothing,
 	property,
 	repeat,
 	state,
+	when,
 } from '@umbraco-cms/backoffice/external/lit';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
@@ -201,12 +203,14 @@ export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefi
 		if (this.readonly && this.selection.length > 0) {
 			return nothing;
 		} else {
-			return html` <uui-button
-				id="btn-add"
-				look="placeholder"
-				@click=${this.#openPicker}
-				label=${this.localize.term('general_choose')}
-				?disabled=${this.readonly}></uui-button>`;
+			return html`
+				<uui-button
+					id="btn-add"
+					look="placeholder"
+					@click=${this.#openPicker}
+					label=${this.localize.term('general_choose')}
+					?disabled=${this.readonly}></uui-button>
+			`;
 		}
 	}
 
@@ -225,16 +229,26 @@ export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefi
 
 	#renderItem(item: UmbDocumentItemModel) {
 		if (!item.unique) return;
+		const href = !this.readonly && this.showOpenButton ? `${this._editDocumentPath}edit/${item.unique}` : undefined;
 		return html`
 			<uui-ref-node
-				name=${item.name}
 				id=${item.unique}
 				class=${classMap({ draft: this.#isDraft(item) })}
-				?readonly=${this.readonly}>
+				name=${item.name}
+				href=${ifDefined(href)}
+				?readonly=${this.readonly}
+				?standalone=${this.max === 1}>
 				${this.#renderIcon(item)} ${this.#renderIsTrashed(item)}
-				<uui-action-bar slot="actions">
-					${this.#renderOpenButton(item)} ${this.#renderRemoveButton(item)}
-				</uui-action-bar>
+				${when(
+					!this.readonly,
+					() => html`
+						<uui-action-bar slot="actions">
+							<uui-button
+								label=${this.localize.term('general_remove')}
+								@click=${() => this.#onRemove(item)}></uui-button>
+						</uui-action-bar>
+					`,
+				)}
 			</uui-ref-node>
 		`;
 	}
@@ -249,25 +263,6 @@ export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefi
 		return html`<uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag>`;
 	}
 
-	#renderRemoveButton(item: UmbDocumentItemModel) {
-		if (this.readonly) return nothing;
-		return html`
-			<uui-button @click=${() => this.#onRemove(item)} label=${this.localize.term('general_remove')}></uui-button>
-		`;
-	}
-
-	#renderOpenButton(item: UmbDocumentItemModel) {
-		if (this.readonly) return nothing;
-		if (!this.showOpenButton) return nothing;
-		return html`
-			<uui-button
-				href="${this._editDocumentPath}edit/${item.unique}"
-				label="${this.localize.term('general_open')} ${item.name}">
-				${this.localize.term('general_open')}
-			</uui-button>
-		`;
-	}
-
 	static override styles = [
 		css`
 			#btn-add {
diff --git a/src/packages/documents/documents/repository/detail/document-detail.server.data-source.ts b/src/packages/documents/documents/repository/detail/document-detail.server.data-source.ts
@@ -42,6 +42,7 @@ export class UmbDocumentServerDataSource implements UmbDetailDataSource<UmbDocum
 			documentType: {
 				unique: '',
 				collection: null,
+				icon: null,
 			},
 			isTrashed: false,
 			values: [],
@@ -120,6 +121,7 @@ export class UmbDocumentServerDataSource implements UmbDetailDataSource<UmbDocum
 			documentType: {
 				unique: data.documentType.id,
 				collection: data.documentType.collection ? { unique: data.documentType.collection.id } : null,
+				icon: data.documentType.icon,
 			},
 			isTrashed: data.isTrashed,
 		};
diff --git a/src/packages/documents/documents/types.ts b/src/packages/documents/documents/types.ts
@@ -13,6 +13,7 @@ export interface UmbDocumentDetailModel extends UmbContentDetailModel {
 	documentType: {
 		unique: string;
 		collection: UmbReferenceByUnique | null;
+		icon?: string | null;
 	};
 	entityType: UmbDocumentEntityType;
 	isTrashed: boolean;
diff --git a/src/packages/media/media/components/input-media/input-media.element.ts b/src/packages/media/media/components/input-media/input-media.element.ts
@@ -108,7 +108,7 @@ export class UmbInputMediaElement extends UmbFormControlMixin<string | undefined
 	}
 
 	@property({ type: Array })
-	allowedContentTypeIds?: string[] | undefined;
+	allowedContentTypeIds?: Array<string> | undefined;
 
 	@property({ type: Boolean })
 	showOpenButton?: boolean;
diff --git a/src/packages/media/media/repository/detail/media-detail.server.data-source.ts b/src/packages/media/media/repository/detail/media-detail.server.data-source.ts
@@ -38,6 +38,7 @@ export class UmbMediaServerDataSource implements UmbDetailDataSource<UmbMediaDet
 			mediaType: {
 				unique: '',
 				collection: null,
+				icon: null,
 			},
 			isTrashed: false,
 			values: [],
@@ -90,6 +91,7 @@ export class UmbMediaServerDataSource implements UmbDetailDataSource<UmbMediaDet
 			mediaType: {
 				unique: data.mediaType.id,
 				collection: data.mediaType.collection ? { unique: data.mediaType.collection.id } : null,
+				icon: data.mediaType.icon,
 			},
 			isTrashed: data.isTrashed,
 		};
diff --git a/src/packages/media/media/types.ts b/src/packages/media/media/types.ts
@@ -7,6 +7,7 @@ export interface UmbMediaDetailModel extends UmbContentDetailModel {
 	mediaType: {
 		unique: string;
 		collection: UmbReferenceByUnique | null;
+		icon?: string | null;
 	};
 	entityType: UmbMediaEntityType;
 	isTrashed: boolean;
diff --git a/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts b/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts
diff --git a/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.element.ts b/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.element.ts
diff --git a/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.token.ts b/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.token.ts
