fix(frontend): プロフィールの「ファイル」にセンシティブな画像がある際のデザインを修正 (#12424)

* (fix) 招待コードを一度のみ利用できるように

* Update Changelog

* (fix) profile media grid

* Update Changelog

* Change Changelog
This commit is contained in:
かっこかり 2023-11-23 21:18:24 +09:00 committed by GitHub
parent cba66c921e
commit bf2d2ff0ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 4 deletions

View File

@ -24,6 +24,7 @@
- fix: 「設定のバックアップ」で一部の項目がバックアップに含まれていなかった問題を修正 - fix: 「設定のバックアップ」で一部の項目がバックアップに含まれていなかった問題を修正
- Fix: ウィジェットのジョブキューにて音声の発音方法変更に追従できていなかったのを修正 #12367 - Fix: ウィジェットのジョブキューにて音声の発音方法変更に追従できていなかったのを修正 #12367
- Fix: コードエディタが正しく表示されない問題を修正 - Fix: コードエディタが正しく表示されない問題を修正
- Fix: プロフィールの「ファイル」にセンシティブな画像がある際のデザインを修正
### Server ### Server
- Enhance: MFM `$[ruby ]` が他ソフトウェアと連合されるように - Enhance: MFM `$[ruby ]` が他ソフトウェアと連合されるように

View File

@ -11,10 +11,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>
<div v-if="!fetching && files.length > 0" :class="$style.stream"> <div v-if="!fetching && files.length > 0" :class="$style.stream">
<template v-for="file in files" :key="file.note.id + file.file.id"> <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 v-if="file.file.isSensitive && !showingFiles.includes(file.file.id)" :class="$style.img" @click="showingFiles.push(file.file.id)">
<div> <!-- TODO: 画像以外のファイルに対応 -->
<div><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}</div> <ImgWithBlurhash :class="$style.sensitiveImg" :hash="file.file.blurhash" :src="thumbnail(file.file)" :title="file.file.name" :forceBlurhash="true"/>
<div>{{ i18n.ts.clickToShow }}</div> <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>
</div> </div>
<MkA v-else :class="$style.img" :to="notePage(file.note)"> <MkA v-else :class="$style.img" :to="notePage(file.note)">
@ -88,6 +92,7 @@ onMounted(() => {
} }
.img { .img {
position: relative;
height: 128px; height: 128px;
border-radius: 6px; border-radius: 6px;
overflow: clip; overflow: clip;
@ -99,8 +104,24 @@ onMounted(() => {
text-align: center; text-align: center;
} }
.sensitiveImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: brightness(0.7);
}
.sensitive { .sensitive {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid; display: grid;
place-items: center; place-items: center;
font-size: 0.8em;
color: #fff;
cursor: pointer;
} }
</style> </style>