Style the file send view main page
This commit is contained in:
N-Pex
parent
e5bb2d7202
commit
1a08b38fdb
4 changed files with 126 additions and 71 deletions
|
|
@ -1,8 +1,9 @@
|
|||
@use "@/assets/css/variables" as *;
|
||||
|
||||
$background: #000000;
|
||||
$backgroundSection: #181719;
|
||||
$backgroundSection: #333333E5;
|
||||
$backgroundHilite: #383739;
|
||||
$backgroundDark: #242424;
|
||||
$text: #ffffff;
|
||||
$hiliteColor: #4642f1;
|
||||
|
||||
|
|
@ -15,13 +16,29 @@ $hiliteColor: #4642f1;
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: $background;
|
||||
color: $text;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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 {
|
||||
font-family: "Inter", sans-serif;
|
||||
|
|
@ -45,24 +62,11 @@ $hiliteColor: #4642f1;
|
|||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
top: 8px;
|
||||
left: 16px;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.info-button {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.send-button {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
@ -73,7 +77,8 @@ $hiliteColor: #4642f1;
|
|||
color: rgba($text, 80%) !important;
|
||||
}
|
||||
|
||||
.send-attachments__selecting__current-item, .gallery-current-item {
|
||||
.send-attachments__selecting__current-item,
|
||||
.gallery-current-item {
|
||||
width: 100%;
|
||||
flex: 1 1 100%;
|
||||
background-color: $backgroundSection;
|
||||
|
|
@ -83,7 +88,7 @@ $hiliteColor: #4642f1;
|
|||
background-color: $backgroundHilite;
|
||||
}
|
||||
|
||||
border-radius: 19px;
|
||||
//border-radius: 19px;
|
||||
overflow: hidden;
|
||||
|
||||
.v-img {
|
||||
|
|
@ -102,9 +107,11 @@ $hiliteColor: #4642f1;
|
|||
}
|
||||
}
|
||||
|
||||
.file-drop-thumbnail-container, .gallery-thumbnail-container {
|
||||
.file-drop-thumbnail-container,
|
||||
.gallery-thumbnail-container {
|
||||
width: 100%;
|
||||
padding: 13px 20px 15px 20px;
|
||||
background-color: $backgroundSection;
|
||||
padding: 16px 20px 24px 20px;
|
||||
flex: 0 0 74px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
|
@ -123,7 +130,7 @@ $hiliteColor: #4642f1;
|
|||
/* Firefox */
|
||||
|
||||
.v-badge {
|
||||
margin-right: 8px;
|
||||
//margin-right: 8px;
|
||||
}
|
||||
|
||||
.v-badge__badge {
|
||||
|
|
@ -145,7 +152,7 @@ $hiliteColor: #4642f1;
|
|||
height: 46px;
|
||||
border-radius: 9px;
|
||||
overflow: hidden;
|
||||
background-color: #242424;
|
||||
background-color: $backgroundDark;
|
||||
border: 2px solid white;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -155,7 +162,7 @@ $hiliteColor: #4642f1;
|
|||
}
|
||||
|
||||
&.noborder {
|
||||
border: 2px solid transparent;
|
||||
border: 2px solid $backgroundDark;
|
||||
}
|
||||
|
||||
.v-img {
|
||||
|
|
@ -195,21 +202,49 @@ $hiliteColor: #4642f1;
|
|||
margin-top: 20px;
|
||||
padding: 16px 18px;
|
||||
background-color: $backgroundSection;
|
||||
border-radius: 19px;
|
||||
//border-radius: 19px;
|
||||
}
|
||||
|
||||
.file-drop-input-container {
|
||||
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-sent-input-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
background-color: $backgroundSection;
|
||||
border-radius: 19px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
|
@ -229,10 +264,15 @@ $hiliteColor: #4642f1;
|
|||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
margin-bottom: 50px;
|
||||
padding: 6px 8px;
|
||||
//padding: 6px 8px;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 300;
|
||||
|
||||
input {
|
||||
color: white !important;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.v-field {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
|
@ -446,6 +486,7 @@ $hiliteColor: #4642f1;
|
|||
|
||||
.c2pa-badge {
|
||||
overflow: hidden;
|
||||
|
||||
.v-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
|
|
|||
11
src/assets/icons/ic_share_settings.vue
Normal file
11
src/assets/icons/ic_share_settings.vue
Normal 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>
|
||||
|
|
@ -237,6 +237,7 @@
|
|||
v-on:add-files="(files) => addAttachments(files)"
|
||||
:batch="uploadBatch"
|
||||
v-on:close="() => { uploadBatch = undefined }"
|
||||
:title="room.name"
|
||||
/>
|
||||
|
||||
<MessageOperationsBottomSheet ref="messageOperationsSheet">
|
||||
|
|
|
|||
|
|
@ -6,11 +6,13 @@
|
|||
icon="arrow_back"
|
||||
size="default"
|
||||
elevation="0"
|
||||
color="black"
|
||||
@click.stop="close"
|
||||
:disabled="backButtonDisabled"
|
||||
variant="flat"
|
||||
></v-btn>
|
||||
|
||||
<div class="title">{{ title }}</div>
|
||||
|
||||
<!-- ATTACHMENT SELECTION MODE -->
|
||||
<template v-if="status == mainStatuses.SELECTING">
|
||||
<div
|
||||
|
|
@ -28,14 +30,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<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 class="file-drop-thumbnail-container">
|
||||
<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"> </span></template>
|
||||
<div
|
||||
: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" />
|
||||
<div
|
||||
|
|
@ -64,33 +62,38 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="file-drop-input-container">
|
||||
<v-textarea
|
||||
ref="input"
|
||||
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-on:keydown.enter.prevent="
|
||||
() => {
|
||||
sendAll();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<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>
|
||||
</div>
|
||||
<v-btn
|
||||
class="send-button clickable"
|
||||
icon="arrow_upward"
|
||||
class="info-button clickable"
|
||||
icon="$vuetify.icons.ic_share_settings"
|
||||
size="default"
|
||||
elevation="0"
|
||||
color="black"
|
||||
@click.stop="sendAll"
|
||||
:disabled="sendButtonDisabled"
|
||||
@click.stop="showInformation"
|
||||
></v-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -142,7 +145,6 @@
|
|||
full-width
|
||||
variant="solo"
|
||||
flat
|
||||
auto-grow
|
||||
v-model="messageInput"
|
||||
no-resize
|
||||
class="input-area-text"
|
||||
|
|
@ -206,8 +208,8 @@ export default defineComponent({
|
|||
defaultRootMessageText: {
|
||||
type: String,
|
||||
default: function () {
|
||||
return ""
|
||||
}
|
||||
return "";
|
||||
},
|
||||
},
|
||||
|
||||
showBackButton: {
|
||||
|
|
@ -217,6 +219,13 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
|
||||
title: {
|
||||
type: String,
|
||||
default: function () {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
|
||||
batch: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
|
|
@ -254,13 +263,6 @@ export default defineComponent({
|
|||
}
|
||||
return undefined;
|
||||
},
|
||||
currentItemHasImagePreview() {
|
||||
return (
|
||||
this.currentItemIndex >= 0 &&
|
||||
this.currentItemIndex < this.batch.attachments.length &&
|
||||
this.batch.attachments[this.currentItemIndex].src
|
||||
);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
"batch.attachments": {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue