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

Style the file send view main page

Browse source
This commit is contained in:
N-Pex 2025-07-03 15:45:49 +02:00
parent e5bb2d7202
commit 1a08b38fdb
4 changed files with 126 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,9 @@
@use "@/assets/css/variables" as *; @use "@/assets/css/variables" as *;
$background: #000000; $background: #000000;
$backgroundSection: #181719; $backgroundSection: #333333E5;
$backgroundHilite: #383739; $backgroundHilite: #383739;
$backgroundDark: #242424;
$text: #ffffff; $text: #ffffff;
$hiliteColor: #4642f1; $hiliteColor: #4642f1;
@ -15,13 +16,29 @@ $hiliteColor: #4642f1;
right: 0; right: 0;
bottom: 0; bottom: 0;
margin: 0; margin: 0;
padding: 0;
background-color: $background; background-color: $background;
color: $text; color: $text;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
padding: 16px;
.title {
font-family: "Inter", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 125%;
letter-spacing: 0.4px;
text-align: center;
vertical-align: bottom;
color: white;
flex: 0 0 50px;
background-color: $backgroundSection;
display: flex;
align-items: center;
justify-content: center;
}
.v-btn { .v-btn {
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
@ -45,24 +62,11 @@ $hiliteColor: #4642f1;
.back-button { .back-button {
position: absolute; position: absolute;
top: 16px; top: 8px;
left: 16px; left: 16px;
margin: 0; margin: 0;
z-index: 1; z-index: 1;
} background-color: transparent !important;
.info-button {
position: absolute;
top: 16px;
right: 16px;
margin: 0;
z-index: 1;
}
.send-button {
position: absolute;
top: 4px;
right: 4px;
} }
textarea { textarea {
@ -73,7 +77,8 @@ $hiliteColor: #4642f1;
color: rgba($text, 80%) !important; color: rgba($text, 80%) !important;
} }
.send-attachments__selecting__current-item, .gallery-current-item { .send-attachments__selecting__current-item,
.gallery-current-item {
width: 100%; width: 100%;
flex: 1 1 100%; flex: 1 1 100%;
background-color: $backgroundSection; background-color: $backgroundSection;
@ -83,7 +88,7 @@ $hiliteColor: #4642f1;
background-color: $backgroundHilite; background-color: $backgroundHilite;
} }
border-radius: 19px; //border-radius: 19px;
overflow: hidden; overflow: hidden;
.v-img { .v-img {
@ -102,9 +107,11 @@ $hiliteColor: #4642f1;
} }
} }
.file-drop-thumbnail-container, .gallery-thumbnail-container { .file-drop-thumbnail-container,
.gallery-thumbnail-container {
width: 100%; width: 100%;
padding: 13px 20px 15px 20px; background-color: $backgroundSection;
padding: 16px 20px 24px 20px;
flex: 0 0 74px; flex: 0 0 74px;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
@ -123,7 +130,7 @@ $hiliteColor: #4642f1;
/* Firefox */ /* Firefox */
.v-badge { .v-badge {
margin-right: 8px; //margin-right: 8px;
} }
.v-badge__badge { .v-badge__badge {
@ -145,7 +152,7 @@ $hiliteColor: #4642f1;
height: 46px; height: 46px;
border-radius: 9px; border-radius: 9px;
overflow: hidden; overflow: hidden;
background-color: #242424; background-color: $backgroundDark;
border: 2px solid white; border: 2px solid white;
display: inline-block; display: inline-block;
position: relative; position: relative;
@ -155,7 +162,7 @@ $hiliteColor: #4642f1;
} }
&.noborder { &.noborder {
border: 2px solid transparent; border: 2px solid $backgroundDark;
} }
.v-img { .v-img {
@ -195,21 +202,49 @@ $hiliteColor: #4642f1;
margin-top: 20px; margin-top: 20px;
padding: 16px 18px; padding: 16px 18px;
background-color: $backgroundSection; background-color: $backgroundSection;
border-radius: 19px; //border-radius: 19px;
} }
.file-drop-input-container { .file-drop-input-container {
flex: 1 1 auto; flex: 1 1 auto;
width: 100%;
position: relative;
padding: 0 16px 16px 16px;
display: flex;
flex-direction: row;
background-color: $backgroundSection;
.file-drop-input-container__input {
background-color: $backgroundDark;
border-radius: 22px;
flex: 1 1 auto;
position: relative;
margin-right: 15px;
height: 42px;
overflow: hidden;
}
.send-button {
margin: 0;
padding: 0;
position: absolute;
top: 3px;
right: 3px;
}
.info-button {
background-color: $backgroundDark !important;
margin: 0;
}
} }
.file-drop-input-container,
.file-drop-sending-input-container, .file-drop-sending-input-container,
.file-drop-sent-input-container { .file-drop-sent-input-container {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 100px; min-height: 100px;
background-color: $backgroundSection; background-color: $backgroundSection;
border-radius: 19px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -229,10 +264,15 @@ $hiliteColor: #4642f1;
flex: 0 0 auto; flex: 0 0 auto;
width: 100%; width: 100%;
margin-bottom: 50px; margin-bottom: 50px;
padding: 6px 8px; //padding: 6px 8px;
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
font-weight: 300; font-weight: 300;
input {
color: white !important;
padding-right: 50px;
}
.v-field { .v-field {
background-color: transparent !important; background-color: transparent !important;
} }
@ -446,6 +486,7 @@ $hiliteColor: #4642f1;
.c2pa-badge { .c2pa-badge {
overflow: hidden; overflow: hidden;
.v-icon { .v-icon {
width: 32px; width: 32px;
height: 32px; height: 32px;

11
src/assets/icons/ic_share_settings.vue Normal file
View file

@ -0,0 +1,11 @@
<template>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3 8L15 8M15 8C15 9.65686 16.3431 11 18 11C19.6569 11 21 9.65685 21 8C21 6.34315 19.6569 5 18 5C16.3431 5 15 6.34315 15 8ZM9 16L21 16M9 16C9 17.6569 7.65685 19 6 19C4.34315 19 3 17.6569 3 16C3 14.3431 4.34315 13 6 13C7.65685 13 9 14.3431 9 16Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</template>

1
src/components/Chat.vue
View file

@ -237,6 +237,7 @@
v-on:add-files="(files) => addAttachments(files)" v-on:add-files="(files) => addAttachments(files)"
:batch="uploadBatch" :batch="uploadBatch"
v-on:close="() => { uploadBatch = undefined }" v-on:close="() => { uploadBatch = undefined }"
:title="room.name"
/> />
<MessageOperationsBottomSheet ref="messageOperationsSheet"> <MessageOperationsBottomSheet ref="messageOperationsSheet">

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

@ -6,11 +6,13 @@
icon="arrow_back" icon="arrow_back"
size="default" size="default"
elevation="0" elevation="0"
color="black"
@click.stop="close" @click.stop="close"
:disabled="backButtonDisabled" :disabled="backButtonDisabled"
variant="flat"
></v-btn> ></v-btn>
<div class="title">{{ title }}</div>
<!-- ATTACHMENT SELECTION MODE --> <!-- ATTACHMENT SELECTION MODE -->
<template v-if="status == mainStatuses.SELECTING"> <template v-if="status == mainStatuses.SELECTING">
<div <div
@ -28,14 +30,6 @@
</div> </div>
</div> </div>
<ThumbnailView v-else :file="currentAttachment" /> <ThumbnailView v-else :file="currentAttachment" />
<v-btn
class="info-button clickable"
icon="information"
size="default"
elevation="0"
color="black"
@click.stop="showInformation"
></v-btn>
</div> </div>
<div class="file-drop-thumbnail-container"> <div class="file-drop-thumbnail-container">
<v-tooltip location="top" v-for="(attachment, index) in batch.attachments" :key="index"> <v-tooltip location="top" v-for="(attachment, index) in batch.attachments" :key="index">
@ -44,7 +38,11 @@
<template v-slot:badge><span v-bind="props">&nbsp;</span></template> <template v-slot:badge><span v-bind="props">&nbsp;</span></template>
<div <div
:class="{ 'file-drop-thumbnail': true, clickable: true, current: index == currentItemIndex }" :class="{ 'file-drop-thumbnail': true, clickable: true, current: index == currentItemIndex }"
@click="() => { currentItemIndex = index }" @click="
() => {
currentItemIndex = index;
}
"
> >
<v-img v-if="attachment && attachment.src" :src="attachment.src" /> <v-img v-if="attachment && attachment.src" :src="attachment.src" />
<div <div
@ -64,33 +62,38 @@
</div> </div>
</div> </div>
<div class="file-drop-input-container"> <div class="file-drop-input-container">
<v-textarea <div class="file-drop-input-container__input">
ref="input" <v-text-field
full-width ref="input"
variant="solo" full-width
flat variant="solo"
auto-grow flat
v-model="messageInput" v-model="messageInput"
no-resize no-resize
class="input-area-text" class="input-area-text"
rows="1" rows="1"
:placeholder="$t('file_mode.add_a_message')" :placeholder="$t('file_mode.add_a_message')"
hide-details hide-details
background-color="transparent" color="white"
v-on:keydown.enter.prevent=" background-color="transparent"
() => { />
sendAll(); <v-btn
} class="send-button clickable"
" icon="arrow_upward"
/> size="default"
elevation="0"
color="black"
@click.stop="sendAll"
:disabled="sendButtonDisabled"
></v-btn>
</div>
<v-btn <v-btn
class="send-button clickable" class="info-button clickable"
icon="arrow_upward" icon="$vuetify.icons.ic_share_settings"
size="default" size="default"
elevation="0" elevation="0"
color="black" color="black"
@click.stop="sendAll" @click.stop="showInformation"
:disabled="sendButtonDisabled"
></v-btn> ></v-btn>
</div> </div>
</template> </template>
@ -142,7 +145,6 @@
full-width full-width
variant="solo" variant="solo"
flat flat
auto-grow
v-model="messageInput" v-model="messageInput"
no-resize no-resize
class="input-area-text" class="input-area-text"
@ -206,8 +208,8 @@ export default defineComponent({
defaultRootMessageText: { defaultRootMessageText: {
type: String, type: String,
default: function () { default: function () {
return "" return "";
} },
}, },
showBackButton: { showBackButton: {
@ -217,6 +219,13 @@ export default defineComponent({
}, },
}, },
title: {
type: String,
default: function () {
return "";
},
},
batch: { batch: {
type: Object, type: Object,
default: function () { default: function () {
@ -254,13 +263,6 @@ export default defineComponent({
} }
return undefined; return undefined;
}, },
currentItemHasImagePreview() {
return (
this.currentItemIndex >= 0 &&
this.currentItemIndex < this.batch.attachments.length &&
this.batch.attachments[this.currentItemIndex].src
);
},
}, },
watch: { watch: {
"batch.attachments": { "batch.attachments": {