UI improvements and code refactoring
This commit is contained in:
sairaj mote
parent
6f91941a6e
commit
52b5878a05
42
css/main.css
42
css/main.css
@ -73,7 +73,6 @@ body[data-theme=dark] {
|
||||
--redish-orange: #ff8560;
|
||||
}
|
||||
body[data-theme=dark] .initial {
|
||||
color: rgba(var(--text-color), 1) !important;
|
||||
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
body[data-theme=dark] .message {
|
||||
@ -934,7 +933,7 @@ sm-button[variant=primary] {
|
||||
width: 2.8rem;
|
||||
height: 2.8rem;
|
||||
aspect-ratio: 1/1;
|
||||
color: white;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.06);
|
||||
border-radius: 2rem;
|
||||
text-transform: uppercase;
|
||||
@ -942,12 +941,13 @@ sm-button[variant=primary] {
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-color: var(--contact-color, --accent-color);
|
||||
}
|
||||
|
||||
.group-icon {
|
||||
height: 1.6rem;
|
||||
width: 1.6rem;
|
||||
fill: white;
|
||||
fill: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
.contact {
|
||||
@ -1077,6 +1077,7 @@ sm-button[variant=primary] {
|
||||
border-radius: 4rem;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background-color: var(--contact-color, --accent-color);
|
||||
}
|
||||
#contact_details_popup #contact_name {
|
||||
margin: 0.6rem 1.5rem;
|
||||
@ -1180,12 +1181,6 @@ sm-button[variant=primary] {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mail-card .date {
|
||||
grid-area: date;
|
||||
margin-left: auto;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mail-card .subject {
|
||||
grid-area: subject;
|
||||
font-size: 1em;
|
||||
@ -1203,6 +1198,14 @@ sm-button[variant=primary] {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
.date {
|
||||
grid-area: date;
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
@-webkit-keyframes slide {
|
||||
from {
|
||||
opacity: 0;
|
||||
@ -1233,8 +1236,12 @@ sm-button[variant=primary] {
|
||||
}
|
||||
.mail:not(:first-of-type) {
|
||||
margin-top: 2rem;
|
||||
-webkit-padding-start: 1rem;
|
||||
padding-inline-start: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
.mail:not(:first-of-type) .mail-header {
|
||||
padding-top: 0;
|
||||
}
|
||||
.mail:not(:first-of-type)::before {
|
||||
content: "";
|
||||
@ -1249,6 +1256,13 @@ sm-button[variant=primary] {
|
||||
align-self: start;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
.mail .initial {
|
||||
background-color: var(--contact-color, --accent-color);
|
||||
margin: 0;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
.mail .sender-name {
|
||||
font-weight: 500;
|
||||
@ -1258,11 +1272,8 @@ sm-button[variant=primary] {
|
||||
font-weight: 400;
|
||||
max-width: 90%;
|
||||
}
|
||||
.mail .flex:first-of-type {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.mail .back {
|
||||
margin: 0 0 0 -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
.mail .mail-subject,
|
||||
.mail .mail-content {
|
||||
@ -1761,7 +1772,6 @@ sm-button[variant=primary] {
|
||||
#chat_header .back-button {
|
||||
padding: 0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
#chat_header .initial {
|
||||
cursor: pointer;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -70,7 +70,6 @@ body[data-theme="dark"] {
|
||||
--orange: #ffbe68;
|
||||
--redish-orange: #ff8560;
|
||||
.initial {
|
||||
color: rgba(var(--text-color), 1) !important;
|
||||
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
.message {
|
||||
@ -831,16 +830,17 @@ sm-button[variant="primary"] {
|
||||
width: 2.8rem;
|
||||
height: 2.8rem;
|
||||
aspect-ratio: 1/1;
|
||||
color: white;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.06);
|
||||
border-radius: 2rem;
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
background-color: var(--contact-color, --accent-color);
|
||||
}
|
||||
.group-icon {
|
||||
height: 1.6rem;
|
||||
width: 1.6rem;
|
||||
fill: white;
|
||||
fill: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.contact {
|
||||
position: relative;
|
||||
@ -964,6 +964,7 @@ sm-button[variant="primary"] {
|
||||
border-radius: 4rem;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background-color: var(--contact-color, --accent-color);
|
||||
}
|
||||
#contact_name {
|
||||
margin: 0.6rem 1.5rem;
|
||||
@ -1057,12 +1058,6 @@ sm-button[variant="primary"] {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.date {
|
||||
grid-area: date;
|
||||
margin-left: auto;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.subject {
|
||||
grid-area: subject;
|
||||
font-size: 1em;
|
||||
@ -1080,6 +1075,13 @@ sm-button[variant="primary"] {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
}
|
||||
.date {
|
||||
grid-area: date;
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
@keyframes slide {
|
||||
from {
|
||||
opacity: 0;
|
||||
@ -1097,7 +1099,12 @@ sm-button[variant="primary"] {
|
||||
position: relative;
|
||||
&:not(:first-of-type) {
|
||||
margin-top: 2rem;
|
||||
padding-inline-start: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
padding-bottom: 2rem;
|
||||
.mail-header {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
&:not(:first-of-type)::before {
|
||||
content: "";
|
||||
@ -1112,6 +1119,13 @@ sm-button[variant="primary"] {
|
||||
align-self: start;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
.initial {
|
||||
background-color: var(--contact-color, --accent-color);
|
||||
margin: 0;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
.sender-name {
|
||||
font-weight: 500;
|
||||
@ -1121,11 +1135,8 @@ sm-button[variant="primary"] {
|
||||
font-weight: 400;
|
||||
max-width: 90%;
|
||||
}
|
||||
.flex:first-of-type {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.back {
|
||||
margin: 0 0 0 -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
.mail-subject,
|
||||
.mail-content {
|
||||
@ -1572,7 +1583,6 @@ sm-button[variant="primary"] {
|
||||
.back-button {
|
||||
padding: 0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.initial {
|
||||
cursor: pointer;
|
||||
|
||||
359
index.html
359
index.html
@ -267,12 +267,12 @@
|
||||
<button class="hide-on-desktop back-button" onclick="goto('chats')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" opacity=".87" />
|
||||
<path d="M17.51 3.87L15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13z" />
|
||||
<path d="M0 0h24v24H0V0z" fill="none"></path>
|
||||
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
|
||||
</svg>
|
||||
<div id="receiver_initial" class="initial flex align-center"></div>
|
||||
</button>
|
||||
<div class="flex align-center interactive" onclick="showChatDetails({show: true})">
|
||||
<div id="receiver_initial" class="initial flex align-center margin-right-0-5"></div>
|
||||
<h4 id="receiver_name"></h4>
|
||||
</div>
|
||||
</header>
|
||||
@ -371,40 +371,46 @@
|
||||
<div class="flex align-center">
|
||||
<h4>Mail</h4>
|
||||
<strip-select id="mail_type_selector">
|
||||
<strip-option value="inbox" selected>Inbox</strip-option>
|
||||
<strip-option value="sent">Sent</strip-option>
|
||||
<strip-option value="inbox" selected onclick="showChildElement('mail_sections', 0)">Inbox
|
||||
</strip-option>
|
||||
<strip-option value="sent" onclick="showChildElement('mail_sections', 1)">Sent
|
||||
</strip-option>
|
||||
</strip-select>
|
||||
</div>
|
||||
</header>
|
||||
<button class="button button--primary fab" id="new_mail_button">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M46.73,14.81l7,7,7.65-7.6A7.15,7.15,0,0,0,61.39,4L60.11,2.77a7.23,7.23,0,0,0-10.19,0L3.87,48.57a5,5,0,0,0-1.39,2.6L.53,61.27a1.74,1.74,0,0,0,2,2l10.15-1.94A5.06,5.06,0,0,0,15.34,60L49.6,25.9" />
|
||||
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM5.92 19H5v-.92l9.06-9.06.92.92L5.92 19zM20.71 5.63l-2.34-2.34c-.2-.2-.45-.29-.71-.29s-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41z" />
|
||||
</svg>
|
||||
New Mail
|
||||
</button>
|
||||
<div>
|
||||
<ul id="inbox_mail_container" class="mail-container flex observe-empty-state"></ul>
|
||||
<div class="empty-state flex flex-direction-column align-center">
|
||||
<svg class="icon new-conversation" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M227,26.16,20.5,177.56a49,49,0,0,0-20,39.53V446.35a49,49,0,0,0,49,49h413a49,49,0,0,0,49-49h0V217.09a49,49,0,0,0-20-39.53L285,26.16A49,49,0,0,0,227,26.16Z" />
|
||||
<path d="M71,250.29l166.31,86.88a39,39,0,0,0,36.22,0L441,249.66" />
|
||||
</svg>
|
||||
<h4>All your received mails will appear here.</h4>
|
||||
<p class="light-text">Tap/click on 'New Mail' button below to compose new mail.</p>
|
||||
<div id="mail_sections">
|
||||
<div>
|
||||
<ul id="inbox_mail_container" class="mail-container flex observe-empty-state"></ul>
|
||||
<div class="empty-state flex flex-direction-column align-center">
|
||||
<svg class="icon new-conversation" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M227,26.16,20.5,177.56a49,49,0,0,0-20,39.53V446.35a49,49,0,0,0,49,49h413a49,49,0,0,0,49-49h0V217.09a49,49,0,0,0-20-39.53L285,26.16A49,49,0,0,0,227,26.16Z" />
|
||||
<path d="M71,250.29l166.31,86.88a39,39,0,0,0,36.22,0L441,249.66" />
|
||||
</svg>
|
||||
<h4>All your received mails will appear here.</h4>
|
||||
<p class="light-text">Tap/click on 'New Mail' button below to compose new mail.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hide">
|
||||
<ul id="sent_mail_container" class="mail-container flex observe-empty-state hide"></ul>
|
||||
<div class="empty-state flex flex-direction-column align-center">
|
||||
<svg class="icon new-conversation" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M227,26.16,20.5,177.56a49,49,0,0,0-20,39.53V446.35a49,49,0,0,0,49,49h413a49,49,0,0,0,49-49h0V217.09a49,49,0,0,0-20-39.53L285,26.16A49,49,0,0,0,227,26.16Z" />
|
||||
<path d="M71,250.29l166.31,86.88a39,39,0,0,0,36.22,0L441,249.66" />
|
||||
</svg>
|
||||
<h4>All your sent mails will appear here.</h4>
|
||||
<p class="light-text">Tap/click on 'New Mail' button below to compose new mail.</p>
|
||||
<div class="hide">
|
||||
<ul id="sent_mail_container" class="mail-container flex observe-empty-state"></ul>
|
||||
<div class="empty-state flex flex-direction-column align-center">
|
||||
<svg class="icon new-conversation" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M227,26.16,20.5,177.56a49,49,0,0,0-20,39.53V446.35a49,49,0,0,0,49,49h413a49,49,0,0,0,49-49h0V217.09a49,49,0,0,0-20-39.53L285,26.16A49,49,0,0,0,227,26.16Z" />
|
||||
<path d="M71,250.29l166.31,86.88a39,39,0,0,0,36.22,0L441,249.66" />
|
||||
</svg>
|
||||
<h4>All your sent mails will appear here.</h4>
|
||||
<p class="light-text">Tap/click on 'New Mail' button below to compose new mail.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -726,75 +732,7 @@
|
||||
<h5>FLO ID</h5>
|
||||
<sm-copy id="contact_flo_id"></sm-copy>
|
||||
</section>
|
||||
<fieldset id="contact_options">
|
||||
<button id="add_as_contact_option" class="option" onclick="addAsContact()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M20,9V6h-2v3h-3v2h3v3h2v-3h3V9H20z M9,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4S5,5.79,5,8C5,10.21,6.79,12,9,12z M9,6 c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2S7,9.1,7,8C7,6.9,7.9,6,9,6z M15.39,14.56C13.71,13.7,11.53,13,9,13c-2.53,0-4.71,0.7-6.39,1.56 C1.61,15.07,1,16.1,1,17.22V20h16v-2.78C17,16.1,16.39,15.07,15.39,14.56z M15,18H3v-0.78c0-0.38,0.2-0.72,0.52-0.88 C4.71,15.73,6.63,15,9,15c2.37,0,4.29,0.73,5.48,1.34C14.8,16.5,15,16.84,15,17.22V18z" />
|
||||
</g>
|
||||
</svg>
|
||||
Add as contact
|
||||
</button>
|
||||
<button id="mark_read_option" class="option" onclick="markAsRead()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
<path
|
||||
d="M12,18l-6,0l-4,4V4c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v7l-2,0V4H4v12l8,0V18z M23,14.34l-1.41-1.41l-4.24,4.24l-2.12-2.12 l-1.41,1.41L17.34,20L23,14.34z" />
|
||||
</g>
|
||||
</svg>
|
||||
Mark as read
|
||||
</button>
|
||||
<button id="mark_unread_option" class="option" onclick="markAsUnread()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M20,16H4V4h10.1c-0.08-0.39-0.18-1.11,0-2H4C2.9,2,2,2.9,2,4v18l4-4h14c1.1,0,2-0.9,2-2V6.98c-0.58,0.44-1.26,0.77-2,0.92 V16z" />
|
||||
<circle cx="19" cy="3" r="3" />
|
||||
<rect height="2" width="8" x="6" y="12" />
|
||||
<rect height="2" width="12" x="6" y="9" />
|
||||
<path d="M6,8h12V7.9c-1.21-0.25-2.25-0.95-2.97-1.9H6V8z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
Mark as unread
|
||||
</button>
|
||||
<button class="option" onclick="clearChat()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M16,11h-1V3c0-1.1-0.9-2-2-2h-2C9.9,1,9,1.9,9,3v8H8c-2.76,0-5,2.24-5,5v7h18v-7C21,13.24,18.76,11,16,11z M11,3h2v8h-2V3 z M19,21h-2v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3h-2v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3H9v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3H5 v-5c0-1.65,1.35-3,3-3h8c1.65,0,3,1.35,3,3V21z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
Clear this chat
|
||||
</button>
|
||||
<button id="delete_chat_option" class="option" onclick="deleteChat()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z" />
|
||||
</svg>
|
||||
Delete this chat
|
||||
</button>
|
||||
</fieldset>
|
||||
<fieldset id="contact_options"></fieldset>
|
||||
</sm-popup>
|
||||
|
||||
<sm-popup id="new_message_popup">
|
||||
@ -932,29 +870,6 @@
|
||||
<p>You don't have any other contacts to show.</p>
|
||||
</div>
|
||||
</sm-popup>
|
||||
|
||||
<!-- Templates -->
|
||||
|
||||
<template id="mail_template">
|
||||
<div class="mail">
|
||||
<header class="mail-header flex flex-direction-column">
|
||||
<div class="flex space-between">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon back hide-on-desktop" onclick="goto('mails')"
|
||||
viewBox="0 0 64 64">
|
||||
<line x1="1" y1="32" x2="64" y2="32" />
|
||||
<polyline points="29.64 60.97 0.65 32 29.64 3.03" />
|
||||
</svg>
|
||||
<h5 class="date justify-right"></h5>
|
||||
</div>
|
||||
<div class="mail-details flex flex-direction-column">
|
||||
<h4 class="sender-name"></h4>
|
||||
<h5 class="flo-id text-overflow"></h5>
|
||||
</div>
|
||||
</header>
|
||||
<h4 class="mail-subject"></h4>
|
||||
<p class="mail-content"></p>
|
||||
</div>
|
||||
</template>
|
||||
<script src="scripts/components.js"></script>
|
||||
<script src="scripts/script.js"></script>
|
||||
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
|
||||
@ -1090,32 +1005,52 @@
|
||||
|
||||
document.addEventListener('popupopened', async e => {
|
||||
getRef('main_page').setAttribute('inert', '')
|
||||
|
||||
//pushes popup as septate entry in history
|
||||
history.pushState({ type: 'popup' }, null, null)
|
||||
switch (e.target.id) {
|
||||
case 'contact_details_popup':
|
||||
if (floGlobals.contacts.hasOwnProperty(clickedContact.floID)) {
|
||||
getRef('add_as_contact_option').classList.add('hide')
|
||||
}
|
||||
else {
|
||||
getRef('add_as_contact_option').classList.remove('hide')
|
||||
}
|
||||
|
||||
const markUnread = messenger.marked[clickedContact.floID]?.includes('unread')
|
||||
if (markUnread) {
|
||||
getRef('mark_read_option').classList.remove('hide')
|
||||
getRef('mark_unread_option').classList.add('hide')
|
||||
}
|
||||
else {
|
||||
getRef('mark_read_option').classList.add('hide')
|
||||
getRef('mark_unread_option').classList.remove('hide')
|
||||
}
|
||||
if (clickedContact.chatCard.closest('#chats_list')) {
|
||||
getRef('contact_options').classList.remove('hide')
|
||||
}
|
||||
else {
|
||||
getRef('contact_options').classList.add('hide')
|
||||
let addAsContact
|
||||
if (!floGlobals.contacts.hasOwnProperty(clickedContact.floID) && !clickedContact.isGroup)
|
||||
addAsContact = html`
|
||||
<button id="add_as_contact_option" class="option" onclick="addAsContact()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24" /> </g> <g> <path d="M20,9V6h-2v3h-3v2h3v3h2v-3h3V9H20z M9,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4S5,5.79,5,8C5,10.21,6.79,12,9,12z M9,6 c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2S7,9.1,7,8C7,6.9,7.9,6,9,6z M15.39,14.56C13.71,13.7,11.53,13,9,13c-2.53,0-4.71,0.7-6.39,1.56 C1.61,15.07,1,16.1,1,17.22V20h16v-2.78C17,16.1,16.39,15.07,15.39,14.56z M15,18H3v-0.78c0-0.38,0.2-0.72,0.52-0.88 C4.71,15.73,6.63,15,9,15c2.37,0,4.29,0.73,5.48,1.34C14.8,16.5,15,16.84,15,17.22V18z" /> </g> </svg>
|
||||
Add as contact
|
||||
</button>`;
|
||||
let markReadUnread
|
||||
if (messenger.marked[clickedContact.floID]?.includes('unread')) {
|
||||
markReadUnread = html`
|
||||
<button id="mark_read_option" class="option" onclick="markAsRead()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24" /> <path d="M12,18l-6,0l-4,4V4c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v7l-2,0V4H4v12l8,0V18z M23,14.34l-1.41-1.41l-4.24,4.24l-2.12-2.12 l-1.41,1.41L17.34,20L23,14.34z" /> </g> </svg>
|
||||
Mark as read
|
||||
</button>
|
||||
`
|
||||
} else {
|
||||
markReadUnread = html`
|
||||
<button id="mark_unread_option" class="option" onclick="markAsUnread()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24" /> </g> <g> <g> <path d="M20,16H4V4h10.1c-0.08-0.39-0.18-1.11,0-2H4C2.9,2,2,2.9,2,4v18l4-4h14c1.1,0,2-0.9,2-2V6.98c-0.58,0.44-1.26,0.77-2,0.92 V16z" /> <circle cx="19" cy="3" r="3" /> <rect height="2" width="8" x="6" y="12" /> <rect height="2" width="12" x="6" y="9" /> <path d="M6,8h12V7.9c-1.21-0.25-2.25-0.95-2.97-1.9H6V8z" /> </g> </g> </svg>
|
||||
Mark as unread
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
let deleteChat
|
||||
if (!clickedContact.isGroup) {
|
||||
deleteChat = html`
|
||||
<button id="delete_chat_option" class="option" onclick="deleteChat()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none" /> <path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z" /> </svg>
|
||||
Delete this chat
|
||||
</button>
|
||||
`
|
||||
}
|
||||
renderElem(getRef('contact_options'), html`
|
||||
${addAsContact}
|
||||
${markReadUnread}
|
||||
<button class="option" onclick="clearChat()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24" /> </g> <g> <g> <path d="M16,11h-1V3c0-1.1-0.9-2-2-2h-2C9.9,1,9,1.9,9,3v8H8c-2.76,0-5,2.24-5,5v7h18v-7C21,13.24,18.76,11,16,11z M11,3h2v8h-2V3 z M19,21h-2v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3h-2v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3H9v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3H5 v-5c0-1.65,1.35-3,3-3h8c1.65,0,3,1.35,3,3V21z" /> </g> </g> </svg>
|
||||
Clear this chat
|
||||
</button>
|
||||
${deleteChat}
|
||||
`)
|
||||
}
|
||||
if (clickedContact.isGroup) {
|
||||
getRef("contact_initial").innerHTML = `
|
||||
@ -1125,14 +1060,12 @@
|
||||
getRef('contact_name').disabled = false
|
||||
else
|
||||
getRef('contact_name').disabled = true
|
||||
getRef('delete_chat_option').classList.add('hide')
|
||||
}
|
||||
else {
|
||||
getRef('contact_name').disabled = false
|
||||
getRef('contact_initial').textContent = clickedContact['name'].charAt(0)
|
||||
getRef('delete_chat_option').classList.remove('hide')
|
||||
}
|
||||
getRef('contact_initial').setAttribute('style', `background: ${clickedContact['chatCard'].getAttribute('background-color')}`)
|
||||
getRef('contact_initial').setAttribute('style', `--contact-color: var(${contactColor(clickedContact['floID'])})`)
|
||||
getRef('contact_name').value = clickedContact['name']
|
||||
getRef('contact_flo_id').value = clickedContact['floID']
|
||||
break;
|
||||
@ -1198,16 +1131,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
function randomHsl(saturation = 80, lightness = 80) {
|
||||
let hue = Math.random() * 360
|
||||
let color = {
|
||||
primary: `hsla( ${hue}, ${saturation}%, ${lightness}%, 1)`,
|
||||
light: `hsla( ${hue}, ${saturation}%, 90%, 0.6)`
|
||||
}
|
||||
return color;
|
||||
}
|
||||
|
||||
const selectedColors = ['#FF1744', '#F50057', '#8E24AA', '#5E35B1', '#3F51B5', '#3D5AFE', '#00B0FF', '#00BCD4', '#16c79a', '#66BB6A', '#8BC34A', '#11698e', '#FF6F00', '#FF9100', '#FF3D00']
|
||||
const selectedColors = [
|
||||
'--dark-red',
|
||||
'--red',
|
||||
'--kinda-pink',
|
||||
'--purple',
|
||||
'--shady-blue',
|
||||
'--nice-blue',
|
||||
'--maybe-cyan',
|
||||
'--teal',
|
||||
'--mint-green',
|
||||
'--greenish-yellow',
|
||||
'--yellowish-green',
|
||||
'--dark-teal',
|
||||
'--orange',
|
||||
'--tangerine',
|
||||
'--redish-orange',
|
||||
]
|
||||
function randomColor() {
|
||||
return selectedColors[Math.floor(Math.random() * selectedColors.length)]
|
||||
}
|
||||
@ -1370,23 +1310,7 @@
|
||||
closePopup()
|
||||
})
|
||||
})
|
||||
getRef('accent_color_selector').colors = [
|
||||
'--dark-red',
|
||||
'--red',
|
||||
'--kinda-pink',
|
||||
'--purple',
|
||||
'--shady-blue',
|
||||
'--nice-blue',
|
||||
'--maybe-cyan',
|
||||
'--teal',
|
||||
'--mint-green',
|
||||
'--greenish-yellow',
|
||||
'--yellowish-green',
|
||||
'--dark-teal',
|
||||
'--orange',
|
||||
'--tangerine',
|
||||
'--redish-orange',
|
||||
]
|
||||
getRef('accent_color_selector').colors = selectedColors
|
||||
if (localStorage.getItem(`accent-color`)) {
|
||||
const color = localStorage.getItem(`accent-color`)
|
||||
getRef('accent_color_selector').selectedColor = color
|
||||
@ -1719,8 +1643,8 @@
|
||||
} else
|
||||
contact = floGlobals.contacts[floID] || floID
|
||||
return html`
|
||||
<li class="${`mail-card interactive ${markUnread ? 'unread' : ''}`}" name="${ref}" background-color="${contactColor(floID)}">
|
||||
<div class="initial flex align-center" style=${`background-color: ${contactColor(floID)}`}>${contact.charAt(0)}</div>
|
||||
<li class="${`mail-card interactive ${markUnread ? 'unread' : ''}`}" data-name="${ref}" style=${`--contact-color: var(${contactColor(floID)})`}>
|
||||
<div class="initial flex align-center">${contact.charAt(0)}</div>
|
||||
<h5 class="sender">${contact}</h5>
|
||||
<time class="date">${getFormattedTime(timestamp, 'relative')}</time>
|
||||
<h4 class="subject text-overflow">${subject}</h4>
|
||||
@ -1728,14 +1652,11 @@
|
||||
</li>
|
||||
`
|
||||
},
|
||||
|
||||
mail(from, to, subject, timestamp, content) {
|
||||
let card = getRef('mail_template').content.cloneNode(true),
|
||||
cardContainer = card.querySelector('.mail')
|
||||
let senderName, floID
|
||||
if (from === myFloID) {
|
||||
let count = 0, list = [];
|
||||
to.forEach(f => floGlobals.contacts[f] ? list.push(floGlobals.contacts[f]) : count++)
|
||||
to.forEach(f => floGlobals.contacts[f] ? list.push(getContactName(f)) : count++)
|
||||
senderName = `To : ${list.join(', ')}`
|
||||
if (count) {
|
||||
if (list.length)
|
||||
@ -1745,20 +1666,37 @@
|
||||
}
|
||||
floID = to.join(', ')
|
||||
} else {
|
||||
senderName = `${floGlobals.contacts[from] || ''}`;
|
||||
senderName = getContactName(from);
|
||||
floID = from
|
||||
}
|
||||
card.querySelector('.sender-name').textContent = senderName
|
||||
card.querySelector('.flo-id').textContent = floID
|
||||
card.querySelector('.mail-subject').textContent = subject
|
||||
card.querySelector('.date').textContent = getFormattedTime(timestamp);
|
||||
card.querySelector('.mail-content').textContent = content
|
||||
return card
|
||||
return html.node`
|
||||
<div class="mail">
|
||||
<header class="mail-header flex flex-direction-column">
|
||||
<div class="flex space-between align-center">
|
||||
<div class="flex align-center">
|
||||
<button onclick="goto('mails')" class="back hide-on-desktop">
|
||||
<svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"></path>
|
||||
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="initial flex align-center" style=${`--contact-color: var(${contactColor(floID)})`}>${senderName.charAt(0)}</div>
|
||||
</div>
|
||||
<time class="date justify-right">${getFormattedTime(timestamp)}</time>
|
||||
</div>
|
||||
<div class="mail-details flex flex-direction-column">
|
||||
<h4 class="sender-name">${senderName}</h4>
|
||||
<h5 class="flo-id text-overflow">${floID}</h5>
|
||||
</div>
|
||||
</header>
|
||||
<h4 class="mail-subject">${subject}</h4>
|
||||
<p class="mail-content">${content}</p>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
contactCard(floID, options = {}) {
|
||||
let { type, prepend = false, markUnread = false, contactOnly = false, isAdmin = false } = options
|
||||
let name = getContactName(floID)
|
||||
const color = contactColor(floID)
|
||||
let initial
|
||||
let adminTag
|
||||
if (type === 'group') {
|
||||
@ -1793,8 +1731,8 @@
|
||||
}
|
||||
const className = `contact ${type !== 'contact' ? type : ''} ${markUnread ? 'unread' : ''} interactive`
|
||||
return html`
|
||||
<div class="${className}" .dataset=${{ name, floId: floID }} search-tags=${`${name}${floID}`} background-color=${color}>
|
||||
<div class="initial flex align-center" style=${`background-color: ${color}`}>
|
||||
<div class="${className}" .dataset=${{ name, floId: floID }} search-tags=${`${name}${floID}`} style=${`--contact-color: var(${contactColor(floID)})`}>
|
||||
<div class="initial flex align-center">
|
||||
${initial}
|
||||
</div>
|
||||
<h4 class="name">${name}</h4>
|
||||
@ -1803,12 +1741,11 @@
|
||||
`
|
||||
},
|
||||
selectableContact(floID) {
|
||||
let color = contactColor(floID)
|
||||
const name = getContactName(floID)
|
||||
const initial = name.charAt(0)
|
||||
const className = `flex align-center selectable-contact interactive`
|
||||
return html`
|
||||
<label class="${className}" data-flo-id=${floID} background-color=${color}>
|
||||
<label class="${className}" data-flo-id=${floID} style=${`--contact-color: var(${contactColor(floID)})`}>
|
||||
<div class="initial flex align-center" style=${`background-color: ${color}`}> ${initial} </div>
|
||||
<h4 class="name">${name}</h4>
|
||||
<input type="checkbox" autocomplete="off" value=${floID}/>
|
||||
@ -1825,7 +1762,7 @@
|
||||
let senderName = null
|
||||
if (sender) {
|
||||
if (sender !== myFloID && lastSender !== sender)
|
||||
senderName = html.node`<div class="sender-name" style=${`color:${contactColor(sender)}`}>${getContactName(sender)}</div>`
|
||||
senderName = html.node`<div class="sender-name" style=${`color: var(${contactColor(sender)})`}>${getContactName(sender)}</div>`
|
||||
lastSender = sender
|
||||
}
|
||||
let messageContent = document.createDocumentFragment()
|
||||
@ -2265,9 +2202,8 @@
|
||||
if (!selectedGroupMembers.has(floID)) {
|
||||
selectedGroupMembers.add(floID)
|
||||
const name = getContactName(floID)
|
||||
const color = contactColor(floID)
|
||||
const preview = html.node`<div class="contact-preview" .dataset="${{ floId: floID }}">
|
||||
<div class="initial flex align-center" style=${`background-color: ${color}`}>
|
||||
<div class="initial flex align-center" style=${`--contact-color: var(${contactColor(floID)})`}>
|
||||
${name.charAt(0)}
|
||||
</div>
|
||||
<h4 class="name">${name}</h4>
|
||||
@ -2433,10 +2369,9 @@
|
||||
getRef('main_navbar').classList.remove('hide-on-mobile')
|
||||
}
|
||||
|
||||
getRef("mails").addEventListener('click', function (e) {
|
||||
getRef("mail_sections").addEventListener('click', function (e) {
|
||||
if (e.target.closest(".mail-card")) {
|
||||
getRef('mail_page_button').setAttribute('data-notifications', '0')
|
||||
getRef('mail').classList.remove('hide')
|
||||
e.target.closest(".mail-card").classList.remove('unread')
|
||||
viewMail(e.target.closest(".mail-card").dataset.name);
|
||||
if (activeMail)
|
||||
@ -2665,23 +2600,18 @@
|
||||
// clear rendered date cards if any
|
||||
renderedDates = {}
|
||||
let floID = clickedContact['floID'],
|
||||
name = contact.dataset.name,
|
||||
textColor = contact.getAttribute('text-color'),
|
||||
backgroundColor = contact.getAttribute('background-color')
|
||||
name = contact.dataset.name
|
||||
|
||||
activeChat['floID'] = floID
|
||||
activeChat['isGroup'] = messenger.groups[floID] ? true : false
|
||||
getRef("chat_dp").setAttribute('style', `color: ${textColor}; background-color: ${backgroundColor};`)
|
||||
getRef("chat_dp").setAttribute('style', `--contact-color: var(${contactColor(floID)})`)
|
||||
getRef("receiver_name").textContent = getContactName(floID);
|
||||
if (activeChat.isGroup) {
|
||||
getRef("receiver_initial").innerHTML = `
|
||||
<svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg>
|
||||
`
|
||||
}
|
||||
else {
|
||||
getRef("receiver_initial").innerHTML = ` <svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg> `
|
||||
} else {
|
||||
getRef("receiver_initial").textContent = getContactName(floID).charAt(0);
|
||||
}
|
||||
getRef("receiver_initial").setAttribute('style', `color: ${textColor}; background-color: ${backgroundColor};`)
|
||||
getRef("receiver_initial").setAttribute('style', `--contact-color: var(${contactColor(floID)})`)
|
||||
renderMessages({ markUnread: false }).then(() => {
|
||||
if (!floGlobals.pubKeys[floID] && !activeChat.isGroup)
|
||||
getRef('messages_container').prepend(html.node`<strong id="warn_no_encryption">Converstion is not encrypted until receiver replies</strong>`)
|
||||
@ -2710,18 +2640,19 @@
|
||||
function viewMail(mailRef, newView = true) {
|
||||
//stop rerendering if same mail is already open
|
||||
if (mailRef === (activeMail ? activeMail.dataset.name : '')) return
|
||||
//clear the container
|
||||
if (newView)
|
||||
clearElement(getRef("mail_container"))
|
||||
|
||||
messenger.getMail(mailRef).then(result => {
|
||||
let { from, to, prev, ref, subject, time, content } = result
|
||||
if (newView)
|
||||
getRef('mail_container').innerHTML = ''
|
||||
//append the contents to mail container
|
||||
getRef("mail_container").append(render.mail(from, to, subject, time, content));
|
||||
//add prop for previous mail (if available)
|
||||
let prevMail = getRef("prev_mail");
|
||||
prevMail.dataset["value"] = prev;
|
||||
prevMail.style.display = prev ? 'block' : 'none';
|
||||
getRef("prev_mail").dataset["value"] = prev;
|
||||
if (prev) {
|
||||
getRef("prev_mail").classList.remove("hide")
|
||||
} else {
|
||||
getRef("prev_mail").classList.add("hide")
|
||||
}
|
||||
//set values for reply mail form if new view
|
||||
if (newView) {
|
||||
getRef('reply_mail_popup').dataset["to"] = (from === myFloID ? to.join(',') : from)
|
||||
@ -2730,6 +2661,7 @@
|
||||
getRef("show_reply_popup").classList.remove("hide");
|
||||
}
|
||||
messenger.removeMark(mailRef, "unread");
|
||||
getRef('mail').classList.remove('hide')
|
||||
}).catch(error => notify("Unable to read mail", "error", error))
|
||||
}
|
||||
|
||||
@ -2772,11 +2704,6 @@
|
||||
}).catch(error => notify("Failed to reply mail!", "error", error))
|
||||
}
|
||||
|
||||
document.getElementById('mail_type_selector').addEventListener('change', e => {
|
||||
document.querySelectorAll('.mail-container').forEach(container => container.parentNode.classList.add('hide'))
|
||||
getRef(`${e.detail.value}_mail_container`).parentNode.classList.remove('hide')
|
||||
})
|
||||
|
||||
const flyOutLeft = [
|
||||
{
|
||||
transform: 'translateX(0)',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user