added proper routing for settings page
This commit is contained in:
sairaj mote
parent
36550e36ad
commit
6af8b38faf
100
css/main.css
100
css/main.css
@ -1435,13 +1435,13 @@ sm-button[variant=primary] {
|
||||
|
||||
#contacts,
|
||||
#mails,
|
||||
#settings_page {
|
||||
#settings {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
#contacts .header,
|
||||
#mails .header,
|
||||
#settings_page .header {
|
||||
#settings .header {
|
||||
padding: 1rem 1.5rem 1rem 1.5rem;
|
||||
position: relative;
|
||||
gap: 0.5rem;
|
||||
@ -1449,7 +1449,7 @@ sm-button[variant=primary] {
|
||||
}
|
||||
#contacts .header .expanding-search,
|
||||
#mails .header .expanding-search,
|
||||
#settings_page .header .expanding-search {
|
||||
#settings .header .expanding-search {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 0.7rem 1.5rem;
|
||||
@ -1461,38 +1461,38 @@ sm-button[variant=primary] {
|
||||
}
|
||||
#contacts .header .expanding-search.expand,
|
||||
#mails .header .expanding-search.expand,
|
||||
#settings_page .header .expanding-search.expand {
|
||||
#settings .header .expanding-search.expand {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
#contacts .header sm-input,
|
||||
#mails .header sm-input,
|
||||
#settings_page .header sm-input {
|
||||
#settings .header sm-input {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
--padding: 0.5rem 1rem;
|
||||
}
|
||||
#contacts .header h4,
|
||||
#mails .header h4,
|
||||
#settings_page .header h4 {
|
||||
#settings .header h4 {
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
}
|
||||
#contacts .header .icon,
|
||||
#mails .header .icon,
|
||||
#settings_page .header .icon {
|
||||
#settings .header .icon {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
#contacts .header .flex h4,
|
||||
#mails .header .flex h4,
|
||||
#settings_page .header .flex h4 {
|
||||
#settings .header .flex h4 {
|
||||
flex: 1;
|
||||
}
|
||||
#contacts .header .flex .icon,
|
||||
#mails .header .flex .icon,
|
||||
#settings_page .header .flex .icon {
|
||||
#settings .header .flex .icon {
|
||||
height: 2.2rem;
|
||||
width: 2.2rem;
|
||||
padding: 0.6rem;
|
||||
@ -1501,17 +1501,17 @@ sm-button[variant=primary] {
|
||||
}
|
||||
#contacts .header .flex sm-menu,
|
||||
#mails .header .flex sm-menu,
|
||||
#settings_page .header .flex sm-menu {
|
||||
#settings .header .flex sm-menu {
|
||||
margin-right: -0.7rem;
|
||||
}
|
||||
#contacts .header sm-button,
|
||||
#mails .header sm-button,
|
||||
#settings_page .header sm-button {
|
||||
#settings .header sm-button {
|
||||
margin: 0;
|
||||
}
|
||||
#contacts .header sm-button .icon,
|
||||
#mails .header sm-button .icon,
|
||||
#settings_page .header sm-button .icon {
|
||||
#settings .header sm-button .icon {
|
||||
height: 0.9rem;
|
||||
width: 0.9rem;
|
||||
align-self: center;
|
||||
@ -1522,7 +1522,7 @@ sm-button[variant=primary] {
|
||||
|
||||
#chat_page,
|
||||
#mail_page,
|
||||
#settings_page {
|
||||
#settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
@ -1594,12 +1594,12 @@ sm-button[variant=primary] {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#chat,
|
||||
#chat_view,
|
||||
#mail {
|
||||
background-color: rgba(var(--foreground-color), 0.3);
|
||||
}
|
||||
|
||||
#chat {
|
||||
#chat_view {
|
||||
position: relative;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@ -1760,11 +1760,14 @@ sm-button[variant=primary] {
|
||||
}
|
||||
#chat_header .back-button {
|
||||
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 {
|
||||
cursor: pointer;
|
||||
margin-right: 1rem;
|
||||
height: 2.2rem;
|
||||
width: 2.2rem;
|
||||
flex-shrink: 0;
|
||||
@ -1991,6 +1994,7 @@ sm-button[variant=primary] {
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
opacity: 0.9;
|
||||
color: inherit;
|
||||
}
|
||||
.sidebar-item .icon {
|
||||
margin-right: 1em;
|
||||
@ -2011,67 +2015,67 @@ sm-button[variant=primary] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#settings_page #settings_sidebar header {
|
||||
#settings #settings_sidebar header {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
#settings_page .flex sm-button {
|
||||
#settings .flex sm-button {
|
||||
margin: 0;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
#settings_page sm-switch {
|
||||
#settings sm-switch {
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
width: min(60ch, 100%);
|
||||
}
|
||||
#settings_page sm-switch .flex {
|
||||
#settings sm-switch .flex {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
#settings_page sm-switch h4 {
|
||||
#settings sm-switch h4 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
#settings_page sm-button {
|
||||
#settings sm-button {
|
||||
width: 100%;
|
||||
}
|
||||
#settings_page #settings_title {
|
||||
#settings #settings_title {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
#settings_page #settings_sidebar {
|
||||
#settings #settings_sidebar {
|
||||
height: 100%;
|
||||
}
|
||||
#settings_page #settings_panel {
|
||||
#settings #settings_panel {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
#settings_page section {
|
||||
#settings section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 1.5rem;
|
||||
width: min(60ch, 100%);
|
||||
}
|
||||
#settings_page section .button {
|
||||
#settings section .button {
|
||||
align-self: flex-start;
|
||||
}
|
||||
#settings_page #sign_out::part(button) {
|
||||
#settings #sign_out::part(button) {
|
||||
color: var(--error-color);
|
||||
}
|
||||
#settings_page color-grid {
|
||||
#settings color-grid {
|
||||
margin: 0.5rem 0 1.5rem 0;
|
||||
width: min(60ch, 100%);
|
||||
}
|
||||
#settings_page #chat_preview {
|
||||
#settings #chat_preview {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
#settings_page #bg_preview_container {
|
||||
#settings #bg_preview_container {
|
||||
padding: 1rem 0;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#settings_page .bg-preview {
|
||||
#settings .bg-preview {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
@ -2082,7 +2086,7 @@ sm-button[variant=primary] {
|
||||
overflow: hidden;
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
#settings_page .bg-preview--selected::after {
|
||||
#settings .bg-preview--selected::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
@ -2090,10 +2094,10 @@ sm-button[variant=primary] {
|
||||
border-radius: inherit;
|
||||
box-shadow: 0 0 0 0.5rem var(--accent-color) inset;
|
||||
}
|
||||
#settings_page .bg-preview input {
|
||||
#settings .bg-preview input {
|
||||
display: none;
|
||||
}
|
||||
#settings_page .bg-preview__image {
|
||||
#settings .bg-preview__image {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
@ -2158,7 +2162,7 @@ sm-button[variant=primary] {
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
#chat .message {
|
||||
#chat_view .message {
|
||||
width: auto;
|
||||
max-width: 90%;
|
||||
}
|
||||
@ -2167,15 +2171,15 @@ sm-button[variant=primary] {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
|
||||
#settings_page {
|
||||
#settings {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#settings_page #settings_header {
|
||||
#settings #settings_header {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
padding: 1rem 1.5rem 1rem 0.5rem;
|
||||
padding: 1rem 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(rgba(var(--background-color), 0.8), rgba(var(--background-color), 0));
|
||||
-webkit-backdrop-filter: blur(0.5rem);
|
||||
@ -2270,7 +2274,7 @@ sm-button[variant=primary] {
|
||||
max-height: 18rem;
|
||||
}
|
||||
|
||||
#chat .message {
|
||||
#chat_view .message {
|
||||
width: auto;
|
||||
align-self: flex-start;
|
||||
max-width: 55ch;
|
||||
@ -2282,19 +2286,19 @@ sm-button[variant=primary] {
|
||||
grid-template-columns: 19rem 1fr;
|
||||
}
|
||||
|
||||
#settings_page {
|
||||
#settings {
|
||||
display: grid;
|
||||
grid-template-columns: 14rem 1fr;
|
||||
}
|
||||
#settings_page sm-button {
|
||||
#settings sm-button {
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
#settings_page .active {
|
||||
#settings .active {
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
#settings_page .panel > *:first-of-type {
|
||||
#settings .panel > *:first-of-type {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
@ -2314,7 +2318,7 @@ sm-button[variant=primary] {
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1080px) {
|
||||
#chat #messages_container {
|
||||
#chat_view #messages_container {
|
||||
padding: 1rem 4rem;
|
||||
padding-top: 0;
|
||||
}
|
||||
@ -2332,10 +2336,10 @@ sm-button[variant=primary] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#chat.expand-side-panel {
|
||||
#chat_view.expand-side-panel {
|
||||
grid-template-columns: 1fr 24rem;
|
||||
}
|
||||
#chat.expand-side-panel #messages_container {
|
||||
#chat_view.expand-side-panel #messages_container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1293,7 +1293,7 @@ sm-button[variant="primary"] {
|
||||
}
|
||||
#contacts,
|
||||
#mails,
|
||||
#settings_page {
|
||||
#settings {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
.header {
|
||||
@ -1359,7 +1359,7 @@ sm-button[variant="primary"] {
|
||||
}
|
||||
#chat_page,
|
||||
#mail_page,
|
||||
#settings_page {
|
||||
#settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
@ -1425,11 +1425,11 @@ sm-button[variant="primary"] {
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#chat,
|
||||
#chat_view,
|
||||
#mail {
|
||||
background-color: rgba(var(--foreground-color), 0.3);
|
||||
}
|
||||
#chat {
|
||||
#chat_view {
|
||||
position: relative;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@ -1571,11 +1571,14 @@ sm-button[variant="primary"] {
|
||||
}
|
||||
.back-button {
|
||||
padding: 0.5rem;
|
||||
margin-left: -0.7rem;
|
||||
margin-left: -0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
.icon {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
}
|
||||
.initial {
|
||||
cursor: pointer;
|
||||
margin-right: 1rem;
|
||||
height: 2.2rem;
|
||||
width: 2.2rem;
|
||||
flex-shrink: 0;
|
||||
@ -1786,6 +1789,7 @@ sm-button[variant="primary"] {
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
opacity: 0.9;
|
||||
color: inherit;
|
||||
.icon {
|
||||
margin-right: 1em;
|
||||
width: 1em;
|
||||
@ -1804,7 +1808,7 @@ sm-button[variant="primary"] {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
#settings_page {
|
||||
#settings {
|
||||
#settings_sidebar header {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
@ -1946,7 +1950,7 @@ sm-button[variant="primary"] {
|
||||
#contact_container {
|
||||
gap: 0.2rem;
|
||||
}
|
||||
#chat {
|
||||
#chat_view {
|
||||
.message {
|
||||
width: auto;
|
||||
max-width: 90%;
|
||||
@ -1955,13 +1959,13 @@ sm-button[variant="primary"] {
|
||||
#chat_header {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
#settings_page {
|
||||
#settings {
|
||||
overflow-x: hidden;
|
||||
#settings_header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
padding: 1rem 1.5rem 1rem 0.5rem;
|
||||
padding: 1rem 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(
|
||||
rgba(var(--background-color), 0.8),
|
||||
@ -2045,7 +2049,7 @@ sm-button[variant="primary"] {
|
||||
#emoji_picker {
|
||||
max-height: 18rem;
|
||||
}
|
||||
#chat {
|
||||
#chat_view {
|
||||
.message {
|
||||
width: auto;
|
||||
align-self: flex-start;
|
||||
@ -2057,7 +2061,7 @@ sm-button[variant="primary"] {
|
||||
display: grid;
|
||||
grid-template-columns: 19rem 1fr;
|
||||
}
|
||||
#settings_page {
|
||||
#settings {
|
||||
display: grid;
|
||||
grid-template-columns: 14rem 1fr;
|
||||
sm-button {
|
||||
@ -2085,7 +2089,7 @@ sm-button[variant="primary"] {
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1080px) {
|
||||
#chat {
|
||||
#chat_view {
|
||||
#messages_container {
|
||||
padding: 1rem 4rem;
|
||||
padding-top: 0;
|
||||
@ -2103,7 +2107,7 @@ sm-button[variant="primary"] {
|
||||
#chat_details_panel {
|
||||
position: relative;
|
||||
}
|
||||
#chat {
|
||||
#chat_view {
|
||||
&.expand-side-panel {
|
||||
grid-template-columns: 1fr 24rem;
|
||||
#messages_container {
|
||||
|
||||
98
index.html
98
index.html
@ -261,7 +261,7 @@
|
||||
<p class="light-text">Tap/click on 'New chat' to add or select a contact.</p>
|
||||
</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">
|
||||
<header id="chat_header" class="grid align-center">
|
||||
<button class=" hide-on-desktop back-button" onclick="goto('chats')">
|
||||
@ -270,9 +270,9 @@
|
||||
<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" />
|
||||
</svg>
|
||||
<div id="receiver_initial" class="initial flex align-center"></div>
|
||||
</button>
|
||||
<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>
|
||||
</div>
|
||||
</header>
|
||||
@ -416,29 +416,29 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="settings_page" class="inner-page hide">
|
||||
<section id="settings" class="inner-page hide">
|
||||
<aside id="settings_sidebar">
|
||||
<header class="grid header">
|
||||
<h4>Settings</h4>
|
||||
</header>
|
||||
<div class="sidebar-item interactive active" data-target="profile_panel">Account</div>
|
||||
<div class="sidebar-item interactive" data-target="chat_panel">chat</div>
|
||||
<div class="sidebar-item interactive" data-target="personalize_panel">personalise</div>
|
||||
<div class="sidebar-item interactive" data-target="backup_panel">backup & restore</div>
|
||||
<div class="sidebar-item interactive" data-target="about_panel">About</div>
|
||||
<a class="sidebar-item interactive active" href="#/settings/profile">Account</a>
|
||||
<a class="sidebar-item interactive" href="#/settings/chat">chat</a>
|
||||
<a class="sidebar-item interactive" href="#/settings/personalize">personalize</a>
|
||||
<a class="sidebar-item interactive" href="#/settings/backup">backup & restore</a>
|
||||
<a class="sidebar-item interactive" href="#/settings/about">About</a>
|
||||
</aside>
|
||||
<div id="settings_panel" class=" hide-on-mobile">
|
||||
<header id="settings_header" class="flex align-center hide-on-desktop">
|
||||
<button id="back_settings" onclick='hidePanel()'>
|
||||
<header id="settings_header" class="flex align-center hide-on-desktop">
|
||||
<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"
|
||||
width="24px" fill="#000000">
|
||||
<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" />
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
<h4 id="settings_title"></h4>
|
||||
</header>
|
||||
<div id="profile_panel" class="panel">
|
||||
<div id="profile" class="panel">
|
||||
<section>
|
||||
<h4>My FLO ID</h4>
|
||||
<sm-copy id="greet_tag"></sm-copy>
|
||||
@ -482,7 +482,7 @@
|
||||
Sign Out</button>
|
||||
</section>
|
||||
</div>
|
||||
<div id="chat_panel" class="panel hide">
|
||||
<div id="chat" class="panel hide">
|
||||
<sm-switch id="is_enter_send_toggle">
|
||||
<div slot="left" class="flex flex-direction-column">
|
||||
<h4>Send by Enter</h4>
|
||||
@ -496,7 +496,7 @@
|
||||
</div>
|
||||
</sm-switch>
|
||||
</div>
|
||||
<div id="personalize_panel" class="panel hide">
|
||||
<div id="personalize" class="panel hide">
|
||||
<section>
|
||||
<h4>Chat preview</h4>
|
||||
<div id="chat_preview">
|
||||
@ -562,7 +562,7 @@
|
||||
<color-grid id="accent_color_selector"></color-grid>
|
||||
</section>
|
||||
</div>
|
||||
<div id="backup_panel" class="panel hide">
|
||||
<div id="backup" class="panel hide">
|
||||
<section>
|
||||
<h4>Backup data</h4>
|
||||
<p>Create a backup of contacts, conversations and mails. Which can later be used to restore
|
||||
@ -599,7 +599,7 @@
|
||||
</label>
|
||||
</section>
|
||||
</div>
|
||||
<div id="about_panel" class="panel hide">
|
||||
<div id="about" class="panel hide">
|
||||
<section>
|
||||
<p>Created by RanchiMall, a Blockchain incorporated entity</p>
|
||||
</section>
|
||||
@ -633,7 +633,7 @@
|
||||
</a>
|
||||
</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"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
@ -2122,15 +2122,9 @@
|
||||
})
|
||||
|
||||
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')) {
|
||||
getRef('mail_contact_list').classList.remove('hide')
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
getRef('mail_contact_list').classList.add('hide')
|
||||
}
|
||||
if (e.target.closest('#new_mail_button')) {
|
||||
@ -2213,16 +2207,16 @@
|
||||
if (activeChat['chatCard'] === contact && !isMobileView) return
|
||||
showChatDetails({ show: false, animate: false })
|
||||
document.title = `FLO Messenger`
|
||||
getRef('chat').classList.remove('hide')
|
||||
getRef('chat_view').classList.remove('hide')
|
||||
viewConversation(contact)
|
||||
if (activeChat['chatCard'])
|
||||
activeChat['chatCard'].classList.remove('active')
|
||||
contact.classList.add('active')
|
||||
activeChat['chatCard'] = contact
|
||||
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')
|
||||
activeChatPage = getRef('chat')
|
||||
activeChatPage = getRef('chat_view')
|
||||
getRef('main_navbar').classList.add('hide-on-mobile')
|
||||
}
|
||||
}
|
||||
@ -2421,16 +2415,16 @@
|
||||
|
||||
function updateHeight() {
|
||||
if (isMobileView) {
|
||||
getRef('chat').style.height = window.innerHeight + 'px'
|
||||
getRef('chat_view').style.height = window.innerHeight + 'px'
|
||||
}
|
||||
else {
|
||||
getRef('chat').style.height = '100vh'
|
||||
getRef('chat_view').style.height = '100vh'
|
||||
}
|
||||
}
|
||||
|
||||
function goto(page) {
|
||||
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')
|
||||
activeChatPage = getRef('contacts')
|
||||
}
|
||||
@ -2799,10 +2793,6 @@
|
||||
getRef(`${e.detail.value}_mail_container`).parentNode.classList.remove('hide')
|
||||
})
|
||||
|
||||
const allPanels = document.querySelectorAll('.panel'),
|
||||
allSidebarItems = document.querySelectorAll('.sidebar-item')
|
||||
|
||||
|
||||
const flyOutLeft = [
|
||||
{
|
||||
transform: 'translateX(0)',
|
||||
@ -2871,8 +2861,8 @@
|
||||
return anime
|
||||
}
|
||||
|
||||
function showPanel(item, panel) {
|
||||
getRef('settings_title').textContent = item.textContent
|
||||
function showPanel(subPageId) {
|
||||
getRef('settings_title').textContent = subPageId
|
||||
if (window.innerWidth < 720) {
|
||||
animateTo(getRef('settings_sidebar'), flyOutLeft, animOptions).onfinish = () => {
|
||||
animateTo(getRef('settings_panel'), flyInLeft, animOptions)
|
||||
@ -2881,21 +2871,21 @@
|
||||
getRef('settings_panel').classList.remove('hide-on-mobile')
|
||||
}
|
||||
}
|
||||
else {
|
||||
allSidebarItems.forEach(panel => panel.classList.remove('active'))
|
||||
item.classList.add('active')
|
||||
}
|
||||
allPanels.forEach(panel => panel.classList.add('hide'))
|
||||
getRef(panel).classList.remove('hide')
|
||||
document.querySelectorAll('.sidebar-item').forEach(item => item.classList.remove('active'))
|
||||
document.querySelector(`.sidebar-item[href="#/settings/${subPageId}"]`).classList.add('active')
|
||||
document.querySelectorAll('.panel').forEach(panel => panel.classList.add('hide'))
|
||||
getRef(subPageId).classList.remove('hide')
|
||||
}
|
||||
|
||||
function hidePanel() {
|
||||
animateTo(getRef('settings_panel'), flyOutRight, animOptions).onfinish = () => {
|
||||
getRef('settings_title').textContent = ''
|
||||
getRef('settings_panel').style = ''
|
||||
animateTo(getRef('settings_sidebar'), flyInRight, animOptions)
|
||||
getRef('settings_panel').classList.add('hide-on-mobile')
|
||||
getRef('settings_sidebar').classList.remove('hide-on-mobile')
|
||||
if (isMobileView && !getRef('settings_panel').classList.contains('hide-on-mobile')) {
|
||||
animateTo(getRef('settings_panel'), flyOutRight, animOptions).onfinish = () => {
|
||||
getRef('settings_title').textContent = ''
|
||||
getRef('settings_panel').style = ''
|
||||
animateTo(getRef('settings_sidebar'), flyInRight, animOptions)
|
||||
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('chat').classList.add('expand-side-panel')
|
||||
getRef('chat_view').classList.add('expand-side-panel')
|
||||
getRef('chat_left').classList.add('hide-on-medium')
|
||||
getRef('chat_details_panel').classList.remove('hide')
|
||||
animateTo(getRef('chat_details_panel'), [
|
||||
@ -3195,6 +3185,7 @@
|
||||
async function showPage(targetPage, options = {}) {
|
||||
const { firstLoad, hashChange } = options
|
||||
let pageId
|
||||
let subPageId
|
||||
let params = {}
|
||||
let searchParams
|
||||
if (targetPage === '') {
|
||||
@ -3243,6 +3234,11 @@
|
||||
targetPage = 'sign_up'
|
||||
break;
|
||||
case 'settings':
|
||||
if (subPageId) {
|
||||
showPanel(subPageId)
|
||||
} else {
|
||||
hidePanel()
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
@ -3419,7 +3415,7 @@
|
||||
const url = URL.createObjectURL(image)
|
||||
if (hasSelectedBg) {
|
||||
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('selected_bg_preview').classList.add('bg-preview--selected')
|
||||
getRef('default_bg_preview').classList.remove('bg-preview--selected')
|
||||
@ -3450,7 +3446,7 @@
|
||||
compactIDB.writeData('userSettings', false, 'hasSelectedBg')
|
||||
.then(async res => {
|
||||
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))
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user