v0.7.56
style(user): minor changes in UI
This commit is contained in:
sairaj mote
parent
332dfe16ad
commit
37756ff554
File diff suppressed because one or more lines are too long
105
css/main.css
105
css/main.css
@ -346,7 +346,7 @@ sm-button[variant=primary] .icon {
|
||||
.logo-section .main-logo {
|
||||
height: 1.4rem;
|
||||
margin-right: 0.4rem;
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
fill: rgba(var(--text-color), 1);
|
||||
stroke: none;
|
||||
}
|
||||
.logo-section img {
|
||||
@ -365,6 +365,7 @@ sm-button[variant=primary] .icon {
|
||||
padding: 0 1.5rem;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#landing .logo-section {
|
||||
padding: 1.5rem;
|
||||
@ -424,7 +425,7 @@ sm-button[variant=primary] .icon {
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.sign-in-box sm-input {
|
||||
text-align: left;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.sign-in-box sm-panel {
|
||||
width: 100%;
|
||||
@ -461,6 +462,14 @@ sm-button[variant=primary] .icon {
|
||||
opacity: 0.8;
|
||||
font-weight: 500;
|
||||
}
|
||||
.sign-in-box strong {
|
||||
display: flex;
|
||||
background: #ffd92e;
|
||||
padding: 0.4em 0.6em;
|
||||
border-radius: 0.4em;
|
||||
color: #111;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.sign-in-box .copy-row h4 {
|
||||
max-width: 34ch;
|
||||
}
|
||||
@ -468,15 +477,19 @@ sm-button[variant=primary] .icon {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.sign-in-box button {
|
||||
width: auto;
|
||||
margin-top: 1rem;
|
||||
margin-top: 2rem;
|
||||
padding: 0.6rem 1.6rem;
|
||||
}
|
||||
.sign-in-box sm-button {
|
||||
width: 100%;
|
||||
}
|
||||
.sign-in-box sm-button::part(button) {
|
||||
padding: 0.8rem 1.6rem;
|
||||
}
|
||||
.sign-in-box p {
|
||||
margin-bottom: 0.5rem;
|
||||
max-width: 35ch;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.sign-in-box #credentials_section {
|
||||
border-top: 1px rgba(var(--text-color), 0.2) solid;
|
||||
@ -484,8 +497,9 @@ sm-button[variant=primary] .icon {
|
||||
padding-top: 1.5rem;
|
||||
animation: slide-down 0.3s forwards;
|
||||
}
|
||||
.sign-in-box #sign_in_with {
|
||||
.sign-in-box #sign_in_with, .sign-in-box sm-button {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@keyframes slide-down {
|
||||
@ -572,15 +586,11 @@ sm-button[variant=primary] .icon {
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: "dp .";
|
||||
}
|
||||
.contact:focus {
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
outline: none;
|
||||
}
|
||||
.contact .initial {
|
||||
grid-area: dp;
|
||||
}
|
||||
.contact .name {
|
||||
font-size: 1rem;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
@ -589,7 +599,8 @@ sm-button[variant=primary] .icon {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
font-size: 0.9em;
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
.contact .time {
|
||||
@ -650,6 +661,11 @@ sm-button[variant=primary] .icon {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#warn_no_encryption {
|
||||
background: #fffd8d;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.mail-card.unread::before,
|
||||
.contact.unread .initial::before {
|
||||
content: "";
|
||||
@ -868,16 +884,28 @@ sm-button[variant=primary] .icon {
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
padding-bottom: 1.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
transition: transform 0.3s;
|
||||
transform: translateX(-110%);
|
||||
}
|
||||
#contacts #all_contacts .header {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
#contacts .option {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
#contacts .scrolling-wrapper {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#contacts #contacts_container {
|
||||
height: calc(100vh - 7.3rem);
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
#contacts #contacts_container::before {
|
||||
display: flex;
|
||||
content: "Contacts";
|
||||
font-size: 0.9em;
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
#selected_contacts {
|
||||
@ -908,7 +936,6 @@ sm-button[variant=primary] .icon {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
#contacts .header, #mails .header, #settings_page .header {
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
padding: 1rem 1.5rem 0 1.5rem;
|
||||
position: relative;
|
||||
gap: 0.5rem;
|
||||
@ -920,12 +947,28 @@ sm-button[variant=primary] .icon {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 0.7rem 1.5rem;
|
||||
background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
|
||||
clip-path: circle(0% at calc(100% - 4rem) center);
|
||||
transition: clip-path 0.3s;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
#contacts .header .expanding-search.expand, #mails .header .expanding-search.expand, #settings_page .header .expanding-search.expand {
|
||||
clip-path: circle(100%);
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
#contacts .header .expanding-search.expand sm-input,
|
||||
#contacts .header .expanding-search.expand .back, #mails .header .expanding-search.expand sm-input,
|
||||
#mails .header .expanding-search.expand .back, #settings_page .header .expanding-search.expand sm-input,
|
||||
#settings_page .header .expanding-search.expand .back {
|
||||
transform: none;
|
||||
}
|
||||
#contacts .header .expanding-search sm-input,
|
||||
#contacts .header .expanding-search .back, #mails .header .expanding-search sm-input,
|
||||
#mails .header .expanding-search .back, #settings_page .header .expanding-search sm-input,
|
||||
#settings_page .header .expanding-search .back {
|
||||
transform: translateX(0.5rem);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
#contacts .header sm-input, #mails .header sm-input, #settings_page .header sm-input {
|
||||
margin: 0;
|
||||
@ -964,7 +1007,7 @@ sm-button[variant=primary] .icon {
|
||||
margin-right: -0.7rem;
|
||||
}
|
||||
#contacts .header sm-button, #mails .header sm-button, #settings_page .header sm-button {
|
||||
margin: 0 0 0 auto;
|
||||
margin: 0;
|
||||
}
|
||||
#contacts .header sm-button .icon, #mails .header sm-button .icon, #settings_page .header sm-button .icon {
|
||||
height: 0.9rem;
|
||||
@ -1087,7 +1130,6 @@ sm-button[variant=primary] .icon {
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
white-space: pre-wrap;
|
||||
box-shadow: 0 1px 0.1rem rgba(0, 0, 0, 0.16);
|
||||
padding: 0.6em 1em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@ -1172,7 +1214,6 @@ sm-button[variant=primary] .icon {
|
||||
}
|
||||
.big-emoji .message-body {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
@ -1242,7 +1283,6 @@ sm-button[variant=primary] .icon {
|
||||
|
||||
#chat_container,
|
||||
#dm_container,
|
||||
#contacts_container,
|
||||
#inbox_mail_container,
|
||||
#sent_mail_container,
|
||||
#mail {
|
||||
@ -1379,7 +1419,17 @@ sm-panel {
|
||||
|
||||
#landing {
|
||||
grid-template-areas: "illustration" ".";
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
#landing .title-font {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
#landing sm-button {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#sing_in {
|
||||
@ -1413,7 +1463,7 @@ sm-panel {
|
||||
|
||||
#dm_container,
|
||||
#contact_container {
|
||||
gap: 0.5rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
#chat header {
|
||||
@ -1475,7 +1525,6 @@ sm-panel {
|
||||
}
|
||||
|
||||
#landing {
|
||||
height: calc(100vh - 8rem);
|
||||
align-items: center;
|
||||
gap: 4vw;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
101
css/main.scss
101
css/main.scss
@ -298,7 +298,7 @@ sm-button[variant="primary"]{
|
||||
.main-logo{
|
||||
height: 1.4rem;
|
||||
margin-right: 0.4rem;
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
fill: rgba(var(--text-color), 1);
|
||||
stroke: none;
|
||||
}
|
||||
img{
|
||||
@ -318,6 +318,7 @@ sm-button[variant="primary"]{
|
||||
padding: 0 1.5rem;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
.logo-section{
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
@ -373,7 +374,7 @@ sm-button[variant="primary"]{
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
sm-input{
|
||||
text-align: left;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
sm-panel{
|
||||
width: 100%;
|
||||
@ -410,6 +411,14 @@ sm-button[variant="primary"]{
|
||||
opacity: 0.8;
|
||||
font-weight: 500;
|
||||
}
|
||||
strong{
|
||||
display: flex;
|
||||
background: #ffd92e;
|
||||
padding: 0.4em 0.6em;
|
||||
border-radius: 0.4em;
|
||||
color: #111;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.copy-row{
|
||||
h4{
|
||||
max-width: 34ch;
|
||||
@ -419,15 +428,19 @@ sm-button[variant="primary"]{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
button {
|
||||
width: auto;
|
||||
margin-top: 1rem;
|
||||
margin-top: 2rem;
|
||||
padding: 0.6rem 1.6rem;
|
||||
}
|
||||
sm-button{
|
||||
width: 100%;
|
||||
&::part(button){
|
||||
padding: 0.8rem 1.6rem;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0.5rem;
|
||||
max-width: 35ch;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
#credentials_section{
|
||||
border-top: 1px rgba(var(--text-color), 0.2) solid;
|
||||
@ -435,8 +448,9 @@ sm-button[variant="primary"]{
|
||||
padding-top: 1.5rem;
|
||||
animation: slide-down 0.3s forwards;
|
||||
}
|
||||
#sign_in_with{
|
||||
#sign_in_with, sm-button{
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@keyframes slide-down{
|
||||
@ -521,15 +535,11 @@ sm-button[variant="primary"]{
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: 'dp .';
|
||||
}
|
||||
&:focus{
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
outline: none;
|
||||
}
|
||||
.initial{
|
||||
grid-area: dp;
|
||||
}
|
||||
.name{
|
||||
font-size: 1rem;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
@ -538,7 +548,8 @@ sm-button[variant="primary"]{
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
font-size: 0.9em;
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
.time{
|
||||
@ -601,6 +612,10 @@ sm-button[variant="primary"]{
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
#warn_no_encryption{
|
||||
background: rgb(255, 253, 141);
|
||||
color: #111;
|
||||
}
|
||||
.mail-card.unread::before,
|
||||
.contact.unread .initial::before{
|
||||
content: '';
|
||||
@ -810,16 +825,28 @@ sm-button[variant="primary"]{
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
padding-bottom: 1.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
transition: transform 0.3s;
|
||||
transform: translateX(-110%);
|
||||
.header{
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
.option{
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
.scrolling-wrapper{
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#contacts_container{
|
||||
height: calc(100vh - 7.3rem);
|
||||
padding-bottom: 5rem;
|
||||
&::before{
|
||||
display: flex;
|
||||
content: 'Contacts';
|
||||
font-size: 0.9em;
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#selected_contacts{
|
||||
@ -846,7 +873,7 @@ sm-button[variant="primary"]{
|
||||
height: 100vh;
|
||||
overflow-y: hidden;
|
||||
.header{
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
//background: rgba(var(--text-color), 0.06);
|
||||
padding: 1rem 1.5rem 0 1.5rem;
|
||||
position: relative;
|
||||
gap: 0.5rem;
|
||||
@ -858,11 +885,23 @@ sm-button[variant="primary"]{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 0.7rem 1.5rem;
|
||||
background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
|
||||
clip-path: circle(0% at calc(100% - 4rem) center);
|
||||
transition: clip-path 0.3s;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s;
|
||||
&.expand{
|
||||
clip-path: circle(100%);
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
sm-input,
|
||||
.back{
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
sm-input,
|
||||
.back{
|
||||
transform: translateX(0.5rem);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
}
|
||||
sm-input{
|
||||
@ -904,7 +943,7 @@ sm-button[variant="primary"]{
|
||||
}
|
||||
}
|
||||
sm-button{
|
||||
margin: 0 0 0 auto;
|
||||
margin: 0;
|
||||
.icon{
|
||||
height: 0.9rem;
|
||||
width: 0.9rem;
|
||||
@ -1027,7 +1066,6 @@ sm-button[variant="primary"]{
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
white-space: pre-wrap;
|
||||
box-shadow: 0 1px 0.1rem rgba(0, 0, 0, 0.16);
|
||||
padding: 0.6em 1em;
|
||||
line-height: 1.5;
|
||||
a{
|
||||
@ -1116,7 +1154,6 @@ sm-button[variant="primary"]{
|
||||
}
|
||||
.message-body{
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
@ -1182,7 +1219,6 @@ sm-button[variant="primary"]{
|
||||
}
|
||||
#chat_container,
|
||||
#dm_container,
|
||||
#contacts_container,
|
||||
#inbox_mail_container,
|
||||
#sent_mail_container,
|
||||
#mail{
|
||||
@ -1311,7 +1347,17 @@ sm-panel{
|
||||
}
|
||||
#landing{
|
||||
grid-template-areas: 'illustration' '.';
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
.title-font{
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
sm-button{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
#sing_in{
|
||||
max-height: 90vh;
|
||||
@ -1340,7 +1386,7 @@ sm-panel{
|
||||
}
|
||||
#dm_container,
|
||||
#contact_container{
|
||||
gap: 0.5rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
#chat{
|
||||
header{
|
||||
@ -1396,7 +1442,6 @@ sm-panel{
|
||||
min-width: 24rem;
|
||||
}
|
||||
#landing{
|
||||
height: calc(100vh - 8rem);
|
||||
align-items: center;
|
||||
gap: 4vw;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
108
index.html
108
index.html
@ -34,7 +34,7 @@
|
||||
</div>
|
||||
</sm-popup>
|
||||
<sm-notifications id="notification_drawer"></sm-notifications>
|
||||
<div id="landing_page" class="page hide-completely">
|
||||
<div id="landing_page" class="grid page hide-completely">
|
||||
<header class="logo-section align-center">
|
||||
<svg class="main-logo" viewBox="0 0 27.25 32">
|
||||
<title>RanchiMall</title>
|
||||
@ -51,10 +51,9 @@
|
||||
FLO Messenger
|
||||
</h4>
|
||||
<h1 class="title-font">
|
||||
Truly Secure,
|
||||
Private and Reliable.
|
||||
Truly Secure, Private and Reliable.
|
||||
</h1>
|
||||
<sm-button variant="primary" onclick="showPopup('sign_in_popup')">Sign In / Up</sm-button>
|
||||
<sm-button variant="primary" onclick="showPopup('sign_in_popup')">Sign In / Create account</sm-button>
|
||||
</div>
|
||||
<div id="landing_illustration" class="right">
|
||||
<img src="assets/message-background.svg" alt="">
|
||||
@ -73,23 +72,22 @@
|
||||
<div class="sign-in-box flex direction-column">
|
||||
<sm-tab-header target="user_entry">
|
||||
<sm-tab>Sign In</sm-tab>
|
||||
<sm-tab>Sign Up</sm-tab>
|
||||
<sm-tab>Create account</sm-tab>
|
||||
</sm-tab-header>
|
||||
<sm-tab-panels id="user_entry">
|
||||
<sm-panel>
|
||||
<h3>Welcome back</h3>
|
||||
<p>Just 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 action="" onsubmit="return false">
|
||||
<sm-input id="private_key_input_field" type="password" placeholder="FLO private key" privateKey></sm-input>
|
||||
<sm-input id="private_key_input_field" class="outlined" type="password" placeholder="FLO private key" privateKey animate></sm-input>
|
||||
<sm-button id="sign_in_button" width="cover" variant="primary" disabled>continue</sm-button>
|
||||
<sm-button id="remove_account" variant="outlined">Remove Account</sm-button>
|
||||
</form>
|
||||
</sm-panel>
|
||||
<sm-panel>
|
||||
<h3>Get started</h3>
|
||||
<p>Create your FLO public and private key pair. <Strong>Don't forget to store them
|
||||
securely!</Strong></p>
|
||||
<sm-button id="generate_flo_id" onclick="generateId()" variant="primary">Get FLO credentials
|
||||
<strong>Don't forget to store them securely. <br> Once lost private key can't be recovered 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">
|
||||
<h5>FLO ID (User ID)</h5>
|
||||
@ -190,7 +188,7 @@
|
||||
<sm-button id="send_mail_button" variant="primary" disabled>Send</sm-button>
|
||||
</header>
|
||||
<div id="auto_complete_contact" class="flex direction-column">
|
||||
<sm-input id="send_mail_to" floId placeholder="To" animate required></sm-input>
|
||||
<sm-input id="send_mail_to" placeholder="To" animate required></sm-input>
|
||||
<div id="mail_contact_list" class="hide-completely contact-list"></div>
|
||||
</div>
|
||||
<sm-input id="subject_of_mail" placeholder="Subject" animate></sm-input>
|
||||
@ -279,7 +277,7 @@
|
||||
</template>
|
||||
|
||||
<template id="contact_template">
|
||||
<div class="contact interact" tabindex="0">
|
||||
<div class="contact interact">
|
||||
<div class="initial flex align-center"></div>
|
||||
<h4 class="name"></h4>
|
||||
<!--<sm-menu align-options="right">
|
||||
@ -395,8 +393,9 @@
|
||||
</div>
|
||||
</sm-panel>
|
||||
<sm-panel></sm-panel>
|
||||
<sm-panel></sm-panel>
|
||||
</sm-tab-panels>
|
||||
<div id="all_contacts">
|
||||
<div id="all_contacts" class="flex direction-column hide-completely">
|
||||
<header class="grid header">
|
||||
<div class="flex align-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon back" onclick="showContacts(false)" viewBox="0 0 64 64">
|
||||
@ -404,27 +403,7 @@
|
||||
<line x1="1" y1="32" x2="64" y2="32"/>
|
||||
<polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
|
||||
</svg>
|
||||
<h4>Contacts</h4>
|
||||
<svg class="icon" onclick="toggleSearch('contacts_search_field')" viewBox="0 0 64 64">
|
||||
<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"/>
|
||||
<line x1="63.65" y1="63.66" x2="43.36" y2="43.37"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="show_contact_popup_button" onclick="showPopup('add_contact_popup')" class="icon justify-right" viewBox="0 0 64 64">
|
||||
<title>Add contact</title>
|
||||
<path d="M21.7,5.73c6.88,0,11.78,4.64,11.78,12.44S29.58,32.6,22,32.6,10.59,26,10.59,18.25,15.48,5.81,22.36,5.81"/>
|
||||
<path d="M16.56,33C14.49,36.91,7.85,38.9,3,41.06,1,41.89-.69,52.67,1.63,52.67A40.31,40.31,0,0,0,22.53,58,36.52,36.52,0,0,0,42.6,52.67c2.32,0,.66-10.7-1.33-11.61C36.38,38.9,29.75,36.91,27.67,33"/>
|
||||
<line x1="54.32" y1="12.32" x2="54.32" y2="31.68"/>
|
||||
<line x1="64" y1="22" x2="44.64" y2="22"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="contacts_search_field" class="expanding-search flex align-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon back" onclick="toggleSearch('contacts_search_field')" viewBox="0 0 64 64">
|
||||
<title>back-arrow</title>
|
||||
<line x1="1" y1="32" x2="64" y2="32"/>
|
||||
<polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
|
||||
</svg>
|
||||
<sm-input id="search_contacts" type="search" placeholder="Search Contacts">
|
||||
<sm-input id="search_contacts" type="search" placeholder="Enter name or FLO ID">
|
||||
<svg slot="icon" class="icon" viewBox="0 0 64 64">
|
||||
<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"/>
|
||||
@ -437,9 +416,27 @@
|
||||
<h4>Add group members</h4>
|
||||
<div id="selected_contacts_container">
|
||||
</div>
|
||||
<sm-button>Create</sm-button>
|
||||
</div>
|
||||
<div id="contacts_container"></div>
|
||||
<div class="scrolling-wrapper">
|
||||
<div id="create_group_option" class="option interact" onclick="initGroupCreation()">
|
||||
|
||||
Create new group
|
||||
</div>
|
||||
<div id="contacts_container"></div>
|
||||
<sm-button id="show_contact_popup_button" variant="primary" class="fab round" onclick="showPopup('add_contact_popup')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 64 64">
|
||||
<title>Add contact</title>
|
||||
<path d="M21.7,5.73c6.88,0,11.78,4.64,11.78,12.44S29.58,32.6,22,32.6,10.59,26,10.59,18.25,15.48,5.81,22.36,5.81"/>
|
||||
<path d="M16.56,33C14.49,36.91,7.85,38.9,3,41.06,1,41.89-.69,52.67,1.63,52.67A40.31,40.31,0,0,0,22.53,58,36.52,36.52,0,0,0,42.6,52.67c2.32,0,.66-10.7-1.33-11.61C36.38,38.9,29.75,36.91,27.67,33"/>
|
||||
<line x1="54.32" y1="12.32" x2="54.32" y2="31.68"/>
|
||||
<line x1="64" y1="22" x2="44.64" y2="22"/>
|
||||
</svg>
|
||||
Add a contact
|
||||
</sm-button>
|
||||
<sm-button id="create_group_button" variant="primary" class="fab round hide-completely">
|
||||
Create
|
||||
</sm-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chat" class="flex direction-column hide-on-mobile hide-completely">
|
||||
@ -571,7 +568,7 @@
|
||||
<section>
|
||||
<h4>Sign out</h4>
|
||||
<p>*Remember to store your <strong>PRIVATE KEY </strong> before signing out.</p>
|
||||
<sm-button id="sign_out" variant="outlined">Sign Out</sm-button>
|
||||
<sm-button id="sign_out">Sign Out</sm-button>
|
||||
</section>
|
||||
</div>
|
||||
<div id="personalise_panel" class="panel hide-completely">
|
||||
@ -609,9 +606,7 @@
|
||||
</div>
|
||||
<div id="about_panel" class="panel hide-completely">
|
||||
<section>
|
||||
<h4>Version</h4>
|
||||
<p>0.0.35</p>
|
||||
<p>Created by RanchiMall, a blockchain incorporated entity</p>
|
||||
<p>Created by RanchiMall, a Blockchain incorporated entity</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
@ -1156,8 +1151,6 @@
|
||||
getRef('mail').classList.add('hide-completely')
|
||||
getRef('chat_page_button').click()
|
||||
if (privKeyNotSecured) {
|
||||
notify("Private key is not secured with password. Remember to secure the private key in settings",
|
||||
"warn", '')
|
||||
getRef("secure_key").textContent = 'Set password'
|
||||
} else {
|
||||
getRef("secure_key").textContent = 'Change password'
|
||||
@ -1274,7 +1267,7 @@
|
||||
messenger.getChat(floID).then(chat => {
|
||||
const lastMessage = Object.values(chat).pop()
|
||||
cardContainer.innerHTML += `
|
||||
<h5 class="last-message">${lastMessage.message}</h5>
|
||||
<p class="last-message">${lastMessage.message}</p>
|
||||
<h5 class="time">${getFormatedTime(lastMessage.time, true)}</h5>`
|
||||
})
|
||||
.catch(error => console.log(error))
|
||||
@ -1722,24 +1715,37 @@
|
||||
})
|
||||
|
||||
// Function to show all contacts side drawer
|
||||
let contactsDrawerAnimation
|
||||
function showContacts(show = true){
|
||||
if(show)
|
||||
getRef('all_contacts').classList.add('no-transformations')
|
||||
if(show){
|
||||
getRef('all_contacts').classList.remove('hide-completely')
|
||||
contactsDrawerAnimation = animateTo(getRef('all_contacts'), [
|
||||
{transform: 'translateY(2rem)'},
|
||||
{transform: 'none'},
|
||||
],{
|
||||
duration: 300,
|
||||
easing: 'ease'
|
||||
})
|
||||
}
|
||||
else{
|
||||
getRef('all_contacts').classList.remove('no-transformations')
|
||||
getRef('selected_contacts').classList.add('hide-completely')
|
||||
isCreatingGroup = false
|
||||
contactsDrawerAnimation.reverse()
|
||||
contactsDrawerAnimation.onfinish = () => {
|
||||
getRef('all_contacts').classList.add('hide-completely')
|
||||
getRef('create_group_option').classList.remove('hide-completely')
|
||||
getRef('selected_contacts').classList.add('hide-completely')
|
||||
getRef('create_group_button').classList.add('hide-completely')
|
||||
getRef('show_contact_popup_button').classList.remove('hide-completely')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateHeight(){
|
||||
if(window.innerWidth < 640){
|
||||
getRef('chat').style.height = window.innerHeight + 'px'
|
||||
getRef('landing_page').style.height = window.innerHeight + 'px'
|
||||
}
|
||||
else{
|
||||
getRef('chat').style.height = '100vh'
|
||||
getRef('landing_page').style.height = '100vh'
|
||||
}
|
||||
}
|
||||
|
||||
@ -2129,7 +2135,10 @@
|
||||
function initGroupCreation(){
|
||||
isCreatingGroup = true
|
||||
showContacts()
|
||||
getRef('create_group_option').classList.add('hide-completely')
|
||||
getRef('selected_contacts').classList.remove('hide-completely')
|
||||
getRef('show_contact_popup_button').classList.add('hide-completely')
|
||||
getRef('create_group_button').classList.remove('hide-completely')
|
||||
}
|
||||
|
||||
function viewMail(mailRef, newView = true) {
|
||||
@ -2318,6 +2327,7 @@
|
||||
document.querySelectorAll(`.contact[flo-id="${clickedContact['floID']}"]`).forEach(contact => {
|
||||
contact.children[0].textContent = clickedContact['name'].charAt(0)
|
||||
contact.children[1].textContent = clickedContact['name']
|
||||
contact.setAttribute('name', clickedContact['name'])
|
||||
})
|
||||
notify('Renamed contact', 'success')
|
||||
})
|
||||
|
||||
@ -325,7 +325,7 @@ input{
|
||||
color: var(--accent-color)
|
||||
}
|
||||
:host(.outlined) .input {
|
||||
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.3) inset;
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
:host(.outlined) .label {
|
||||
@ -1883,6 +1883,7 @@ smPopup.innerHTML = `
|
||||
-webkit-box-shadow: 0 -1rem 2rem #00000020;
|
||||
box-shadow: 0 -1rem 2rem #00000020;
|
||||
max-height: 90vh;
|
||||
content-visibility: auto;
|
||||
}
|
||||
.container-header{
|
||||
display: -webkit-box;
|
||||
@ -1915,6 +1916,7 @@ smPopup.innerHTML = `
|
||||
.hide{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
visiblity: none;
|
||||
}
|
||||
@media screen and (min-width: 640px){
|
||||
.popup{
|
||||
@ -2030,7 +2032,7 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
this.inputFields.forEach(field => {
|
||||
if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX')
|
||||
field.checked = false
|
||||
if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA')
|
||||
if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA'|| field.tagName === 'SM-TEXTAREA')
|
||||
field.value = ''
|
||||
})
|
||||
}, 300);
|
||||
@ -2053,7 +2055,6 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
}
|
||||
|
||||
handleTouchMove = (e) => {
|
||||
e.preventDefault()
|
||||
if (this.touchStartY < e.changedTouches[0].clientY) {
|
||||
this.offset = e.changedTouches[0].clientY - this.touchStartY;
|
||||
this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup())
|
||||
@ -2128,14 +2129,14 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'sm-textarea', 'radio')
|
||||
})
|
||||
|
||||
this.popupHeader.addEventListener('touchstart', (e) => {this.handleTouchStart(e)})
|
||||
this.popupHeader.addEventListener('touchmove', (e) => {this.handleTouchMove(e)})
|
||||
this.popupHeader.addEventListener('touchend', (e) => {this.handleTouchEnd(e)})
|
||||
this.popupHeader.addEventListener('touchstart', (e) => { this.handleTouchStart(e) }, {passive: true})
|
||||
this.popupHeader.addEventListener('touchmove', (e) => {this.handleTouchMove(e)}, {passive: true})
|
||||
this.popupHeader.addEventListener('touchend', (e) => {this.handleTouchEnd(e)}, {passive: true})
|
||||
}
|
||||
disconnectedCallback() {
|
||||
this.popupHeader.removeEventListener('touchstart', this.handleTouchStart)
|
||||
this.popupHeader.removeEventListener('touchmove', this.handleTouchMove)
|
||||
this.popupHeader.removeEventListener('touchend', this.handleTouchEnd)
|
||||
this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, {passive: true})
|
||||
this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, {passive: true})
|
||||
this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, {passive: true})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user