butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Re-add the file drop initial view

Browse source
This commit is contained in:
N-Pex 2025-10-17 15:11:47 +02:00
parent f701e2af15
commit b30f50b96d
2 changed files with 80 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/assets/css/sendattachments.scss
View file

@ -38,6 +38,14 @@ $hiliteColor: #4642f1;
display: flex;
align-items: center;
justify-content: center;
&.file-drop {
flex: 0 0 100px;
background-color: transparent;
flex-direction: column;
.file-drop-title {
margin-top: 8px;
}
}
}
.v-btn {
@ -119,6 +127,25 @@ $hiliteColor: #4642f1;
}
}
.file-drop-choose-files {
background-color: $backgroundSection;
border-radius: 19px;
padding: 16px 18px;
flex: 0 0 40%;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.file-format-info {
font-family: "Inter", sans-serif;
font-size: 11 * $chat-text-size;
line-height: 117%;
color: rgba(white, 0.6);
margin-top: 5px;
}
}
.file-drop-thumbnail-container,
.gallery-thumbnail-container {
width: 100%;

168
src/components/file_mode/SendAttachmentsLayout.vue
View file

@ -1,29 +1,32 @@
<template>
<div v-bind="{ ...$attrs }" class="send-attachments">
<v-btn
v-if="!fileModeMode"
class="back-button clickable"
icon="arrow_back"
size="default"
elevation="0"
@click.stop="close"
:disabled="backButtonDisabled"
variant="flat"
></v-btn>
<v-btn v-if="!fileModeMode" class="back-button clickable" icon="arrow_back" size="default" elevation="0"
@click.stop="close" :disabled="backButtonDisabled" variant="flat"></v-btn>
<div class="title">{{ title }}</div>
<div v-if="fileModeMode" class="title file-drop">
<v-icon>$vuetify.icons.ic_lock</v-icon>
<div class="file-drop-title">{{ $t("file_mode.secure_file_send") }}</div>
</div>
<div v-else class="title">{{ title }}</div>
<!-- No attachments view -->
<template v-if="fileModeMode && status == mainStatuses.SELECTING && batch.attachments.length == 0">
<div :class="{ 'file-drop-choose-files': true, 'drop-target': dropTarget }" @drop.prevent="filesDropped"
@dragover.prevent="dropTarget = true" @dragleave.prevent="dropTarget = false"
@dragenter.prevent="dropTarget = true">
<v-btn @click="$emit('pick-file')" size="large">{{ $t("file_mode.choose_files") }}</v-btn>
<div class="file-format-info">{{ $t("file_mode.any_file_format_accepted") }}</div>
</div>
</template>
<!-- ATTACHMENT SELECTION MODE -->
<template v-if="status == mainStatuses.SELECTING">
<div
:class="{ 'send-attachments__selecting__current-item': true, 'drop-target': dropTarget }"
@drop.prevent="filesDropped"
@dragover.prevent="dropTarget = true"
@dragleave.prevent="dropTarget = false"
@dragenter.prevent="dropTarget = true"
>
<template v-else-if="status == mainStatuses.SELECTING">
<div :class="{ 'send-attachments__selecting__current-item': true, 'drop-target': dropTarget }"
@drop.prevent="filesDropped" @dragover.prevent="dropTarget = true" @dragleave.prevent="dropTarget = false"
@dragenter.prevent="dropTarget = true">
<ThumbnailView :item="currentAttachment" />
<div v-if="currentAttachment && currentAttachment.status === 'loading'" class="send-attachments__selecting__current-item__preparing">
<div v-if="currentAttachment && currentAttachment.status === 'loading'"
class="send-attachments__selecting__current-item__preparing">
<div style="font-size: 0.7em; opacity: 0.7">
<v-progress-circular indeterminate class="mb-0"></v-progress-circular>
</div>
@ -38,20 +41,14 @@
<template v-slot:activator="{ props }">
<v-badge :model-value="batch.isTooLarge(attachment)" color="error">
<template v-slot:badge><span v-bind="props">&nbsp;</span></template>
<div
:class="{ 'file-drop-thumbnail': true, clickable: true, current: index == currentItemIndex }"
@click="
() => {
currentItemIndex = index;
}
"
>
<div :class="{ 'file-drop-thumbnail': true, clickable: true, current: index == currentItemIndex }" @click="
() => {
currentItemIndex = index;
}
">
<v-img v-if="attachment && attachment.src" :src="attachment.src" />
<div
v-if="currentItemIndex == index"
class="remove clickable"
@click.stop="batch.removeAttachment(attachment)"
>
<div v-if="currentItemIndex == index" class="remove clickable"
@click.stop="batch.removeAttachment(attachment)">
<v-icon>$vuetify.icons.ic_trash</v-icon>
</div>
</div>
@ -65,40 +62,15 @@
</div>
<div class="file-drop-input-container">
<div class="file-drop-input-container__input">
<v-text-field
ref="input"
full-width
variant="solo"
flat
v-model="messageInput"
no-resize
class="input-area-text"
rows="1"
:placeholder="$t('file_mode.add_a_message')"
hide-details
color="white"
background-color="transparent"
/>
<v-btn
class="send-button clickable"
icon="arrow_upward"
size="default"
elevation="0"
color="black"
@click.stop="sendAll"
:disabled="sendButtonDisabled"
></v-btn>
<v-text-field ref="input" full-width variant="solo" flat v-model="messageInput" no-resize
class="input-area-text" rows="1" :placeholder="$t('file_mode.add_a_message')" hide-details color="white"
background-color="transparent" />
<v-btn class="send-button clickable" icon="arrow_upward" size="default" elevation="0" color="black"
@click.stop="sendAll" :disabled="sendButtonDisabled"></v-btn>
</div>
<v-badge location="top right" color="#ff3300" dot class="cc-badge" :model-value="anyContainsCC">
<v-btn
class="info-button clickable"
icon="$vuetify.icons.ic_share_settings"
size="44"
elevation="0"
color="black"
@click.stop="showInformation"
:disabled="currentAttachment?.status !== 'loaded'"
></v-btn>
<v-btn class="info-button clickable" icon="$vuetify.icons.ic_share_settings" size="44" elevation="0"
color="black" @click.stop="showInformation" :disabled="currentAttachment?.status !== 'loaded'"></v-btn>
</v-badge>
</div>
</template>
@ -110,13 +82,8 @@
<div class="file-drop-stack-item direct" :style="stackItemTransform(null, -1)"></div>
<div>{{ $t("file_mode.sending_progress") }}</div>
</div>
<div
v-else
v-for="(info, index) in batch.attachmentsSent"
:key="info.file.name"
class="file-drop-stack-item animated"
:style="stackItemTransform(info, index)"
>
<div v-else v-for="(info, index) in batch.attachmentsSent" :key="info.file.name"
class="file-drop-stack-item animated" :style="stackItemTransform(info, index)">
<v-img v-if="info.src" :src="info.src" />
</div>
<div v-if="status == mainStatuses.SENT" class="items-sent" :style="stackItemTransform(null, -1)">
@ -145,41 +112,18 @@
}}
</div>
<div class="file-drop-section">
<v-textarea
disabled
full-width
variant="solo"
flat
v-model="messageInput"
no-resize
class="input-area-text"
rows="1"
hide-details
background-color="transparent"
/>
<v-textarea disabled full-width variant="solo" flat v-model="messageInput" no-resize class="input-area-text"
rows="1" hide-details background-color="transparent" />
</div>
</div>
<!-- Bottom section -->
<div v-if="status == mainStatuses.SENDING" class="file-drop-sending-input-container">
<v-textarea
disabled
full-width
variant="solo"
flat
auto-grow
v-model="messageInput"
no-resize
class="input-area-text"
rows="1"
:placeholder="$t('file_mode.add_a_message')"
hide-details
background-color="transparent"
/>
<v-btn
>{{ $t("file_mode.sending")
}}<v-progress-circular indeterminate size="18" width="2" color="#4642F1"></v-progress-circular
></v-btn>
<v-textarea disabled full-width variant="solo" flat auto-grow v-model="messageInput" no-resize
class="input-area-text" rows="1" :placeholder="$t('file_mode.add_a_message')" hide-details
background-color="transparent" />
<v-btn>{{ $t("file_mode.sending")
}}<v-progress-circular indeterminate size="18" width="2" color="#4642F1"></v-progress-circular></v-btn>
</div>
<div v-else-if="status == mainStatuses.SENT" class="file-drop-sent-input-container">
<v-btn class="close" @click.stop="close">{{ $t("file_mode.close") }}</v-btn>
@ -189,23 +133,17 @@
<v-bottom-sheet v-model="showAttachmentInformation" theme="dark" height="80%">
<v-card class="text-center send-attachments-info-popup">
<v-card-title class="d-flex flex-column pa-0">
<div class="align-self-end done-button clickable" @click="showAttachmentInformation = false">{{ $t("menu.done") }}</div>
<div class="align-self-end done-button clickable" @click="showAttachmentInformation = false">{{
$t("menu.done") }}
</div>
<v-divider />
</v-card-title>
<v-card-title class="d-flex">
<v-btn
class="left-right-arrow flex-0-0"
icon="chevron_left"
@click.stop="currentItemIndex -= 1"
:disabled="currentItemIndex == 0"
></v-btn>
<v-btn class="left-right-arrow flex-0-0" icon="chevron_left" @click.stop="currentItemIndex -= 1"
:disabled="currentItemIndex == 0"></v-btn>
<div class="title flex-fill">{{ currentAttachment.file.name }}</div>
<v-btn
class="left-right-arrow flex-0-0"
icon="chevron_right"
@click.stop="currentItemIndex += 1"
:disabled="currentItemIndex >= batch.attachments.length - 1"
></v-btn>
<v-btn class="left-right-arrow flex-0-0" icon="chevron_right" @click.stop="currentItemIndex += 1"
:disabled="currentItemIndex >= batch.attachments.length - 1"></v-btn>
</v-card-title>
<v-card-text>
<AttachmentInfo :attachment="currentAttachment" />