graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-23 06:23:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

Cleaning up some old comments

Browse source
This commit is contained in:
KevinWh0 2024-02-27 01:05:10 +01:00
parent 78975ddcc8
commit 81dfc1bfcb
1 changed files with 49 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
packages/frontend/src/components/MkDriveFileThumbnail.vue
View file

@ -5,17 +5,25 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div ref="thumbnail" :class="$style.root"> <div ref="thumbnail" :class="$style.root">
<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/> <template v-if="isThumbnailAvailable && is === 'image'">
<i v-else-if="is === 'image'" class="ph-image-square ph-bold ph-lg" :class="$style.icon"></i> <div class="relative">
<i v-else-if="is === 'video'" class="ph-video ph-bold ph-lg" :class="$style.icon"></i> <ImgWithBlurhash :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/>
<i v-else-if="is === 'audio' || is === 'midi'" class="ph-file-audio ph-bold ph-lg" :class="$style.icon"></i>
<i v-else-if="is === 'csv'" class="ph-file-text ph-bold ph-lg" :class="$style.icon"></i>
<i v-else-if="is === 'pdf'" class="ph-file-text ph-bold ph-lg" :class="$style.icon"></i>
<i v-else-if="is === 'textfile'" class="ph-file-text ph-bold ph-lg" :class="$style.icon"></i>
<i v-else-if="is === 'archive'" class="ph-file-zip ph-bold ph-lg" :class="$style.icon"></i>
<i v-else class="ph-file ph-bold ph-lg" :class="$style.icon"></i>
<i v-if="isThumbnailAvailable && is === 'video'" class="ph-video ph-bold ph-lg" :class="$style.iconSub"></i> <div v-if="props.file.comment" v-tooltip="getTrimmedAltText()" :class="$style.hasAltText">ALT</div>
</div>
</template>
<template v-else>
<i v-if="is === 'image'" class="ph-image-square ph-bold ph-lg" :class="$style.icon"></i>
<i v-else-if="is === 'video'" class="ph-video ph-bold ph-lg" :class="$style.icon"></i>
<i v-else-if="is === 'audio' || is === 'midi'" class="ph-file-audio ph-bold ph-lg" :class="$style.icon"></i>
<i v-else-if="is === 'csv'" class="ph-file-text ph-bold ph-lg" :class="$style.icon"></i>
<i v-else-if="is === 'pdf'" class="ph-file-text ph-bold ph-lg" :class="$style.icon"></i>
<i v-else-if="is === 'textfile'" class="ph-file-text ph-bold ph-lg" :class="$style.icon"></i>
<i v-else-if="is === 'archive'" class="ph-file-zip ph-bold ph-lg" :class="$style.icon"></i>
<i v-else class="ph-file ph-bold ph-lg" :class="$style.icon"></i>
<i v-if="isThumbnailAvailable && is === 'video'" class="ph-video ph-bold ph-lg" :class="$style.iconSub"></i>
</template>
</div> </div>
</template> </template>
@ -56,6 +64,20 @@ const isThumbnailAvailable = computed(() => {
? (is.value === 'image' as const || is.value === 'video') ? (is.value === 'image' as const || is.value === 'video')
: false; : false;
}); });
const getTrimmedAltText = () => {
if (props.file.comment == null) {
return '';
}
const maxCharacters = 40;
const alt = props.file.comment as unknown as string;
if (alt.length > maxCharacters) {
return alt.substring(0, maxCharacters) + '...';
}
return alt;
};
</script> </script>
<style lang="scss" module> <style lang="scss" module>
@ -82,4 +104,21 @@ const isThumbnailAvailable = computed(() => {
font-size: 32px; font-size: 32px;
color: #777; color: #777;
} }
.hasAltText {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 3;
margin: 5px;
cursor: help;
background-color: black;
border-radius: var(--radius-sm);
color: var(--accentLighten);
display: inline-block;
font-weight: bold;
font-size: 0.8em;
padding: 2px 5px;
}
</style> </style>