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

v0.32.87

Browse Source 
UX: add label for toggling pin visibility

UI: make input field UI more consistent across pages

UI: show full time and date in opened mail

UI: mail cards now show sender's initials like chats
This commit is contained in:
sairaj mote 2021-02-18 01:17:28 +05:30
parent 719035bb7a
commit 937bbda091
6 changed files with 209 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
css/main.css
View File

@ -370,7 +370,6 @@ 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;
} }
#landing .logo-section { #landing .logo-section {
padding: 1.5rem; padding: 1.5rem;
@ -388,7 +387,8 @@ sm-button[variant=primary] {
z-index: 1; z-index: 1;
} }
#landing .left h4 { #landing .left h4 {
color: rgba(var(--foreground-color), 1); color: var(--accent-color);
margin-bottom: 0.5rem;
font-weight: 500; font-weight: 500;
} }
#landing .left sm-button { #landing .left sm-button {
@ -409,6 +409,7 @@ sm-button[variant=primary] {
} }
#landing_page { #landing_page {
overflow-y: auto;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
} }
@ -784,17 +785,8 @@ sm-button[variant=primary] {
color: #111; color: #111;
} }
.mail-card.unread::before { .contact .initial::after,
content: ""; .mail-card .initial::after {
position: absolute;
padding: 0.4rem;
border-radius: 1rem;
top: 0;
left: 0;
background: var(--accent-color);
}
.contact .initial::after {
content: ""; content: "";
position: absolute; position: absolute;
bottom: -0.1rem; bottom: -0.1rem;
@ -808,12 +800,14 @@ sm-button[variant=primary] {
transition: transform 0.3s; transition: transform 0.3s;
} }
.contact.unread .initial::after { .contact.unread .initial::after,
.mail-card.unread .initial::after {
transform: scale(1); transform: scale(1);
} }
.mail-card.unread .time, .mail-card.unread .time, .mail-card.unread .date,
.contact.unread .time { .contact.unread .time,
.contact.unread .date {
color: var(--accent-color); color: var(--accent-color);
} }
.mail-card.unread h4, .mail-card.unread h4,
@ -829,29 +823,45 @@ sm-button[variant=primary] {
.mail-card { .mail-card {
position: relative; position: relative;
display: flex; display: grid;
flex-direction: column; gap: 0 1rem;
padding: 1rem 1.5rem; padding: 0.8rem 1.5rem;
align-items: center;
flex-shrink: 0;
user-select: none;
grid-template-columns: auto 1fr auto;
grid-template-areas: "dp sender date" "dp subject subject" "dp desc desc";
}
.mail-card .initial {
grid-area: dp;
align-self: flex-start;
height: 2rem;
width: 2rem;
font-size: 1rem;
} }
.mail-card .sender { .mail-card .sender {
color: rgba(var(--text-color), 0.9); width: 100%;
font-size: 0.8rem;
font-weight: 500; font-weight: 500;
overflow: hidden; color: rgba(var(--text-color), 0.8);
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin-right: 1rem; overflow: hidden;
} }
.mail-card .date { .mail-card .date {
grid-area: date;
margin-left: auto; margin-left: auto;
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;
} }
.mail-card .subject { .mail-card .subject {
grid-area: subject;
font-size: 1em; font-size: 1em;
margin-top: 0.5rem; margin-top: 0.3rem;
font-weight: 500; font-weight: 500;
} }
.mail-card .description { .mail-card .description {
grid-area: desc;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -891,21 +901,28 @@ sm-button[variant=primary] {
height: 100%; height: 100%;
background: rgba(var(--text-color), 0.2); background: rgba(var(--text-color), 0.2);
} }
.mail header { .mail .mail-header {
align-self: start; align-self: start;
margin-bottom: 1rem; margin-bottom: 1rem;
padding-bottom: 0.5rem; padding: 1.5rem;
border-bottom: solid 1px rgba(var(--text-color), 0.2);
} }
.mail header h4 { .mail .sender-name {
font-weight: 500; font-weight: 500;
margin-bottom: 0.5rem;
} }
.mail header .flo-id { .mail .flo-id {
font-weight: 400; font-weight: 400;
max-width: 90%; max-width: 90%;
} }
.mail .flex:first-of-type {
margin-bottom: 1rem;
}
.mail .back {
margin: 0 0 0 -0.5rem;
}
.mail .mail-subject, .mail .mail-subject,
.mail .mail-content { .mail .mail-content {
padding: 0 1.5rem;
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
} }
@ -1085,7 +1102,7 @@ sm-button[variant=primary] {
} }
#contacts, #mails, #settings_page { #contacts, #mails, #settings_page {
height: 100%; height: 100vh;
overflow-y: hidden; overflow-y: hidden;
} }
#contacts .header, #mails .header, #settings_page .header { #contacts .header, #mails .header, #settings_page .header {
@ -1094,9 +1111,6 @@ sm-button[variant=primary] {
gap: 0.5rem; gap: 0.5rem;
min-height: 4rem; min-height: 4rem;
} }
#contacts .header sm-tab::part(tab), #mails .header sm-tab::part(tab), #settings_page .header sm-tab::part(tab) {
padding: 0.8rem 1rem;
}
#contacts .header .expanding-search, #mails .header .expanding-search, #settings_page .header .expanding-search { #contacts .header .expanding-search, #mails .header .expanding-search, #settings_page .header .expanding-search {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -1528,7 +1542,7 @@ sm-button[variant=primary] {
#emoji_picker { #emoji_picker {
--background: rgba(var(--text-color), 0.06); --background: rgba(var(--text-color), 0.06);
--border-size: 0; --border-size: 0;
--input-border-color: rgba(var(--text-color), 0.6); --input-border-color: none;
--input-padding: 0.4rem 1rem; --input-padding: 0.4rem 1rem;
--outline-color: var(--accent-color); --outline-color: var(--accent-color);
--input-font-color: var(--text-color); --input-font-color: var(--text-color);
@ -1605,17 +1619,15 @@ sm-button[variant=primary] {
padding: 0.5rem 1.5rem; padding: 0.5rem 1.5rem;
} }
sm-tab-panels { .mail-container {
overflow: hidden auto; height: 100%;
} flex-direction: column;
sm-panel {
width: 100%;
overflow-y: auto; overflow-y: auto;
} }
#inbox_mail_container, #inbox_mail_container,
#sent_mail_container { #sent_mail_container {
gap: 0.2rem;
padding-bottom: 6rem; padding-bottom: 6rem;
} }
@ -1642,13 +1654,13 @@ sm-panel {
#mail { #mail {
height: 100vh; height: 100vh;
padding: 0 1.5rem;
align-items: flex-start; align-items: flex-start;
} }
#mail .flex { #mail > .flex {
margin-top: 1rem; padding: 0 1.5rem;
margin-top: 2rem;
} }
#mail .flex sm-button:first-of-type { #mail > .flex sm-button:first-of-type {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
@ -1830,13 +1842,9 @@ sm-panel {
align-items: flex-start; align-items: flex-start;
} }
#landing .title-font { #landing .title-font {
text-align: center;
font-size: 2rem; font-size: 2rem;
font-weight: 500; font-weight: 500;
} }
#landing .left p {
text-align: center;
}
#landing sm-button { #landing sm-button {
width: 100%; width: 100%;
display: flex; display: flex;
@ -1941,9 +1949,6 @@ sm-panel {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
padding: 0 4vw; padding: 0 4vw;
} }
#landing .left h4 {
color: var(--accent-color);
}
#sign_in_page { #sign_in_page {
place-content: center; place-content: center;
@ -2054,7 +2059,7 @@ sm-panel {
} }
#chat_page, #mail_page { #chat_page, #mail_page {
grid-template-columns: 21rem 1fr; grid-template-columns: 23rem 1fr;
} }
#chat_details_panel { #chat_details_panel {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

