Add AttachmentBatch for future removal of sendAttachmentsMixin
This commit is contained in:
N-Pex
parent
1d30d0633d
commit
fd82fd8840
5 changed files with 377 additions and 231 deletions
|
|
@ -45,9 +45,11 @@ $hiliteColor: #4642f1;
|
|||
width: 100%;
|
||||
height: 50%;
|
||||
background-color: $background;
|
||||
|
||||
&.drop-target {
|
||||
background-color: $backgroundHilite;
|
||||
}
|
||||
|
||||
border-radius: 19px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -79,6 +81,7 @@ $hiliteColor: #4642f1;
|
|||
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;
|
||||
|
|
@ -89,6 +92,7 @@ $hiliteColor: #4642f1;
|
|||
textarea {
|
||||
color: rgba($text, 80%) !important;
|
||||
}
|
||||
|
||||
textarea::placeholder {
|
||||
color: rgba($text, 80%) !important;
|
||||
}
|
||||
|
|
@ -98,22 +102,28 @@ $hiliteColor: #4642f1;
|
|||
flex: 0 0 100%;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.file-drop-current-item {
|
||||
width: 100%;
|
||||
flex: 1 1 100%;
|
||||
background-color: $backgroundSection;
|
||||
display: flex;
|
||||
|
||||
&.drop-target {
|
||||
background-color: $backgroundHilite;
|
||||
}
|
||||
|
||||
border-radius: 19px;
|
||||
overflow: hidden;
|
||||
|
||||
.v-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.filename {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -158,9 +168,12 @@ $hiliteColor: #4642f1;
|
|||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none;
|
||||
/* IE and Edge */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
|
||||
.file-drop-thumbnail {
|
||||
width: 46px;
|
||||
|
|
@ -171,17 +184,21 @@ $hiliteColor: #4642f1;
|
|||
border: 2px solid white;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&.current {
|
||||
border: 2px solid #4642f1;
|
||||
}
|
||||
|
||||
&.noborder {
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.v-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
margin-right: 8px;
|
||||
|
||||
.add,
|
||||
|
|
@ -195,11 +212,13 @@ $hiliteColor: #4642f1;
|
|||
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);
|
||||
|
|
@ -228,31 +247,40 @@ $hiliteColor: #4642f1;
|
|||
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-field {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.input-container__buttons {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 10px;
|
||||
display: flex;
|
||||
& > *:not(:first-child) {
|
||||
|
||||
&>*:not(:first-child) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-area-text {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
margin-bottom: 50px;
|
||||
padding: 16px 18px;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 300;
|
||||
|
||||
.v-field {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInStackItem {
|
||||
from {opacity: 0;}
|
||||
to {opacity: 1;}
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Sending
|
||||
|
|
@ -263,49 +291,63 @@ $hiliteColor: #4642f1;
|
|||
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-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 {
|
||||
|
||||
div,
|
||||
.v-icon {
|
||||
position: absolute;
|
||||
}
|
||||
.v-icon, .v-icon__component {
|
||||
|
||||
.v-icon,
|
||||
.v-icon__component {
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
.file-drop-stack-item {
|
||||
background: #3a3a3c;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
|
||||
.v-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&.direct {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
&.animated {
|
||||
animation-name: fadeInStackItem;
|
||||
animation-fill-mode: both;
|
||||
|
|
@ -327,9 +369,12 @@ $hiliteColor: #4642f1;
|
|||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none;
|
||||
/* IE and Edge */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
|
||||
.file-drop-sending-item {
|
||||
width: 100%;
|
||||
|
|
@ -339,6 +384,7 @@ $hiliteColor: #4642f1;
|
|||
border-radius: 12px;
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
|
||||
.v-img {
|
||||
width: $min-touch-target;
|
||||
height: $min-touch-target;
|
||||
|
|
@ -347,18 +393,22 @@ $hiliteColor: #4642f1;
|
|||
flex: 0 0 $min-touch-target;
|
||||
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;
|
||||
|
|
@ -379,7 +429,9 @@ $hiliteColor: #4642f1;
|
|||
.v-progress-circular {
|
||||
margin-left: 8px;
|
||||
}
|
||||
background: linear-gradient(0deg, #000 0%, #000 100%), #4642f1;
|
||||
|
||||
background: linear-gradient(0deg, #000 0%, #000 100%),
|
||||
#4642f1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -396,10 +448,12 @@ $hiliteColor: #4642f1;
|
|||
|
||||
.file-drop-sent-input-container {
|
||||
background-color: transparent;
|
||||
|
||||
.v-btn {
|
||||
right: unset;
|
||||
left: 8px;
|
||||
background: linear-gradient(0deg, #000 0%, #000 100%), #4642f1;
|
||||
|
||||
&.close {
|
||||
right: 8px;
|
||||
left: unset;
|
||||
|
|
@ -407,4 +461,4 @@ $hiliteColor: #4642f1;
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue