enhance(client): improve files page of control panel

This commit is contained in:
syuilo
2022-06-16 16:05:43 +09:00
parent fdba255b9a
commit 4a55425fdb
5 changed files with 105 additions and 96 deletions

View File

@ -1,6 +1,6 @@
<template>
<div ref="thumbnail" class="zdjebgpv">
<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :style="`object-fit: ${ fit }`"/>
<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="fas fa-file-image icon"></i>
<i v-else-if="is === 'video'" class="fas fa-file-video icon"></i>
<i v-else-if="is === 'audio' || is === 'midi'" class="fas fa-music icon"></i>
@ -33,16 +33,16 @@ const is = computed(() => {
if (props.file.type.endsWith('/pdf')) return 'pdf';
if (props.file.type.startsWith('text/')) return 'textfile';
if ([
"application/zip",
"application/x-cpio",
"application/x-bzip",
"application/x-bzip2",
"application/java-archive",
"application/x-rar-compressed",
"application/x-tar",
"application/gzip",
"application/x-7z-compressed"
].some(archiveType => archiveType === props.file.type)) return 'archive';
'application/zip',
'application/x-cpio',
'application/x-bzip',
'application/x-bzip2',
'application/java-archive',
'application/x-rar-compressed',
'application/x-tar',
'application/gzip',
'application/x-7z-compressed',
].some(archiveType => archiveType === props.file.type)) return 'archive';
return 'unknown';
});

View File

@ -1,7 +1,10 @@
<template>
<transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="emit('closed')">
<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
<slot>{{ text }}</slot>
<slot>
<Mfm v-if="asMfm" :text="text"/>
<span v-else>{{ text }}</span>
</slot>
</div>
</transition>
</template>
@ -16,6 +19,7 @@ const props = withDefaults(defineProps<{
x?: number;
y?: number;
text?: string;
asMfm?: boolean;
maxWidth?: number;
direction?: 'top' | 'bottom' | 'right' | 'left';
innerMargin?: number;
@ -170,8 +174,6 @@ const setPosition = () => {
return { left, top, transformOrigin: 'left center' };
}
}
return null as never;
};
const { left, top, transformOrigin } = calc();