113
css/main.scss
View File

@ -320,7 +320,6 @@ 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;
@ -336,7 +335,8 @@ sm-button[variant="primary"]{
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
z-index: 1; z-index: 1;
h4{ h4{
color: rgba(var(--foreground-color), 1); color: var(--accent-color);
margin-bottom: 0.5rem;
font-weight: 500; font-weight: 500;
} }
sm-button{ sm-button{
@ -360,6 +360,7 @@ sm-button[variant="primary"]{
} }
} }
#landing_page{ #landing_page{
overflow-y: auto;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
} }
.logo-section{ .logo-section{
@ -724,16 +725,8 @@ sm-button[variant="primary"]{
background: rgb(255, 253, 141); background: rgb(255, 253, 141);
color: #111; color: #111;
} }
.mail-card.unread::before{ .contact .initial::after,
content: ''; .mail-card .initial::after{
position: absolute;
padding: 0.4rem;
border-radius: 1rem;
top: 0;
left: 0;
background: var(--accent-color);
}
.contact .initial::after{
content: ''; content: '';
position: absolute; position: absolute;
bottom: -0.1rem; bottom: -0.1rem;
@ -746,12 +739,13 @@ sm-button[variant="primary"]{
transform: scale(0); transform: scale(0);
transition: transform 0.3s; transition: transform 0.3s;
} }
.contact.unread .initial::after{ .contact.unread .initial::after,
.mail-card.unread .initial::after{
transform: scale(1); transform: scale(1);
} }
.mail-card.unread, .mail-card.unread,
.contact.unread{ .contact.unread{
.time{ .time, .date{
color: var(--accent-color); color: var(--accent-color);
} }
h4{ h4{
@ -763,28 +757,46 @@ sm-button[variant="primary"]{
} }
.mail-card{ .mail-card{
position: relative; position: relative;
display: flex; display: grid;
flex-direction: column; gap: 0 1rem;
padding: 1rem 1.5rem; padding: 0.8rem 1.5rem;
align-items: center;
flex-shrink: 0;
user-select: none;
grid-template-columns: auto 1fr auto;
grid-template-areas: 'dp sender date'
'dp subject subject'
'dp desc desc' ;
.initial{
grid-area: dp;
align-self: flex-start;
height: 2rem;
width: 2rem;
font-size: 1rem;
}
.sender{ .sender{
color: rgba(var(--text-color), 0.9); width: 100%;
font-size: 0.8rem;
font-weight: 500; font-weight: 500;
overflow: hidden; color: rgba(var(--text-color), 0.8);
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin-right: 1rem; overflow: hidden;
} }
.date{ .date{
grid-area: date;
margin-left: auto; margin-left: auto;
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;
} }
.subject{ .subject{
grid-area: subject;
font-size: 1em; font-size: 1em;
margin-top: 0.5rem; margin-top: 0.3rem;
font-weight: 500; font-weight: 500;
} }
.description{ .description{
grid-area: desc;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -822,21 +834,28 @@ sm-button[variant="primary"]{
height: 100%; height: 100%;
background: rgba(var(--text-color), 0.2); background: rgba(var(--text-color), 0.2);
} }
header{ .mail-header{
align-self: start; align-self: start;
margin-bottom: 1rem; margin-bottom: 1rem;
padding-bottom: 0.5rem; padding: 1.5rem;
border-bottom: solid 1px rgba(var(--text-color), 0.2); }
h4{ .sender-name{
font-weight: 500; font-weight: 500;
} margin-bottom: 0.5rem;
.flo-id{ }
font-weight: 400; .flo-id{
max-width: 90%; font-weight: 400;
} max-width: 90%;
}
.flex:first-of-type{
margin-bottom: 1rem;
}
.back{
margin: 0 0 0 -0.5rem;
} }
.mail-subject, .mail-subject,
.mail-content{ .mail-content{
padding: 0 1.5rem;
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
} }
@ -1011,16 +1030,13 @@ sm-button[variant="primary"]{
grid-template-rows: max-content 1fr; grid-template-rows: max-content 1fr;
} }
#contacts, #mails, #settings_page{ #contacts, #mails, #settings_page{
height: 100%; height: 100vh;
overflow-y: hidden; overflow-y: hidden;
.header{ .header{
padding: 1rem 1.5rem 1rem 1.5rem; padding: 1rem 1.5rem 1rem 1.5rem;
position: relative; position: relative;
gap: 0.5rem; gap: 0.5rem;
min-height: 4rem; min-height: 4rem;
sm-tab::part(tab){
padding: 0.8rem 1rem;
}
.expanding-search{ .expanding-search{
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -1435,7 +1451,7 @@ sm-button[variant="primary"]{
#emoji_picker{ #emoji_picker{
--background: rgba(var(--text-color), 0.06); --background: rgba(var(--text-color), 0.06);
--border-size: 0; --border-size: 0;
--input-border-color: rgba(var(--text-color), 0.6); --input-border-color: none;
--input-padding: 0.4rem 1rem; --input-padding: 0.4rem 1rem;
--outline-color: var(--accent-color); --outline-color: var(--accent-color);
--input-font-color: var(--text-color); --input-font-color: var(--text-color);
@ -1504,17 +1520,16 @@ sm-button[variant="primary"]{
padding: 0.5rem 1.5rem; padding: 0.5rem 1.5rem;
} }
} }
sm-tab-panels{ .mail-container{
overflow: hidden auto; height: 100%;
} flex-direction: column;
sm-panel{
width: 100%;
overflow-y: auto; overflow-y: auto;
} }
#inbox_mail_container, #inbox_mail_container,
#sent_mail_container #sent_mail_container
{ {
gap: 0.2rem;
padding-bottom: 6rem; padding-bottom: 6rem;
} }
.has-bg-image{ .has-bg-image{
@ -1543,9 +1558,10 @@ sm-panel{
} }
#mail{ #mail{
height: 100vh; height: 100vh;
padding: 0 1.5rem;
align-items: flex-start; align-items: flex-start;
.flex{margin-top: 1rem; & > .flex{
padding: 0 1.5rem;
margin-top: 2rem;
sm-button:first-of-type{ sm-button:first-of-type{
margin-right: 0.5rem; margin-right: 0.5rem;
} }
@ -1720,13 +1736,9 @@ sm-panel{
grid-template-areas: 'illustration' '.'; grid-template-areas: 'illustration' '.';
align-items: flex-start; align-items: flex-start;
.title-font{ .title-font{
text-align: center;
font-size: 2rem; font-size: 2rem;
font-weight: 500; font-weight: 500;
} }
.left p {
text-align: center;
}
sm-button{ sm-button{
width: 100%; width: 100%;
display: flex; display: flex;
@ -1819,11 +1831,6 @@ sm-panel{
gap: 4vw; gap: 4vw;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
padding: 0 4vw; padding: 0 4vw;
.left{
h4{
color: var(--accent-color);
}
}
} }
#sign_in_page{ #sign_in_page{
place-content: center; place-content: center;
@ -1925,7 +1932,7 @@ sm-panel{
} }
} }
#chat_page, #mail_page{ #chat_page, #mail_page{
grid-template-columns: 21rem 1fr; grid-template-columns: 23rem 1fr;
} }
#chat_details_panel{ #chat_details_panel{
position: relative; position: relative;

123
index.html
View File

@ -272,28 +272,29 @@
<!-- Templates --> <!-- Templates -->
<template id="mail_card_template"> <template id="mail_card_template">
<div class="mail-card interact"> <li class="mail-card interact">
<div class="flex align-center"> <div class="initial flex align-center"></div>
<h5 class="sender"></h5> <h5 class="sender"></h5>
<h5 class="date"></h5> <h5 class="date"></h5>
</div>
<h4 class="subject text-overflow"></h4> <h4 class="subject text-overflow"></h4>
<p class="description"></p> <p class="description"></p>
</div> </li>
</template> </template>
<template id="mail_template"> <template id="mail_template">
<div class="mail"> <div class="mail">
<header class="flex align-center"> <header class="mail-header flex direction-column">
<svg class="icon hide-on-desktop back-button" onclick="goto('mails')" viewBox="0 0 64 64"> <div class="flex space-between">
<title>Go to main page</title> <svg xmlns="http://www.w3.org/2000/svg" class="icon back hide-on-desktop" onclick="goto('mails')" viewBox="0 0 64 64">
<polyline points="48.01 0.35 16.35 32 48.01 63.65"/> <line x1="1" y1="32" x2="64" y2="32"/>
</svg> <polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
<div class="rest"> </svg>
<h5 class="date justify-right"></h5>
</div>
<div class="mail-details flex direction-column">
<h4 class="sender-name"></h4> <h4 class="sender-name"></h4>
<h5 class="flo-id text-overflow"></h5> <h5 class="flo-id text-overflow"></h5>
</div> </div>
<h5 class="date justify-right"></h5>
</header> </header>
<h4 class="mail-subject"></h4> <h4 class="mail-subject"></h4>
<p class="mail-content"></p> <p class="mail-content"></p>
@ -502,7 +503,7 @@
<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 outlined"></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" 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"/> <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>
@ -566,11 +567,11 @@
<line y1="53.34" x2="64" y2="53.34"/> <line y1="53.34" x2="64" y2="53.34"/>
</svg> </svg>
<h4>Mail</h4> <h4>Mail</h4>
<sm-select id="mail_type_selector">
<sm-option value="inbox">Inbox</sm-option>
<sm-option value="sent">Sent</sm-option>
</sm-select>
</div> </div>
<sm-tab-header target="all_mail_container">
<sm-tab>Inbox</sm-tab>
<sm-tab>Sent</sm-tab>
</sm-tab-header>
</header> </header>
<sm-button variant="primary" id="new_mail_button" class="fab round"> <sm-button variant="primary" id="new_mail_button" class="fab round">
<svg class="icon" viewBox="0 0 64 64"> <svg class="icon" viewBox="0 0 64 64">
@ -579,23 +580,27 @@
</svg> </svg>
New Mail New Mail
</sm-button> </sm-button>
<div class="empty-state flex direction-column align-center" id="no_mails"> <ul id="inbox_mail_container" class="mail-container flex observe-empty-state"></ul>
<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 mails will appear here.</h4> <h4>All your received mails will appear here.</h4>
<p class="light-text">Tap/click on 'New Mail' button below to compose new mail.</p>
</div>
<ul id="sent_mail_container" class="mail-container flex observe-empty-state hide-completely"></ul>
<div class="empty-state flex direction-column align-center">
<svg class="icon new-conversation" viewBox="0 0 512 512">
<path d="M227,26.16,20.5,177.56a49,49,0,0,0-20,39.53V446.35a49,49,0,0,0,49,49h413a49,49,0,0,0,49-49h0V217.09a49,49,0,0,0-20-39.53L285,26.16A49,49,0,0,0,227,26.16Z"/>
<path d="M71,250.29l166.31,86.88a39,39,0,0,0,36.22,0L441,249.66"/>
</svg>
<h4>All your sent mails will appear here.</h4>
<p class="light-text">Tap/click on 'New Mail' button below to compose new mail.</p> <p class="light-text">Tap/click on 'New Mail' button below to compose new mail.</p>
</div> </div>
<sm-tab-panels id="all_mail_container">
<sm-panel id="inbox_mail_container" class="flex">
</sm-panel>
<sm-panel id="sent_mail_container" class="flex"></sm-panel>
</sm-tab-panels>
</div> </div>
<div id="mail" class="flex hide-on-mobile hide-completely"> <div id="mail" class="flex hide-on-mobile hide-completely">
<div id="mail_container"> <div id="mail_container"></div>
</div>
<div class="flex"> <div class="flex">
<sm-button id="prev_mail">View Previous Mail</sm-button> <sm-button id="prev_mail">View Previous Mail</sm-button>
<sm-button id="show_reply_popup">reply</sm-button> <sm-button id="show_reply_popup">reply</sm-button>
@ -1049,6 +1054,9 @@
case 'page': case 'page':
showPage(e.state.id) showPage(e.state.id)
break; break;
case 'subpage':
showPage(e.state.id, true)
break;
} }
}) })
@ -1195,7 +1203,7 @@
return `${month} ${year}`; return `${month} ${year}`;
} }
else else
return `${month} ${date} ${year}`; return `${finalHours} ${month} ${date} ${year}`;
} catch (e) { } catch (e) {
console.error(e); console.error(e);
return time; return time;
@ -1503,7 +1511,7 @@
.then(r => console.log(r)) .then(r => console.log(r))
console.log(`Load Successful!`) console.log(`Load Successful!`)
if(isPinSet){ if(isPinSet){
showPage('main_page') showPage('chat_page', true)
} }
}).catch(error => { }).catch(error => {
//console.error(`Failed to load data`) //console.error(`Failed to load data`)
@ -1515,10 +1523,7 @@
} }
</script> </script>
<script> <script>
let activePage = { let activePage = {},
page: getRef('chat_page'),
button: getRef('chat_page_button')
},
activeChatPage = getRef('contacts'), activeChatPage = getRef('contacts'),
activeMailPage = getRef('mails'), activeMailPage = getRef('mails'),
activeChat = {}, activeChat = {},
@ -1549,6 +1554,12 @@
contact = floGlobals.contacts[floID] || floID contact = floGlobals.contacts[floID] || floID
if(markUnread) if(markUnread)
cardContainer.classList.add('unread') cardContainer.classList.add('unread')
let initial = cardContainer.querySelector('.initial')
let color = contactColor(floID)
initial.textContent = contact.charAt(0)
cardContainer.setAttribute("background-color", color)
initial.setAttribute(`style`, `background-color: ${color}`)
cardContainer.querySelector('.sender').textContent = contact cardContainer.querySelector('.sender').textContent = contact
cardContainer.querySelector('.subject').textContent = subject cardContainer.querySelector('.subject').textContent = subject
cardContainer.querySelector('.date').textContent = getFormatedTime(timestamp, true) cardContainer.querySelector('.date').textContent = getFormatedTime(timestamp, true)
@ -1572,7 +1583,7 @@
} }
floID = to.join(', ') floID = to.join(', ')
} else { } else {
senderName = `From : ${floGlobals.contacts[from] || ''}`; senderName = `${floGlobals.contacts[from] || ''}`;
floID = from floID = from
} }
card.querySelector('.sender-name').textContent = senderName card.querySelector('.sender-name').textContent = senderName
@ -1594,6 +1605,8 @@
cardContainer.setAttribute("search-tags", `${name}${floID}`) cardContainer.setAttribute("search-tags", `${name}${floID}`)
let initial = card.querySelector('.initial') let initial = card.querySelector('.initial')
let color = contactColor(floID) let color = contactColor(floID)
cardContainer.setAttribute("background-color", color)
initial.setAttribute(`style`, `background-color: ${color}`)
if(type === 'group'){ if(type === 'group'){
initial.innerHTML = ` initial.innerHTML = `
@ -1605,8 +1618,6 @@
cardContainer.querySelector('.name').textContent = name !== 'Unknown' ? name : floID cardContainer.querySelector('.name').textContent = name !== 'Unknown' ? name : floID
initial.textContent = name !== 'Unknown' ? name.charAt(0) : floID.charAt(0) initial.textContent = name !== 'Unknown' ? name.charAt(0) : floID.charAt(0)
} }
cardContainer.setAttribute("background-color", color)
initial.setAttribute(`style`, `background-color: ${color};`)
if(contactOnly || type === 'contact'){ if(contactOnly || type === 'contact'){
if(isAdmin){ if(isAdmin){
@ -2011,7 +2022,9 @@
showPanel(target, target.dataset.target) showPanel(target, target.dataset.target)
} }
if(e.target.closest('.navbar-item') && activePage.button !== e.target.closest('.navbar-item')){ if(e.target.closest('.navbar-item') && activePage.button !== e.target.closest('.navbar-item')){
showPage(e.target.closest('.navbar-item').dataset.target, e.target.closest('.navbar-item'), true) const targetPage = e.target.closest('.navbar-item').dataset.target
showPage(targetPage, true)
history.pushState({type: 'subpage', id: targetPage}, null, `#${targetPage}`)
} }
if(e.target.closest('#send_mail_to') || e.target.closest('#mail_contact_list')){ if(e.target.closest('#send_mail_to') || e.target.closest('#mail_contact_list')){
getRef('mail_contact_list').classList.remove('hide-completely') getRef('mail_contact_list').classList.remove('hide-completely')
@ -2462,7 +2475,7 @@
} }
getRef("mails").addEventListener('click', function (e) { getRef("mails").addEventListener('click', function (e) {
if (e.target.closest(".mail-card") && e.target.closest(".mail-card") !== activeMail){ if (e.target.closest(".mail-card")){
getRef('mail_page_button').setAttribute('data-notifications', '0') getRef('mail_page_button').setAttribute('data-notifications', '0')
getRef('mail').classList.remove('hide-completely') getRef('mail').classList.remove('hide-completely')
e.target.closest(".mail-card").classList.remove('unread') e.target.closest(".mail-card").classList.remove('unread')
@ -2695,7 +2708,9 @@
activeChat.chatCard.classList.remove('unread') activeChat.chatCard.classList.remove('unread')
} }
getRef('scroll_to_bottom').classList.remove('new-message') getRef('scroll_to_bottom').classList.remove('new-message')
getRef('chat_middle').scrollTo({top: getRef('chat_middle').scrollHeight, behavior: smooth ? 'smooth': undefined}) setTimeout(() => {
getRef('chat_middle').scrollTo({top: getRef('chat_middle').scrollHeight, behavior: smooth ? 'smooth': undefined})
}, smooth ? 300 : 0);
} }
let startIndex = 0, let startIndex = 0,
@ -2874,8 +2889,8 @@
} }
function renderMailList(mails, markUnread = true) { function renderMailList(mails, markUnread = true) {
let inboxMailFrag = document.createDocumentFragment() const inboxMailFrag = document.createDocumentFragment()
let sentMailFrag = document.createDocumentFragment() const sentMailFrag = document.createDocumentFragment()
for (let m in mails) { for (let m in mails) {
let { from, to, prev, ref, subject, time, content } = mails[m] let { from, to, prev, ref, subject, time, content } = mails[m]
if(from === myFloID) if(from === myFloID)
@ -2885,18 +2900,12 @@
} }
getRef('inbox_mail_container').prepend(inboxMailFrag) getRef('inbox_mail_container').prepend(inboxMailFrag)
getRef('sent_mail_container').prepend(sentMailFrag) getRef('sent_mail_container').prepend(sentMailFrag)
if(getRef('inbox_mail_container').children.length || getRef('sent_mail_container').children.length){
getRef('no_mails').classList.add('hide-completely')
getRef('all_mail_container').classList.remove('hide-completely')
}
else{
getRef('all_mail_container').classList.add('hide-completely')
getRef('no_mails').classList.remove('hide-completely')
}
} }
function viewMail(mailRef, newView = true) { function viewMail(mailRef, newView = true) {
//clear the container and display popup (if needed) //stop rerendering if same mail is already open
if(mailRef === (activeMail ? activeMail.getAttribute('name') : '')) return
//clear the container
if (newView) if (newView)
clearElement(getRef("mail_container")) clearElement(getRef("mail_container"))
@ -2958,6 +2967,11 @@
}).catch(error => notify("Failed to reply mail!", "error", error)) }).catch(error => notify("Failed to reply mail!", "error", error))
} }
document.getElementById('mail_type_selector').addEventListener('change', e => {
document.querySelectorAll('.mail-container').forEach(container => container.classList.add('hide-completely'))
getRef(`${e.detail.value}_mail_container`).classList.remove('hide-completely')
})
const allPanels = document.querySelectorAll('.panel'), const allPanels = document.querySelectorAll('.panel'),
allSidebarItems = document.querySelectorAll('.sidebar-item') allSidebarItems = document.querySelectorAll('.sidebar-item')
@ -3426,8 +3440,9 @@
.catch(err => console.log(err)) .catch(err => console.log(err))
} }
function showPage(targetPage, targetButton, subpage){ function showPage(targetPage, subpage){
if(subpage){ if(subpage){
const targetButton = document.querySelector(`.navbar-item[data-target="${targetPage}"]`)
targetButton.classList.add('active') targetButton.classList.add('active')
if(activePage.page){ if(activePage.page){
activePage.page.classList.add('hide-completely') activePage.page.classList.add('hide-completely')
@ -3435,6 +3450,10 @@
} }
activePage.button = targetButton activePage.button = targetButton
activePage.page = getRef(targetPage); activePage.page = getRef(targetPage);
if(getRef('main_page').classList.contains('hide-completely')){
document.querySelectorAll('.page').forEach(page => page.classList.add('hide-completely'))
getRef('main_page').classList.remove('hide-completely')
}
if(getRef('main_navbar').classList.contains('no-transformations')){ if(getRef('main_navbar').classList.contains('no-transformations')){
getRef('main_navbar').classList.remove('no-transformations') getRef('main_navbar').classList.remove('no-transformations')
getRef('navbar_backdrop').classList.add('hide') getRef('navbar_backdrop').classList.add('hide')
@ -3488,7 +3507,7 @@
getRef('first_pin').clear() getRef('first_pin').clear()
getRef('confirm_pin').clear() getRef('confirm_pin').clear()
isPinSet = true; isPinSet = true;
showPage('main_page') showPage('chat_page', true)
}) })
} }
} }

