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

code refactoring, UI improvements

Browse Source
This commit is contained in:
sairaj mote 2022-06-14 03:09:50 +05:30
parent 34aaa8318e
commit 5aa80491b4
4 changed files with 222 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
css/main.css
View File

@ -40,6 +40,7 @@ body {
--redish-orange: #ff3d00; --redish-orange: #ff3d00;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
overflow-y: hidden;
} }
body #scroll_to_bottom { body #scroll_to_bottom {
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
@ -220,6 +221,10 @@ details[open] > summary .down-arrow {
transform: rotate(180deg); transform: rotate(180deg);
} }
fieldset {
border: none;
}
sm-input, sm-input,
sm-textarea { sm-textarea {
font-size: 0.9rem; font-size: 0.9rem;
@ -557,6 +562,11 @@ ol li::before {
margin: 1.5rem; margin: 1.5rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
z-index: 2; z-index: 2;
border-radius: 0.5rem;
padding: 0.8rem 1rem;
}
.fab .icon {
margin-right: 0.5rem;
} }
.page { .page {
@ -871,14 +881,32 @@ sm-button[variant=primary] {
transform: scale(1); transform: scale(1);
} }
} }
#background_overlay,
#background_image {
position: absolute;
height: 100%;
width: 100%;
}
#background_overlay {
background-color: red;
z-index: -1;
background-color: rgba(var(--foreground-color), 0.9);
-webkit-backdrop-filter: blur(1rem);
backdrop-filter: blur(1rem);
transition: background-color 0.3s;
}
#background_image {
z-index: -2;
-o-object-fit: cover;
object-fit: cover;
}
#main_page { #main_page {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto 1fr; grid-template-rows: 1fr auto;
height: 100%;
width: 100%;
transition: background-color 0.3s;
background-color: rgba(var(--foreground-color), 1);
} }
.initial { .initial {
@ -1389,6 +1417,7 @@ sm-button[variant=primary] {
#contacts { #contacts {
position: relative; position: relative;
overflow-x: hidden; overflow-x: hidden;
height: 100%;
} }
#contacts .scrolling-wrapper { #contacts .scrolling-wrapper {
height: 100%; height: 100%;
@ -1426,12 +1455,15 @@ sm-button[variant=primary] {
position: relative; position: relative;
grid-template-rows: -webkit-max-content 1fr; grid-template-rows: -webkit-max-content 1fr;
grid-template-rows: max-content 1fr; grid-template-rows: max-content 1fr;
background-color: rgba(var(--background-color), 0.1);
margin: 0.5rem 0;
border-radius: 0.5rem;
height: calc(100% - 1rem);
} }
#contacts, #contacts,
#mails, #mails,
#settings_page { #settings_page {
height: 100vh;
overflow-y: hidden; overflow-y: hidden;
} }
#contacts .header, #contacts .header,
@ -1518,7 +1550,8 @@ sm-button[variant=primary] {
#chat_page, #chat_page,
#mail_page, #mail_page,
#settings_page { #settings_page {
align-items: flex-start; display: flex;
flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -1576,12 +1609,6 @@ sm-button[variant=primary] {
background-color: rgba(var(--foreground-color), 0.8); background-color: rgba(var(--foreground-color), 0.8);
z-index: 1; z-index: 1;
} }
#chat_details_panel header .icon {
height: 2.3rem;
width: 2.3rem;
padding: 0.7rem;
cursor: pointer;
}
#chat_details_panel .contact { #chat_details_panel .contact {
padding: 0.5rem 0; padding: 0.5rem 0;
} }
@ -1684,7 +1711,7 @@ sm-button[variant=primary] {
border-radius: 0.8rem 0 0.8rem 0.8rem; border-radius: 0.8rem 0 0.8rem 0.8rem;
} }
.sent > * { .sent > * {
color: #efefef; color: rgba(var(--background-color), 1);
} }
.sent::after { .sent::after {
content: ""; content: "";
@ -1781,12 +1808,8 @@ sm-button[variant=primary] {
height: 100%; height: 100%;
} }
#chat_header .back-button { #chat_header .back-button {
height: 2rem; padding: 0;
width: 2rem; margin: 0 -0.5rem 0 -1.2rem;
padding: 0.5rem;
stroke-width: 8;
margin-right: 0.5rem;
stroke: rgba(var(--text-color), 0.8);
} }
#chat_header .initial { #chat_header .initial {
cursor: pointer; cursor: pointer;
@ -1858,27 +1881,15 @@ sm-button[variant=primary] {
} }
#send_message_button { #send_message_button {
position: absolute;
right: 1.5rem;
transform: scale(0);
opacity: 0;
pointer-events: none;
z-index: 1;
align-self: center; align-self: center;
height: 2.4rem; padding: 0.5rem 0.8rem;
width: 2.4rem; margin-left: 0.5rem;
padding: 0.5rem; opacity: 0.5;
cursor: pointer; font-weight: 500;
stroke: none;
fill: rgba(var(--text-color), 0.4);
margin-left: 1rem;
transition: 0.3s;
} }
#send_message_button.active { #send_message_button.active {
opacity: 1; opacity: 1;
fill: var(--accent-color); color: var(--accent-color);
transform: none;
pointer-events: all;
} }
#type_message { #type_message {
@ -2137,7 +2148,11 @@ sm-button[variant=primary] {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset; border-radius: inherit;
box-shadow: 0 0 0 0.5rem var(--accent-color) inset;
}
#settings_page .bg-preview input {
display: none;
} }
#settings_page .bg-preview__image { #settings_page .bg-preview__image {
-o-object-fit: cover; -o-object-fit: cover;
@ -2151,13 +2166,6 @@ sm-button[variant=primary] {
--border-radius: 1rem 1rem 0 0; --border-radius: 1rem 1rem 0 0;
} }
.hide-on-mobile {
position: fixed;
max-height: 0;
opacity: 0;
pointer-events: none;
}
#landing { #landing {
grid-template-areas: "illustration" "."; grid-template-areas: "illustration" ".";
align-items: flex-start; align-items: flex-start;
@ -2221,6 +2229,10 @@ sm-button[variant=primary] {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
} }
.hide-on-mobile {
display: none !important;
}
} }
@media screen and (min-width: 40rem) { @media screen and (min-width: 40rem) {
.hide-on-desktop { .hide-on-desktop {
@ -2236,10 +2248,6 @@ sm-button[variant=primary] {
padding: 1rem 1.5rem 0 1.5rem; padding: 1rem 1.5rem 0 1.5rem;
} }
.fab {
position: absolute;
}
.logo-section { .logo-section {
padding: 2rem 3rem 0 3rem; padding: 2rem 3rem 0 3rem;
margin: 0.5rem 0; margin: 0.5rem 0;
@ -2267,7 +2275,6 @@ sm-button[variant=primary] {
grid-template-columns: min-content 1fr; grid-template-columns: min-content 1fr;
grid-template-rows: 1fr; grid-template-rows: 1fr;
grid-template-areas: "nav ."; grid-template-areas: "nav .";
border-radius: 0.8rem;
overflow: hidden; overflow: hidden;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2); box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2);
} }
@ -2279,7 +2286,7 @@ sm-button[variant=primary] {
height: calc(100% - 1rem); height: calc(100% - 1rem);
margin: 0.5rem; margin: 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: rgba(37, 110, 255, 0.03); background-color: rgba(var(--background-color), 0.06);
} }
#main_navbar ul { #main_navbar ul {
flex-direction: column; flex-direction: column;
@ -2322,12 +2329,12 @@ sm-button[variant=primary] {
#chat_page, #chat_page,
#mail_page { #mail_page {
grid-template-columns: 20rem 1fr; display: grid;
grid-template-columns: 19rem 1fr;
} }
#settings_page { #settings_page {
display: grid; display: grid;
height: 100vh;
grid-template-columns: 14rem 1fr; grid-template-columns: 14rem 1fr;
} }
#settings_page sm-button { #settings_page sm-button {
@ -2371,11 +2378,6 @@ sm-button[variant=primary] {
font-size: 3rem; font-size: 3rem;
} }
#chat_page,
#mail_page {
grid-template-columns: 23rem 1fr;
}
#chat_details_panel { #chat_details_panel {
position: relative; position: relative;
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

