v0.32.87
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
parent
719035bb7a
commit
937bbda091
107
css/main.css
107
css/main.css
@ -370,7 +370,6 @@ sm-button[variant=primary] {
|
||||
padding: 0 1.5rem;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#landing .logo-section {
|
||||
padding: 1.5rem;
|
||||
@ -388,7 +387,8 @@ sm-button[variant=primary] {
|
||||
z-index: 1;
|
||||
}
|
||||
#landing .left h4 {
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
color: var(--accent-color);
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
#landing .left sm-button {
|
||||
@ -409,6 +409,7 @@ sm-button[variant=primary] {
|
||||
}
|
||||
|
||||
#landing_page {
|
||||
overflow-y: auto;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
@ -784,17 +785,8 @@ sm-button[variant=primary] {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.mail-card.unread::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
padding: 0.4rem;
|
||||
border-radius: 1rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
.contact .initial::after {
|
||||
.contact .initial::after,
|
||||
.mail-card .initial::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -0.1rem;
|
||||
@ -808,12 +800,14 @@ sm-button[variant=primary] {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.contact.unread .initial::after {
|
||||
.contact.unread .initial::after,
|
||||
.mail-card.unread .initial::after {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.mail-card.unread .time,
|
||||
.contact.unread .time {
|
||||
.mail-card.unread .time, .mail-card.unread .date,
|
||||
.contact.unread .time,
|
||||
.contact.unread .date {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
.mail-card.unread h4,
|
||||
@ -829,29 +823,45 @@ sm-button[variant=primary] {
|
||||
|
||||
.mail-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem 1.5rem;
|
||||
display: grid;
|
||||
gap: 0 1rem;
|
||||
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 {
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
width: 100%;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mail-card .date {
|
||||
grid-area: date;
|
||||
margin-left: auto;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mail-card .subject {
|
||||
grid-area: subject;
|
||||
font-size: 1em;
|
||||
margin-top: 0.5rem;
|
||||
margin-top: 0.3rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.mail-card .description {
|
||||
grid-area: desc;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
@ -891,21 +901,28 @@ sm-button[variant=primary] {
|
||||
height: 100%;
|
||||
background: rgba(var(--text-color), 0.2);
|
||||
}
|
||||
.mail header {
|
||||
.mail .mail-header {
|
||||
align-self: start;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: solid 1px rgba(var(--text-color), 0.2);
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.mail header h4 {
|
||||
.mail .sender-name {
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.mail header .flo-id {
|
||||
.mail .flo-id {
|
||||
font-weight: 400;
|
||||
max-width: 90%;
|
||||
}
|
||||
.mail .flex:first-of-type {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.mail .back {
|
||||
margin: 0 0 0 -0.5rem;
|
||||
}
|
||||
.mail .mail-subject,
|
||||
.mail .mail-content {
|
||||
padding: 0 1.5rem;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@ -1085,7 +1102,7 @@ sm-button[variant=primary] {
|
||||
}
|
||||
|
||||
#contacts, #mails, #settings_page {
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
#contacts .header, #mails .header, #settings_page .header {
|
||||
@ -1094,9 +1111,6 @@ sm-button[variant=primary] {
|
||||
gap: 0.5rem;
|
||||
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 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@ -1528,7 +1542,7 @@ sm-button[variant=primary] {
|
||||
#emoji_picker {
|
||||
--background: rgba(var(--text-color), 0.06);
|
||||
--border-size: 0;
|
||||
--input-border-color: rgba(var(--text-color), 0.6);
|
||||
--input-border-color: none;
|
||||
--input-padding: 0.4rem 1rem;
|
||||
--outline-color: var(--accent-color);
|
||||
--input-font-color: var(--text-color);
|
||||
@ -1605,17 +1619,15 @@ sm-button[variant=primary] {
|
||||
padding: 0.5rem 1.5rem;
|
||||
}
|
||||
|
||||
sm-tab-panels {
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
sm-panel {
|
||||
width: 100%;
|
||||
.mail-container {
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#inbox_mail_container,
|
||||
#sent_mail_container {
|
||||
gap: 0.2rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
@ -1642,13 +1654,13 @@ sm-panel {
|
||||
|
||||
#mail {
|
||||
height: 100vh;
|
||||
padding: 0 1.5rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
#mail .flex {
|
||||
margin-top: 1rem;
|
||||
#mail > .flex {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -1830,13 +1842,9 @@ sm-panel {
|
||||
align-items: flex-start;
|
||||
}
|
||||
#landing .title-font {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
#landing .left p {
|
||||
text-align: center;
|
||||
}
|
||||
#landing sm-button {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -1941,9 +1949,6 @@ sm-panel {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 4vw;
|
||||
}
|
||||
#landing .left h4 {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
#sign_in_page {
|
||||
place-content: center;
|
||||
@ -2054,7 +2059,7 @@ sm-panel {
|
||||
}
|
||||
|
||||
#chat_page, #mail_page {
|
||||
grid-template-columns: 21rem 1fr;
|
||||
grid-template-columns: 23rem 1fr;
|
||||
}
|
||||
|
||||
#chat_details_panel {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
113
css/main.scss
113
css/main.scss
@ -320,7 +320,6 @@ sm-button[variant="primary"]{
|
||||
padding: 0 1.5rem;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
.logo-section{
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
@ -336,7 +335,8 @@ sm-button[variant="primary"]{
|
||||
padding-bottom: 1.5rem;
|
||||
z-index: 1;
|
||||
h4{
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
color: var(--accent-color);
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
sm-button{
|
||||
@ -360,6 +360,7 @@ sm-button[variant="primary"]{
|
||||
}
|
||||
}
|
||||
#landing_page{
|
||||
overflow-y: auto;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.logo-section{
|
||||
@ -724,16 +725,8 @@ sm-button[variant="primary"]{
|
||||
background: rgb(255, 253, 141);
|
||||
color: #111;
|
||||
}
|
||||
.mail-card.unread::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
padding: 0.4rem;
|
||||
border-radius: 1rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: var(--accent-color);
|
||||
}
|
||||
.contact .initial::after{
|
||||
.contact .initial::after,
|
||||
.mail-card .initial::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -0.1rem;
|
||||
@ -746,12 +739,13 @@ sm-button[variant="primary"]{
|
||||
transform: scale(0);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.contact.unread .initial::after{
|
||||
.contact.unread .initial::after,
|
||||
.mail-card.unread .initial::after{
|
||||
transform: scale(1);
|
||||
}
|
||||
.mail-card.unread,
|
||||
.contact.unread{
|
||||
.time{
|
||||
.time, .date{
|
||||
color: var(--accent-color);
|
||||
}
|
||||
h4{
|
||||
@ -763,28 +757,46 @@ sm-button[variant="primary"]{
|
||||
}
|
||||
.mail-card{
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem 1.5rem;
|
||||
display: grid;
|
||||
gap: 0 1rem;
|
||||
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{
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
width: 100%;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.date{
|
||||
grid-area: date;
|
||||
margin-left: auto;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.subject{
|
||||
grid-area: subject;
|
||||
font-size: 1em;
|
||||
margin-top: 0.5rem;
|
||||
margin-top: 0.3rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.description{
|
||||
grid-area: desc;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
@ -822,21 +834,28 @@ sm-button[variant="primary"]{
|
||||
height: 100%;
|
||||
background: rgba(var(--text-color), 0.2);
|
||||
}
|
||||
header{
|
||||
.mail-header{
|
||||
align-self: start;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: solid 1px rgba(var(--text-color), 0.2);
|
||||
h4{
|
||||
font-weight: 500;
|
||||
}
|
||||
.flo-id{
|
||||
font-weight: 400;
|
||||
max-width: 90%;
|
||||
}
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.sender-name{
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.flo-id{
|
||||
font-weight: 400;
|
||||
max-width: 90%;
|
||||
}
|
||||
.flex:first-of-type{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.back{
|
||||
margin: 0 0 0 -0.5rem;
|
||||
}
|
||||
.mail-subject,
|
||||
.mail-content{
|
||||
padding: 0 1.5rem;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@ -1011,16 +1030,13 @@ sm-button[variant="primary"]{
|
||||
grid-template-rows: max-content 1fr;
|
||||
}
|
||||
#contacts, #mails, #settings_page{
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
overflow-y: hidden;
|
||||
.header{
|
||||
padding: 1rem 1.5rem 1rem 1.5rem;
|
||||
position: relative;
|
||||
gap: 0.5rem;
|
||||
min-height: 4rem;
|
||||
sm-tab::part(tab){
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
.expanding-search{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@ -1435,7 +1451,7 @@ sm-button[variant="primary"]{
|
||||
#emoji_picker{
|
||||
--background: rgba(var(--text-color), 0.06);
|
||||
--border-size: 0;
|
||||
--input-border-color: rgba(var(--text-color), 0.6);
|
||||
--input-border-color: none;
|
||||
--input-padding: 0.4rem 1rem;
|
||||
--outline-color: var(--accent-color);
|
||||
--input-font-color: var(--text-color);
|
||||
@ -1504,17 +1520,16 @@ sm-button[variant="primary"]{
|
||||
padding: 0.5rem 1.5rem;
|
||||
}
|
||||
}
|
||||
sm-tab-panels{
|
||||
overflow: hidden auto;
|
||||
}
|
||||
sm-panel{
|
||||
width: 100%;
|
||||
.mail-container{
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#inbox_mail_container,
|
||||
#sent_mail_container
|
||||
{
|
||||
gap: 0.2rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
.has-bg-image{
|
||||
@ -1543,9 +1558,10 @@ sm-panel{
|
||||
}
|
||||
#mail{
|
||||
height: 100vh;
|
||||
padding: 0 1.5rem;
|
||||
align-items: flex-start;
|
||||
.flex{margin-top: 1rem;
|
||||
& > .flex{
|
||||
padding: 0 1.5rem;
|
||||
margin-top: 2rem;
|
||||
sm-button:first-of-type{
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
@ -1720,13 +1736,9 @@ sm-panel{
|
||||
grid-template-areas: 'illustration' '.';
|
||||
align-items: flex-start;
|
||||
.title-font{
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.left p {
|
||||
text-align: center;
|
||||
}
|
||||
sm-button{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -1819,11 +1831,6 @@ sm-panel{
|
||||
gap: 4vw;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 4vw;
|
||||
.left{
|
||||
h4{
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
#sign_in_page{
|
||||
place-content: center;
|
||||
@ -1925,7 +1932,7 @@ sm-panel{
|
||||
}
|
||||
}
|
||||
#chat_page, #mail_page{
|
||||
grid-template-columns: 21rem 1fr;
|
||||
grid-template-columns: 23rem 1fr;
|
||||
}
|
||||
#chat_details_panel{
|
||||
position: relative;
|
||||
|
||||
123
index.html
123
index.html
@ -272,28 +272,29 @@
|
||||
<!-- Templates -->
|
||||
|
||||
<template id="mail_card_template">
|
||||
<div class="mail-card interact">
|
||||
<div class="flex align-center">
|
||||
<h5 class="sender"></h5>
|
||||
<h5 class="date"></h5>
|
||||
</div>
|
||||
<li class="mail-card interact">
|
||||
<div class="initial flex align-center"></div>
|
||||
<h5 class="sender"></h5>
|
||||
<h5 class="date"></h5>
|
||||
<h4 class="subject text-overflow"></h4>
|
||||
<p class="description"></p>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<template id="mail_template">
|
||||
<div class="mail">
|
||||
<header class="flex align-center">
|
||||
<svg class="icon hide-on-desktop back-button" onclick="goto('mails')" viewBox="0 0 64 64">
|
||||
<title>Go to main page</title>
|
||||
<polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
|
||||
</svg>
|
||||
<div class="rest">
|
||||
<header class="mail-header flex direction-column">
|
||||
<div class="flex space-between">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon back hide-on-desktop" onclick="goto('mails')" viewBox="0 0 64 64">
|
||||
<line x1="1" y1="32" x2="64" y2="32"/>
|
||||
<polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
|
||||
</svg>
|
||||
<h5 class="date justify-right"></h5>
|
||||
</div>
|
||||
<div class="mail-details flex direction-column">
|
||||
<h4 class="sender-name"></h4>
|
||||
<h5 class="flo-id text-overflow"></h5>
|
||||
</div>
|
||||
<h5 class="date justify-right"></h5>
|
||||
</header>
|
||||
<h4 class="mail-subject"></h4>
|
||||
<p class="mail-content"></p>
|
||||
@ -502,7 +503,7 @@
|
||||
<emoji-picker id="emoji_picker" class="hide-completely"></emoji-picker>
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
@ -566,11 +567,11 @@
|
||||
<line y1="53.34" x2="64" y2="53.34"/>
|
||||
</svg>
|
||||
<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>
|
||||
<sm-tab-header target="all_mail_container">
|
||||
<sm-tab>Inbox</sm-tab>
|
||||
<sm-tab>Sent</sm-tab>
|
||||
</sm-tab-header>
|
||||
</header>
|
||||
<sm-button variant="primary" id="new_mail_button" class="fab round">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
@ -579,23 +580,27 @@
|
||||
</svg>
|
||||
New Mail
|
||||
</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">
|
||||
<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 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>
|
||||
</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 id="mail" class="flex hide-on-mobile hide-completely">
|
||||
<div id="mail_container">
|
||||
</div>
|
||||
<div id="mail_container"></div>
|
||||
<div class="flex">
|
||||
<sm-button id="prev_mail">View Previous Mail</sm-button>
|
||||
<sm-button id="show_reply_popup">reply</sm-button>
|
||||
@ -1049,6 +1054,9 @@
|
||||
case 'page':
|
||||
showPage(e.state.id)
|
||||
break;
|
||||
case 'subpage':
|
||||
showPage(e.state.id, true)
|
||||
break;
|
||||
}
|
||||
})
|
||||
|
||||
@ -1195,7 +1203,7 @@
|
||||
return `${month} ${year}`;
|
||||
}
|
||||
else
|
||||
return `${month} ${date} ${year}`;
|
||||
return `${finalHours} ${month} ${date} ${year}`;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
return time;
|
||||
@ -1503,7 +1511,7 @@
|
||||
.then(r => console.log(r))
|
||||
console.log(`Load Successful!`)
|
||||
if(isPinSet){
|
||||
showPage('main_page')
|
||||
showPage('chat_page', true)
|
||||
}
|
||||
}).catch(error => {
|
||||
//console.error(`Failed to load data`)
|
||||
@ -1515,10 +1523,7 @@
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
let activePage = {
|
||||
page: getRef('chat_page'),
|
||||
button: getRef('chat_page_button')
|
||||
},
|
||||
let activePage = {},
|
||||
activeChatPage = getRef('contacts'),
|
||||
activeMailPage = getRef('mails'),
|
||||
activeChat = {},
|
||||
@ -1549,6 +1554,12 @@
|
||||
contact = floGlobals.contacts[floID] || floID
|
||||
if(markUnread)
|
||||
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('.subject').textContent = subject
|
||||
cardContainer.querySelector('.date').textContent = getFormatedTime(timestamp, true)
|
||||
@ -1572,7 +1583,7 @@
|
||||
}
|
||||
floID = to.join(', ')
|
||||
} else {
|
||||
senderName = `From : ${floGlobals.contacts[from] || ''}`;
|
||||
senderName = `${floGlobals.contacts[from] || ''}`;
|
||||
floID = from
|
||||
}
|
||||
card.querySelector('.sender-name').textContent = senderName
|
||||
@ -1594,6 +1605,8 @@
|
||||
cardContainer.setAttribute("search-tags", `${name}${floID}`)
|
||||
let initial = card.querySelector('.initial')
|
||||
let color = contactColor(floID)
|
||||
cardContainer.setAttribute("background-color", color)
|
||||
initial.setAttribute(`style`, `background-color: ${color}`)
|
||||
|
||||
if(type === 'group'){
|
||||
initial.innerHTML = `
|
||||
@ -1605,8 +1618,6 @@
|
||||
cardContainer.querySelector('.name').textContent = name !== 'Unknown' ? name : floID
|
||||
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(isAdmin){
|
||||
@ -2011,7 +2022,9 @@
|
||||
showPanel(target, target.dataset.target)
|
||||
}
|
||||
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')){
|
||||
getRef('mail_contact_list').classList.remove('hide-completely')
|
||||
@ -2462,7 +2475,7 @@
|
||||
}
|
||||
|
||||
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').classList.remove('hide-completely')
|
||||
e.target.closest(".mail-card").classList.remove('unread')
|
||||
@ -2695,7 +2708,9 @@
|
||||
activeChat.chatCard.classList.remove('unread')
|
||||
}
|
||||
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,
|
||||
@ -2874,8 +2889,8 @@
|
||||
}
|
||||
|
||||
function renderMailList(mails, markUnread = true) {
|
||||
let inboxMailFrag = document.createDocumentFragment()
|
||||
let sentMailFrag = document.createDocumentFragment()
|
||||
const inboxMailFrag = document.createDocumentFragment()
|
||||
const sentMailFrag = document.createDocumentFragment()
|
||||
for (let m in mails) {
|
||||
let { from, to, prev, ref, subject, time, content } = mails[m]
|
||||
if(from === myFloID)
|
||||
@ -2885,18 +2900,12 @@
|
||||
}
|
||||
getRef('inbox_mail_container').prepend(inboxMailFrag)
|
||||
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) {
|
||||
//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)
|
||||
clearElement(getRef("mail_container"))
|
||||
|
||||
@ -2958,6 +2967,11 @@
|
||||
}).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'),
|
||||
allSidebarItems = document.querySelectorAll('.sidebar-item')
|
||||
|
||||
@ -3426,8 +3440,9 @@
|
||||
.catch(err => console.log(err))
|
||||
}
|
||||
|
||||
function showPage(targetPage, targetButton, subpage){
|
||||
function showPage(targetPage, subpage){
|
||||
if(subpage){
|
||||
const targetButton = document.querySelector(`.navbar-item[data-target="${targetPage}"]`)
|
||||
targetButton.classList.add('active')
|
||||
if(activePage.page){
|
||||
activePage.page.classList.add('hide-completely')
|
||||
@ -3435,6 +3450,10 @@
|
||||
}
|
||||
activePage.button = targetButton
|
||||
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')){
|
||||
getRef('main_navbar').classList.remove('no-transformations')
|
||||
getRef('navbar_backdrop').classList.add('hide')
|
||||
@ -3488,7 +3507,7 @@
|
||||
getRef('first_pin').clear()
|
||||
getRef('confirm_pin').clear()
|
||||
isPinSet = true;
|
||||
showPage('main_page')
|
||||
showPage('chat_page', true)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -1377,7 +1377,10 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
this.shadowRoot.querySelector('.option-text').textContent = e.detail.text;
|
||||
this.dispatchEvent(new CustomEvent('change', {
|
||||
bubbles: true,
|
||||
composed: true
|
||||
composed: true,
|
||||
detail: {
|
||||
value: e.detail.value
|
||||
}
|
||||
}))
|
||||
if (previousOption) {
|
||||
previousOption.classList.remove('check-selected')
|
||||
@ -3959,12 +3962,17 @@ pinInput.innerHTML = `
|
||||
box-shadow: 0 0 0 0.2rem var(--accent-color) inset;
|
||||
}
|
||||
button{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
svg{
|
||||
margin: 0 1rem;
|
||||
margin: 0 0.5rem 0 0;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
@ -3974,7 +3982,8 @@ pinInput.innerHTML = `
|
||||
<div class="pin-container"></div>
|
||||
<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>
|
||||
</button>
|
||||
Show
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -3994,7 +4003,7 @@ customElements.define('pin-input',
|
||||
this.toggleButton = this.shadowRoot.querySelector('button')
|
||||
}
|
||||
|
||||
set value(val) {
|
||||
set value(val) {
|
||||
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') {
|
||||
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>
|
||||
`
|
||||
this.arrayOfInput.forEach(input => input.setAttribute('type', 'text'))
|
||||
}
|
||||
else {
|
||||
this.toggleButton.innerHTML = `
|
||||
Hide
|
||||
`
|
||||
this.arrayOfInput.forEach(input => input.setAttribute('type', 'text'))
|
||||
}
|
||||
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>
|
||||
`
|
||||
Show
|
||||
`
|
||||
this.arrayOfInput.forEach(input => input.setAttribute('type', 'password'))
|
||||
|
||||
}
|
||||
|
||||
@ -9,12 +9,7 @@
|
||||
<body data-theme="dark">
|
||||
<script src="scripts/components.js"></script>
|
||||
<script src="scripts/script.js"></script>
|
||||
<pin-input id="input" pin-length="4"></pin-input>
|
||||
<script>
|
||||
const input = document.getElementById('input')
|
||||
document.addEventListener('pincomplete', e => {
|
||||
console.log(e.detail.value)
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user