Fix gallery view and lazy load thumbnails

This commit is contained in:
N-Pex 2025-06-19 10:58:11 +02:00
parent f0382afd83
commit acdef62880
6 changed files with 69 additions and 27 deletions

View file

@ -1,5 +1,5 @@
<template>
<div class="fill-screen file-drop-root">
<div class="fill-screen send-attachments">
<div class="chat-header">
<v-container fluid class="d-flex justify-space-between align-center">
@ -9,13 +9,13 @@
</v-container>
</div>
<div class="file-drop-current-item">
<div class="gallery-current-item">
<ThumbnailView :item="items[currentItemIndex]" />
<div class="download-button clickable" @click.stop="downloadOne">
<v-icon color="black">arrow_downward</v-icon>
</div>
</div>
<div class="file-drop-thumbnail-container">
<div class="gallery-thumbnail-container">
<div :class="{ 'file-drop-thumbnail': true, 'clickable': true, 'current': id == currentItemIndex }"
@click="currentItemIndex = id" v-for="(currentImageInput, id) in items" :key="id">
<v-img v-if="currentImageInput" :src="currentImageInput.thumbnail ? currentImageInput.thumbnail : currentImageInput.src" />
@ -107,15 +107,17 @@ export default {
<style lang="scss">
@use "@/assets/css/chat.scss" as *;
@use "@/assets/css/sendattachments.scss" as *;
.chat-header {
position: relative !important;
width: 100%;
flex: 0 0 auto;
}
.file-drop-current-item {
position: relative;
}
// .file-drop-current-item {
// position: relative;
// }
.download-button {
position: absolute;
@ -137,7 +139,7 @@ export default {
right: 0;
bottom: 0;
background: black;
z-index: 20;
z-index: 20 !important;
justify-content: space-between !important;
}
</style>