Experimental "file drop" mode
This commit is contained in:
N Pex
parent
791fa5936a
commit
ebadd509e9
19 changed files with 1038 additions and 85 deletions
|
|
@ -45,6 +45,7 @@
|
|||
}
|
||||
],
|
||||
"experimental_voice_mode": true,
|
||||
"experimental_file_mode": true,
|
||||
"experimental_read_only_room": true,
|
||||
"experimental_public_room": true,
|
||||
"show_status_messages": "never"
|
||||
|
|
|
|||
|
|
@ -1,16 +1,19 @@
|
|||
@import "~vuetify/src/styles/settings/_variables.scss";
|
||||
@import "@/assets/css/main.scss";
|
||||
@import "@/assets/css/vendors/v-emoji-picker";
|
||||
@import "@/assets/css/filedrop.scss";
|
||||
|
||||
$admin-bg: black;
|
||||
$admin-fg: white;
|
||||
|
||||
body {
|
||||
--v-app-background: $app-background;
|
||||
--v-background-color: white;
|
||||
--v-foreground-color: black;
|
||||
--v-secondary-color: #242424;
|
||||
--v-divider-color: #eeeeee;
|
||||
&.dark {
|
||||
--v-app-background: black;
|
||||
--v-background-color: black;
|
||||
--v-foreground-color: white;
|
||||
--v-secondary-color: #c0c0c0;
|
||||
|
|
@ -1528,4 +1531,4 @@ body {
|
|||
right: 20px;
|
||||
bottom: 20px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
349
src/assets/css/filedrop.scss
Normal file
349
src/assets/css/filedrop.scss
Normal file
|
|
@ -0,0 +1,349 @@
|
|||
$large-button-height: 48px;
|
||||
$small-button-height: 36px;
|
||||
|
||||
.file-drop-root {
|
||||
$hiliteColor: #4642f1;
|
||||
font-family: "Inter", sans-serif;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
background-color: var(--v-background-color);
|
||||
color: var(--v-foreground-color);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
|
||||
.file-drop-title {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 11.54 * $chat-text-size;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 140%;
|
||||
letter-spacing: 0.34px;
|
||||
text-transform: uppercase;
|
||||
margin-top: 13px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.background {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background-color: #181719;
|
||||
border-radius: 19px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.file-format-info {
|
||||
opacity: 0.6;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 11 * $chat-text-size;
|
||||
font-family: "Inter", sans-serif;
|
||||
line-height: 117%;
|
||||
letter-spacing: 0.4px;
|
||||
margin-top: 13px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.v-btn {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 11.54 * $chat-text-size;
|
||||
line-height: 140%;
|
||||
color: white;
|
||||
background-color: $hiliteColor !important;
|
||||
border-radius: $small-button-height / 2;
|
||||
min-height: 0;
|
||||
height: $small-button-height !important;
|
||||
margin-top: $chat-standard-padding-xs;
|
||||
margin-bottom: $chat-standard-padding-xs;
|
||||
&.large {
|
||||
padding: 16px 23px;
|
||||
height: $large-button-height;
|
||||
border-radius: $large-button-height / 2;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
color: rgba(white, 80%) !important;
|
||||
}
|
||||
textarea::placeholder {
|
||||
color: rgba(white, 80%) !important;
|
||||
}
|
||||
|
||||
.attachment-wrapper {
|
||||
width: 100%;
|
||||
flex: 0 0 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.file-drop-current-item {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: #181719;
|
||||
border-radius: 19px;
|
||||
overflow: hidden;
|
||||
.v-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.filename {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.file-drop-thumbnail-container {
|
||||
width: 100%;
|
||||
padding: 13px 20px 15px 20px;
|
||||
height: 74px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
text-align: start;
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
|
||||
.file-drop-thumbnail {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 9px;
|
||||
overflow: hidden;
|
||||
background-color: #242424;
|
||||
border: 2px solid white;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
&.current {
|
||||
border: 2px solid #4642f1;
|
||||
}
|
||||
&.noborder {
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
.v-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
margin-right: 8px;
|
||||
|
||||
.add,
|
||||
.remove {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.v-icon {
|
||||
width: 14px;
|
||||
height: 15.75px;
|
||||
}
|
||||
}
|
||||
.remove {
|
||||
// Slight background to make visible
|
||||
background-color: rgba(black, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-drop-section {
|
||||
margin-top: 20px;
|
||||
padding: 16px 18px;
|
||||
background-color: #181719;
|
||||
border-radius: 19px;
|
||||
}
|
||||
|
||||
.file-drop-input-container,
|
||||
.file-drop-sending-input-container,
|
||||
.file-drop-sent-input-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 20%;
|
||||
background-color: #181719;
|
||||
border-radius: 19px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.input-area-text {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
margin-bottom: 50px;
|
||||
padding: 16px 18px;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
.v-btn {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInStackItem {
|
||||
from {opacity: 0;}
|
||||
to {opacity: 1;}
|
||||
}
|
||||
|
||||
// Sending
|
||||
//
|
||||
.file-drop-sent-stack {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.no-items {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
.file-drop-stack-item {
|
||||
transform: rotate(-4.4deg);
|
||||
}
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 21 * $chat-text-size;
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.34px;
|
||||
}
|
||||
.items-sent {
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
div, .v-icon {
|
||||
position: absolute;
|
||||
}
|
||||
.v-icon, .v-icon__component {
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
}
|
||||
}
|
||||
.file-drop-stack-item {
|
||||
background: linear-gradient(0deg, #3a3a3c 0%, #3a3a3c 100%), #fff;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
.v-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
&.animated {
|
||||
animation-name: fadeInStackItem;
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-drop-sending-container {
|
||||
width: 100%;
|
||||
padding: 13px 0px 15px 0px;
|
||||
height: 50%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
white-space: nowrap;
|
||||
text-align: start;
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
|
||||
.file-drop-sending-item {
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
overflow: hidden;
|
||||
background-color: #242424;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(0deg, #26242b 0%, #26242b 100%), #fff;
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
.v-image {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
flex: 0 0 48px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.filename {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 8px;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
.v-progress-linear {
|
||||
align-self: flex-end;
|
||||
}
|
||||
.file-drop-cancel {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
color: green !important;
|
||||
background: #2e2e3b;
|
||||
border-radius: 8.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-drop-sending-input-container {
|
||||
.v-btn {
|
||||
.v-progress-circular {
|
||||
margin-left: 8px;
|
||||
}
|
||||
background: linear-gradient(0deg, #000 0%, #000 100%), #4642f1;
|
||||
}
|
||||
}
|
||||
|
||||
.file-drop-files-sent {
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 21 * $chat-text-size;
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.34px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.file-drop-sent-input-container {
|
||||
background-color: transparent;
|
||||
.v-btn {
|
||||
right: unset;
|
||||
left: 8px;
|
||||
background: linear-gradient(0deg, #000 0%, #000 100%), #4642f1;
|
||||
}
|
||||
}
|
||||
}
|
||||
15
src/assets/icons/ic_check_circle.vue
Normal file
15
src/assets/icons/ic_check_circle.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<svg width="59" height="60" viewBox="0 0 59 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Group 3826">
|
||||
<g id="Group 3800">
|
||||
<g id="Group 3799">
|
||||
<circle id="Ellipse 352" cx="29.5" cy="29.5127" r="28.5" fill="#4642F1" stroke="white"
|
||||
stroke-width="2" />
|
||||
<path id="Vector" fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M22.8132 29.1473L26.8315 33.8176L38.5723 19.8068C39.4513 18.8601 40.8326 19.8699 40.1419 20.9428L28.5896 38.677C27.7106 39.813 26.5177 39.9392 25.5131 38.8032L19.674 31.7978C18.5439 30.1569 21.432 27.8217 22.8132 29.1471V29.1473Z"
|
||||
fill="white" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
7
src/assets/icons/ic_lock.vue
Normal file
7
src/assets/icons/ic_lock.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M16.0247 8.80006H15.4908V6.42878C15.4908 2.88379 12.5789 0 9.00064 0C5.42053 0 2.50904 2.88379 2.50904 6.42878V8.80047H1.97615C0.88518 8.80047 0 9.67678 0 10.7572V20.0423C0 21.1231 0.884952 22 1.97615 22H16.0248C17.1153 22 18 21.1232 18 20.0423L17.9999 10.7568C17.9999 9.67638 17.1151 8.80006 16.025 8.80006H16.0247ZM9.82754 15.5262V16.7406C9.82754 16.9215 9.6795 17.0687 9.4959 17.0687H8.50277C8.32063 17.0687 8.17185 16.9216 8.17185 16.7406V15.5262C7.7193 15.2498 7.41503 14.7589 7.41503 14.193C7.41503 13.3265 8.12456 12.6242 9.0001 12.6242C9.87461 12.6242 10.5841 13.3265 10.5841 14.193C10.584 14.7589 10.2795 15.2498 9.82754 15.5262ZM12.6451 8.80006H5.35551V6.42878C5.35551 4.43786 6.99007 2.81942 9.00073 2.81942C11.0097 2.81942 12.6451 4.43763 12.6451 6.42878V8.80006Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
</template>
|
||||
7
src/assets/icons/ic_trash.vue
Normal file
7
src/assets/icons/ic_trash.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M1.22395 5.24998L2.19384 14.7971C2.24872 15.3374 2.7326 15.75 3.31161 15.75H10.688C11.267 15.75 11.7509 15.3374 11.8058 14.7971L12.7757 5.24998H1.22395ZM4.75998 2.09999H1.11163C0.816497 2.09999 0.534245 2.20968 0.325379 2.40503C0.117003 2.60085 0 2.86547 0 3.14213V3.68282C0 3.9595 0.116999 4.2241 0.325379 4.41991C0.534255 4.61526 0.81652 4.72495 1.11163 4.72495H12.8884C13.1835 4.72495 13.4658 4.61527 13.6746 4.41991C13.883 4.2241 14 3.95948 14 3.68282V3.14213C14 2.86545 13.883 2.60084 13.6746 2.40503C13.4657 2.20968 13.1835 2.09999 12.8884 2.09999H9.24002V1.3766C9.24002 0.616408 8.58251 0 7.77162 0H6.22825C5.41736 0 4.75985 0.616408 4.75985 1.3766L4.75998 2.09999Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -280,8 +280,12 @@
|
|||
"user_admin": "Administrator",
|
||||
"user_moderator": "Moderator",
|
||||
"experimental_features": "Experimental Features",
|
||||
"room_type": "Room type",
|
||||
"room_type_default": "Default",
|
||||
"voice_mode": "Voice mode",
|
||||
"voice_mode_info": "Switches the chat interface to a 'listen and record' mode",
|
||||
"file_mode": "File mode",
|
||||
"file_mode_info": "Switches the chat interface to a 'file drop' mode",
|
||||
"download_chat": "Download chat",
|
||||
"read_only_room": "Read only room",
|
||||
"read_only_room_info": "Only admins and moderators are allowed to send to the room",
|
||||
|
|
@ -364,5 +368,17 @@
|
|||
"symbols": "Symbols",
|
||||
"places": "Places"
|
||||
}
|
||||
},
|
||||
"file_mode": {
|
||||
"choose_files": "Choose files",
|
||||
"any_file_format_accepted": "Any file format is accepted",
|
||||
"secure_file_send": "secure file send",
|
||||
"add_a_message": "Add a message",
|
||||
"sending_progress": "Sending...",
|
||||
"sending": "Sending",
|
||||
"files_sent":"1 file sent! | {count} files sent!",
|
||||
"files_sent_with_note":"1 file sent with a note! | {count} files sent with a note!",
|
||||
"return_to_home": "Return to home",
|
||||
"files": "Files"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue