Fix gallery view and lazy load thumbnails
This commit is contained in:
parent
f0382afd83
commit
acdef62880
6 changed files with 69 additions and 27 deletions
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue