usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

enhance(frontend): adminのファイルリストでセンシティブファイルに枠線を追加

This commit is contained in:
kakkokari-gtyih 2024-09-06 15:05:57 +09:00
parent 74c93fcebe
commit 37fbb0ffaf
2 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/frontend/src/components/MkDriveFileThumbnail.vue
View File

@ -4,7 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <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'"/> <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 === 'image'" class="ti ti-photo" :class="$style.icon"></i>
<i v-else-if="is === 'video'" class="ti ti-video" :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<{ const props = defineProps<{
file: Misskey.entities.DriveFile; file: Misskey.entities.DriveFile;
fit: 'cover' | 'contain'; fit: 'cover' | 'contain';
highlightWhenSensitive?: boolean;
}>(); }>();
const is = computed(() => { const is = computed(() => {
@ -67,6 +74,18 @@ const isThumbnailAvailable = computed(() => {
overflow: clip; 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 { .iconSub {
position: absolute; position: absolute;
width: 30%; width: 30%;

2
packages/frontend/src/components/MkFileListForAdmin.vue
View File

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
class="file _button" class="file _button"
> >
<div v-if="file.isSensitive" class="sensitive-label">{{ i18n.ts.sensitive }}</div> <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 v-if="viewMode === 'list'" class="body">
<div> <div>
<small style="opacity: 0.7;">{{ file.name }}</small> <small style="opacity: 0.7;">{{ file.name }}</small>