diff --git a/CHANGELOG.md b/CHANGELOG.md index ffe03c13c7add4ed986e00ab80fc5e599d3ac86d..c01d284bdbd4848943d529f9bfbe29f084985970 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - 埋ã‚è¾¼ã¿ã‚³ãƒ¼ãƒ‰ã‚„ウェブサイトã¸ã®å®Ÿè£…方法ã®è©³ç´°ã¯Misskey Hubã«æŽ²è¼‰äºˆå®šã§ã™ - Enhance: サイズ制é™ã‚’超éŽã™ã‚‹ãƒ•ã‚¡ã‚¤ãƒ«ã‚’アップãƒãƒ¼ãƒ‰ã—よã†ã¨ã—ãŸéš›ã«ã‚¨ãƒ©ãƒ¼ã‚’出ã™ã‚ˆã†ã« - Enhance: アイコンデコレーション管ç†ç”»é¢ã«ãƒ—ãƒ¬ãƒ“ãƒ¥ãƒ¼ã‚’è¿½åŠ +- Enhance: コントãƒãƒ¼ãƒ«ãƒ‘ãƒãƒ«å†…ã®ãƒ•ã‚¡ã‚¤ãƒ«ä¸€è¦§ã§ã‚»ãƒ³ã‚·ãƒ†ã‚£ãƒ–ãªãƒ•ã‚¡ã‚¤ãƒ«ã‚’区別ã—ã‚„ã™ã - Fix: サーãƒãƒ¼ãƒ¡ãƒˆãƒªã‚¯ã‚¹ãŒ2ã¤ä»¥ä¸Šã‚ã‚‹ã¨ãƒªãƒãƒ¼ãƒ‰ç›´å¾Œã®è¡¨ç¤ºãŒãŠã‹ã—ããªã‚‹å•é¡Œã‚’ä¿®æ£ - Fix: 月ã®é•ã†åŒã˜æ—¥ã¯ã‚»ãƒ‘レータãŒè¡¨ç¤ºã•ã‚Œãªã„ã®ã‚’ä¿®æ£ diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.vue b/packages/frontend/src/components/MkDriveFileThumbnail.vue index 2c47a709709b2695dd608ebeaf11fb7d2787502f..eb93aaab6e76681ecd936b6ee2a9c31d54642c7d 100644 --- a/packages/frontend/src/components/MkDriveFileThumbnail.vue +++ b/packages/frontend/src/components/MkDriveFileThumbnail.vue @@ -4,7 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div ref="thumbnail" :class="$style.root"> +<div + ref="thumbnail" + :class="[ + $style.root, + { [$style.sensitiveHighlight]: highlightWhenSensitive && file.isSensitive }, + ]" +> <ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/> <i v-else-if="is === 'image'" class="ti ti-photo" :class="$style.icon"></i> <i v-else-if="is === 'video'" class="ti ti-video" :class="$style.icon"></i> @@ -27,6 +33,7 @@ import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue'; const props = defineProps<{ file: Misskey.entities.DriveFile; fit: 'cover' | 'contain'; + highlightWhenSensitive?: boolean; }>(); const is = computed(() => { @@ -67,6 +74,18 @@ const isThumbnailAvailable = computed(() => { overflow: clip; } +.sensitiveHighlight::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + border-radius: inherit; + box-shadow: inset 0 0 0 4px var(--warn); +} + .iconSub { position: absolute; width: 30%; diff --git a/packages/frontend/src/components/MkFileListForAdmin.vue b/packages/frontend/src/components/MkFileListForAdmin.vue index 30822ef655bd0a4eacf5a2bbdcf142e4424fecc4..13295c455b7c25563fe97b6ddf8fd9713669a383 100644 --- a/packages/frontend/src/components/MkFileListForAdmin.vue +++ b/packages/frontend/src/components/MkFileListForAdmin.vue @@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only class="file _button" > <div v-if="file.isSensitive" class="sensitive-label">{{ i18n.ts.sensitive }}</div> - <MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/> + <MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain" :highlightWhenSensitive="true"/> <div v-if="viewMode === 'list'" class="body"> <div> <small style="opacity: 0.7;">{{ file.name }}</small>