Merge branch 'master' into dev
This commit is contained in:
sairajzero
commit
85d57909ae
105
css/main.css
105
css/main.css
@ -188,6 +188,18 @@ strong {
|
|||||||
stroke: white;
|
stroke: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a:-webkit-any-link {
|
||||||
|
word-wrap: break-word;
|
||||||
|
color: var(--accent-color);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:-moz-any-link {
|
||||||
|
word-wrap: break-word;
|
||||||
|
color: var(--accent-color);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
a:any-link {
|
a:any-link {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
color: var(--accent-color);
|
color: var(--accent-color);
|
||||||
@ -341,6 +353,8 @@ sm-button[variant=primary] {
|
|||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
height: -webkit-max-content;
|
||||||
|
height: -moz-max-content;
|
||||||
height: max-content;
|
height: max-content;
|
||||||
margin: 0.5rem 0;
|
margin: 0.5rem 0;
|
||||||
}
|
}
|
||||||
@ -393,6 +407,8 @@ sm-button[variant=primary] {
|
|||||||
}
|
}
|
||||||
#landing .left sm-button {
|
#landing .left sm-button {
|
||||||
margin: 1.5rem 0 2rem 0;
|
margin: 1.5rem 0 2rem 0;
|
||||||
|
width: -webkit-max-content;
|
||||||
|
width: -moz-max-content;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
}
|
}
|
||||||
#landing .left h3 {
|
#landing .left h3 {
|
||||||
@ -489,6 +505,7 @@ sm-button[variant=primary] {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
#frame_1 #credentials_section {
|
#frame_1 #credentials_section {
|
||||||
|
-webkit-animation: slide-down 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
animation: slide-down 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
animation: slide-down 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
margin: 2rem 0;
|
margin: 2rem 0;
|
||||||
}
|
}
|
||||||
@ -503,6 +520,15 @@ sm-button[variant=primary] {
|
|||||||
margin: 1rem 0;
|
margin: 1rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes slide-down {
|
||||||
|
from {
|
||||||
|
transform: translateY(-1rem);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes slide-down {
|
@keyframes slide-down {
|
||||||
from {
|
from {
|
||||||
transform: translateY(-1rem);
|
transform: translateY(-1rem);
|
||||||
@ -523,6 +549,7 @@ sm-button[variant=primary] {
|
|||||||
transform-origin: bottom;
|
transform-origin: bottom;
|
||||||
height: 6rem;
|
height: 6rem;
|
||||||
width: 6rem;
|
width: 6rem;
|
||||||
|
-webkit-animation: bounce 0.5s infinite alternate ease-in;
|
||||||
animation: bounce 0.5s infinite alternate ease-in;
|
animation: bounce 0.5s infinite alternate ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -532,6 +559,7 @@ sm-button[variant=primary] {
|
|||||||
height: 2rem;
|
height: 2rem;
|
||||||
background: rgba(var(--text-color), 0.1);
|
background: rgba(var(--text-color), 0.1);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
-webkit-animation: scale 0.5s infinite alternate ease-in;
|
||||||
animation: scale 0.5s infinite alternate ease-in;
|
animation: scale 0.5s infinite alternate ease-in;
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
@ -540,6 +568,18 @@ sm-button[variant=primary] {
|
|||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes bounce {
|
||||||
|
0% {
|
||||||
|
transform: scaleY(1) translateY(-4rem);
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
transform: scaleY(1) translateY(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes bounce {
|
@keyframes bounce {
|
||||||
0% {
|
0% {
|
||||||
transform: scaleY(1) translateY(-4rem);
|
transform: scaleY(1) translateY(-4rem);
|
||||||
@ -551,6 +591,17 @@ sm-button[variant=primary] {
|
|||||||
transform: scaleY(0.8);
|
transform: scaleY(0.8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@-webkit-keyframes scale {
|
||||||
|
0% {
|
||||||
|
transform: scale(0.5);
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
@keyframes scale {
|
@keyframes scale {
|
||||||
0% {
|
0% {
|
||||||
transform: scale(0.5);
|
transform: scale(0.5);
|
||||||
@ -579,6 +630,9 @@ sm-button[variant=primary] {
|
|||||||
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.06);
|
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.06);
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -601,6 +655,9 @@ sm-button[variant=primary] {
|
|||||||
padding: 0.8rem 1.5rem;
|
padding: 0.8rem 1.5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@ -829,6 +886,9 @@ sm-button[variant=primary] {
|
|||||||
padding: 0.8rem 1.5rem;
|
padding: 0.8rem 1.5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
grid-template-columns: auto 1fr auto;
|
grid-template-columns: auto 1fr auto;
|
||||||
grid-template-areas: "dp sender date" "dp subject subject" "dp desc desc";
|
grid-template-areas: "dp sender date" "dp subject subject" "dp desc desc";
|
||||||
@ -872,6 +932,17 @@ sm-button[variant=primary] {
|
|||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes slide {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-1rem);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes slide {
|
@keyframes slide {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -891,6 +962,7 @@ sm-button[variant=primary] {
|
|||||||
}
|
}
|
||||||
.mail:not(:first-of-type) {
|
.mail:not(:first-of-type) {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
|
-webkit-padding-start: 1rem;
|
||||||
padding-inline-start: 1rem;
|
padding-inline-start: 1rem;
|
||||||
}
|
}
|
||||||
.mail:not(:first-of-type)::before {
|
.mail:not(:first-of-type)::before {
|
||||||
@ -931,6 +1003,8 @@ sm-button[variant=primary] {
|
|||||||
margin-bottom: 0.4em;
|
margin-bottom: 0.4em;
|
||||||
}
|
}
|
||||||
.mail .mail-content {
|
.mail .mail-content {
|
||||||
|
height: -webkit-max-content;
|
||||||
|
height: -moz-max-content;
|
||||||
height: max-content;
|
height: max-content;
|
||||||
max-width: 60ch;
|
max-width: 60ch;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
@ -945,6 +1019,9 @@ sm-button[variant=primary] {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0.8rem 1.5rem;
|
padding: 0.8rem 1.5rem;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
.option .icon {
|
.option .icon {
|
||||||
@ -1099,6 +1176,7 @@ sm-button[variant=primary] {
|
|||||||
|
|
||||||
#contacts, #mails {
|
#contacts, #mails {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
grid-template-rows: -webkit-max-content 1fr;
|
||||||
grid-template-rows: max-content 1fr;
|
grid-template-rows: max-content 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1285,6 +1363,8 @@ sm-button[variant=primary] {
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
width: auto;
|
width: auto;
|
||||||
font-size: 0.92rem;
|
font-size: 0.92rem;
|
||||||
|
max-width: -webkit-max-content;
|
||||||
|
max-width: -moz-max-content;
|
||||||
max-width: max-content;
|
max-width: max-content;
|
||||||
margin-bottom: 0.2rem;
|
margin-bottom: 0.2rem;
|
||||||
margin-top: 0.8rem;
|
margin-top: 0.8rem;
|
||||||
@ -1304,8 +1384,8 @@ sm-button[variant=primary] {
|
|||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
-moz-hyphens: auto;
|
|
||||||
-webkit-hyphens: auto;
|
-webkit-hyphens: auto;
|
||||||
|
-ms-hyphens: auto;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
@ -1400,9 +1480,19 @@ sm-button[variant=primary] {
|
|||||||
.unconfirmed {
|
.unconfirmed {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
transform-origin: left;
|
transform-origin: left;
|
||||||
|
-webkit-animation: pop 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
animation: pop 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
animation: pop 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes pop {
|
||||||
|
0% {
|
||||||
|
transform: rotate(5deg) translate(-0.5rem, 1rem);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(0) translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes pop {
|
@keyframes pop {
|
||||||
0% {
|
0% {
|
||||||
transform: rotate(5deg) translate(-0.5rem, 1rem);
|
transform: rotate(5deg) translate(-0.5rem, 1rem);
|
||||||
@ -1550,6 +1640,9 @@ sm-button[variant=primary] {
|
|||||||
--input-placeholder-color: rgba(var(--text-color), 0.6);
|
--input-placeholder-color: rgba(var(--text-color), 0.6);
|
||||||
--indicator-color: var(--accent-color);
|
--indicator-color: var(--accent-color);
|
||||||
--button-hover-background: rgba(var(--text-color), 0.2);
|
--button-hover-background: rgba(var(--text-color), 0.2);
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 40vh;
|
max-height: 40vh;
|
||||||
@ -1560,6 +1653,9 @@ sm-button[variant=primary] {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0.4rem;
|
padding: 0.4rem;
|
||||||
border-radius: 0.6rem;
|
border-radius: 0.6rem;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -1777,6 +1873,7 @@ sm-button[variant=primary] {
|
|||||||
box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset;
|
box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset;
|
||||||
}
|
}
|
||||||
#settings_page .bg-preview__image {
|
#settings_page .bg-preview__image {
|
||||||
|
-o-object-fit: cover;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -1788,7 +1885,9 @@ sm-button[variant=primary] {
|
|||||||
}
|
}
|
||||||
#video_call_page video {
|
#video_call_page video {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
-o-object-fit: cover;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
-o-object-position: center;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2021,6 +2120,8 @@ sm-button[variant=primary] {
|
|||||||
grid-template-columns: 14rem 1fr;
|
grid-template-columns: 14rem 1fr;
|
||||||
}
|
}
|
||||||
#settings_page sm-button {
|
#settings_page sm-button {
|
||||||
|
width: -webkit-max-content;
|
||||||
|
width: -moz-max-content;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
}
|
}
|
||||||
#settings_page .active {
|
#settings_page .active {
|
||||||
@ -2130,4 +2231,4 @@ sm-button[variant=primary] {
|
|||||||
.contact .menu {
|
.contact .menu {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}/*# sourceMappingURL=main.css.map */
|
||||||
File diff suppressed because one or more lines are too long
168
index.html
168
index.html
@ -160,7 +160,8 @@
|
|||||||
<h1 class="title-font">
|
<h1 class="title-font">
|
||||||
Truly Secure, Private and Reliable.
|
Truly Secure, Private and Reliable.
|
||||||
</h1>
|
</h1>
|
||||||
<p>A messenger made with <strong>Blockchain</strong> and <strong>Open Source</strong> technologies. Take back control of your data that belongs to you and you alone.</p>
|
<p>A messenger made with <strong>Blockchain</strong> and <strong>Open Source</strong> technologies. Take
|
||||||
|
back control of your data that belongs to you and you alone.</p>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<sm-button variant="primary" onclick="showPage('sign_in_page')">Sign In</sm-button>
|
<sm-button variant="primary" onclick="showPage('sign_in_page')">Sign In</sm-button>
|
||||||
<sm-button onclick="initOnBoarding()">Get started</sm-button>
|
<sm-button onclick="initOnBoarding()">Get started</sm-button>
|
||||||
@ -177,7 +178,8 @@
|
|||||||
<p>Enter your <span id="type_of_key">FLO private key</span> to continue.</p>
|
<p>Enter your <span id="type_of_key">FLO private key</span> to continue.</p>
|
||||||
<form class="flex direction-column" action="" onsubmit="return false">
|
<form class="flex direction-column" action="" onsubmit="return false">
|
||||||
<pin-input id="get_pin" class="hide-completely"></pin-input>
|
<pin-input id="get_pin" class="hide-completely"></pin-input>
|
||||||
<sm-input id="private_key_input_field" type="password" placeholder="FLO private key" privateKey animate></sm-input>
|
<sm-input id="private_key_input_field" type="password" placeholder="FLO private key" privateKey animate>
|
||||||
|
</sm-input>
|
||||||
<sm-button id="sign_in_button" width="cover" variant="primary" disable>continue</sm-button>
|
<sm-button id="sign_in_button" width="cover" variant="primary" disable>continue</sm-button>
|
||||||
</form>
|
</form>
|
||||||
<sm-button id="remove_account" class="hide-completely" onclick="signOut()">Remove Account</sm-button>
|
<sm-button id="remove_account" class="hide-completely" onclick="signOut()">Remove Account</sm-button>
|
||||||
@ -186,8 +188,10 @@
|
|||||||
<div id="on_boarding_page" class="page grid hide-completely">
|
<div id="on_boarding_page" class="page grid hide-completely">
|
||||||
<div id="frame_1" class="frame">
|
<div id="frame_1" class="frame">
|
||||||
<h2 class="h2">Get started</h2>
|
<h2 class="h2">Get started</h2>
|
||||||
<strong class="warning">Don't forget to store them securely. <br> Once lost private key can't be recovered along with your data!</strong>
|
<strong class="warning">Don't forget to store them securely. <br> Once lost private key can't be recovered
|
||||||
<sm-button id="generate_flo_id" onclick="generateId()" variant="primary">Get your FLO credentials</sm-button>
|
along with your data!</strong>
|
||||||
|
<sm-button id="generate_flo_id" onclick="generateId()" variant="primary">Get your FLO credentials
|
||||||
|
</sm-button>
|
||||||
<section id="credentials_section" class="hide-completely">
|
<section id="credentials_section" class="hide-completely">
|
||||||
<h5>FLO ID (User ID)</h5>
|
<h5>FLO ID (User ID)</h5>
|
||||||
<div class="copy-row">
|
<div class="copy-row">
|
||||||
@ -368,7 +372,8 @@
|
|||||||
<h4>Select contact to add</h4>
|
<h4>Select contact to add</h4>
|
||||||
<sm-button id="add_members_button" variant="primary" disable>Add</sm-button>
|
<sm-button id="add_members_button" variant="primary" disable>Add</sm-button>
|
||||||
</header>
|
</header>
|
||||||
<p class="warning">*Contacts that haven't yet replied to you, can't be added to a group. So they won't be visible here.</p>
|
<p class="warning">*Contacts that haven't yet replied to you, can't be added to a group. So they won't be
|
||||||
|
visible here.</p>
|
||||||
<div id="popup_contacts_container" class="observe-empty-state"></div>
|
<div id="popup_contacts_container" class="observe-empty-state"></div>
|
||||||
<div class="empty-state">
|
<div class="empty-state">
|
||||||
<p>You don't have any other contacts to show.</p>
|
<p>You don't have any other contacts to show.</p>
|
||||||
@ -391,7 +396,8 @@
|
|||||||
<div class="mail">
|
<div class="mail">
|
||||||
<header class="mail-header flex direction-column">
|
<header class="mail-header flex direction-column">
|
||||||
<div class="flex space-between">
|
<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">
|
<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" />
|
<line x1="1" y1="32" x2="64" y2="32" />
|
||||||
<polyline points="29.64 60.97 0.65 32 29.64 3.03" />
|
<polyline points="29.64 60.97 0.65 32 29.64 3.03" />
|
||||||
</svg>
|
</svg>
|
||||||
@ -432,14 +438,17 @@
|
|||||||
<!-- <img src="assets/messenger-favicon_1.png" alt=""> -->
|
<!-- <img src="assets/messenger-favicon_1.png" alt=""> -->
|
||||||
<h5 class="label">FLO Messenger</h5>
|
<h5 class="label">FLO Messenger</h5>
|
||||||
</div>
|
</div>
|
||||||
<div class="navbar-item flex badge align-center active" data-notifications="0" id="chat_page_button" data-target="chat_page" title="Chat">
|
<div class="navbar-item flex badge align-center active" data-notifications="0" id="chat_page_button"
|
||||||
|
data-target="chat_page" title="Chat">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 64 64">
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 64 64">
|
||||||
<path d="M21.31,51a6.62,6.62,0,0,0,6.62,6.62H52.1A6.62,6.62,0,0,0,58.72,51V27.74l4.41-7.55H51" />
|
<path d="M21.31,51a6.62,6.62,0,0,0,6.62,6.62H52.1A6.62,6.62,0,0,0,58.72,51V27.74l4.41-7.55H51" />
|
||||||
<path d="M5.33,37.51V14L.87,6.4H36.44a6.69,6.69,0,0,1,6.68,6.69V37.51a6.69,6.69,0,0,1-6.68,6.69H12A6.69,6.69,0,0,1,5.33,37.51Z"/>
|
<path
|
||||||
|
d="M5.33,37.51V14L.87,6.4H36.44a6.69,6.69,0,0,1,6.68,6.69V37.51a6.69,6.69,0,0,1-6.68,6.69H12A6.69,6.69,0,0,1,5.33,37.51Z" />
|
||||||
</svg>
|
</svg>
|
||||||
<h5 class="label">Chat</h5>
|
<h5 class="label">Chat</h5>
|
||||||
</div>
|
</div>
|
||||||
<div class="navbar-item flex badge align-center" id="mail_page_button" data-notifications="0" data-target="mail_page" title="Mail">
|
<div class="navbar-item flex badge align-center" id="mail_page_button" data-notifications="0"
|
||||||
|
data-target="mail_page" title="Mail">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 64 64">
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 64 64">
|
||||||
<rect x="0.5" y="5.72" width="63" height="52.56" rx="5" />
|
<rect x="0.5" y="5.72" width="63" height="52.56" rx="5" />
|
||||||
<polyline points="12.25 21.36 32.03 32.03 51.75 21.42" />
|
<polyline points="12.25 21.36 32.03 32.03 51.75 21.42" />
|
||||||
@ -462,7 +471,8 @@
|
|||||||
<div id="contacts" class="grid">
|
<div id="contacts" class="grid">
|
||||||
<header class="grid header">
|
<header class="grid header">
|
||||||
<div class="flex align-center">
|
<div class="flex align-center">
|
||||||
<svg class="hamburger-menu-button icon hide-on-desktop" onclick="toggleDrawer()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
<svg class="hamburger-menu-button icon hide-on-desktop" onclick="toggleDrawer()"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
<line y1="10.66" x2="64" y2="10.66" />
|
<line y1="10.66" x2="64" y2="10.66" />
|
||||||
<line y1="32" x2="64" y2="32" />
|
<line y1="32" x2="64" y2="32" />
|
||||||
<line y1="53.34" x2="64" y2="53.34" />
|
<line y1="53.34" x2="64" y2="53.34" />
|
||||||
@ -470,7 +480,8 @@
|
|||||||
<h4>FLO Messenger</h4>
|
<h4>FLO Messenger</h4>
|
||||||
<svg class="icon" onclick="toggleSearch('chat_search_field')" viewBox="0 0 64 64">
|
<svg class="icon" onclick="toggleSearch('chat_search_field')" viewBox="0 0 64 64">
|
||||||
<title>Search</title>
|
<title>Search</title>
|
||||||
<path d="M25.69,1A24.7,24.7,0,0,1,43.15,43.15,24.7,24.7,0,0,1,8.23,8.22,24.53,24.53,0,0,1,25.69,1m0-1A25.7,25.7,0,1,0,43.85,7.51,25.64,25.64,0,0,0,25.69,0Z"/>
|
<path
|
||||||
|
d="M25.69,1A24.7,24.7,0,0,1,43.15,43.15,24.7,24.7,0,0,1,8.23,8.22,24.53,24.53,0,0,1,25.69,1m0-1A25.7,25.7,0,1,0,43.85,7.51,25.64,25.64,0,0,0,25.69,0Z" />
|
||||||
<line x1="63.65" y1="63.66" x2="43.36" y2="43.37" />
|
<line x1="63.65" y1="63.66" x2="43.36" y2="43.37" />
|
||||||
</svg>
|
</svg>
|
||||||
<sm-menu align-options="right">
|
<sm-menu align-options="right">
|
||||||
@ -480,7 +491,8 @@
|
|||||||
</sm-menu>
|
</sm-menu>
|
||||||
</div>
|
</div>
|
||||||
<div id="chat_search_field" class="expanding-search flex align-center">
|
<div id="chat_search_field" class="expanding-search flex align-center">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon back" onclick="toggleSearch('chat_search_field')" viewBox="0 0 64 64">
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon back"
|
||||||
|
onclick="toggleSearch('chat_search_field')" viewBox="0 0 64 64">
|
||||||
<title>back-arrow</title>
|
<title>back-arrow</title>
|
||||||
<line x1="1" y1="32" x2="64" y2="32" />
|
<line x1="1" y1="32" x2="64" y2="32" />
|
||||||
<polyline points="29.64 60.97 0.65 32 29.64 3.03" />
|
<polyline points="29.64 60.97 0.65 32 29.64 3.03" />
|
||||||
@ -494,10 +506,12 @@
|
|||||||
</sm-input>
|
</sm-input>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<sm-button variant="primary" id="new_message_button" onclick="showContacts({show: true})" class="fab round">
|
<sm-button variant="primary" id="new_message_button" onclick="showContacts({show: true})"
|
||||||
|
class="fab round">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 64 64">
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 64 64">
|
||||||
<title>Send new message</title>
|
<title>Send new message</title>
|
||||||
<path d="M55.76,20.13,59,23.34l3.5-3.48a3.26,3.26,0,0,0,.05-4.63l0-.05-.59-.56a3.3,3.3,0,0,0-4.67,0l-21.1,21a2.34,2.34,0,0,0-.63,1.19l-.9,4.63a.8.8,0,0,0,.66.91.57.57,0,0,0,.26,0l4.65-.88a2.36,2.36,0,0,0,1.22-.61l15.7-15.63"/>
|
<path
|
||||||
|
d="M55.76,20.13,59,23.34l3.5-3.48a3.26,3.26,0,0,0,.05-4.63l0-.05-.59-.56a3.3,3.3,0,0,0-4.67,0l-21.1,21a2.34,2.34,0,0,0-.63,1.19l-.9,4.63a.8.8,0,0,0,.66.91.57.57,0,0,0,.26,0l4.65-.88a2.36,2.36,0,0,0,1.22-.61l15.7-15.63" />
|
||||||
<path d="M48.05,49.79a6,6,0,0,1-6,6H6.47a6,6,0,0,1-6-6V14.21a6,6,0,0,1,6-6H42" />
|
<path d="M48.05,49.79a6,6,0,0,1-6,6H6.47a6,6,0,0,1-6-6V14.21a6,6,0,0,1,6-6H42" />
|
||||||
</svg>
|
</svg>
|
||||||
New chat
|
New chat
|
||||||
@ -506,7 +520,8 @@
|
|||||||
<div id="new_conversation" class="flex direction-column empty-state">
|
<div id="new_conversation" class="flex direction-column empty-state">
|
||||||
<svg class="icon new-conversation align-center" viewBox="0 0 512 512">
|
<svg class="icon new-conversation align-center" viewBox="0 0 512 512">
|
||||||
<title>new conversation</title>
|
<title>new conversation</title>
|
||||||
<path d="M304.11,403.5H101.42a51,51,0,0,1-51-51v-191L6.87,84.82H424.36a51,51,0,0,1,51,51v86.72"/>
|
<path
|
||||||
|
d="M304.11,403.5H101.42a51,51,0,0,1-51-51v-191L6.87,84.82H424.36a51,51,0,0,1,51,51v86.72" />
|
||||||
<ellipse cx="423.3" cy="342.48" rx="84.7" />
|
<ellipse cx="423.3" cy="342.48" rx="84.7" />
|
||||||
<line x1="423.3" y1="306.34" x2="423.3" y2="379.64" />
|
<line x1="423.3" y1="306.34" x2="423.3" y2="379.64" />
|
||||||
<line x1="459.95" y1="342.99" x2="386.65" y2="342.99" />
|
<line x1="459.95" y1="342.99" x2="386.65" y2="342.99" />
|
||||||
@ -517,7 +532,8 @@
|
|||||||
<div id="all_contacts" class="flex direction-column hide-completely">
|
<div id="all_contacts" class="flex direction-column hide-completely">
|
||||||
<header class="grid header">
|
<header class="grid header">
|
||||||
<div class="flex align-center">
|
<div class="flex align-center">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon back" onclick="showContacts({show: false})" viewBox="0 0 64 64">
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon back"
|
||||||
|
onclick="showContacts({show: false})" viewBox="0 0 64 64">
|
||||||
<title>back-arrow</title>
|
<title>back-arrow</title>
|
||||||
<line x1="1" y1="32" x2="64" y2="32" />
|
<line x1="1" y1="32" x2="64" y2="32" />
|
||||||
<polyline points="29.64 60.97 0.65 32 29.64 3.03" />
|
<polyline points="29.64 60.97 0.65 32 29.64 3.03" />
|
||||||
@ -534,16 +550,36 @@
|
|||||||
<div id="selected_contacts" class="hide-completely">
|
<div id="selected_contacts" class="hide-completely">
|
||||||
<h4>Select group members</h4>
|
<h4>Select group members</h4>
|
||||||
<div id="selected_contacts_container" class="observe-empty-state"></div>
|
<div id="selected_contacts_container" class="observe-empty-state"></div>
|
||||||
<p class="warning empty-state">*Contacts that haven't yet replied to you, can't be added to a group. So they won't be visible here.</p>
|
<p class="warning empty-state">*Contacts that haven't yet replied to you, can't be added to a
|
||||||
|
group. So they won't be visible here.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="scrolling-wrapper">
|
<div class="scrolling-wrapper">
|
||||||
<div id="all_contacts_options">
|
<div id="all_contacts_options">
|
||||||
<div id="create_group_option" class="option interact" onclick="initGroupCreation()">
|
<div id="create_group_option" class="option interact" onclick="initGroupCreation()">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon filled" viewBox="0 0 64 64"><path d="M13.61,19.27c-1.63,0-4.72-2.35-5.33-3.57A21.71,21.71,0,0,1,6.93,8.37S6.67,2.3,13.61,2.3A6.38,6.38,0,0,1,20.3,8.37,21.71,21.71,0,0,1,19,15.7c-.62,1.22-3.7,3.57-5.34,3.57"/><path d="M32,22.92c-2.21,0-6.37-3.17-7.2-4.82A29.42,29.42,0,0,1,23,8.21S22.62,0,32,0c8.68,0,9,8.21,9,8.21A29.42,29.42,0,0,1,39.2,18.1c-.82,1.65-5,4.82-7.2,4.82"/><path d="M14.82,27.75c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,22.41,19,21.43,18,19.6a8.85,8.85,0,0,1-4.41,2.75,8.85,8.85,0,0,1-4.4-2.75C7.9,22.05,4.63,23,1.55,24.33c-1.26.53-2.3,7.32-.84,7.32A24.66,24.66,0,0,0,11.57,35C11.89,32,12.86,28.57,14.82,27.75Z"/><path d="M49.15,34.3A14.85,14.85,0,1,0,64,49.15,14.85,14.85,0,0,0,49.15,34.3Zm8,16.31H50.58v6.61H47.66V50.61H41.05V47.69h6.61V41.08h2.92v6.61h6.61Z"/><path d="M48.93,30.42a1.56,1.56,0,0,0-.64-.66c-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,33,0,0,0,16.5,4.52A18.73,18.73,0,0,1,48.93,30.42Z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon filled" viewBox="0 0 64 64">
|
||||||
|
<path
|
||||||
|
d="M13.61,19.27c-1.63,0-4.72-2.35-5.33-3.57A21.71,21.71,0,0,1,6.93,8.37S6.67,2.3,13.61,2.3A6.38,6.38,0,0,1,20.3,8.37,21.71,21.71,0,0,1,19,15.7c-.62,1.22-3.7,3.57-5.34,3.57" />
|
||||||
|
<path
|
||||||
|
d="M32,22.92c-2.21,0-6.37-3.17-7.2-4.82A29.42,29.42,0,0,1,23,8.21S22.62,0,32,0c8.68,0,9,8.21,9,8.21A29.42,29.42,0,0,1,39.2,18.1c-.82,1.65-5,4.82-7.2,4.82" />
|
||||||
|
<path
|
||||||
|
d="M14.82,27.75c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,22.41,19,21.43,18,19.6a8.85,8.85,0,0,1-4.41,2.75,8.85,8.85,0,0,1-4.4-2.75C7.9,22.05,4.63,23,1.55,24.33c-1.26.53-2.3,7.32-.84,7.32A24.66,24.66,0,0,0,11.57,35C11.89,32,12.86,28.57,14.82,27.75Z" />
|
||||||
|
<path
|
||||||
|
d="M49.15,34.3A14.85,14.85,0,1,0,64,49.15,14.85,14.85,0,0,0,49.15,34.3Zm8,16.31H50.58v6.61H47.66V50.61H41.05V47.69h6.61V41.08h2.92v6.61h6.61Z" />
|
||||||
|
<path
|
||||||
|
d="M48.93,30.42a1.56,1.56,0,0,0-.64-.66c-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,33,0,0,0,16.5,4.52A18.73,18.73,0,0,1,48.93,30.42Z" />
|
||||||
|
</svg>
|
||||||
Create new group
|
Create new group
|
||||||
</div>
|
</div>
|
||||||
<div id="add_contact_option" class="option interact" onclick="showPopup('add_contact_popup')">
|
<div id="add_contact_option" class="option interact"
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon filled" viewBox="0 0 64 64"><path d="M49.15,34.3A14.85,14.85,0,1,0,64,49.15,14.85,14.85,0,0,0,49.15,34.3Zm8,16.31H50.58v6.61H47.66V50.61H41.05V47.69h6.61V41.08h2.92v6.61h6.61Z"/><path d="M21.36,26.63C18.79,26.63,14,23,13,21s-2.12-7.45-2.12-11.49c0,0-.41-9.53,10.49-9.53C31.45,0,31.85,9.53,31.85,9.53c0,4-1.17,9.58-2.12,11.49s-5.8,5.61-8.37,5.61"/><path d="M28.78,49.15A20.28,20.28,0,0,1,36.7,33.07c-3.6-1.49-6.88-3-8.42-5.93a14,14,0,0,1-6.92,4.33,14,14,0,0,1-6.92-4.33c-2,3.85-7.18,5.3-12,7.43-2,.82-3.61,11.48-1.31,11.48a38.44,38.44,0,0,0,19.34,5.26h1.8a37.94,37.94,0,0,0,6.6-.59C28.82,50.2,28.78,49.68,28.78,49.15Z"/></svg>
|
onclick="showPopup('add_contact_popup')">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon filled" viewBox="0 0 64 64">
|
||||||
|
<path
|
||||||
|
d="M49.15,34.3A14.85,14.85,0,1,0,64,49.15,14.85,14.85,0,0,0,49.15,34.3Zm8,16.31H50.58v6.61H47.66V50.61H41.05V47.69h6.61V41.08h2.92v6.61h6.61Z" />
|
||||||
|
<path
|
||||||
|
d="M21.36,26.63C18.79,26.63,14,23,13,21s-2.12-7.45-2.12-11.49c0,0-.41-9.53,10.49-9.53C31.45,0,31.85,9.53,31.85,9.53c0,4-1.17,9.58-2.12,11.49s-5.8,5.61-8.37,5.61" />
|
||||||
|
<path
|
||||||
|
d="M28.78,49.15A20.28,20.28,0,0,1,36.7,33.07c-3.6-1.49-6.88-3-8.42-5.93a14,14,0,0,1-6.92,4.33,14,14,0,0,1-6.92-4.33c-2,3.85-7.18,5.3-12,7.43-2,.82-3.61,11.48-1.31,11.48a38.44,38.44,0,0,0,19.34,5.26h1.8a37.94,37.94,0,0,0,6.6-.59C28.82,50.2,28.78,49.68,28.78,49.15Z" />
|
||||||
|
</svg>
|
||||||
Add contact
|
Add contact
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -552,14 +588,16 @@
|
|||||||
<p>No contacts found.</p>
|
<p>No contacts found.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<sm-button id="skip_members_button" variant="primary" class="fab round hide-completely" onclick="skipToGroupCreation()">
|
<sm-button id="skip_members_button" variant="primary" class="fab round hide-completely"
|
||||||
|
onclick="skipToGroupCreation()">
|
||||||
Skip
|
Skip
|
||||||
</sm-button>
|
</sm-button>
|
||||||
</div>
|
</div>
|
||||||
<div id="group_creation_panel" class="flex direction-column hide-completely">
|
<div id="group_creation_panel" class="flex direction-column hide-completely">
|
||||||
<header class="grid header">
|
<header class="grid header">
|
||||||
<div class="flex align-center">
|
<div class="flex align-center">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon back" onclick="backToContacts()" viewBox="0 0 64 64">
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon back" onclick="backToContacts()"
|
||||||
|
viewBox="0 0 64 64">
|
||||||
<title>back-arrow</title>
|
<title>back-arrow</title>
|
||||||
<line x1="1" y1="32" x2="64" y2="32" />
|
<line x1="1" y1="32" x2="64" y2="32" />
|
||||||
<polyline points="29.64 60.97 0.65 32 29.64 3.03" />
|
<polyline points="29.64 60.97 0.65 32 29.64 3.03" />
|
||||||
@ -569,7 +607,20 @@
|
|||||||
</header>
|
</header>
|
||||||
<form action="" onsubmit="return false">
|
<form action="" onsubmit="return false">
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<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>
|
<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>
|
||||||
<sm-input id="group_name_field" placeholder="Group name" animate required></sm-input>
|
<sm-input id="group_name_field" placeholder="Group name" animate required></sm-input>
|
||||||
<sm-textarea id="group_description_field" placeholder="Group description"></sm-textarea>
|
<sm-textarea id="group_description_field" placeholder="Group description"></sm-textarea>
|
||||||
</div>
|
</div>
|
||||||
@ -582,7 +633,8 @@
|
|||||||
<div id="chat" class="grid hide-on-mobile hide-completely">
|
<div id="chat" class="grid hide-on-mobile hide-completely">
|
||||||
<div id="chat_left">
|
<div id="chat_left">
|
||||||
<header id="chat_header" class="grid align-center">
|
<header id="chat_header" class="grid align-center">
|
||||||
<svg class="icon hide-on-desktop back-button" onclick="goto('chats')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
<svg class="icon hide-on-desktop back-button" onclick="goto('chats')"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
<title>Go to chat page</title>
|
<title>Go to chat page</title>
|
||||||
<line x1="1" y1="32" x2="64" y2="32" />
|
<line x1="1" y1="32" x2="64" y2="32" />
|
||||||
<polyline points="29.64 60.97 0.65 32 29.64 3.03" />
|
<polyline points="29.64 60.97 0.65 32 29.64 3.03" />
|
||||||
@ -591,7 +643,8 @@
|
|||||||
<div id="receiver_initial" class="initial flex align-center"></div>
|
<div id="receiver_initial" class="initial flex align-center"></div>
|
||||||
<h4 id="receiver_name"></h4>
|
<h4 id="receiver_name"></h4>
|
||||||
</div>
|
</div>
|
||||||
<sm-button id="video_call_button" class="hide-completely" onclick="createOffer()">Call</sm-button>
|
<sm-button id="video_call_button" class="hide-completely" onclick="createOffer()">Call
|
||||||
|
</sm-button>
|
||||||
</header>
|
</header>
|
||||||
<section id="chat_middle" class="flex direction-column">
|
<section id="chat_middle" class="flex direction-column">
|
||||||
<div id="chat_first_child"></div>
|
<div id="chat_first_child"></div>
|
||||||
@ -608,10 +661,16 @@
|
|||||||
<footer id="chat_footer" class="grid">
|
<footer id="chat_footer" class="grid">
|
||||||
<emoji-picker id="emoji_picker" class="hide-completely"></emoji-picker>
|
<emoji-picker id="emoji_picker" class="hide-completely"></emoji-picker>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<svg id="emoji_toggle" onclick="toggleEmoji('toggle')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0ZM43.84,17.51a4.92,4.92,0,1,1-4.92,4.92A4.92,4.92,0,0,1,43.84,17.51Zm-23.62-.06a5,5,0,1,1-5,5A5,5,0,0,1,20.22,17.45ZM32,54.42A19.68,19.68,0,0,1,12.31,34.73H51.69A19.68,19.68,0,0,1,32,54.42Z"/></svg>
|
<svg id="emoji_toggle" onclick="toggleEmoji('toggle')" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 64 64">
|
||||||
|
<path
|
||||||
|
d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0ZM43.84,17.51a4.92,4.92,0,1,1-4.92,4.92A4.92,4.92,0,0,1,43.84,17.51Zm-23.62-.06a5,5,0,1,1-5,5A5,5,0,0,1,20.22,17.45ZM32,54.42A19.68,19.68,0,0,1,12.31,34.73H51.69A19.68,19.68,0,0,1,32,54.42Z" />
|
||||||
|
</svg>
|
||||||
<sm-textarea id="type_message" placeholder="Type a message" class="rest"></sm-textarea>
|
<sm-textarea id="type_message" placeholder="Type a message" class="rest"></sm-textarea>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" id="send_message_button" class="icon" viewBox="0 0 64 64">
|
<svg xmlns="http://www.w3.org/2000/svg" id="send_message_button" class="icon"
|
||||||
<path d="M63.34,31,3.07,4.71A2.19,2.19,0,0,0,.18,7.58L8.94,28.29,42.18,32,8.94,35.71.18,56.42a2.19,2.19,0,0,0,2.89,2.87L63.34,33A1.09,1.09,0,0,0,63.34,31Z"/>
|
viewBox="0 0 64 64">
|
||||||
|
<path
|
||||||
|
d="M63.34,31,3.07,4.71A2.19,2.19,0,0,0,.18,7.58L8.94,28.29,42.18,32,8.94,35.71.18,56.42a2.19,2.19,0,0,0,2.89,2.87L63.34,33A1.09,1.09,0,0,0,63.34,31Z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
@ -647,12 +706,17 @@
|
|||||||
<div id="group_members_card" class="card hide-completely">
|
<div id="group_members_card" class="card hide-completely">
|
||||||
<div class="flex align-center">
|
<div class="flex align-center">
|
||||||
<h4 class="h4">Group members</h4>
|
<h4 class="h4">Group members</h4>
|
||||||
<sm-button id="edit_group_button" class="admin-option hide-completely round small justify-right" onclick="editGroupMembers()">Edit</sm-button>
|
<sm-button id="edit_group_button"
|
||||||
|
class="admin-option hide-completely round small justify-right"
|
||||||
|
onclick="editGroupMembers()">Edit</sm-button>
|
||||||
</div>
|
</div>
|
||||||
<p id="remove_members_tip" class="tip hide-completely">Select members to remove or add new members</p>
|
<p id="remove_members_tip" class="tip hide-completely">Select members to remove or add new
|
||||||
|
members</p>
|
||||||
<div id="member_options" class="flex hide-completely">
|
<div id="member_options" class="flex hide-completely">
|
||||||
<sm-button id="remove_members_button" class="danger hide-completely" onclick="removeGroupMembers()">Remove selected</sm-button>
|
<sm-button id="remove_members_button" class="danger hide-completely"
|
||||||
<sm-button id="init_add_members_button" onclick="showPopup('contacts_popup')">Add member</sm-button>
|
onclick="removeGroupMembers()">Remove selected</sm-button>
|
||||||
|
<sm-button id="init_add_members_button" onclick="showPopup('contacts_popup')">Add member
|
||||||
|
</sm-button>
|
||||||
</div>
|
</div>
|
||||||
<div id="group_members_list"></div>
|
<div id="group_members_list"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -667,7 +731,8 @@
|
|||||||
<div id="mails" class="grid">
|
<div id="mails" class="grid">
|
||||||
<header class="grid header">
|
<header class="grid header">
|
||||||
<div class="flex align-center">
|
<div class="flex align-center">
|
||||||
<svg class="hamburger-menu-button icon hide-on-desktop" onclick="toggleDrawer()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
<svg class="hamburger-menu-button icon hide-on-desktop" onclick="toggleDrawer()"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
<line y1="10.66" x2="64" y2="10.66" />
|
<line y1="10.66" x2="64" y2="10.66" />
|
||||||
<line y1="32" x2="64" y2="32" />
|
<line y1="32" x2="64" y2="32" />
|
||||||
<line y1="53.34" x2="64" y2="53.34" />
|
<line y1="53.34" x2="64" y2="53.34" />
|
||||||
@ -689,7 +754,8 @@
|
|||||||
<ul id="inbox_mail_container" class="mail-container flex observe-empty-state"></ul>
|
<ul id="inbox_mail_container" class="mail-container flex observe-empty-state"></ul>
|
||||||
<div class="empty-state flex direction-column align-center">
|
<div class="empty-state flex direction-column align-center">
|
||||||
<svg class="icon new-conversation" viewBox="0 0 512 512">
|
<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="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" />
|
<path d="M71,250.29l166.31,86.88a39,39,0,0,0,36.22,0L441,249.66" />
|
||||||
</svg>
|
</svg>
|
||||||
<h4>All your received mails will appear here.</h4>
|
<h4>All your received mails will appear here.</h4>
|
||||||
@ -698,7 +764,8 @@
|
|||||||
<ul id="sent_mail_container" class="mail-container flex observe-empty-state hide-completely"></ul>
|
<ul id="sent_mail_container" class="mail-container flex observe-empty-state hide-completely"></ul>
|
||||||
<div class="empty-state flex direction-column align-center">
|
<div class="empty-state flex direction-column align-center">
|
||||||
<svg class="icon new-conversation" viewBox="0 0 512 512">
|
<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="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" />
|
<path d="M71,250.29l166.31,86.88a39,39,0,0,0,36.22,0L441,249.66" />
|
||||||
</svg>
|
</svg>
|
||||||
<h4>All your sent mails will appear here.</h4>
|
<h4>All your sent mails will appear here.</h4>
|
||||||
@ -717,7 +784,8 @@
|
|||||||
<aside id="settings_sidebar">
|
<aside id="settings_sidebar">
|
||||||
<header class="grid header">
|
<header class="grid header">
|
||||||
<div class="flex align-center">
|
<div class="flex align-center">
|
||||||
<svg class="hamburger-menu-button icon hide-on-desktop" onclick="toggleDrawer()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
<svg class="hamburger-menu-button icon hide-on-desktop" onclick="toggleDrawer()"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
<line y1="10.66" x2="64" y2="10.66" />
|
<line y1="10.66" x2="64" y2="10.66" />
|
||||||
<line y1="32" x2="64" y2="32" />
|
<line y1="32" x2="64" y2="32" />
|
||||||
<line y1="53.34" x2="64" y2="53.34" />
|
<line y1="53.34" x2="64" y2="53.34" />
|
||||||
@ -733,7 +801,8 @@
|
|||||||
</aside>
|
</aside>
|
||||||
<div id="settings_panel" class=" hide-on-mobile">
|
<div id="settings_panel" class=" hide-on-mobile">
|
||||||
<header id="settings_header" class="flex align-center hide-on-desktop">
|
<header id="settings_header" class="flex align-center hide-on-desktop">
|
||||||
<svg id="back_settings" onclick='hidePanel()' xmlns="http://www.w3.org/2000/svg" class="icon back" viewBox="0 0 64 64">
|
<svg id="back_settings" onclick='hidePanel()' xmlns="http://www.w3.org/2000/svg" class="icon back"
|
||||||
|
viewBox="0 0 64 64">
|
||||||
<title>Go back</title>
|
<title>Go back</title>
|
||||||
<line x1="1" y1="32" x2="64" y2="32" />
|
<line x1="1" y1="32" x2="64" y2="32" />
|
||||||
<polyline points="29.64 60.97 0.65 32 29.64 3.03" />
|
<polyline points="29.64 60.97 0.65 32 29.64 3.03" />
|
||||||
@ -754,7 +823,8 @@
|
|||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h4>Clear data</h4>
|
<h4>Clear data</h4>
|
||||||
<p><strong></strong>This can't be undone.</strong> Make sure you have stored the PRIVATE KEY and backed up the data.</p>
|
<p><strong></strong>This can't be undone.</strong> Make sure you have stored the PRIVATE KEY and
|
||||||
|
backed up the data.</p>
|
||||||
<sm-button id="clear_data">Clear Data</sm-button>
|
<sm-button id="clear_data">Clear Data</sm-button>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
@ -803,7 +873,8 @@
|
|||||||
<div id="selected_bg_preview" class="bg-preview hide-completely" onclick="setBgImage()">
|
<div id="selected_bg_preview" class="bg-preview hide-completely" onclick="setBgImage()">
|
||||||
<img src="" alt="background perview" class="bg-preview__image">
|
<img src="" alt="background perview" class="bg-preview__image">
|
||||||
</div>
|
</div>
|
||||||
<div id="default_bg_preview" class="bg-preview bg-preview--selected" onclick="setDefaultBg()">Default</div>
|
<div id="default_bg_preview" class="bg-preview bg-preview--selected"
|
||||||
|
onclick="setDefaultBg()">Default</div>
|
||||||
</div>
|
</div>
|
||||||
<label class="select-file">
|
<label class="select-file">
|
||||||
<sm-button id="select_bg_button">Select background</sm-button>
|
<sm-button id="select_bg_button">Select background</sm-button>
|
||||||
@ -818,13 +889,15 @@
|
|||||||
<div id="backup_panel" class="panel hide-completely">
|
<div id="backup_panel" class="panel hide-completely">
|
||||||
<section>
|
<section>
|
||||||
<h4>Backup data</h4>
|
<h4>Backup data</h4>
|
||||||
<p>Create a backup of contacts, conversations and mails. Which can later be used to restore these in case of data is cleared. </p>
|
<p>Create a backup of contacts, conversations and mails. Which can later be used to restore
|
||||||
|
these in case of data is cleared. </p>
|
||||||
<sm-button id="backup_data">Backup Data</sm-button>
|
<sm-button id="backup_data">Backup Data</sm-button>
|
||||||
<span id="backup_info"></span>
|
<span id="backup_info"></span>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h4>Restore backup</h4>
|
<h4>Restore backup</h4>
|
||||||
<p>Select backup file with extension '.json'. Which was downloaded when backup was performed.</p>
|
<p>Select backup file with extension '.json'. Which was downloaded when backup was performed.
|
||||||
|
</p>
|
||||||
<label class="select-file">
|
<label class="select-file">
|
||||||
<sm-button>Select File</sm-button>
|
<sm-button>Select File</sm-button>
|
||||||
<input type="file" id="restore_data" accept=".json" />
|
<input type="file" id="restore_data" accept=".json" />
|
||||||
@ -848,11 +921,18 @@
|
|||||||
<video id="their_video" autoplay></video>
|
<video id="their_video" autoplay></video>
|
||||||
<div id="call_controls" class="flex">
|
<div id="call_controls" class="flex">
|
||||||
<sm-button id="mute_audio" class="circular-button" onclick="muteAudio()" title="Toggle audio">
|
<sm-button id="mute_audio" class="circular-button" onclick="muteAudio()" title="Toggle audio">
|
||||||
<svg class="icon filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="20.01" width="23.97" height="44.59" rx="11.99"/><path d="M50.47,39.88A4,4,0,0,0,45,41.42a14.88,14.88,0,0,1-25.92,0,4,4,0,1,0-7,4A23,23,0,0,0,28,56.72V60a4.05,4.05,0,1,0,8.1,0V56.72A23,23,0,0,0,52,45.39,4,4,0,0,0,50.47,39.88Z"/></svg>
|
<svg class="icon filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
|
<rect x="20.01" width="23.97" height="44.59" rx="11.99" />
|
||||||
|
<path
|
||||||
|
d="M50.47,39.88A4,4,0,0,0,45,41.42a14.88,14.88,0,0,1-25.92,0,4,4,0,1,0-7,4A23,23,0,0,0,28,56.72V60a4.05,4.05,0,1,0,8.1,0V56.72A23,23,0,0,0,52,45.39,4,4,0,0,0,50.47,39.88Z" />
|
||||||
|
</svg>
|
||||||
</sm-button>
|
</sm-button>
|
||||||
<sm-button id="end_call" onclick="endCall()">End call</sm-button>
|
<sm-button id="end_call" onclick="endCall()">End call</sm-button>
|
||||||
<sm-button id="pause_video" class="circular-button" onclick="pauseVideo()" title="Toggle video">
|
<sm-button id="pause_video" class="circular-button" onclick="pauseVideo()" title="Toggle video">
|
||||||
<svg class="icon filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M56.37,13.81l-8.09,4.68v-2a7.06,7.06,0,0,0-7.06-7H7.06A7.06,7.06,0,0,0,0,16.46V47.54a7.06,7.06,0,0,0,7.06,7.05H41.22a7.06,7.06,0,0,0,7.06-7.05v-2l8.09,4.68A5.09,5.09,0,0,0,64,45.78V18.22A5.09,5.09,0,0,0,56.37,13.81Z"/></svg>
|
<svg class="icon filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
|
<path
|
||||||
|
d="M56.37,13.81l-8.09,4.68v-2a7.06,7.06,0,0,0-7.06-7H7.06A7.06,7.06,0,0,0,0,16.46V47.54a7.06,7.06,0,0,0,7.06,7.05H41.22a7.06,7.06,0,0,0,7.06-7.05v-2l8.09,4.68A5.09,5.09,0,0,0,64,45.78V18.22A5.09,5.09,0,0,0,56.37,13.81Z" />
|
||||||
|
</svg>
|
||||||
</sm-button>
|
</sm-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1486,7 +1566,7 @@
|
|||||||
resolve(key)
|
resolve(key)
|
||||||
})
|
})
|
||||||
getRef('sign_in_with').addEventListener('clicked', () => {
|
getRef('sign_in_with').addEventListener('clicked', () => {
|
||||||
showFrame(2)
|
// showFrame(2)
|
||||||
resolve(getRef('generated_key').textContent)
|
resolve(getRef('generated_key').textContent)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@ -717,71 +717,6 @@ customElements.define('sm-textarea',
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// tab
|
|
||||||
const smTab = document.createElement('template')
|
|
||||||
smTab.innerHTML = `
|
|
||||||
<style>
|
|
||||||
*{
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
:host{
|
|
||||||
position: relative;
|
|
||||||
display: -webkit-inline-box;
|
|
||||||
display: -ms-inline-flexbox;
|
|
||||||
display: inline-flex;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.tab{
|
|
||||||
position: relative;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-box-pack: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
white-space: nowrap;
|
|
||||||
padding: 0.4rem 0.8rem;
|
|
||||||
font-weight: 500;
|
|
||||||
word-spacing: 0.1rem;
|
|
||||||
text-align: center;
|
|
||||||
-webkit-transition: color 0.3s;
|
|
||||||
-o-transition: color 0.3s;
|
|
||||||
transition: color 0.3s;
|
|
||||||
text-transform: capitalize;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
@media (hover: hover){
|
|
||||||
:host(.active) .tab{
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.tab{
|
|
||||||
opacity: 0.7
|
|
||||||
}
|
|
||||||
.tab:hover{
|
|
||||||
opacity: 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div part="tab" class="tab">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
customElements.define('sm-tab', class extends HTMLElement {
|
|
||||||
constructor() {
|
|
||||||
super()
|
|
||||||
this.shadow = this.attachShadow({
|
|
||||||
mode: 'open'
|
|
||||||
}).append(smTab.content.cloneNode(true))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
//chcekbox
|
//chcekbox
|
||||||
|
|
||||||
const smCheckbox = document.createElement('template')
|
const smCheckbox = document.createElement('template')
|
||||||
@ -3356,6 +3291,71 @@ customElements.define('sm-tab-header', class extends HTMLElement {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// tab
|
||||||
|
const smTab = document.createElement('template')
|
||||||
|
smTab.innerHTML = `
|
||||||
|
<style>
|
||||||
|
*{
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
:host{
|
||||||
|
position: relative;
|
||||||
|
display: -webkit-inline-box;
|
||||||
|
display: -ms-inline-flexbox;
|
||||||
|
display: inline-flex;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.tab{
|
||||||
|
position: relative;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
font-weight: 500;
|
||||||
|
word-spacing: 0.1rem;
|
||||||
|
text-align: center;
|
||||||
|
-webkit-transition: color 0.3s;
|
||||||
|
-o-transition: color 0.3s;
|
||||||
|
transition: color 0.3s;
|
||||||
|
text-transform: capitalize;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
@media (hover: hover){
|
||||||
|
:host(.active) .tab{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.tab{
|
||||||
|
opacity: 0.7
|
||||||
|
}
|
||||||
|
.tab:hover{
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div part="tab" class="tab">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
customElements.define('sm-tab', class extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
this.shadow = this.attachShadow({
|
||||||
|
mode: 'open'
|
||||||
|
}).append(smTab.content.cloneNode(true))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
// tab-panels
|
// tab-panels
|
||||||
|
|
||||||
const smTabPanels = document.createElement('template')
|
const smTabPanels = document.createElement('template')
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user