enhance(frontend): adminのファイルリストでセンシティブファイルに枠線を追加 (#14510)
* enhance(frontend): adminのファイルリストでセンシティブファイルに枠線を追加 * Update Changelog
This commit is contained in:
parent
07f26bc8dd
commit
0e4b6d1dad
|
@ -8,6 +8,7 @@
|
|||
- 埋め込みコードやウェブサイトへの実装方法の詳細はMisskey Hubに掲載予定です
|
||||
- Enhance: サイズ制限を超過するファイルをアップロードしようとした際にエラーを出すように
|
||||
- Enhance: アイコンデコレーション管理画面にプレビューを追加
|
||||
- Enhance: コントロールパネル内のファイル一覧でセンシティブなファイルを区別しやすく
|
||||
- Fix: サーバーメトリクスが2つ以上あるとリロード直後の表示がおかしくなる問題を修正
|
||||
- Fix: 月の違う同じ日はセパレータが表示されないのを修正
|
||||
|
||||
|
|
|
@ -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%;
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue