From 69d214accc65874fb7c5e88a7b934b4231d9ba72 Mon Sep 17 00:00:00 2001
From: Lhcfl <Lhcfl@outlook.com>
Date: Mon, 25 Mar 2024 12:29:06 +0800
Subject: [PATCH] feat: add alt indicator in post form attachments
---
.../src/components/MkDriveFileThumbnail.vue | 17 +++++++----
.../src/components/MkImgWithBlurhash.vue | 29 +++++++++++++++++--
.../src/components/MkPostFormAttaches.vue | 1 +
3 files changed, 40 insertions(+), 7 deletions(-)
diff --git a/packages/client/src/components/MkDriveFileThumbnail.vue b/packages/client/src/components/MkDriveFileThumbnail.vue
index fa557fea39..2035ce5f66 100644
--- a/packages/client/src/components/MkDriveFileThumbnail.vue
+++ b/packages/client/src/components/MkDriveFileThumbnail.vue
@@ -4,9 +4,10 @@
v-if="isThumbnailAvailable"
:hash="file.blurhash"
:src="file.thumbnailUrl"
- :alt="file.name"
+ :alt="file.comment"
:title="file.name"
:cover="fit !== 'contain'"
+ :show_alt_indicator="show_alt_indicator"
/>
<i v-else-if="is === 'image'" :class="icon('ph-file-image icon')"></i>
<i v-else-if="is === 'video'" :class="icon('ph-file-video icon')"></i>
@@ -33,10 +34,16 @@ import type { entities } from "firefish-js";
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
import icon from "@/scripts/icon";
-const props = defineProps<{
- file: entities.DriveFile;
- fit: string;
-}>();
+const props = withDefaults(
+ defineProps<{
+ file: entities.DriveFile;
+ fit: string;
+ show_alt_indicator?: boolean
+ }>(),
+ {
+ show_alt_indicator: false,
+ }
+);
const is = computed(() => {
if (props.file.type.startsWith("image/")) return "image";
diff --git a/packages/client/src/components/MkImgWithBlurhash.vue b/packages/client/src/components/MkImgWithBlurhash.vue
index 54ea5d9c9c..6800b3f6ab 100644
--- a/packages/client/src/components/MkImgWithBlurhash.vue
+++ b/packages/client/src/components/MkImgWithBlurhash.vue
@@ -21,30 +21,38 @@
loading="lazy"
@load="onLoad"
/>
+ <i
+ class="alt-indicator"
+ :class="icon('ph-subtitles')"
+ v-if="alt && show_alt_indicator"
+ ></i>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { decodeBlurHash } from "fast-blurhash";
+import icon from "@/scripts/icon";
const props = withDefaults(
defineProps<{
src?: string | null;
hash?: string;
- alt?: string;
+ alt?: string | null;
type?: string | null;
title?: string | null;
size?: number;
cover?: boolean;
largestDimension?: "width" | "height";
+ show_alt_indicator?: boolean
}>(),
{
src: null,
type: null,
- alt: "",
+ alt: null,
title: null,
size: 64,
cover: true,
+ show_alt_indicator: false
},
);
@@ -96,4 +104,21 @@ img {
height: 100%;
}
}
+
+i.alt-indicator {
+ display: flex;
+ gap: 4px;
+ position: absolute;
+ border-radius: 6px;
+ overflow: hidden;
+ top: 0;
+ right: 0;
+ background-color: var(--accentedBg);
+ -webkit-backdrop-filter: var(--blur, blur(15px));
+ backdrop-filter: var(--blur, blur(15px));
+ color: var(--accent);
+ font-size: 0.8em;
+ padding: 6px 8px;
+ text-align: center;
+}
</style>
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index a879bd5d8b..5b1992899f 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -19,6 +19,7 @@
class="thumbnail"
:file="element"
fit="cover"
+ :show_alt_indicator="true"
/>
<div v-if="element.isSensitive" class="sensitive">
<i :class="icon('ph-warning icon')"></i>