From 4f90766ba314171bbfc78d1e988307c50633e7f3 Mon Sep 17 00:00:00 2001
From: "John Molakvoæ (skjnldsv)" <skjnldsv@protonmail.com>
Date: Tue, 19 Jan 2021 16:38:51 +0100
Subject: Skip template picker if none available
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/src/components/TemplatePreview.vue | 45 ++++++++++++++++++---------
 1 file changed, 31 insertions(+), 14 deletions(-)

(limited to 'apps/files/src/components')

diff --git a/apps/files/src/components/TemplatePreview.vue b/apps/files/src/components/TemplatePreview.vue
index 538e1bcff7b..89162ba4efd 100644
--- a/apps/files/src/components/TemplatePreview.vue
+++ b/apps/files/src/components/TemplatePreview.vue
@@ -30,9 +30,9 @@
 			@change="onCheck">
 
 		<label :for="id" class="template-picker__label">
-			<div class="template-picker__preview">
+			<div class="template-picker__preview"
+				:class="failedPreview ? 'template-picker__preview--failed' : ''">
 				<img class="template-picker__image"
-					:class="failedPreview ? 'template-picker__image--failed' : ''"
 					:src="realPreviewUrl"
 					alt=""
 					draggable="false"
@@ -40,7 +40,7 @@
 			</div>
 
 			<span class="template-picker__title">
-				{{ basename }}
+				{{ nameWithoutExt }}
 			</span>
 		</label>
 	</li>
@@ -100,6 +100,14 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Strip away extension from name
+		 * @returns {string}
+		 */
+		nameWithoutExt() {
+			return this.basename.indexOf('.') > -1 ? this.basename.split('.').slice(0, -1).join('.') : this.basename
+		},
+
 		id() {
 			return `template-picker-${this.fileid}`
 		},
@@ -107,7 +115,7 @@ export default {
 		realPreviewUrl() {
 			// If original preview failed, fallback to mime icon
 			if (this.failedPreview && this.mimeIcon) {
-				return generateUrl(this.mimeIcon)
+				return this.mimeIcon
 			}
 
 			if (this.previewUrl) {
@@ -149,7 +157,6 @@ export default {
 		align-items: center;
 		flex: 1 1;
 		flex-direction: column;
-		margin: var(--margin);
 
 		&, * {
 			cursor: pointer;
@@ -162,32 +169,42 @@ export default {
 	}
 
 	&__preview {
-		display: flex;
+		display: block;
 		overflow: hidden;
 		// Stretch so all entries are the same width
 		flex: 1 1;
 		width: var(--width);
-		min-height: var(--width);
+		min-height: var(--height);
 		max-height: var(--height);
-		padding: var(--margin);
+		padding: 0;
 		border: var(--border) solid var(--color-border);
 		border-radius: var(--border-radius-large);
 
 		input:checked + label > & {
 			border-color: var(--color-primary);
 		}
+
+		&--failed {
+			// Make sure to properly center fallback icon
+			display: flex;
+		}
 	}
 
 	&__image {
 		max-width: 100%;
 		background-color: var(--color-main-background);
 
-		&--failed {
-			width: calc(var(--margin) * 8);
-			// Center mime icon
-			margin: auto;
-			background-color: transparent !important;
-		}
+		object-fit: cover;
+	}
+
+	// Failed preview, fallback to mime icon
+	&__preview--failed &__image {
+		width: calc(var(--margin) * 8);
+		// Center mime icon
+		margin: auto;
+		background-color: transparent !important;
+
+		object-fit: initial;
 	}
 
 	&__title {
-- 
cgit v1.2.3