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 1/3] 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>
From cc41f255fdd14831585746d103d0b19e10443374 Mon Sep 17 00:00:00 2001
From: Lhcfl <Lhcfl@outlook.com>
Date: Mon, 25 Mar 2024 12:43:08 +0800
Subject: [PATCH 2/3] enhance: add tooltip for better expressiveness
---
packages/client/src/components/MkImgWithBlurhash.vue | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/packages/client/src/components/MkImgWithBlurhash.vue b/packages/client/src/components/MkImgWithBlurhash.vue
index 6800b3f6ab..6f177483b5 100644
--- a/packages/client/src/components/MkImgWithBlurhash.vue
+++ b/packages/client/src/components/MkImgWithBlurhash.vue
@@ -25,6 +25,13 @@
class="alt-indicator"
:class="icon('ph-subtitles')"
v-if="alt && show_alt_indicator"
+ v-tooltip.noLabel="
+ `${i18n.ts.alt}: ${
+ alt.length > 200
+ ? alt.trim().slice(0, 200) + '...'
+ : alt.trim()
+ }`
+ "
></i>
</template>
@@ -32,6 +39,7 @@
import { onMounted, ref } from "vue";
import { decodeBlurHash } from "fast-blurhash";
import icon from "@/scripts/icon";
+import { i18n } from "@/i18n";
const props = withDefaults(
defineProps<{
@@ -117,7 +125,7 @@ i.alt-indicator {
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
color: var(--accent);
- font-size: 0.8em;
+ font-size: 1em;
padding: 6px 8px;
text-align: center;
}
From 506714d8afd6ca39f394f70b7f5861dfde7e6860 Mon Sep 17 00:00:00 2001
From: naskya <m@naskya.net>
Date: Mon, 25 Mar 2024 23:32:20 +0900
Subject: [PATCH 3/3] chore: use camelCase
---
packages/client/src/components/MkDriveFileThumbnail.vue | 6 +++---
packages/client/src/components/MkImgWithBlurhash.vue | 6 +++---
packages/client/src/components/MkPostFormAttaches.vue | 2 +-
3 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/packages/client/src/components/MkDriveFileThumbnail.vue b/packages/client/src/components/MkDriveFileThumbnail.vue
index 2035ce5f66..b2bd21a22b 100644
--- a/packages/client/src/components/MkDriveFileThumbnail.vue
+++ b/packages/client/src/components/MkDriveFileThumbnail.vue
@@ -7,7 +7,7 @@
:alt="file.comment"
:title="file.name"
:cover="fit !== 'contain'"
- :show_alt_indicator="show_alt_indicator"
+ :show-alt-indicator="showAltIndicator"
/>
<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>
@@ -38,10 +38,10 @@ const props = withDefaults(
defineProps<{
file: entities.DriveFile;
fit: string;
- show_alt_indicator?: boolean
+ showAltIndicator?: boolean
}>(),
{
- show_alt_indicator: false,
+ showAltIndicator: false,
}
);
diff --git a/packages/client/src/components/MkImgWithBlurhash.vue b/packages/client/src/components/MkImgWithBlurhash.vue
index 6f177483b5..3a09959255 100644
--- a/packages/client/src/components/MkImgWithBlurhash.vue
+++ b/packages/client/src/components/MkImgWithBlurhash.vue
@@ -24,7 +24,7 @@
<i
class="alt-indicator"
:class="icon('ph-subtitles')"
- v-if="alt && show_alt_indicator"
+ v-if="alt && showAltIndicator"
v-tooltip.noLabel="
`${i18n.ts.alt}: ${
alt.length > 200
@@ -51,7 +51,7 @@ const props = withDefaults(
size?: number;
cover?: boolean;
largestDimension?: "width" | "height";
- show_alt_indicator?: boolean
+ showAltIndicator?: boolean
}>(),
{
src: null,
@@ -60,7 +60,7 @@ const props = withDefaults(
title: null,
size: 64,
cover: true,
- show_alt_indicator: false
+ showAltIndicator: false
},
);
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index 5b1992899f..d7910e75bd 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -19,7 +19,7 @@
class="thumbnail"
:file="element"
fit="cover"
- :show_alt_indicator="true"
+ :show-alt-indicator="true"
/>
<div v-if="element.isSensitive" class="sensitive">
<i :class="icon('ph-warning icon')"></i>