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

added proper routing for settings page

Browse Source
This commit is contained in:
sairaj mote 2022-06-20 18:07:45 +05:30
parent 36550e36ad
commit 6af8b38faf
4 changed files with 118 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
css/main.css
View File

@ -1435,13 +1435,13 @@ sm-button[variant=primary] {
#contacts, #contacts,
#mails, #mails,
#settings_page { #settings {
height: 100%; height: 100%;
overflow-y: hidden; overflow-y: hidden;
} }
#contacts .header, #contacts .header,
#mails .header, #mails .header,
#settings_page .header { #settings .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;
@ -1449,7 +1449,7 @@ sm-button[variant=primary] {
} }
#contacts .header .expanding-search, #contacts .header .expanding-search,
#mails .header .expanding-search, #mails .header .expanding-search,
#settings_page .header .expanding-search { #settings .header .expanding-search {
position: absolute; position: absolute;
width: 100%; width: 100%;
padding: 0.7rem 1.5rem; padding: 0.7rem 1.5rem;
@ -1461,38 +1461,38 @@ sm-button[variant=primary] {
} }
#contacts .header .expanding-search.expand, #contacts .header .expanding-search.expand,
#mails .header .expanding-search.expand, #mails .header .expanding-search.expand,
#settings_page .header .expanding-search.expand { #settings .header .expanding-search.expand {
transform: none; transform: none;
opacity: 1; opacity: 1;
pointer-events: all; pointer-events: all;
} }
#contacts .header sm-input, #contacts .header sm-input,
#mails .header sm-input, #mails .header sm-input,
#settings_page .header sm-input { #settings .header sm-input {
margin: 0; margin: 0;
width: 100%; width: 100%;
--padding: 0.5rem 1rem; --padding: 0.5rem 1rem;
} }
#contacts .header h4, #contacts .header h4,
#mails .header h4, #mails .header h4,
#settings_page .header h4 { #settings .header h4 {
text-transform: capitalize; text-transform: capitalize;
font-weight: 500; font-weight: 500;
} }
#contacts .header .icon, #contacts .header .icon,
#mails .header .icon, #mails .header .icon,
#settings_page .header .icon { #settings .header .icon {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
margin-right: 1rem; margin-right: 1rem;
} }
#contacts .header .flex h4, #contacts .header .flex h4,
#mails .header .flex h4, #mails .header .flex h4,
#settings_page .header .flex h4 { #settings .header .flex h4 {
flex: 1; flex: 1;
} }
#contacts .header .flex .icon, #contacts .header .flex .icon,
#mails .header .flex .icon, #mails .header .flex .icon,
#settings_page .header .flex .icon { #settings .header .flex .icon {
height: 2.2rem; height: 2.2rem;
width: 2.2rem; width: 2.2rem;
padding: 0.6rem; padding: 0.6rem;
@ -1501,17 +1501,17 @@ sm-button[variant=primary] {
} }
#contacts .header .flex sm-menu, #contacts .header .flex sm-menu,
#mails .header .flex sm-menu, #mails .header .flex sm-menu,
#settings_page .header .flex sm-menu { #settings .header .flex sm-menu {
margin-right: -0.7rem; margin-right: -0.7rem;
} }
#contacts .header sm-button, #contacts .header sm-button,
#mails .header sm-button, #mails .header sm-button,
#settings_page .header sm-button { #settings .header sm-button {
margin: 0; margin: 0;
} }
#contacts .header sm-button .icon, #contacts .header sm-button .icon,
#mails .header sm-button .icon, #mails .header sm-button .icon,
#settings_page .header sm-button .icon { #settings .header sm-button .icon {
height: 0.9rem; height: 0.9rem;
width: 0.9rem; width: 0.9rem;
align-self: center; align-self: center;
@ -1522,7 +1522,7 @@ sm-button[variant=primary] {
#chat_page, #chat_page,
#mail_page, #mail_page,
#settings_page { #settings {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
@ -1594,12 +1594,12 @@ sm-button[variant=primary] {
overflow-y: auto; overflow-y: auto;
} }
#chat, #chat_view,
#mail { #mail {
background-color: rgba(var(--foreground-color), 0.3); background-color: rgba(var(--foreground-color), 0.3);
} }
#chat { #chat_view {
position: relative; position: relative;
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@ -1760,11 +1760,14 @@ sm-button[variant=primary] {
} }
#chat_header .back-button { #chat_header .back-button {
padding: 0.5rem; padding: 0.5rem;
margin-left: -0.7rem; margin-left: -0.5rem;
margin-right: 0.5rem;
}
#chat_header .back-button .icon {
margin-right: 0.3rem;
} }
#chat_header .initial { #chat_header .initial {
cursor: pointer; cursor: pointer;
margin-right: 1rem;
height: 2.2rem; height: 2.2rem;
width: 2.2rem; width: 2.2rem;
flex-shrink: 0; flex-shrink: 0;
@ -1991,6 +1994,7 @@ sm-button[variant=primary] {
text-transform: capitalize; text-transform: capitalize;
font-weight: 500; font-weight: 500;
opacity: 0.9; opacity: 0.9;
color: inherit;
} }
.sidebar-item .icon { .sidebar-item .icon {
margin-right: 1em; margin-right: 1em;
@ -2011,67 +2015,67 @@ sm-button[variant=primary] {
opacity: 1; opacity: 1;
} }
#settings_page #settings_sidebar header { #settings #settings_sidebar header {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
} }
#settings_page .flex sm-button { #settings .flex sm-button {
margin: 0; margin: 0;
margin-left: 1rem; margin-left: 1rem;
} }
#settings_page sm-switch { #settings sm-switch {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
display: flex; display: flex;
margin-bottom: 1rem; margin-bottom: 1rem;
width: min(60ch, 100%); width: min(60ch, 100%);
} }
#settings_page sm-switch .flex { #settings sm-switch .flex {
margin-right: 1rem; margin-right: 1rem;
} }
#settings_page sm-switch h4 { #settings sm-switch h4 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
#settings_page sm-button { #settings sm-button {
width: 100%; width: 100%;
} }
#settings_page #settings_title { #settings #settings_title {
text-transform: capitalize; text-transform: capitalize;
} }
#settings_page #settings_sidebar { #settings #settings_sidebar {
height: 100%; height: 100%;
} }
#settings_page #settings_panel { #settings #settings_panel {
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
} }
#settings_page section { #settings section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
width: min(60ch, 100%); width: min(60ch, 100%);
} }
#settings_page section .button { #settings section .button {
align-self: flex-start; align-self: flex-start;
} }
#settings_page #sign_out::part(button) { #settings #sign_out::part(button) {
color: var(--error-color); color: var(--error-color);
} }
#settings_page color-grid { #settings color-grid {
margin: 0.5rem 0 1.5rem 0; margin: 0.5rem 0 1.5rem 0;
width: min(60ch, 100%); width: min(60ch, 100%);
} }
#settings_page #chat_preview { #settings #chat_preview {
margin-top: 1rem; margin-top: 1rem;
padding: 1rem; padding: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
} }
#settings_page #bg_preview_container { #settings #bg_preview_container {
padding: 1rem 0; padding: 1rem 0;
gap: 0.5rem; gap: 0.5rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
#settings_page .bg-preview { #settings .bg-preview {
position: relative; position: relative;
display: grid; display: grid;
place-items: center; place-items: center;
@ -2082,7 +2086,7 @@ sm-button[variant=primary] {
overflow: hidden; overflow: hidden;
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
} }
#settings_page .bg-preview--selected::after { #settings .bg-preview--selected::after {
content: ""; content: "";
position: absolute; position: absolute;
height: 100%; height: 100%;
@ -2090,10 +2094,10 @@ sm-button[variant=primary] {
border-radius: inherit; border-radius: inherit;
box-shadow: 0 0 0 0.5rem var(--accent-color) inset; box-shadow: 0 0 0 0.5rem var(--accent-color) inset;
} }
#settings_page .bg-preview input { #settings .bg-preview input {
display: none; display: none;
} }
#settings_page .bg-preview__image { #settings .bg-preview__image {
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
height: 100%; height: 100%;
@ -2158,7 +2162,7 @@ sm-button[variant=primary] {
gap: 0.2rem; gap: 0.2rem;
} }
#chat .message { #chat_view .message {
width: auto; width: auto;
max-width: 90%; max-width: 90%;
} }
@ -2167,15 +2171,15 @@ sm-button[variant=primary] {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
} }
#settings_page { #settings {
overflow-x: hidden; overflow-x: hidden;
} }
#settings_page #settings_header { #settings #settings_header {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
padding: 1rem 1.5rem 1rem 0.5rem; padding: 1rem 1.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
background: linear-gradient(rgba(var(--background-color), 0.8), rgba(var(--background-color), 0)); background: linear-gradient(rgba(var(--background-color), 0.8), rgba(var(--background-color), 0));
-webkit-backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem);
@ -2270,7 +2274,7 @@ sm-button[variant=primary] {
max-height: 18rem; max-height: 18rem;
} }
#chat .message { #chat_view .message {
width: auto; width: auto;
align-self: flex-start; align-self: flex-start;
max-width: 55ch; max-width: 55ch;
@ -2282,19 +2286,19 @@ sm-button[variant=primary] {
grid-template-columns: 19rem 1fr; grid-template-columns: 19rem 1fr;
} }
#settings_page { #settings {
display: grid; display: grid;
grid-template-columns: 14rem 1fr; grid-template-columns: 14rem 1fr;
} }
#settings_page sm-button { #settings sm-button {
width: -webkit-max-content; width: -webkit-max-content;
width: -moz-max-content; width: -moz-max-content;
width: max-content; width: max-content;
} }
#settings_page .active { #settings .active {
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
} }
#settings_page .panel > *:first-of-type { #settings .panel > *:first-of-type {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
@ -2314,7 +2318,7 @@ sm-button[variant=primary] {
} }
} }
@media only screen and (min-width: 1080px) { @media only screen and (min-width: 1080px) {
#chat #messages_container { #chat_view #messages_container {
padding: 1rem 4rem; padding: 1rem 4rem;
padding-top: 0; padding-top: 0;
} }
@ -2332,10 +2336,10 @@ sm-button[variant=primary] {
position: relative; position: relative;
} }
#chat.expand-side-panel { #chat_view.expand-side-panel {
grid-template-columns: 1fr 24rem; grid-template-columns: 1fr 24rem;
} }
#chat.expand-side-panel #messages_container { #chat_view.expand-side-panel #messages_container {
padding: 1rem; padding: 1rem;
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

