From 81dfc1bfcb30996c4ce1932dfefc814d4bad217c Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Tue, 27 Feb 2024 01:05:10 +0100
Subject: [PATCH] Cleaning up some old comments
---
.../src/components/MkDriveFileThumbnail.vue | 59 +++++++++++++++----
1 file changed, 49 insertions(+), 10 deletions(-)
diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.vue b/packages/frontend/src/components/MkDriveFileThumbnail.vue
index 2f1fef4ea6..a2bf68691d 100644
--- a/packages/frontend/src/components/MkDriveFileThumbnail.vue
+++ b/packages/frontend/src/components/MkDriveFileThumbnail.vue
@@ -5,17 +5,25 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div ref="thumbnail" :class="$style.root">
- <ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/>
- <i v-else-if="is === 'image'" class="ph-image-square ph-bold ph-lg" :class="$style.icon"></i>
- <i v-else-if="is === 'video'" class="ph-video ph-bold ph-lg" :class="$style.icon"></i>
- <i v-else-if="is === 'audio' || is === 'midi'" class="ph-file-audio ph-bold ph-lg" :class="$style.icon"></i>
- <i v-else-if="is === 'csv'" class="ph-file-text ph-bold ph-lg" :class="$style.icon"></i>
- <i v-else-if="is === 'pdf'" class="ph-file-text ph-bold ph-lg" :class="$style.icon"></i>
- <i v-else-if="is === 'textfile'" class="ph-file-text ph-bold ph-lg" :class="$style.icon"></i>
- <i v-else-if="is === 'archive'" class="ph-file-zip ph-bold ph-lg" :class="$style.icon"></i>
- <i v-else class="ph-file ph-bold ph-lg" :class="$style.icon"></i>
+ <template v-if="isThumbnailAvailable && is === 'image'">
+ <div class="relative">
+ <ImgWithBlurhash :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/>
- <i v-if="isThumbnailAvailable && is === 'video'" class="ph-video ph-bold ph-lg" :class="$style.iconSub"></i>
+ <div v-if="props.file.comment" v-tooltip="getTrimmedAltText()" :class="$style.hasAltText">ALT</div>
+ </div>
+ </template>
+ <template v-else>
+ <i v-if="is === 'image'" class="ph-image-square ph-bold ph-lg" :class="$style.icon"></i>
+ <i v-else-if="is === 'video'" class="ph-video ph-bold ph-lg" :class="$style.icon"></i>
+ <i v-else-if="is === 'audio' || is === 'midi'" class="ph-file-audio ph-bold ph-lg" :class="$style.icon"></i>
+ <i v-else-if="is === 'csv'" class="ph-file-text ph-bold ph-lg" :class="$style.icon"></i>
+ <i v-else-if="is === 'pdf'" class="ph-file-text ph-bold ph-lg" :class="$style.icon"></i>
+ <i v-else-if="is === 'textfile'" class="ph-file-text ph-bold ph-lg" :class="$style.icon"></i>
+ <i v-else-if="is === 'archive'" class="ph-file-zip ph-bold ph-lg" :class="$style.icon"></i>
+ <i v-else class="ph-file ph-bold ph-lg" :class="$style.icon"></i>
+
+ <i v-if="isThumbnailAvailable && is === 'video'" class="ph-video ph-bold ph-lg" :class="$style.iconSub"></i>
+ </template>
</div>
</template>
@@ -56,6 +64,20 @@ const isThumbnailAvailable = computed(() => {
? (is.value === 'image' as const || is.value === 'video')
: false;
});
+
+const getTrimmedAltText = () => {
+ if (props.file.comment == null) {
+ return '';
+ }
+ const maxCharacters = 40;
+
+ const alt = props.file.comment as unknown as string;
+ if (alt.length > maxCharacters) {
+ return alt.substring(0, maxCharacters) + '...';
+ }
+
+ return alt;
+};
</script>
<style lang="scss" module>
@@ -82,4 +104,21 @@ const isThumbnailAvailable = computed(() => {
font-size: 32px;
color: #777;
}
+
+.hasAltText {
+ position: absolute;
+ bottom: 0px;
+ right: 0px;
+ z-index: 3;
+ margin: 5px;
+ cursor: help;
+
+ background-color: black;
+ border-radius: var(--radius-sm);
+ color: var(--accentLighten);
+ display: inline-block;
+ font-weight: bold;
+ font-size: 0.8em;
+ padding: 2px 5px;
+}
</style>
--
GitLab