diff options
| author | かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> | 2024-09-15 17:50:25 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-09-15 17:50:25 +0900 |
| commit | 0e4b6d1dade90673af58af3480081c95984c0274 (patch) | |
| tree | f023e9cffc7a98a2eae6c51216b9ca0ceaa3a115 | |
| parent | refactor(backend): use Reflet for autobind deco (#14482) (diff) | |
| download | misskey-0e4b6d1dade90673af58af3480081c95984c0274.tar.gz misskey-0e4b6d1dade90673af58af3480081c95984c0274.tar.bz2 misskey-0e4b6d1dade90673af58af3480081c95984c0274.zip | |
enhance(frontend): adminのファイルリストでセンシティブファイルに枠線を追加 (#14510)
* enhance(frontend): adminのファイルリストでセンシティブファイルに枠線を追加
* Update Changelog
| -rw-r--r-- | CHANGELOG.md | 1 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkDriveFileThumbnail.vue | 21 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkFileListForAdmin.vue | 2 |
3 files changed, 22 insertions, 2 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index ffe03c13c7..c01d284bdb 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 2c47a70970..eb93aaab6e 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 30822ef655..13295c455b 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> |