32
css/main.scss
View File

@ -1293,7 +1293,7 @@ sm-button[variant="primary"] {
} }
#contacts, #contacts,
#mails, #mails,
#settings_page { #settings {
height: 100%; height: 100%;
overflow-y: hidden; overflow-y: hidden;
.header { .header {
@ -1359,7 +1359,7 @@ sm-button[variant="primary"] {
} }
#chat_page, #chat_page,
#mail_page, #mail_page,
#settings_page { #settings {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
@ -1425,11 +1425,11 @@ sm-button[variant="primary"] {
max-height: 50vh; max-height: 50vh;
overflow-y: auto; overflow-y: auto;
} }
#chat, #chat_view,
#mail { #mail {
background-color: rgba(var(--foreground-color), 0.3); background-color: rgba(var(--foreground-color), 0.3);
} }
#chat { #chat_view {
position: relative; position: relative;
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@ -1571,11 +1571,14 @@ sm-button[variant="primary"] {
} }
.back-button { .back-button {
padding: 0.5rem; padding: 0.5rem;
margin-left: -0.7rem; margin-left: -0.5rem;
margin-right: 0.5rem;
.icon {
margin-right: 0.3rem;
}
} }
.initial { .initial {
cursor: pointer; cursor: pointer;
margin-right: 1rem;
height: 2.2rem; height: 2.2rem;
width: 2.2rem; width: 2.2rem;
flex-shrink: 0; flex-shrink: 0;
@ -1786,6 +1789,7 @@ sm-button[variant="primary"] {
text-transform: capitalize; text-transform: capitalize;
font-weight: 500; font-weight: 500;
opacity: 0.9; opacity: 0.9;
color: inherit;
.icon { .icon {
margin-right: 1em; margin-right: 1em;
width: 1em; width: 1em;
@ -1804,7 +1808,7 @@ sm-button[variant="primary"] {
opacity: 1; opacity: 1;
} }
} }
#settings_page { #settings {
#settings_sidebar header { #settings_sidebar header {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
} }
@ -1946,7 +1950,7 @@ sm-button[variant="primary"] {
#contact_container { #contact_container {
gap: 0.2rem; gap: 0.2rem;
} }
#chat { #chat_view {
.message { .message {
width: auto; width: auto;
max-width: 90%; max-width: 90%;
@ -1955,13 +1959,13 @@ sm-button[variant="primary"] {
#chat_header { #chat_header {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
} }
#settings_page { #settings {
overflow-x: hidden; overflow-x: hidden;
#settings_header { #settings_header {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
padding: 1rem 1.5rem 1rem 0.5rem; padding: 1rem 1.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
background: linear-gradient( background: linear-gradient(
rgba(var(--background-color), 0.8), rgba(var(--background-color), 0.8),
@ -2045,7 +2049,7 @@ sm-button[variant="primary"] {
#emoji_picker { #emoji_picker {
max-height: 18rem; max-height: 18rem;
} }
#chat { #chat_view {
.message { .message {
width: auto; width: auto;
align-self: flex-start; align-self: flex-start;
@ -2057,7 +2061,7 @@ sm-button[variant="primary"] {
display: grid; display: grid;
grid-template-columns: 19rem 1fr; grid-template-columns: 19rem 1fr;
} }
#settings_page { #settings {
display: grid; display: grid;
grid-template-columns: 14rem 1fr; grid-template-columns: 14rem 1fr;
sm-button { sm-button {
@ -2085,7 +2089,7 @@ sm-button[variant="primary"] {
} }
} }
@media only screen and (min-width: 1080px) { @media only screen and (min-width: 1080px) {
#chat { #chat_view {
#messages_container { #messages_container {
padding: 1rem 4rem; padding: 1rem 4rem;
padding-top: 0; padding-top: 0;
@ -2103,7 +2107,7 @@ sm-button[variant="primary"] {
#chat_details_panel { #chat_details_panel {
position: relative; position: relative;
} }
#chat { #chat_view {
&.expand-side-panel { &.expand-side-panel {
grid-template-columns: 1fr 24rem; grid-template-columns: 1fr 24rem;
#messages_container { #messages_container {

98
index.html
View File

@ -261,7 +261,7 @@
<p class="light-text">Tap/click on 'New chat' to add or select a contact.</p> <p class="light-text">Tap/click on 'New chat' to add or select a contact.</p>
</div> </div>
</div> </div>
<div id="chat" class="grid hide-on-mobile hide"> <div id="chat_view" 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">
<button class=" hide-on-desktop back-button" onclick="goto('chats')"> <button class=" hide-on-desktop back-button" onclick="goto('chats')">
@ -270,9 +270,9 @@
<path d="M0 0h24v24H0V0z" fill="none" opacity=".87" /> <path d="M0 0h24v24H0V0z" fill="none" opacity=".87" />
<path d="M17.51 3.87L15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13z" /> <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>
<div id="receiver_initial" class="initial flex align-center"></div>
</button> </button>
<div class="flex align-center interactive" onclick="showChatDetails({show: true})"> <div class="flex align-center interactive" onclick="showChatDetails({show: true})">
<div id="receiver_initial" class="initial flex align-center"></div>
<h4 id="receiver_name"></h4> <h4 id="receiver_name"></h4>
</div> </div>
</header> </header>
@ -416,29 +416,29 @@
</div> </div>
</div> </div>
</section> </section>
<section id="settings_page" class="inner-page hide"> <section id="settings" class="inner-page hide">
<aside id="settings_sidebar"> <aside id="settings_sidebar">
<header class="grid header"> <header class="grid header">
<h4>Settings</h4> <h4>Settings</h4>
</header> </header>
<div class="sidebar-item interactive active" data-target="profile_panel">Account</div> <a class="sidebar-item interactive active" href="#/settings/profile">Account</a>
<div class="sidebar-item interactive" data-target="chat_panel">chat</div> <a class="sidebar-item interactive" href="#/settings/chat">chat</a>
<div class="sidebar-item interactive" data-target="personalize_panel">personalise</div> <a class="sidebar-item interactive" href="#/settings/personalize">personalize</a>
<div class="sidebar-item interactive" data-target="backup_panel">backup & restore</div> <a class="sidebar-item interactive" href="#/settings/backup">backup & restore</a>
<div class="sidebar-item interactive" data-target="about_panel">About</div> <a class="sidebar-item interactive" href="#/settings/about">About</a>
</aside> </aside>
<div id="settings_panel" class=" hide-on-mobile"> <div id="settings_panel" class=" hide-on-mobile">
<header id="settings_header" class="flex align-center hide-on-desktop"> <header id="settings_header" class="flex align-center hide-on-desktop">
<button id="back_settings" onclick='hidePanel()'> <a href="#/settings" id="back_settings" class="button icon-only margin-right-0-5">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000"> width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /> <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
</svg> </svg>
</button> </a>
<h4 id="settings_title"></h4> <h4 id="settings_title"></h4>
</header> </header>
<div id="profile_panel" class="panel"> <div id="profile" class="panel">
<section> <section>
<h4>My FLO ID</h4> <h4>My FLO ID</h4>
<sm-copy id="greet_tag"></sm-copy> <sm-copy id="greet_tag"></sm-copy>
@ -482,7 +482,7 @@
Sign Out</button> Sign Out</button>
</section> </section>
</div> </div>
<div id="chat_panel" class="panel hide"> <div id="chat" class="panel hide">
<sm-switch id="is_enter_send_toggle"> <sm-switch id="is_enter_send_toggle">
<div slot="left" class="flex flex-direction-column"> <div slot="left" class="flex flex-direction-column">
<h4>Send by Enter</h4> <h4>Send by Enter</h4>
@ -496,7 +496,7 @@
</div> </div>
</sm-switch> </sm-switch>
</div> </div>
<div id="personalize_panel" class="panel hide"> <div id="personalize" class="panel hide">
<section> <section>
<h4>Chat preview</h4> <h4>Chat preview</h4>
<div id="chat_preview"> <div id="chat_preview">
@ -562,7 +562,7 @@
<color-grid id="accent_color_selector"></color-grid> <color-grid id="accent_color_selector"></color-grid>
</section> </section>
</div> </div>
<div id="backup_panel" class="panel hide"> <div id="backup" class="panel hide">
<section> <section>
<h4>Backup data</h4> <h4>Backup data</h4>
<p>Create a backup of contacts, conversations and mails. Which can later be used to restore <p>Create a backup of contacts, conversations and mails. Which can later be used to restore
@ -599,7 +599,7 @@
</label> </label>
</section> </section>
</div> </div>
<div id="about_panel" class="panel hide"> <div id="about" class="panel hide">
<section> <section>
<p>Created by RanchiMall, a Blockchain incorporated entity</p> <p>Created by RanchiMall, a Blockchain incorporated entity</p>
</section> </section>
@ -633,7 +633,7 @@
</a> </a>
</li> </li>
<li> <li>
<a class="nav-item flex align-center" href="#/settings_page" title="Settings"> <a class="nav-item flex align-center" href="#/settings" title="Settings">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000"> width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -2122,15 +2122,9 @@
}) })
document.addEventListener('click', e => { document.addEventListener('click', e => {
if (e.target.closest('.sidebar-item')) {
let target = e.target.closest('.sidebar-item')
if (target.dataset.target)
showPanel(target, target.dataset.target)
}
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') getRef('mail_contact_list').classList.remove('hide')
} } else {
else {
getRef('mail_contact_list').classList.add('hide') getRef('mail_contact_list').classList.add('hide')
} }
if (e.target.closest('#new_mail_button')) { if (e.target.closest('#new_mail_button')) {
@ -2213,16 +2207,16 @@
if (activeChat['chatCard'] === contact && !isMobileView) return if (activeChat['chatCard'] === contact && !isMobileView) return
showChatDetails({ show: false, animate: false }) showChatDetails({ show: false, animate: false })
document.title = `FLO Messenger` document.title = `FLO Messenger`
getRef('chat').classList.remove('hide') getRef('chat_view').classList.remove('hide')
viewConversation(contact) viewConversation(contact)
if (activeChat['chatCard']) if (activeChat['chatCard'])
activeChat['chatCard'].classList.remove('active') activeChat['chatCard'].classList.remove('active')
contact.classList.add('active') contact.classList.add('active')
activeChat['chatCard'] = contact activeChat['chatCard'] = contact
if (activeChatPage.id === 'contacts') { if (activeChatPage.id === 'contacts') {
getRef('chat').classList.remove('hide-on-mobile') getRef('chat_view').classList.remove('hide-on-mobile')
getRef('contacts').classList.add('hide-on-mobile') getRef('contacts').classList.add('hide-on-mobile')
activeChatPage = getRef('chat') activeChatPage = getRef('chat_view')
getRef('main_navbar').classList.add('hide-on-mobile') getRef('main_navbar').classList.add('hide-on-mobile')
} }
} }
@ -2421,16 +2415,16 @@
function updateHeight() { function updateHeight() {
if (isMobileView) { if (isMobileView) {
getRef('chat').style.height = window.innerHeight + 'px' getRef('chat_view').style.height = window.innerHeight + 'px'
} }
else { else {
getRef('chat').style.height = '100vh' getRef('chat_view').style.height = '100vh'
} }
} }
function goto(page) { function goto(page) {
if (page === 'chats') { if (page === 'chats') {
getRef('chat').classList.add('hide-on-mobile') getRef('chat_view').classList.add('hide-on-mobile')
getRef('contacts').classList.remove('hide-on-mobile') getRef('contacts').classList.remove('hide-on-mobile')
activeChatPage = getRef('contacts') activeChatPage = getRef('contacts')
} }
@ -2799,10 +2793,6 @@
getRef(`${e.detail.value}_mail_container`).parentNode.classList.remove('hide') getRef(`${e.detail.value}_mail_container`).parentNode.classList.remove('hide')
}) })
const allPanels = document.querySelectorAll('.panel'),
allSidebarItems = document.querySelectorAll('.sidebar-item')
const flyOutLeft = [ const flyOutLeft = [
{ {
transform: 'translateX(0)', transform: 'translateX(0)',
@ -2871,8 +2861,8 @@
return anime return anime
} }
function showPanel(item, panel) { function showPanel(subPageId) {
getRef('settings_title').textContent = item.textContent getRef('settings_title').textContent = subPageId
if (window.innerWidth < 720) { if (window.innerWidth < 720) {
animateTo(getRef('settings_sidebar'), flyOutLeft, animOptions).onfinish = () => { animateTo(getRef('settings_sidebar'), flyOutLeft, animOptions).onfinish = () => {
animateTo(getRef('settings_panel'), flyInLeft, animOptions) animateTo(getRef('settings_panel'), flyInLeft, animOptions)
@ -2881,21 +2871,21 @@
getRef('settings_panel').classList.remove('hide-on-mobile') getRef('settings_panel').classList.remove('hide-on-mobile')
} }
} }
else { document.querySelectorAll('.sidebar-item').forEach(item => item.classList.remove('active'))
allSidebarItems.forEach(panel => panel.classList.remove('active')) document.querySelector(`.sidebar-item[href="#/settings/${subPageId}"]`).classList.add('active')
item.classList.add('active') document.querySelectorAll('.panel').forEach(panel => panel.classList.add('hide'))
} getRef(subPageId).classList.remove('hide')
allPanels.forEach(panel => panel.classList.add('hide'))
getRef(panel).classList.remove('hide')
} }
function hidePanel() { function hidePanel() {
animateTo(getRef('settings_panel'), flyOutRight, animOptions).onfinish = () => { if (isMobileView && !getRef('settings_panel').classList.contains('hide-on-mobile')) {
getRef('settings_title').textContent = '' animateTo(getRef('settings_panel'), flyOutRight, animOptions).onfinish = () => {
getRef('settings_panel').style = '' getRef('settings_title').textContent = ''
animateTo(getRef('settings_sidebar'), flyInRight, animOptions) getRef('settings_panel').style = ''
getRef('settings_panel').classList.add('hide-on-mobile') animateTo(getRef('settings_sidebar'), flyInRight, animOptions)
getRef('settings_sidebar').classList.remove('hide-on-mobile') getRef('settings_panel').classList.add('hide-on-mobile')
getRef('settings_sidebar').classList.remove('hide-on-mobile')
}
} }
} }
@ -3028,7 +3018,7 @@
getRef('delete_chat_button').classList.remove('hide') getRef('delete_chat_button').classList.remove('hide')
} }
getRef('chat').classList.add('expand-side-panel') getRef('chat_view').classList.add('expand-side-panel')
getRef('chat_left').classList.add('hide-on-medium') getRef('chat_left').classList.add('hide-on-medium')
getRef('chat_details_panel').classList.remove('hide') getRef('chat_details_panel').classList.remove('hide')
animateTo(getRef('chat_details_panel'), [ animateTo(getRef('chat_details_panel'), [
@ -3195,6 +3185,7 @@
async function showPage(targetPage, options = {}) { async function showPage(targetPage, options = {}) {
const { firstLoad, hashChange } = options const { firstLoad, hashChange } = options
let pageId let pageId
let subPageId
let params = {} let params = {}
let searchParams let searchParams
if (targetPage === '') { if (targetPage === '') {
@ -3243,6 +3234,11 @@
targetPage = 'sign_up' targetPage = 'sign_up'
break; break;
case 'settings': case 'settings':
if (subPageId) {
showPanel(subPageId)
} else {
hidePanel()
}
break; break;
default: default:
break; break;
@ -3419,7 +3415,7 @@
const url = URL.createObjectURL(image) const url = URL.createObjectURL(image)
if (hasSelectedBg) { if (hasSelectedBg) {
getRef('background_image').src = url getRef('background_image').src = url
addClass(['#chat', '#mail', '#chat_preview'], 'has-bg-image') addClass(['#chat_view', '#mail', '#chat_preview'], 'has-bg-image')
getRef('select_bg_button').textContent = 'Change background' getRef('select_bg_button').textContent = 'Change background'
getRef('selected_bg_preview').classList.add('bg-preview--selected') getRef('selected_bg_preview').classList.add('bg-preview--selected')
getRef('default_bg_preview').classList.remove('bg-preview--selected') getRef('default_bg_preview').classList.remove('bg-preview--selected')
@ -3450,7 +3446,7 @@
compactIDB.writeData('userSettings', false, 'hasSelectedBg') compactIDB.writeData('userSettings', false, 'hasSelectedBg')
.then(async res => { .then(async res => {
getRef('background_image').src = '' getRef('background_image').src = ''
removeClass(['#chat', '#mail', '#chat_preview'], 'has-bg-image') removeClass(['#chat_view', '#mail', '#chat_preview'], 'has-bg-image')
}) })
.catch(err => console.error(err)) .catch(err => console.error(err))
} }