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>