RanchiMall/messenger
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.7.56

Browse Source 
style(user): minor changes in UI
This commit is contained in:
sairaj mote 2021-01-17 23:47:09 +05:30
parent 332dfe16ad
commit 37756ff554
6 changed files with 1096 additions and 1034 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1795
assets/illustrations-2.ai
View File

File diff suppressed because one or more lines are too long

105
css/main.css
View File

@ -346,7 +346,7 @@ sm-button[variant=primary] .icon {
.logo-section .main-logo { .logo-section .main-logo {
height: 1.4rem; height: 1.4rem;
margin-right: 0.4rem; margin-right: 0.4rem;
fill: rgba(var(--text-color), 0.8); fill: rgba(var(--text-color), 1);
stroke: none; stroke: none;
} }
.logo-section img { .logo-section img {
@ -365,6 +365,7 @@ sm-button[variant=primary] .icon {
padding: 0 1.5rem; padding: 0 1.5rem;
height: 100%; height: 100%;
align-items: center; align-items: center;
overflow-y: auto;
} }
#landing .logo-section { #landing .logo-section {
padding: 1.5rem; padding: 1.5rem;
@ -424,7 +425,7 @@ sm-button[variant=primary] .icon {
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
} }
.sign-in-box sm-input { .sign-in-box sm-input {
text-align: left; margin-top: 1.5rem;
} }
.sign-in-box sm-panel { .sign-in-box sm-panel {
width: 100%; width: 100%;
@ -461,6 +462,14 @@ sm-button[variant=primary] .icon {
opacity: 0.8; opacity: 0.8;
font-weight: 500; 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 { .sign-in-box .copy-row h4 {
max-width: 34ch; max-width: 34ch;
} }
@ -468,15 +477,19 @@ sm-button[variant=primary] .icon {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.sign-in-box button { .sign-in-box button {
width: auto; margin-top: 2rem;
margin-top: 1rem;
padding: 0.6rem 1.6rem; 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 { .sign-in-box p {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
max-width: 35ch; max-width: 35ch;
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 1.5rem;
} }
.sign-in-box #credentials_section { .sign-in-box #credentials_section {
border-top: 1px rgba(var(--text-color), 0.2) solid; border-top: 1px rgba(var(--text-color), 0.2) solid;
@ -484,8 +497,9 @@ sm-button[variant=primary] .icon {
padding-top: 1.5rem; padding-top: 1.5rem;
animation: slide-down 0.3s forwards; 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-top: 2rem;
margin-bottom: 0;
} }
@keyframes slide-down { @keyframes slide-down {
@ -572,15 +586,11 @@ sm-button[variant=primary] .icon {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-areas: "dp ."; grid-template-areas: "dp .";
} }
.contact:focus {
background: rgba(var(--text-color), 0.06);
outline: none;
}
.contact .initial { .contact .initial {
grid-area: dp; grid-area: dp;
} }
.contact .name { .contact .name {
font-size: 1rem; font-size: 1em;
font-weight: 500; font-weight: 500;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
} }
@ -589,7 +599,8 @@ sm-button[variant=primary] .icon {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
font-weight: 500; font-weight: 400;
font-size: 0.9em;
color: rgba(var(--text-color), 0.9); color: rgba(var(--text-color), 0.9);
} }
.contact .time { .contact .time {
@ -650,6 +661,11 @@ sm-button[variant=primary] .icon {
align-self: center; align-self: center;
} }
#warn_no_encryption {
background: #fffd8d;
color: #111;
}
.mail-card.unread::before, .mail-card.unread::before,
.contact.unread .initial::before { .contact.unread .initial::before {
content: ""; content: "";
@ -868,16 +884,28 @@ sm-button[variant=primary] .icon {
left: 0; left: 0;
right: 0; right: 0;
z-index: 1; z-index: 1;
padding-bottom: 1.5rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
transition: transform 0.3s;
transform: translateX(-110%);
} }
#contacts #all_contacts .header { #contacts #all_contacts .header {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
#contacts .option {
padding: 1rem 1.5rem;
}
#contacts .scrolling-wrapper {
height: 100%;
flex: 1;
overflow-y: auto;
}
#contacts #contacts_container { #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 { #selected_contacts {
@ -908,7 +936,6 @@ sm-button[variant=primary] .icon {
overflow-y: hidden; overflow-y: hidden;
} }
#contacts .header, #mails .header, #settings_page .header { #contacts .header, #mails .header, #settings_page .header {
background: rgba(var(--text-color), 0.06);
padding: 1rem 1.5rem 0 1.5rem; padding: 1rem 1.5rem 0 1.5rem;
position: relative; position: relative;
gap: 0.5rem; gap: 0.5rem;
@ -920,12 +947,28 @@ sm-button[variant=primary] .icon {
position: absolute; position: absolute;
width: 100%; width: 100%;
padding: 0.7rem 1.5rem; 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); background: rgba(var(--foreground-color), 1);
clip-path: circle(0% at calc(100% - 4rem) center); opacity: 0;
transition: clip-path 0.3s; pointer-events: none;
transition: opacity 0.3s;
} }
#contacts .header .expanding-search.expand, #mails .header .expanding-search.expand, #settings_page .header .expanding-search.expand { #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 { #contacts .header sm-input, #mails .header sm-input, #settings_page .header sm-input {
margin: 0; margin: 0;
@ -964,7 +1007,7 @@ sm-button[variant=primary] .icon {
margin-right: -0.7rem; margin-right: -0.7rem;
} }
#contacts .header sm-button, #mails .header sm-button, #settings_page .header sm-button { #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 { #contacts .header sm-button .icon, #mails .header sm-button .icon, #settings_page .header sm-button .icon {
height: 0.9rem; height: 0.9rem;
@ -1087,7 +1130,6 @@ sm-button[variant=primary] .icon {
-webkit-hyphens: auto; -webkit-hyphens: auto;
hyphens: auto; hyphens: auto;
white-space: pre-wrap; white-space: pre-wrap;
box-shadow: 0 1px 0.1rem rgba(0, 0, 0, 0.16);
padding: 0.6em 1em; padding: 0.6em 1em;
line-height: 1.5; line-height: 1.5;
} }
@ -1172,7 +1214,6 @@ sm-button[variant=primary] .icon {
} }
.big-emoji .message-body { .big-emoji .message-body {
background: none !important; background: none !important;
box-shadow: none !important;
padding: 0 !important; padding: 0 !important;
font-size: 2.6rem; font-size: 2.6rem;
} }
@ -1242,7 +1283,6 @@ sm-button[variant=primary] .icon {
#chat_container, #chat_container,
#dm_container, #dm_container,
#contacts_container,
#inbox_mail_container, #inbox_mail_container,
#sent_mail_container, #sent_mail_container,
#mail { #mail {
@ -1379,7 +1419,17 @@ sm-panel {
#landing { #landing {
grid-template-areas: "illustration" "."; 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 { #sing_in {
@ -1413,7 +1463,7 @@ sm-panel {
#dm_container, #dm_container,
#contact_container { #contact_container {
gap: 0.5rem; gap: 0.2rem;
} }
#chat header { #chat header {
@ -1475,7 +1525,6 @@ sm-panel {
} }
#landing { #landing {
height: calc(100vh - 8rem);
align-items: center; align-items: center;
gap: 4vw; gap: 4vw;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

101
css/main.scss
View File

@ -298,7 +298,7 @@ sm-button[variant="primary"]{
.main-logo{ .main-logo{
height: 1.4rem; height: 1.4rem;
margin-right: 0.4rem; margin-right: 0.4rem;
fill: rgba(var(--text-color), 0.8); fill: rgba(var(--text-color), 1);
stroke: none; stroke: none;
} }
img{ img{
@ -318,6 +318,7 @@ sm-button[variant="primary"]{
padding: 0 1.5rem; padding: 0 1.5rem;
height: 100%; height: 100%;
align-items: center; align-items: center;
overflow-y: auto;
.logo-section{ .logo-section{
padding: 1.5rem; padding: 1.5rem;
display: flex; display: flex;
@ -373,7 +374,7 @@ sm-button[variant="primary"]{
border-radius: 0.5rem; border-radius: 0.5rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
sm-input{ sm-input{
text-align: left; margin-top: 1.5rem;
} }
sm-panel{ sm-panel{
width: 100%; width: 100%;
@ -410,6 +411,14 @@ sm-button[variant="primary"]{
opacity: 0.8; opacity: 0.8;
font-weight: 500; 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{ .copy-row{
h4{ h4{
max-width: 34ch; max-width: 34ch;
@ -419,15 +428,19 @@ sm-button[variant="primary"]{
margin-bottom: 1rem; margin-bottom: 1rem;
} }
button { button {
width: auto; margin-top: 2rem;
margin-top: 1rem;
padding: 0.6rem 1.6rem; padding: 0.6rem 1.6rem;
} }
sm-button{
width: 100%;
&::part(button){
padding: 0.8rem 1.6rem;
}
}
p { p {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
max-width: 35ch; max-width: 35ch;
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 1.5rem;
} }
#credentials_section{ #credentials_section{
border-top: 1px rgba(var(--text-color), 0.2) solid; border-top: 1px rgba(var(--text-color), 0.2) solid;
@ -435,8 +448,9 @@ sm-button[variant="primary"]{
padding-top: 1.5rem; padding-top: 1.5rem;
animation: slide-down 0.3s forwards; animation: slide-down 0.3s forwards;
} }
#sign_in_with{ #sign_in_with, sm-button{
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 0;
} }
} }
@keyframes slide-down{ @keyframes slide-down{
@ -521,15 +535,11 @@ sm-button[variant="primary"]{
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-areas: 'dp .'; grid-template-areas: 'dp .';
} }
&:focus{
background: rgba(var(--text-color), 0.06);
outline: none;
}
.initial{ .initial{
grid-area: dp; grid-area: dp;
} }
.name{ .name{
font-size: 1rem; font-size: 1em;
font-weight: 500; font-weight: 500;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
} }
@ -538,7 +548,8 @@ sm-button[variant="primary"]{
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
font-weight: 500; font-weight: 400;
font-size: 0.9em;
color: rgba(var(--text-color), 0.9); color: rgba(var(--text-color), 0.9);
} }
.time{ .time{
@ -601,6 +612,10 @@ sm-button[variant="primary"]{
justify-self: center; justify-self: center;
align-self: center; align-self: center;
} }
#warn_no_encryption{
background: rgb(255, 253, 141);
color: #111;
}
.mail-card.unread::before, .mail-card.unread::before,
.contact.unread .initial::before{ .contact.unread .initial::before{
content: ''; content: '';
@ -810,16 +825,28 @@ sm-button[variant="primary"]{
left: 0; left: 0;
right: 0; right: 0;
z-index: 1; z-index: 1;
padding-bottom: 1.5rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
transition: transform 0.3s;
transform: translateX(-110%);
.header{ .header{
padding-bottom: 1rem; padding-bottom: 1rem;
} }
} }
.option{
padding: 1rem 1.5rem;
}
.scrolling-wrapper{
height: 100%;
flex: 1;
overflow-y: auto;
}
#contacts_container{ #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{ #selected_contacts{
@ -846,7 +873,7 @@ sm-button[variant="primary"]{
height: 100vh; height: 100vh;
overflow-y: hidden; overflow-y: hidden;
.header{ .header{
background: rgba(var(--text-color), 0.06); //background: rgba(var(--text-color), 0.06);
padding: 1rem 1.5rem 0 1.5rem; padding: 1rem 1.5rem 0 1.5rem;
position: relative; position: relative;
gap: 0.5rem; gap: 0.5rem;
@ -858,11 +885,23 @@ sm-button[variant="primary"]{
position: absolute; position: absolute;
width: 100%; width: 100%;
padding: 0.7rem 1.5rem; 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); background: rgba(var(--foreground-color), 1);
clip-path: circle(0% at calc(100% - 4rem) center); opacity: 0;
transition: clip-path 0.3s; pointer-events: none;
transition: opacity 0.3s;
&.expand{ &.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{ sm-input{
@ -904,7 +943,7 @@ sm-button[variant="primary"]{
} }
} }
sm-button{ sm-button{
margin: 0 0 0 auto; margin: 0;
.icon{ .icon{
height: 0.9rem; height: 0.9rem;
width: 0.9rem; width: 0.9rem;
@ -1027,7 +1066,6 @@ sm-button[variant="primary"]{
-webkit-hyphens: auto; -webkit-hyphens: auto;
hyphens: auto; hyphens: auto;
white-space: pre-wrap; white-space: pre-wrap;
box-shadow: 0 1px 0.1rem rgba(0, 0, 0, 0.16);
padding: 0.6em 1em; padding: 0.6em 1em;
line-height: 1.5; line-height: 1.5;
a{ a{
@ -1116,7 +1154,6 @@ sm-button[variant="primary"]{
} }
.message-body{ .message-body{
background: none !important; background: none !important;
box-shadow: none !important;
padding: 0 !important; padding: 0 !important;
font-size: 2.6rem; font-size: 2.6rem;
} }
@ -1182,7 +1219,6 @@ sm-button[variant="primary"]{
} }
#chat_container, #chat_container,
#dm_container, #dm_container,
#contacts_container,
#inbox_mail_container, #inbox_mail_container,
#sent_mail_container, #sent_mail_container,
#mail{ #mail{
@ -1311,7 +1347,17 @@ sm-panel{
} }
#landing{ #landing{
grid-template-areas: 'illustration' '.'; 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{ #sing_in{
max-height: 90vh; max-height: 90vh;
@ -1340,7 +1386,7 @@ sm-panel{
} }
#dm_container, #dm_container,
#contact_container{ #contact_container{
gap: 0.5rem; gap: 0.2rem;
} }
#chat{ #chat{
header{ header{
@ -1396,7 +1442,6 @@ sm-panel{
min-width: 24rem; min-width: 24rem;
} }
#landing{ #landing{
height: calc(100vh - 8rem);
align-items: center; align-items: center;
gap: 4vw; gap: 4vw;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;

108
index.html
View File

@ -34,7 +34,7 @@
</div> </div>
</sm-popup> </sm-popup>
<sm-notifications id="notification_drawer"></sm-notifications> <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"> <header class="logo-section align-center">
<svg class="main-logo" viewBox="0 0 27.25 32"> <svg class="main-logo" viewBox="0 0 27.25 32">
<title>RanchiMall</title> <title>RanchiMall</title>
@ -51,10 +51,9 @@
FLO Messenger FLO Messenger
</h4> </h4>
<h1 class="title-font"> <h1 class="title-font">
Truly Secure, Truly Secure, Private and Reliable.
Private and Reliable.
</h1> </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>
<div id="landing_illustration" class="right"> <div id="landing_illustration" class="right">
<img src="assets/message-background.svg" alt=""> <img src="assets/message-background.svg" alt="">
@ -73,23 +72,22 @@
<div class="sign-in-box flex direction-column"> <div class="sign-in-box flex direction-column">
<sm-tab-header target="user_entry"> <sm-tab-header target="user_entry">
<sm-tab>Sign In</sm-tab> <sm-tab>Sign In</sm-tab>
<sm-tab>Sign Up</sm-tab> <sm-tab>Create account</sm-tab>
</sm-tab-header> </sm-tab-header>
<sm-tab-panels id="user_entry"> <sm-tab-panels id="user_entry">
<sm-panel> <sm-panel>
<h3>Welcome back</h3> <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"> <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="sign_in_button" width="cover" variant="primary" disabled>continue</sm-button>
<sm-button id="remove_account" variant="outlined">Remove Account</sm-button> <sm-button id="remove_account" variant="outlined">Remove Account</sm-button>
</form> </form>
</sm-panel> </sm-panel>
<sm-panel> <sm-panel>
<h3>Get started</h3> <h3>Get started</h3>
<p>Create your FLO public and private key pair. <Strong>Don't forget to store them <strong>Don't forget to store them securely. <br> Once lost private key can't be recovered along with your data!</strong>
securely!</Strong></p> <sm-button id="generate_flo_id" onclick="generateId()" variant="primary">Get your FLO credentials
<sm-button id="generate_flo_id" onclick="generateId()" variant="primary">Get FLO credentials
</sm-button> </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>
@ -190,7 +188,7 @@
<sm-button id="send_mail_button" variant="primary" disabled>Send</sm-button> <sm-button id="send_mail_button" variant="primary" disabled>Send</sm-button>
</header> </header>
<div id="auto_complete_contact" class="flex direction-column"> <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 id="mail_contact_list" class="hide-completely contact-list"></div>
</div> </div>
<sm-input id="subject_of_mail" placeholder="Subject" animate></sm-input> <sm-input id="subject_of_mail" placeholder="Subject" animate></sm-input>
@ -279,7 +277,7 @@
</template> </template>
<template id="contact_template"> <template id="contact_template">
<div class="contact interact" tabindex="0"> <div class="contact interact">
<div class="initial flex align-center"></div> <div class="initial flex align-center"></div>
<h4 class="name"></h4> <h4 class="name"></h4>
<!--<sm-menu align-options="right"> <!--<sm-menu align-options="right">
@ -395,8 +393,9 @@
</div> </div>
</sm-panel> </sm-panel>
<sm-panel></sm-panel> <sm-panel></sm-panel>
<sm-panel></sm-panel>
</sm-tab-panels> </sm-tab-panels>
<div id="all_contacts"> <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(false)" viewBox="0 0 64 64"> <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"/> <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>
<h4>Contacts</h4> <sm-input id="search_contacts" type="search" placeholder="Enter name or FLO ID">
<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">
<svg slot="icon" class="icon" viewBox="0 0 64 64"> <svg slot="icon" class="icon" 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"/>
@ -437,9 +416,27 @@
<h4>Add group members</h4> <h4>Add group members</h4>
<div id="selected_contacts_container"> <div id="selected_contacts_container">
</div> </div>
<sm-button>Create</sm-button>
</div> </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> </div>
<div id="chat" class="flex direction-column hide-on-mobile hide-completely"> <div id="chat" class="flex direction-column hide-on-mobile hide-completely">
@ -571,7 +568,7 @@
<section> <section>
<h4>Sign out</h4> <h4>Sign out</h4>
<p>*Remember to store your <strong>PRIVATE KEY </strong> before signing out.</p> <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> </section>
</div> </div>
<div id="personalise_panel" class="panel hide-completely"> <div id="personalise_panel" class="panel hide-completely">
@ -609,9 +606,7 @@
</div> </div>
<div id="about_panel" class="panel hide-completely"> <div id="about_panel" class="panel hide-completely">
<section> <section>
<h4>Version</h4> <p>Created by RanchiMall, a Blockchain incorporated entity</p>
<p>0.0.35</p>
<p>Created by RanchiMall, a blockchain incorporated entity</p>
</section> </section>
</div> </div>
</div> </div>
@ -1156,8 +1151,6 @@
getRef('mail').classList.add('hide-completely') getRef('mail').classList.add('hide-completely')
getRef('chat_page_button').click() getRef('chat_page_button').click()
if (privKeyNotSecured) { 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' getRef("secure_key").textContent = 'Set password'
} else { } else {
getRef("secure_key").textContent = 'Change password' getRef("secure_key").textContent = 'Change password'
@ -1274,7 +1267,7 @@
messenger.getChat(floID).then(chat => { messenger.getChat(floID).then(chat => {
const lastMessage = Object.values(chat).pop() const lastMessage = Object.values(chat).pop()
cardContainer.innerHTML += ` cardContainer.innerHTML += `
<h5 class="last-message">${lastMessage.message}</h5> <p class="last-message">${lastMessage.message}</p>
<h5 class="time">${getFormatedTime(lastMessage.time, true)}</h5>` <h5 class="time">${getFormatedTime(lastMessage.time, true)}</h5>`
}) })
.catch(error => console.log(error)) .catch(error => console.log(error))
@ -1722,24 +1715,37 @@
}) })
// Function to show all contacts side drawer // Function to show all contacts side drawer
let contactsDrawerAnimation
function showContacts(show = true){ function showContacts(show = true){
if(show) if(show){
getRef('all_contacts').classList.add('no-transformations') getRef('all_contacts').classList.remove('hide-completely')
contactsDrawerAnimation = animateTo(getRef('all_contacts'), [
{transform: 'translateY(2rem)'},
{transform: 'none'},
],{
duration: 300,
easing: 'ease'
})
}
else{ else{
getRef('all_contacts').classList.remove('no-transformations')
getRef('selected_contacts').classList.add('hide-completely')
isCreatingGroup = false 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(){ function updateHeight(){
if(window.innerWidth < 640){ if(window.innerWidth < 640){
getRef('chat').style.height = window.innerHeight + 'px' getRef('chat').style.height = window.innerHeight + 'px'
getRef('landing_page').style.height = window.innerHeight + 'px'
} }
else{ else{
getRef('chat').style.height = '100vh' getRef('chat').style.height = '100vh'
getRef('landing_page').style.height = '100vh'
} }
} }
@ -2129,7 +2135,10 @@
function initGroupCreation(){ function initGroupCreation(){
isCreatingGroup = true isCreatingGroup = true
showContacts() showContacts()
getRef('create_group_option').classList.add('hide-completely')
getRef('selected_contacts').classList.remove('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) { function viewMail(mailRef, newView = true) {
@ -2318,6 +2327,7 @@
document.querySelectorAll(`.contact[flo-id="${clickedContact['floID']}"]`).forEach(contact => { document.querySelectorAll(`.contact[flo-id="${clickedContact['floID']}"]`).forEach(contact => {
contact.children[0].textContent = clickedContact['name'].charAt(0) contact.children[0].textContent = clickedContact['name'].charAt(0)
contact.children[1].textContent = clickedContact['name'] contact.children[1].textContent = clickedContact['name']
contact.setAttribute('name', clickedContact['name'])
}) })
notify('Renamed contact', 'success') notify('Renamed contact', 'success')
}) })

19
scripts/components.js
View File

@ -325,7 +325,7 @@ input{
color: var(--accent-color) color: var(--accent-color)
} }
:host(.outlined) .input { :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); background: rgba(var(--foreground-color), 1);
} }
:host(.outlined) .label { :host(.outlined) .label {
@ -1883,6 +1883,7 @@ smPopup.innerHTML = `
-webkit-box-shadow: 0 -1rem 2rem #00000020; -webkit-box-shadow: 0 -1rem 2rem #00000020;
box-shadow: 0 -1rem 2rem #00000020; box-shadow: 0 -1rem 2rem #00000020;
max-height: 90vh; max-height: 90vh;
content-visibility: auto;
} }
.container-header{ .container-header{
display: -webkit-box; display: -webkit-box;
@ -1915,6 +1916,7 @@ smPopup.innerHTML = `
.hide{ .hide{
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
visiblity: none;
} }
@media screen and (min-width: 640px){ @media screen and (min-width: 640px){
.popup{ .popup{
@ -2030,7 +2032,7 @@ customElements.define('sm-popup', class extends HTMLElement {
this.inputFields.forEach(field => { this.inputFields.forEach(field => {
if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX') if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX')
field.checked = false 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 = '' field.value = ''
}) })
}, 300); }, 300);
@ -2053,7 +2055,6 @@ customElements.define('sm-popup', class extends HTMLElement {
} }
handleTouchMove = (e) => { handleTouchMove = (e) => {
e.preventDefault()
if (this.touchStartY < e.changedTouches[0].clientY) { if (this.touchStartY < e.changedTouches[0].clientY) {
this.offset = e.changedTouches[0].clientY - this.touchStartY; this.offset = e.changedTouches[0].clientY - this.touchStartY;
this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup()) 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.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'sm-textarea', 'radio')
}) })
this.popupHeader.addEventListener('touchstart', (e) => {this.handleTouchStart(e)}) this.popupHeader.addEventListener('touchstart', (e) => { this.handleTouchStart(e) }, {passive: true})
this.popupHeader.addEventListener('touchmove', (e) => {this.handleTouchMove(e)}) this.popupHeader.addEventListener('touchmove', (e) => {this.handleTouchMove(e)}, {passive: true})
this.popupHeader.addEventListener('touchend', (e) => {this.handleTouchEnd(e)}) this.popupHeader.addEventListener('touchend', (e) => {this.handleTouchEnd(e)}, {passive: true})
} }
disconnectedCallback() { disconnectedCallback() {
this.popupHeader.removeEventListener('touchstart', this.handleTouchStart) this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, {passive: true})
this.popupHeader.removeEventListener('touchmove', this.handleTouchMove) this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, {passive: true})
this.popupHeader.removeEventListener('touchend', this.handleTouchEnd) this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, {passive: true})
} }
}) })