108
css/main.scss
View File

@ -38,6 +38,7 @@ body {
--redish-orange: #ff3d00; --redish-orange: #ff3d00;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
overflow-y: hidden;
#scroll_to_bottom { #scroll_to_bottom {
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
box-shadow: 0 0.3rem 0.4rem rgba(0, 0, 0, 0.2); box-shadow: 0 0.3rem 0.4rem rgba(0, 0, 0, 0.2);
@ -200,6 +201,9 @@ details[open] {
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
fieldset {
border: none;
}
sm-input, sm-input,
sm-textarea { sm-textarea {
@ -522,6 +526,11 @@ ol {
margin: 1.5rem; margin: 1.5rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
z-index: 2; z-index: 2;
border-radius: 0.5rem;
padding: 0.8rem 1rem;
.icon {
margin-right: 0.5rem;
}
} }
.page { .page {
height: 100%; height: 100%;
@ -776,14 +785,27 @@ sm-button[variant="primary"] {
transform: scale(1); transform: scale(1);
} }
} }
#background_overlay,
#background_image {
position: absolute;
height: 100%;
width: 100%;
}
#background_overlay {
background-color: red;
z-index: -1;
background-color: rgba(var(--foreground-color), 0.9);
backdrop-filter: blur(1rem);
transition: background-color 0.3s;
}
#background_image {
z-index: -2;
object-fit: cover;
}
#main_page { #main_page {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto 1fr; grid-template-rows: 1fr auto;
height: 100%;
width: 100%;
transition: background-color 0.3s;
background-color: rgba(var(--foreground-color), 1);
} }
.initial { .initial {
position: relative; position: relative;
@ -1256,6 +1278,7 @@ sm-button[variant="primary"] {
#contacts { #contacts {
position: relative; position: relative;
overflow-x: hidden; overflow-x: hidden;
height: 100%;
.scrolling-wrapper { .scrolling-wrapper {
height: 100%; height: 100%;
flex: 1; flex: 1;
@ -1292,11 +1315,14 @@ sm-button[variant="primary"] {
#mails { #mails {
position: relative; position: relative;
grid-template-rows: max-content 1fr; grid-template-rows: max-content 1fr;
background-color: rgba(var(--background-color), 0.1);
margin: 0.5rem 0;
border-radius: 0.5rem;
height: calc(100% - 1rem);
} }
#contacts, #contacts,
#mails, #mails,
#settings_page { #settings_page {
height: 100vh;
overflow-y: hidden; overflow-y: hidden;
.header { .header {
padding: 1rem 1.5rem 1rem 1.5rem; padding: 1rem 1.5rem 1rem 1.5rem;
@ -1362,7 +1388,8 @@ sm-button[variant="primary"] {
#chat_page, #chat_page,
#mail_page, #mail_page,
#settings_page { #settings_page {
align-items: flex-start; display: flex;
flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -1414,12 +1441,6 @@ sm-button[variant="primary"] {
min-height: 4rem; min-height: 4rem;
background-color: rgba(var(--foreground-color), 0.8); background-color: rgba(var(--foreground-color), 0.8);
z-index: 1; z-index: 1;
.icon {
height: 2.3rem;
width: 2.3rem;
padding: 0.7rem;
cursor: pointer;
}
} }
.contact { .contact {
padding: 0.5rem 0; padding: 0.5rem 0;
@ -1518,7 +1539,7 @@ sm-button[variant="primary"] {
background: var(--accent-color); background: var(--accent-color);
border-radius: 0.8rem 0 0.8rem 0.8rem; border-radius: 0.8rem 0 0.8rem 0.8rem;
& > * { & > * {
color: #efefef; color: rgba(var(--background-color), 1);
} }
&::after { &::after {
content: ""; content: "";
@ -1600,12 +1621,8 @@ sm-button[variant="primary"] {
height: 100%; height: 100%;
} }
.back-button { .back-button {
height: 2rem; padding: 0;
width: 2rem; margin: 0 -0.5rem 0 -1.2rem;
padding: 0.5rem;
stroke-width: 8;
margin-right: 0.5rem;
stroke: rgba(var(--text-color), 0.8);
} }
.initial { .initial {
cursor: pointer; cursor: pointer;
@ -1676,26 +1693,14 @@ sm-button[variant="primary"] {
} }
} }
#send_message_button { #send_message_button {
position: absolute;
right: 1.5rem;
transform: scale(0);
opacity: 0;
pointer-events: none;
z-index: 1;
align-self: center; align-self: center;
height: 2.4rem; padding: 0.5rem 0.8rem;
width: 2.4rem; margin-left: 0.5rem;
padding: 0.5rem; opacity: 0.5;
cursor: pointer; font-weight: 500;
stroke: none;
fill: rgba(var(--text-color), 0.4);
margin-left: 1rem;
transition: 0.3s;
&.active { &.active {
opacity: 1; opacity: 1;
fill: var(--accent-color); color: var(--accent-color);
transform: none;
pointer-events: all;
} }
} }
#type_message { #type_message {
@ -1937,7 +1942,11 @@ sm-button[variant="primary"] {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset; border-radius: inherit;
box-shadow: 0 0 0 0.5rem var(--accent-color) inset;
}
input {
display: none;
} }
} }
.bg-preview__image { .bg-preview__image {
@ -1950,12 +1959,6 @@ sm-button[variant="primary"] {
sm-popup { sm-popup {
--border-radius: 1rem 1rem 0 0; --border-radius: 1rem 1rem 0 0;
} }
.hide-on-mobile {
position: fixed;
max-height: 0;
opacity: 0;
pointer-events: none;
}
#landing { #landing {
grid-template-areas: "illustration" "."; grid-template-areas: "illustration" ".";
align-items: flex-start; align-items: flex-start;
@ -2015,6 +2018,9 @@ sm-button[variant="primary"] {
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
} }
} }
.hide-on-mobile {
display: none !important;
}
} }
@media screen and (min-width: 40rem) { @media screen and (min-width: 40rem) {
.hide-on-desktop { .hide-on-desktop {
@ -2027,9 +2033,6 @@ sm-button[variant="primary"] {
grid-column: 1/-1; grid-column: 1/-1;
padding: 1rem 1.5rem 0 1.5rem; padding: 1rem 1.5rem 0 1.5rem;
} }
.fab {
position: absolute;
}
.logo-section { .logo-section {
padding: 2rem 3rem 0 3rem; padding: 2rem 3rem 0 3rem;
margin: 0.5rem 0; margin: 0.5rem 0;
@ -2052,7 +2055,6 @@ sm-button[variant="primary"] {
grid-template-columns: min-content 1fr; grid-template-columns: min-content 1fr;
grid-template-rows: 1fr; grid-template-rows: 1fr;
grid-template-areas: "nav ."; grid-template-areas: "nav .";
border-radius: 0.8rem;
overflow: hidden; overflow: hidden;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05),
0 1rem 3rem rgba(0, 0, 0, 0.2); 0 1rem 3rem rgba(0, 0, 0, 0.2);
@ -2064,7 +2066,7 @@ sm-button[variant="primary"] {
height: calc(100% - 1rem); height: calc(100% - 1rem);
margin: 0.5rem; margin: 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: rgba(37 110 255/ 0.03); background-color: rgba(var(--background-color), 0.06);
ul { ul {
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
@ -2103,11 +2105,11 @@ sm-button[variant="primary"] {
} }
#chat_page, #chat_page,
#mail_page { #mail_page {
grid-template-columns: 20rem 1fr; display: grid;
grid-template-columns: 19rem 1fr;
} }
#settings_page { #settings_page {
display: grid; display: grid;
height: 100vh;
grid-template-columns: 14rem 1fr; grid-template-columns: 14rem 1fr;
sm-button { sm-button {
width: max-content; width: max-content;
@ -2148,10 +2150,6 @@ sm-button[variant="primary"] {
font-size: 3rem; font-size: 3rem;
} }
} }
#chat_page,
#mail_page {
grid-template-columns: 23rem 1fr;
}
#chat_details_panel { #chat_details_panel {
position: relative; position: relative;
} }

224
index.html
View File

@ -210,7 +210,7 @@
</div> </div>
</div> </div>
<main id="main_page" class="page grid hide"> <main id="main_page" class="page grid hide">
<section id="chat_page" class="inner-page grid"> <section id="chat_page" class="inner-page">
<div id="contacts" class="grid"> <div id="contacts" class="grid">
<header class="grid header"> <header class="grid header">
<div class="flex align-center"> <div class="flex align-center">
@ -243,8 +243,8 @@
</sm-input> </sm-input>
</div> </div>
</header> </header>
<sm-button variant="primary" id="new_message_button" onclick="openPopup('new_message_popup')" <button id="new_message_button" onclick="openPopup('new_message_popup')"
class="fab round"> class="button button--primary fab round">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000"> fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -252,7 +252,7 @@
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM5.92 19H5v-.92l9.06-9.06.92.92L5.92 19zM20.71 5.63l-2.34-2.34c-.2-.2-.45-.29-.71-.29s-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41z" /> d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM5.92 19H5v-.92l9.06-9.06.92.92L5.92 19zM20.71 5.63l-2.34-2.34c-.2-.2-.45-.29-.71-.29s-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41z" />
</svg> </svg>
New chat New chat
</sm-button> </button>
<div id="chats_list" class="flex observe-empty-state"></div> <div id="chats_list" class="flex observe-empty-state"></div>
<div id="new_conversation" class="flex flex-direction-column empty-state"> <div id="new_conversation" class="flex flex-direction-column empty-state">
<svg class="icon new-conversation align-center" viewBox="0 0 512 512"> <svg class="icon new-conversation align-center" viewBox="0 0 512 512">
@ -270,12 +270,13 @@
<div id="chat" class="grid hide-on-mobile hide"> <div id="chat" class="grid hide-on-mobile hide">
<div id="chat_left"> <div id="chat_left">
<header id="chat_header" class="grid align-center"> <header id="chat_header" class="grid align-center">
<svg class="icon hide-on-desktop back-button" onclick="goto('chats')" <button class=" hide-on-desktop back-button" onclick="goto('chats')">
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
<title>Go to chat page</title> width="24px" fill="#000000">
<line x1="1" y1="32" x2="64" y2="32" /> <path d="M0 0h24v24H0V0z" fill="none" opacity=".87" />
<polyline points="29.64 60.97 0.65 32 29.64 3.03" /> <path d="M17.51 3.87L15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13z" />
</svg> </svg>
</button>
<div class="flex align-center interact" onclick="showChatDetails({show: true})"> <div class="flex align-center interact" onclick="showChatDetails({show: true})">
<div id="receiver_initial" class="initial flex align-center"></div> <div id="receiver_initial" class="initial flex align-center"></div>
<h4 id="receiver_name"></h4> <h4 id="receiver_name"></h4>
@ -296,12 +297,8 @@
<path <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" /> 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>
<sm-textarea id="type_message" placeholder="Type a message" class="rest"></sm-textarea> <sm-textarea id="type_message" placeholder="Type a message" class="w-100"></sm-textarea>
<svg xmlns="http://www.w3.org/2000/svg" id="send_message_button" class="icon" <button id="send_message_button"> Send </button>
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>
</div> </div>
</footer> </footer>
</div> </div>
@ -352,7 +349,7 @@
</div> </div>
</div> </div>
</section> </section>
<section class="inner-page grid hide" id="mail_page"> <section class="inner-page hide" id="mail_page">
<div id="mails" class="grid"> <div id="mails" class="grid">
<header class="grid header"> <header class="grid header">
<div class="flex align-center"> <div class="flex align-center">
@ -363,13 +360,13 @@
</strip-select> </strip-select>
</div> </div>
</header> </header>
<sm-button variant="primary" id="new_mail_button" class="fab round"> <button class="button button--primary fab" id="new_mail_button">
<svg class="icon" viewBox="0 0 64 64"> <svg class="icon" viewBox="0 0 64 64">
<path <path
d="M46.73,14.81l7,7,7.65-7.6A7.15,7.15,0,0,0,61.39,4L60.11,2.77a7.23,7.23,0,0,0-10.19,0L3.87,48.57a5,5,0,0,0-1.39,2.6L.53,61.27a1.74,1.74,0,0,0,2,2l10.15-1.94A5.06,5.06,0,0,0,15.34,60L49.6,25.9" /> d="M46.73,14.81l7,7,7.65-7.6A7.15,7.15,0,0,0,61.39,4L60.11,2.77a7.23,7.23,0,0,0-10.19,0L3.87,48.57a5,5,0,0,0-1.39,2.6L.53,61.27a1.74,1.74,0,0,0,2,2l10.15-1.94A5.06,5.06,0,0,0,15.34,60L49.6,25.9" />
</svg> </svg>
New Mail New Mail
</sm-button> </button>
<div> <div>
<ul id="inbox_mail_container" class="mail-container flex observe-empty-state"></ul> <ul id="inbox_mail_container" class="mail-container flex observe-empty-state"></ul>
<div class="empty-state flex flex-direction-column align-center"> <div class="empty-state flex flex-direction-column align-center">
@ -471,13 +468,16 @@
</section> </section>
<section> <section>
<h4>Set chat and mail background image</h4> <h4>Set chat and mail background image</h4>
<div id="bg_preview_container" class="flex"> <fieldset id="bg_preview_container" class="flex">
<div id="selected_bg_preview" class="bg-preview hide" onclick="setBgImage()"> <label id="selected_bg_preview" class="bg-preview hide">
<img src="" alt="background perview" class="bg-preview__image"> <input type="radio" name="bg" value="img">
</div> <img src="" alt="background preview" class="bg-preview__image">
<div id="default_bg_preview" class="bg-preview bg-preview--selected" </label>
onclick="setDefaultBg()">Default</div> <label id="default_bg_preview" class="bg-preview bg-preview--selected">
</div> <input type="radio" name="bg" value="default">
Default
</label>
</fieldset>
<label class="button select-file"> <label class="button select-file">
<span id="select_bg_button">Select background</span> <span id="select_bg_button">Select background</span>
<input type="file" id="select_bg_image" accept="image/*" /> <input type="file" id="select_bg_image" accept="image/*" />
@ -552,6 +552,8 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<div id="background_overlay"></div>
<img id="background_image"></img>
</main> </main>
<sm-popup id="add_contact_popup"> <sm-popup id="add_contact_popup">
<header class="popup__header" slot="header"> <header class="popup__header" slot="header">
@ -724,8 +726,8 @@
<p>No contacts found.</p> <p>No contacts found.</p>
</div> </div>
</div> </div>
<sm-button id="skip_members_button" variant="primary" class="fab round hide" <button id="skip_members_button" variant="primary" class="hide" onclick="openPopup('group_creation_popup')">
onclick="openPopup('group_creation_popup')"> Skip </sm-button> Skip </button>
</div> </div>
<sm-form class="hide"> <sm-form class="hide">
<div class="grid"> <div class="grid">
@ -797,12 +799,6 @@
<p class="mail-content"></p> <p class="mail-content"></p>
</div> </div>
</template> </template>
<template id="message_template">
<div class="message">
<p class="message-body"></p>
<time class="time"></time>
</div>
</template>
<script src="scripts/components.js"></script> <script src="scripts/components.js"></script>
<script src="scripts/script.js"></script> <script src="scripts/script.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
@ -1168,6 +1164,8 @@
case 'date-only': case 'date-only':
return `${month} ${date}, ${year}`; return `${month} ${date}, ${year}`;
break; break;
case 'time-only':
return finalHours;
default: default:
return `${month} ${date}, ${year} at ${finalHours}`; return `${month} ${date}, ${year} at ${finalHours}`;
} }
@ -1285,7 +1283,7 @@
// class based lazy loading // class based lazy loading
class LazyLoader { class LazyLoader {
constructor(container, elementsToRender, renderFn, options = {}) { constructor(container, elementsToRender, renderFn, options = {}) {
const { batchSize = 10, freshRender, bottomFirst = false, hasUhtml = false } = options const { batchSize = 10, freshRender, bottomFirst = false, hasUhtml = false, domUpdated } = options
this.elementsToRender = elementsToRender this.elementsToRender = elementsToRender
this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || [] this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
@ -1294,9 +1292,11 @@
this.batchSize = batchSize this.batchSize = batchSize
this.freshRender = freshRender this.freshRender = freshRender
this.domUpdated = domUpdated
this.bottomFirst = bottomFirst this.bottomFirst = bottomFirst
this.hasUhtml = hasUhtml this.hasUhtml = hasUhtml
this.shouldLazyLoad = false
this.lastScrollTop = 0 this.lastScrollTop = 0
this.lastScrollHeight = 0 this.lastScrollHeight = 0
@ -1336,6 +1336,9 @@
this.lastScrollTop = this.lazyContainer.scrollHeight - this.lastScrollHeight + this.lazyContainer.scrollTop this.lastScrollTop = this.lazyContainer.scrollHeight - this.lastScrollHeight + this.lazyContainer.scrollTop
this.lazyContainer.scrollTo({ top: this.lastScrollTop }) this.lazyContainer.scrollTo({ top: this.lastScrollTop })
this.lastScrollHeight = this.lazyContainer.scrollHeight this.lastScrollHeight = this.lazyContainer.scrollHeight
// Callback to be called if dom is updated
if (this.shouldLazyLoad && this.domUpdated)
this.domUpdated()
} }
} }
}) })
@ -1350,6 +1353,7 @@
} }
render(options = {}) { render(options = {}) {
let { lazyLoad = false } = options let { lazyLoad = false } = options
this.shouldLazyLoad = lazyLoad
const frag = document.createDocumentFragment(); const frag = document.createDocumentFragment();
if (lazyLoad) { if (lazyLoad) {
this.updateStartIndex = this.updateEndIndex this.updateStartIndex = this.updateEndIndex
@ -1367,8 +1371,7 @@
this.lastScrollTop = this.lazyContainer.scrollTop this.lastScrollTop = this.lazyContainer.scrollTop
if (this.bottomFirst) { if (this.bottomFirst) {
if (this.hasUhtml) { if (this.hasUhtml) {
console.log('hasUhtml') renderElem(this.lazyContainer, html`${this.arrayOfElements.slice(0, this.updateEndIndex).reverse().map(this.renderFn)}`)
renderElem(this.lazyContainer, html`${this.arrayOfElements.slice(-this.updateEndIndex).reverse().map(this.renderFn)}`)
} else { } else {
this.arrayOfElements.slice(this.updateStartIndex, this.updateEndIndex).forEach(element => { this.arrayOfElements.slice(this.updateStartIndex, this.updateEndIndex).forEach(element => {
frag.prepend(this.renderFn(element)) frag.prepend(this.renderFn(element))
@ -1385,6 +1388,7 @@
this.lazyContainer.append(frag) this.lazyContainer.append(frag)
} }
} }
this.isRendering = false
if (!lazyLoad && this.bottomFirst) if (!lazyLoad && this.bottomFirst)
this.lazyContainer.scrollTo({ this.lazyContainer.scrollTo({
top: this.lazyContainer.scrollHeight, top: this.lazyContainer.scrollHeight,
@ -1468,6 +1472,9 @@
activeMail, activeMail,
frag = document.createDocumentFragment() frag = document.createDocumentFragment()
const renderedDates = new Set()
// render elements // render elements
const render = { const render = {
mailCard(floID, ref, subject, timestamp, content, markUnread) { mailCard(floID, ref, subject, timestamp, content, markUnread) {
@ -1594,34 +1601,19 @@
}, },
messageBubble(msg) { messageBubble(msg) {
let { admin = false, newMembers = [], rmMembers = [], groupID, name, description, sender, floID, message, time: timestamp, category, unconfirmed = false, updateChatCard = false } = msg let { admin = false, newMembers = [], rmMembers = [], groupID, name, description, sender, floID, message, time: timestamp, category, unconfirmed = false, updateChatCard = false } = msg
let card = getRef('message_template').content.cloneNode(true),
cardContainer = card.querySelector('.message'),
messageContent = cardContainer.children[0],
messageTime = cardContainer.children[1]
if (activeChat.isGroup) { if (activeChat.isGroup) {
floID = groupID floID = groupID
category = sender === myFloID ? 'sent' : 'received' category = sender === myFloID ? 'sent' : 'received'
} }
if (message) { if (message) {
cardContainer.id = `${floID}_${timestamp}` let senderName = null
if (unconfirmed)
cardContainer.classList.add('unconfirmed')
cardContainer.classList.add(category)
if (sender) { if (sender) {
if (sender !== myFloID && lastSender !== sender) { if (sender !== myFloID && lastSender !== sender)
let senderName = html.node`<div class="sender-name" style=${`color:${contactColor(sender)}`}>${getContactName(sender)}</div>` senderName = html.node`<div class="sender-name" style=${`color:${contactColor(sender)}`}>${getContactName(sender)}</div>`
cardContainer.prepend(senderName)
cardContainer.classList.add('distinct-sender')
messageContent = cardContainer.children[1]
messageTime = cardContainer.children[2]
}
lastSender = sender lastSender = sender
} }
let messageContent = document.createDocumentFragment()
let isBigEmoji = false
if (hasURL(message)) { if (hasURL(message)) {
const chunks = message.split(' ') const chunks = message.split(' ')
const chunksLength = chunks.length - 1 const chunksLength = chunks.length - 1
@ -1631,45 +1623,32 @@
const text = chunksLength !== index ? `${chunk} ` : chunk const text = chunksLength !== index ? `${chunk} ` : chunk
const anchorTag = html.node`<a href="${href}" target="_blank" rel="noopener">${text}</a>` const anchorTag = html.node`<a href="${href}" target="_blank" rel="noopener">${text}</a>`
messageContent.append(anchorTag) messageContent.append(anchorTag)
} } else {
else {
const text = chunksLength !== index ? `${chunk} ` : chunk const text = chunksLength !== index ? `${chunk} ` : chunk
const textNode = document.createTextNode(text) const textNode = document.createTextNode(text)
messageContent.append(textNode) messageContent.append(textNode)
} }
}) })
} } else {
else {
let [messageBody, isOnlyEmoji] = isEmoji(message) let [messageBody, isOnlyEmoji] = isEmoji(message)
if (isOnlyEmoji) isBigEmoji = isOnlyEmoji
cardContainer.classList.add('big-emoji')
messageContent.append(messageBody) messageContent.append(messageBody)
} }
let time = new Date(timestamp).toString(),
minutes = String(new Date(timestamp).getMinutes()),
hours = new Date(timestamp).getHours(),
year = new Date(timestamp).getFullYear()
minutes = minutes.length === 1 ? `0${minutes}` : minutes
let finalHours = hours - 12 > 0 ? `${hours - 12}:${minutes} pm` : `${hours}:${minutes} am`
messageTime.textContent = finalHours
if (currentFloID !== floID) { if (currentFloID !== floID) {
currentDate = null
lastSender = null lastSender = null
currentFloID = floID currentFloID = floID
renderedDates.clear()
} }
const messageDate = getFormattedTime(timestamp, 'date-only')
if (!renderedDates.has(`${time.slice(4, 10)} ${year}`) && `${time.slice(4, 10)} ${year}` !== currentDate) { renderedDates.add(messageDate)
let frag = document.createDocumentFragment() const className = `message ${category} ${unconfirmed ? 'unconfirmed' : ''} ${senderName ? 'distinct-sender' : ''} ${isBigEmoji ? 'big-emoji' : ''}`
currentDate = `${time.slice(4, 10)} ${year}` return html.node`
let dateCard = html.node`<time class="date-card">${new Date().getFullYear() !== year ? `${time.slice(4, 10)} ${year}` : time.slice(4, 10)}</time>` <div class="${className}" id="${`${floID}_${timestamp}`}" data-date="${messageDate}">
frag.append(dateCard, card) ${senderName}
renderedDates.set(currentDate, currentDate) <p class="message-body">${messageContent}</p>
return frag <time class="time">${getFormattedTime(timestamp, 'time-only')}</time>
} </div>
else `
return card;
} else if (admin) { } else if (admin) {
if (newMembers.length) { if (newMembers.length) {
const cards = document.createDocumentFragment() const cards = document.createDocumentFragment()
@ -1679,8 +1658,7 @@
cards.append(eventCard) cards.append(eventCard)
}) })
return cards return cards
} } else if (rmMembers.length) {
else if (rmMembers.length) {
const cards = document.createDocumentFragment() const cards = document.createDocumentFragment()
const { admin } = messenger.groups[groupID] const { admin } = messenger.groups[groupID]
rmMembers.forEach(member => { rmMembers.forEach(member => {
@ -1688,11 +1666,9 @@
cards.append(eventCard) cards.append(eventCard)
}) })
return cards return cards
} } else if (name) {
else if (name) {
return html.node`<p class="group-event-card">Changed group name to '${name}'</p>` return html.node`<p class="group-event-card">Changed group name to '${name}'</p>`
} } else if (description) {
else if (description) {
return html.node`<p class="group-event-card">Changed group description to '${description}'</p>` return html.node`<p class="group-event-card">Changed group description to '${description}'</p>`
} }
} }
@ -1702,7 +1678,6 @@
let currentDate, let currentDate,
currentFloID, currentFloID,
renderedDates = new Map(),
lastSender lastSender
const hasURL = text => /[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/.test(text) const hasURL = text => /[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/.test(text)
@ -1817,8 +1792,6 @@
const chatScrollInfo = {}; const chatScrollInfo = {};
getRef('messages_container').addEventListener('scroll', debounce(() => { getRef('messages_container').addEventListener('scroll', debounce(() => {
chatScrollInfo['scrollTop'] = this.scrollTop
chatScrollInfo['scrollheight'] = this.scrollHeight
if ((this.scrollHeight > this.clientHeight) && (this.scrollHeight - this.clientHeight - this.scrollTop >= 100)) { if ((this.scrollHeight > this.clientHeight) && (this.scrollHeight - this.clientHeight - this.scrollTop >= 100)) {
chatScrollInfo['isScrolledUp'] = true chatScrollInfo['isScrolledUp'] = true
getRef('scroll_to_bottom').classList.add('no-transformations') getRef('scroll_to_bottom').classList.add('no-transformations')
@ -2449,13 +2422,21 @@
chatLazyLoader.update(messages) chatLazyLoader.update(messages)
} else { } else {
chatLazyLoader = new LazyLoader('#messages_container', messages, render.messageBubble, { chatLazyLoader = new LazyLoader('#messages_container', messages, render.messageBubble, {
bottomFirst: true, hasUhtml: true, freshRender: () => { bottomFirst: true, domUpdated: debounce(() => {
currentDate = null renderedDates.forEach(date => {
lastSender = null if (getRef('messages_container').querySelector(`.date-card[data-date="${date}"]`)) {
} getRef('messages_container').querySelector(`.date-card[data-date="${date}"]`).remove()
}
const dateCard = html.node`<time class="date-card" data-date="${date}">${date}</time>`
getRef('messages_container').querySelector(`.message[data-date="${date}"]`).before(dateCard)
renderedDates.delete(date)
}, 100)
})
}); });
} }
chatLazyLoader.init() chatLazyLoader.init()
messages.forEach(messageDetails => { messages.forEach(messageDetails => {
let { floID, groupID, sender, message, time, category } = messageDetails let { floID, groupID, sender, message, time, category } = messageDetails
const contact = getRef('chats_list').querySelector(`.contact[flo-id='${floID || groupID}']`) const contact = getRef('chats_list').querySelector(`.contact[flo-id='${floID || groupID}']`)
@ -3270,7 +3251,8 @@
document.body.style.setProperty('--accent-color', color); document.body.style.setProperty('--accent-color', color);
}) })
document.getElementById('select_bg_image').addEventListener('change', function (e) { document.getElementById('select_bg_image').addEventListener('change', async function (e) {
await compactIDB.writeData('userSettings', true, 'hasSelectedBg')
compactIDB.writeData('userSettings', this.files[0], 'bgImage') compactIDB.writeData('userSettings', this.files[0], 'bgImage')
.then(async res => { .then(async res => {
setBgImage() setBgImage()
@ -3279,24 +3261,35 @@
.catch(err => console.error(err)) .catch(err => console.error(err))
}) })
getRef('bg_preview_container').addEventListener('change', async e => {
await compactIDB.writeData('userSettings', e.target.value === 'img', 'hasSelectedBg');
[...getRef('bg_preview_container').children].forEach(child => {
if (child.firstElementChild.value === e.target.value)
child.classList.add('bg-preview--selected')
else
child.classList.remove('bg-preview--selected')
})
if (e.target.value === 'img') {
setBgImage()
} else {
setDefaultBg()
}
})
async function setBgImage() { async function setBgImage() {
try { try {
const hasSelectedBg = await compactIDB.readData('userSettings', 'hasSelectedBg')
const image = await compactIDB.readData('userSettings', 'bgImage') const image = await compactIDB.readData('userSettings', 'bgImage')
console.log(image)
if (image) { if (image) {
const url = URL.createObjectURL(image) const url = URL.createObjectURL(image)
getRef('chat').style.background = `linear-gradient(rgba(var(--foreground-color), 0.6), rgba(var(--foreground-color), 0.6)), url(${url}) center no-repeat` if (hasSelectedBg) {
getRef('mail').style.background = `linear-gradient(rgba(var(--foreground-color), 0.6), rgba(var(--foreground-color), 0.6)), url(${url}) center no-repeat` getRef('background_image').src = url
getRef('chat_preview').style.background = `linear-gradient(rgba(var(--foreground-color), 0.6), rgba(var(--foreground-color), 0.6)), url(${url}) center no-repeat` addClass(['#chat', '#mail', '#chat_preview'], 'has-bg-image')
getRef('chat').style.backgroundSize = 'cover' getRef('select_bg_button').textContent = 'Change background'
getRef('mail').style.backgroundSize = 'cover' getRef('selected_bg_preview').classList.add('bg-preview--selected')
getRef('chat_preview').style.backgroundSize = 'cover'; getRef('default_bg_preview').classList.remove('bg-preview--selected')
addClass(['#chat', '#mail', '#chat_preview'], 'has-bg-image') }
getRef('selected_bg_preview').firstElementChild.src = url
getRef('selected_bg_preview').classList.add('bg-preview--selected')
getRef('selected_bg_preview').classList.remove('hide') getRef('selected_bg_preview').classList.remove('hide')
getRef('default_bg_preview').classList.remove('bg-preview--selected') getRef('selected_bg_preview').querySelector('img').src = url
getRef('select_bg_button').textContent = 'Change background'
} }
} }
catch (err) { catch (err) {
@ -3305,13 +3298,12 @@
} }
function setDefaultBg() { function setDefaultBg() {
getRef('chat').style.background = `` compactIDB.writeData('userSettings', false, 'hasSelectedBg')
getRef('mail').style.background = `` .then(async res => {
getRef('chat_preview').style.background = `` getRef('background_image').src = ''
removeClass(['#chat', '#mail', '#chat_preview'], 'has-bg-image') removeClass(['#chat', '#mail', '#chat_preview'], 'has-bg-image')
getRef('selected_bg_preview').classList.remove('bg-preview--selected') })
getRef('default_bg_preview').classList.add('bg-preview--selected') .catch(err => console.error(err))
notify('Default background applied', 'success')
} }
</script> </script>