diff options
| author | かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> | 2023-11-23 21:18:24 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-11-23 21:18:24 +0900 |
| commit | bf2d2ff0ca29cbeba5897252fee1e6aaba2f8fee (patch) | |
| tree | e4db58e12f0332323db40daf4dbdfa1df3aa3745 /packages/frontend/src/pages | |
| parent | fix(frontend): コードエディタが正しく表示されない問題を... (diff) | |
| download | misskey-bf2d2ff0ca29cbeba5897252fee1e6aaba2f8fee.tar.gz misskey-bf2d2ff0ca29cbeba5897252fee1e6aaba2f8fee.tar.bz2 misskey-bf2d2ff0ca29cbeba5897252fee1e6aaba2f8fee.zip | |
fix(frontend): プロフィールの「ファイル」にセンシティブな画像がある際のデザインを修正 (#12424)
* (fix) 招待コードを一度のみ利用できるように
* Update Changelog
* (fix) profile media grid
* Update Changelog
* Change Changelog
Diffstat (limited to 'packages/frontend/src/pages')
| -rw-r--r-- | packages/frontend/src/pages/user/index.files.vue | 29 |
1 files changed, 25 insertions, 4 deletions
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> |