31
scripts/components.js
View File

@ -1377,7 +1377,10 @@ customElements.define('sm-select', class extends HTMLElement {
this.shadowRoot.querySelector('.option-text').textContent = e.detail.text; this.shadowRoot.querySelector('.option-text').textContent = e.detail.text;
this.dispatchEvent(new CustomEvent('change', { this.dispatchEvent(new CustomEvent('change', {
bubbles: true, bubbles: true,
composed: true composed: true,
detail: {
value: e.detail.value
}
})) }))
if (previousOption) { if (previousOption) {
previousOption.classList.remove('check-selected') previousOption.classList.remove('check-selected')
@ -3959,12 +3962,17 @@ pinInput.innerHTML = `
box-shadow: 0 0 0 0.2rem var(--accent-color) inset; box-shadow: 0 0 0 0.2rem var(--accent-color) inset;
} }
button{ button{
display: flex;
align-items: center;
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
color: inherit;
font-family: inherit;
margin: 0 1rem;
} }
svg{ svg{
margin: 0 1rem; margin: 0 0.5rem 0 0;
height: 1.5rem; height: 1.5rem;
width: 1.5rem; width: 1.5rem;
fill: rgba(var(--text-color), 1); fill: rgba(var(--text-color), 1);
@ -3974,7 +3982,8 @@ pinInput.innerHTML = `
<div class="pin-container"></div> <div class="pin-container"></div>
<button> <button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="9.95"/><path d="M32,12.28C11.7,12.28,0,32,0,32S11.7,51.72,32,51.72,64,32,64,32,52.3,12.28,32,12.28Zm0,33.35A13.63,13.63,0,1,1,45.63,32,13.64,13.64,0,0,1,32,45.63Z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="9.95"/><path d="M32,12.28C11.7,12.28,0,32,0,32S11.7,51.72,32,51.72,64,32,64,32,52.3,12.28,32,12.28Zm0,33.35A13.63,13.63,0,1,1,45.63,32,13.64,13.64,0,0,1,32,45.63Z"/></svg>
</button> Show
</button>
</div> </div>
`; `;
@ -3994,7 +4003,7 @@ customElements.define('pin-input',
this.toggleButton = this.shadowRoot.querySelector('button') this.toggleButton = this.shadowRoot.querySelector('button')
} }
set value(val) { set value(val) {
this.arrayOfInput.forEach((input, index) => input.value = val[index] ? val[index] : '') this.arrayOfInput.forEach((input, index) => input.value = val[index] ? val[index] : '')
} }
@ -4090,13 +4099,15 @@ customElements.define('pin-input',
if (this.arrayOfInput[0].getAttribute('type') === 'password') { if (this.arrayOfInput[0].getAttribute('type') === 'password') {
this.toggleButton.innerHTML = ` this.toggleButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M22.05,31.44a10.12,10.12,0,0,0,.1,1.36L33.36,21.59a10.12,10.12,0,0,0-1.36-.1A10,10,0,0,0,22.05,31.44Z"/><path d="M19.11,35.84A13.6,13.6,0,0,1,36.4,18.55l5.28-5.27A31,31,0,0,0,32,11.72c-20.3,0-32,19.72-32,19.72A48.48,48.48,0,0,0,11.27,43.69Z"/><path d="M52.73,19.2l6.14-6.14L54.63,8.81l-7,7h0l-6,6h0L39,24.41h0l-7,7L20.09,43.35,16.4,47h0l-7,7,4.25,4.24,8.71-8.71A31.15,31.15,0,0,0,32,51.16c20.3,0,32-19.72,32-19.72A48.54,48.54,0,0,0,52.73,19.2ZM32,45.07a13.63,13.63,0,0,1-4.4-.74l3-3a10.12,10.12,0,0,0,1.36.1,10,10,0,0,0,10-9.95,10.12,10.12,0,0,0-.1-1.36l3-3A13.6,13.6,0,0,1,32,45.07Z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M22.05,31.44a10.12,10.12,0,0,0,.1,1.36L33.36,21.59a10.12,10.12,0,0,0-1.36-.1A10,10,0,0,0,22.05,31.44Z"/><path d="M19.11,35.84A13.6,13.6,0,0,1,36.4,18.55l5.28-5.27A31,31,0,0,0,32,11.72c-20.3,0-32,19.72-32,19.72A48.48,48.48,0,0,0,11.27,43.69Z"/><path d="M52.73,19.2l6.14-6.14L54.63,8.81l-7,7h0l-6,6h0L39,24.41h0l-7,7L20.09,43.35,16.4,47h0l-7,7,4.25,4.24,8.71-8.71A31.15,31.15,0,0,0,32,51.16c20.3,0,32-19.72,32-19.72A48.54,48.54,0,0,0,52.73,19.2ZM32,45.07a13.63,13.63,0,0,1-4.4-.74l3-3a10.12,10.12,0,0,0,1.36.1,10,10,0,0,0,10-9.95,10.12,10.12,0,0,0-.1-1.36l3-3A13.6,13.6,0,0,1,32,45.07Z"/></svg>
` Hide
this.arrayOfInput.forEach(input => input.setAttribute('type', 'text')) `
} this.arrayOfInput.forEach(input => input.setAttribute('type', 'text'))
else { }
this.toggleButton.innerHTML = ` else {
this.toggleButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="9.95"/><path d="M32,12.28C11.7,12.28,0,32,0,32S11.7,51.72,32,51.72,64,32,64,32,52.3,12.28,32,12.28Zm0,33.35A13.63,13.63,0,1,1,45.63,32,13.64,13.64,0,0,1,32,45.63Z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="9.95"/><path d="M32,12.28C11.7,12.28,0,32,0,32S11.7,51.72,32,51.72,64,32,64,32,52.3,12.28,32,12.28Zm0,33.35A13.63,13.63,0,1,1,45.63,32,13.64,13.64,0,0,1,32,45.63Z"/></svg>
` Show
`
this.arrayOfInput.forEach(input => input.setAttribute('type', 'password')) this.arrayOfInput.forEach(input => input.setAttribute('type', 'password'))
} }

5
test.html
View File

@ -9,12 +9,7 @@
<body data-theme="dark"> <body data-theme="dark">
<script src="scripts/components.js"></script> <script src="scripts/components.js"></script>
<script src="scripts/script.js"></script> <script src="scripts/script.js"></script>
<pin-input id="input" pin-length="4"></pin-input>
<script> <script>
const input = document.getElementById('input')
document.addEventListener('pincomplete', e => {
console.log(e.detail.value)
})
</script> </script>
</body> </body>
</html> </html>