From bf2d2ff0ca29cbeba5897252fee1e6aaba2f8fee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
<67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 23 Nov 2023 21:18:24 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E3=83=97=E3=83=AD=E3=83=95?=
=?UTF-8?q?=E3=82=A3=E3=83=BC=E3=83=AB=E3=81=AE=E3=80=8C=E3=83=95=E3=82=A1?=
=?UTF-8?q?=E3=82=A4=E3=83=AB=E3=80=8D=E3=81=AB=E3=82=BB=E3=83=B3=E3=82=B7?=
=?UTF-8?q?=E3=83=86=E3=82=A3=E3=83=96=E3=81=AA=E7=94=BB=E5=83=8F=E3=81=8C?=
=?UTF-8?q?=E3=81=82=E3=82=8B=E9=9A=9B=E3=81=AE=E3=83=87=E3=82=B6=E3=82=A4?=
=?UTF-8?q?=E3=83=B3=E3=82=92=E4=BF=AE=E6=AD=A3=20(#12424)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* (fix) 招待コードを一度のみ利用できるように
* Update Changelog
* (fix) profile media grid
* Update Changelog
* Change Changelog
---
CHANGELOG.md | 1 +
.../frontend/src/pages/user/index.files.vue | 29 ++++++++++++++++---
2 files changed, 26 insertions(+), 4 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2b75fd629a..c49aa0e899 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@
- fix: 「設定のバックアップ」で一部の項目がバックアップに含まれていなかった問題を修正
- Fix: ウィジェットのジョブキューにて音声の発音方法変更に追従できていなかったのを修正 #12367
- Fix: コードエディタが正しく表示されない問題を修正
+- Fix: プロフィールの「ファイル」にセンシティブな画像がある際のデザインを修正
### Server
- Enhance: MFM `$[ruby ]` が他ソフトウェアと連合されるように
diff --git a/packages/frontend/src/pages/user/index.files.vue b/packages/frontend/src/pages/user/index.files.vue
index 43d6d91fc9..f9328b8d6b 100644
--- a/packages/frontend/src/pages/user/index.files.vue
+++ b/packages/frontend/src/pages/user/index.files.vue
@@ -11,10 +11,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkLoading v-if="fetching"/>
<div v-if="!fetching && files.length > 0" :class="$style.stream">
<template v-for="file in files" :key="file.note.id + file.file.id">
- <div v-if="file.file.isSensitive && !showingFiles.includes(file.file.id)" :class="$style.sensitive" @click="showingFiles.push(file.file.id)">
- <div>
- <div><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}</div>
- <div>{{ i18n.ts.clickToShow }}</div>
+ <div v-if="file.file.isSensitive && !showingFiles.includes(file.file.id)" :class="$style.img" @click="showingFiles.push(file.file.id)">
+ <!-- TODO: 画像以外のファイルに対応 -->
+ <ImgWithBlurhash :class="$style.sensitiveImg" :hash="file.file.blurhash" :src="thumbnail(file.file)" :title="file.file.name" :forceBlurhash="true"/>
+ <div :class="$style.sensitive">
+ <div>
+ <div><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}</div>
+ <div>{{ i18n.ts.clickToShow }}</div>
+ </div>
</div>
</div>
<MkA v-else :class="$style.img" :to="notePage(file.note)">
@@ -88,6 +92,7 @@ onMounted(() => {
}
.img {
+ position: relative;
height: 128px;
border-radius: 6px;
overflow: clip;
@@ -99,8 +104,24 @@ onMounted(() => {
text-align: center;
}
+.sensitiveImg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ filter: brightness(0.7);
+}
.sensitive {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
display: grid;
place-items: center;
+ font-size: 0.8em;
+ color: #fff;
+ cursor: pointer;
}
</style>