Merge pull request #49568 from nextcloud/template-picker-ux-improvement

feat(templates): make second click as confirmation on templates picker

apps/files/src/components/TemplatePreview.vue

@@ -13,7 +13,7 @@
 			name="template-picker"
 			@change="onCheck">
 
-		<label :for="id" class="template-picker__label">
+		<label :for="id" class="template-picker__label" @click="onClick">
 			<div class="template-picker__preview"
 				:class="failedPreview ? 'template-picker__preview--failed' : ''">
 				<img class="template-picker__image"
@@ -128,6 +128,11 @@ export default {
 		focus() {
 			this.$refs.input?.focus()
 		},
+		onClick() {
+			if (this.checked) {
+				this.$emit('confirm-click', this.fileid)
+			}
+		},
 	},
 }
 </script>

apps/files/src/views/TemplatePicker.vue

@@ -19,13 +19,15 @@
 				<TemplatePreview v-bind="emptyTemplate"
 					ref="emptyTemplatePreview"
 					:checked="checked === emptyTemplate.fileid"
+					@confirm-click="onConfirmClick"
 					@check="onCheck" />
 
 				<TemplatePreview v-for="template in provider.templates"
 					:key="template.fileid"
 					v-bind="template"
 					:checked="checked === template.fileid"
 					:ratio="provider.ratio"
+					@confirm-click="onConfirmClick"
 					@check="onCheck" />
 			</ul>
 
@@ -207,6 +209,12 @@ export default defineComponent({
 			this.checked = fileid
 		},
 
+		onConfirmClick(fileid: number) {
+			if (fileid === this.checked) {
+				this.onSubmit()
+			}
+		},
+
 		async createFile(templateFields) {
 			const currentDirectory = new URL(window.location.href).searchParams.get('dir') || '/'
 

dist/5421-5421.js.map.license

@@ -0,0 +1 @@
+5421-5421.js.license