v0.26.75
Feat(user): Add feature to preview accent color in chat window with demo message bubbles. Fix (user): solve issue with accent color not saved seperately for each user fix (user): issue with group chat consecutive received message from different senders won't have any visual distinction
This commit is contained in:
sairaj mote
parent
8e4c1ca9a6
commit
4cbe1d4f41
101
css/main.css
101
css/main.css
@ -17,7 +17,7 @@ html, body {
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color:#5b00d3;
|
||||
--accent-color: #3D5AFE;
|
||||
--secondary-color: #ffac2e;
|
||||
--text-color: 17, 17, 17;
|
||||
--text-color-light: 100, 100, 100;
|
||||
@ -33,12 +33,12 @@ body #scroll_to_bottom {
|
||||
}
|
||||
|
||||
body[data-theme=dark] {
|
||||
--accent-color:#923eff;
|
||||
--accent-color:#3D5AFE;
|
||||
--secondary-color: #d60739;
|
||||
--text-color: 240, 240, 240;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--foreground-color: 20, 20, 20;
|
||||
--theme-color-red: #f8fc22;
|
||||
--error-color: rgb(255, 106, 106);
|
||||
}
|
||||
body[data-theme=dark] .initial {
|
||||
color: rgba(var(--text-color), 1) !important;
|
||||
@ -556,8 +556,10 @@ sm-button.danger {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
font-weight: 500;
|
||||
width: 2.8rem;
|
||||
height: 2.8rem;
|
||||
aspect-ratio: 1/1;
|
||||
color: white;
|
||||
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.06);
|
||||
border-radius: 2rem;
|
||||
@ -581,7 +583,7 @@ sm-button.danger {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 0 1rem;
|
||||
padding: 0.8rem 1.5rem;
|
||||
padding: 1rem 1.5rem;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
user-select: none;
|
||||
@ -723,13 +725,13 @@ sm-button.danger {
|
||||
}
|
||||
#contact_details_popup .group-icon {
|
||||
padding: 0.2rem !important;
|
||||
height: 2.4rem;
|
||||
width: 2.4rem;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
}
|
||||
#contact_details_popup #contact_initial {
|
||||
height: 3.6rem;
|
||||
width: 3.6rem;
|
||||
font-size: 1.6rem;
|
||||
height: 4.6rem;
|
||||
width: 4.6rem;
|
||||
font-size: 2.4rem;
|
||||
border-radius: 4rem;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
@ -1250,7 +1252,8 @@ sm-button.danger {
|
||||
position: relative;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
#chat .message {
|
||||
|
||||
.message {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -1262,12 +1265,12 @@ sm-button.danger {
|
||||
padding: 0.6em 1em;
|
||||
transition: opacity 0.3s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
#chat .message .sender-name {
|
||||
.message .sender-name {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
#chat .message .message-body {
|
||||
.message .message-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
@ -1281,15 +1284,15 @@ sm-button.danger {
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.5;
|
||||
}
|
||||
#chat .message .message-body a {
|
||||
.message .message-body a {
|
||||
color: inherit;
|
||||
}
|
||||
#chat .message .message-body .text-emoji {
|
||||
.message .message-body .text-emoji {
|
||||
align-self: center;
|
||||
font-size: 1.4em;
|
||||
letter-spacing: 0ch;
|
||||
}
|
||||
#chat .message .time {
|
||||
.message .time {
|
||||
white-space: nowrap;
|
||||
font-size: 0.8em;
|
||||
opacity: 0.8;
|
||||
@ -1298,13 +1301,14 @@ sm-button.danger {
|
||||
align-self: flex-end;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
#chat .sent {
|
||||
|
||||
.sent {
|
||||
margin-left: auto;
|
||||
color: #efefef;
|
||||
background: var(--accent-color);
|
||||
border-radius: 0.8rem 0 0.8rem 0.8rem;
|
||||
}
|
||||
#chat .sent::after {
|
||||
.sent::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
@ -1315,12 +1319,13 @@ sm-button.danger {
|
||||
border-width: 0.5em 0.3em 0 0;
|
||||
border-color: var(--accent-color) transparent transparent transparent;
|
||||
}
|
||||
#chat .received {
|
||||
|
||||
.received {
|
||||
margin-right: auto;
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
border-radius: 0 0.8rem 0.8rem 0.8rem;
|
||||
}
|
||||
#chat .received::after {
|
||||
.received::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -0.5em;
|
||||
@ -1331,19 +1336,40 @@ sm-button.danger {
|
||||
border-width: 0 0.5em 0.5em 0;
|
||||
border-color: transparent rgba(var(--text-color), 0.1) transparent transparent;
|
||||
}
|
||||
#chat .sent + .sent,
|
||||
#chat .received + .received {
|
||||
|
||||
.sent + .sent,
|
||||
.received + .received {
|
||||
margin-top: 0;
|
||||
}
|
||||
#chat .sent + .sent::after,
|
||||
#chat .received + .received::after {
|
||||
|
||||
.sent + .sent::after,
|
||||
.received + .received::after {
|
||||
display: none;
|
||||
}
|
||||
#chat .sent + .sent,
|
||||
#chat .received + .received {
|
||||
|
||||
.sent + .sent,
|
||||
.received + .received {
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
#chat .unconfirmed {
|
||||
|
||||
.distinct-sender {
|
||||
border-radius: 0 0.8rem 0.8rem 0.8rem !important;
|
||||
margin-top: 0.8rem !important;
|
||||
}
|
||||
.distinct-sender::after {
|
||||
display: flex !important;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -0.5em;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 0.5em 0.5em 0;
|
||||
border-color: transparent rgba(var(--text-color), 0.1) transparent transparent;
|
||||
}
|
||||
|
||||
.unconfirmed {
|
||||
opacity: 0.7;
|
||||
transform-origin: left;
|
||||
animation: pop 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
@ -1639,7 +1665,9 @@ sm-panel {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
#settings_page sm-switch {
|
||||
padding-left: 1rem;
|
||||
display: flex;
|
||||
margin-bottom: 1.5rem;
|
||||
width: min(60ch, 100%);
|
||||
}
|
||||
#settings_page sm-button {
|
||||
width: 100%;
|
||||
@ -1654,7 +1682,7 @@ sm-panel {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
#settings_page section {
|
||||
max-width: 50ch;
|
||||
width: min(60ch, 100%);
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
@ -1665,21 +1693,12 @@ sm-panel {
|
||||
#settings_page section:not(:last-of-type) {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
#settings_page section.setting-toggle {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
#settings_page section.setting-toggle sm-switch {
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
}
|
||||
#settings_page section.setting-toggle > h4, #settings_page section.setting-toggle > p {
|
||||
grid-column: 1;
|
||||
}
|
||||
#settings_page #sign_out::part(button) {
|
||||
color: var(--error-color);
|
||||
}
|
||||
#settings_page color-grid {
|
||||
width: min(24rem, 100%);
|
||||
margin: 0.5rem 0 1.5rem 0;
|
||||
width: min(60ch, 100%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
240
css/main.scss
240
css/main.scss
@ -14,7 +14,7 @@ html, body{
|
||||
height: 100%;
|
||||
}
|
||||
body{
|
||||
--accent-color:#5b00d3;
|
||||
--accent-color: #3D5AFE;
|
||||
--secondary-color: #ffac2e;
|
||||
--text-color: 17, 17, 17;
|
||||
--text-color-light: 100, 100, 100;
|
||||
@ -29,12 +29,12 @@ body{
|
||||
}
|
||||
}
|
||||
body[data-theme='dark']{
|
||||
--accent-color:#923eff;
|
||||
--accent-color:#3D5AFE;
|
||||
--secondary-color: #d60739;
|
||||
--text-color: 240, 240, 240;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--foreground-color: 20, 20, 20;
|
||||
--theme-color-red: #f8fc22;
|
||||
--error-color: rgb(255, 106, 106);
|
||||
.initial{
|
||||
color: rgba(var(--text-color), 1) !important;
|
||||
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.16);
|
||||
@ -504,8 +504,10 @@ sm-button.danger{
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
font-weight: 500;
|
||||
width: 2.8rem;
|
||||
height: 2.8rem;
|
||||
aspect-ratio: 1/1;
|
||||
color: white;
|
||||
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.06);
|
||||
border-radius: 2rem;
|
||||
@ -526,7 +528,7 @@ sm-button.danger{
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 0 1rem;
|
||||
padding: 0.8rem 1.5rem;
|
||||
padding: 1rem 1.5rem;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
user-select: none;
|
||||
@ -669,13 +671,13 @@ sm-button.danger{
|
||||
}
|
||||
.group-icon{
|
||||
padding: 0.2rem !important;
|
||||
height: 2.4rem;
|
||||
width: 2.4rem;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
}
|
||||
#contact_initial{
|
||||
height: 3.6rem;
|
||||
width: 3.6rem;
|
||||
font-size: 1.6rem;
|
||||
height: 4.6rem;
|
||||
width: 4.6rem;
|
||||
font-size: 2.4rem;
|
||||
border-radius: 4rem;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
@ -1177,105 +1179,121 @@ sm-button.danger{
|
||||
#chat{
|
||||
position: relative;
|
||||
grid-template-columns: 1fr;
|
||||
.message{
|
||||
position: relative;
|
||||
}
|
||||
.message{
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
font-size: 0.92rem;
|
||||
max-width: max-content;
|
||||
margin-bottom: 0.2rem;
|
||||
margin-top: 0.8rem;
|
||||
padding: 0.6em 1em;
|
||||
transition: opacity 0.3s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
.sender-name{
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.message-body{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
font-size: 0.92rem;
|
||||
max-width: max-content;
|
||||
margin-bottom: 0.2rem;
|
||||
margin-top: 0.8rem;
|
||||
padding: 0.6em 1em;
|
||||
transition: opacity 0.3s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
.sender-name{
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.3rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
-moz-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.5;
|
||||
a{
|
||||
color: inherit;
|
||||
}
|
||||
.message-body{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
-moz-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.5;
|
||||
a{
|
||||
color: inherit;
|
||||
}
|
||||
.text-emoji{
|
||||
align-self: center;
|
||||
font-size: 1.4em;
|
||||
letter-spacing: 0ch;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
white-space: nowrap;
|
||||
font-size: 0.8em;
|
||||
opacity: 0.8;
|
||||
justify-self: flex-end;
|
||||
padding-left: 1rem;
|
||||
align-self: flex-end;
|
||||
margin-top: 0.2rem;
|
||||
.text-emoji{
|
||||
align-self: center;
|
||||
font-size: 1.4em;
|
||||
letter-spacing: 0ch;
|
||||
}
|
||||
}
|
||||
.sent{
|
||||
margin-left: auto;
|
||||
color: #efefef;
|
||||
background: var(--accent-color);
|
||||
border-radius: 0.8rem 0 0.8rem 0.8rem;
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0.5em 0.3em 0 0;
|
||||
border-color: var(--accent-color) transparent transparent transparent;
|
||||
}
|
||||
.time{
|
||||
white-space: nowrap;
|
||||
font-size: 0.8em;
|
||||
opacity: 0.8;
|
||||
justify-self: flex-end;
|
||||
padding-left: 1rem;
|
||||
align-self: flex-end;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
.received{
|
||||
margin-right: auto;
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
border-radius: 0 0.8rem 0.8rem 0.8rem;
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -0.5em;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 0.5em 0.5em 0;
|
||||
border-color: transparent rgba(var(--text-color), 0.1) transparent transparent;
|
||||
}
|
||||
}
|
||||
.sent{
|
||||
margin-left: auto;
|
||||
color: #efefef;
|
||||
background: var(--accent-color);
|
||||
border-radius: 0.8rem 0 0.8rem 0.8rem;
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0.5em 0.3em 0 0;
|
||||
border-color: var(--accent-color) transparent transparent transparent;
|
||||
}
|
||||
.sent + .sent,
|
||||
.received + .received{
|
||||
margin-top: 0;
|
||||
}
|
||||
.received{
|
||||
margin-right: auto;
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
border-radius: 0 0.8rem 0.8rem 0.8rem;
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -0.5em;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 0.5em 0.5em 0;
|
||||
border-color: transparent rgba(var(--text-color), 0.1) transparent transparent;
|
||||
}
|
||||
.sent + .sent::after,
|
||||
.received + .received::after{
|
||||
display: none;
|
||||
}
|
||||
.sent + .sent,
|
||||
.received + .received{
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
.unconfirmed{
|
||||
opacity: 0.7;
|
||||
transform-origin: left;
|
||||
animation: pop .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
.sent + .sent,
|
||||
.received + .received{
|
||||
margin-top: 0;
|
||||
}
|
||||
.sent + .sent::after,
|
||||
.received + .received::after{
|
||||
display: none;
|
||||
}
|
||||
.sent + .sent,
|
||||
.received + .received{
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
.distinct-sender{
|
||||
border-radius: 0 0.8rem 0.8rem 0.8rem !important;
|
||||
margin-top: 0.8rem !important;
|
||||
&::after{
|
||||
display: flex !important;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -0.5em;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 0.5em 0.5em 0;
|
||||
border-color: transparent rgba(var(--text-color), 0.1) transparent transparent;
|
||||
}
|
||||
}
|
||||
.unconfirmed{
|
||||
opacity: 0.7;
|
||||
transform-origin: left;
|
||||
animation: pop .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
@keyframes pop{
|
||||
0%{
|
||||
transform: rotate(5deg) translate(-0.5rem, 1rem)
|
||||
@ -1553,7 +1571,9 @@ sm-panel{
|
||||
margin-left: 1rem;
|
||||
}
|
||||
sm-switch{
|
||||
padding-left: 1rem;
|
||||
display: flex;
|
||||
margin-bottom: 1.5rem;
|
||||
width: min(60ch, 100%);
|
||||
}
|
||||
sm-button{
|
||||
width: 100%;
|
||||
@ -1568,7 +1588,7 @@ sm-panel{
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
section{
|
||||
max-width: 50ch;
|
||||
width: min(60ch, 100%);
|
||||
display: grid;
|
||||
gap: .3rem;
|
||||
sm-button{
|
||||
@ -1578,23 +1598,13 @@ sm-panel{
|
||||
&:not(:last-of-type){
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
&.setting-toggle{
|
||||
grid-template-columns: 1fr auto;
|
||||
sm-switch{
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
}
|
||||
& > h4,
|
||||
& > p{
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
#sign_out::part(button){
|
||||
color: var(--error-color);
|
||||
}
|
||||
color-grid{
|
||||
width: min(24rem, 100%);
|
||||
margin: 0.5rem 0 1.5rem 0;
|
||||
width: min(60ch, 100%);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 640px){
|
||||
|
||||
72
index.html
72
index.html
@ -605,6 +605,7 @@
|
||||
</div>
|
||||
</header>
|
||||
<div class="sidebar-item interact active" data-target="profile_panel">Account</div>
|
||||
<div class="sidebar-item interact" data-target="chat_panel">chat</div>
|
||||
<div class="sidebar-item interact" data-target="personalise_panel">personalise</div>
|
||||
<div class="sidebar-item interact" data-target="backup_panel">backup & restore</div>
|
||||
<div class="sidebar-item interact" data-target="about_panel">About</div>
|
||||
@ -641,27 +642,40 @@
|
||||
<sm-button id="sign_out" onclick="signOut()">Sign Out</sm-button>
|
||||
</section>
|
||||
</div>
|
||||
<div id="chat_panel" class="panel hide-completely">
|
||||
<sm-switch id="is_enter_send_toggle">
|
||||
<div slot="left" class="flex direction-column">
|
||||
<h4>Send by Enter</h4>
|
||||
<p>If this toggle is ON then pressing 'Enter' key will send messages</p>
|
||||
</div>
|
||||
</sm-switch>
|
||||
<sm-switch id="haptic_feedback_switcher">
|
||||
<div slot="left" class="flex direction-column">
|
||||
<h4>Haptic feedback</h4>
|
||||
<p>Turn haptic feedback (vibrations) on/off.</p>
|
||||
</div>
|
||||
</sm-switch>
|
||||
</div>
|
||||
<div id="personalise_panel" class="panel hide-completely">
|
||||
<section class="setting-toggle">
|
||||
<h4>Dark mode</h4>
|
||||
<p>Toggle dark mode on/off.<br><strong>*Setting applies to this browser only</strong></p>
|
||||
<sm-switch id="theme_switcher"></sm-switch>
|
||||
</section>
|
||||
<section class="setting-toggle">
|
||||
<h4>Haptic feedback</h4>
|
||||
<p>Turn haptic feedback (vibrations) on/off.</p>
|
||||
<sm-switch id="haptic_feedback_switcher"></sm-switch>
|
||||
</section>
|
||||
<section class="setting-toggle">
|
||||
<h4>Enter key is send</h4>
|
||||
<p>If this toggle is ON then pressing 'Enter' key will send messages</p>
|
||||
<sm-switch id="is_enter_send_toggle" class="justify-right"></sm-switch>
|
||||
</section>
|
||||
<sm-switch id="theme_switcher">
|
||||
<div slot="left" class="flex direction-column">
|
||||
<h4>Dark mode</h4>
|
||||
<p>Toggle dark mode on/off.<br><strong>*Setting applies to this browser only</strong></p>
|
||||
</div>
|
||||
</sm-switch>
|
||||
<section>
|
||||
<h4>Colors</h4>
|
||||
<h4>Accent color</h4>
|
||||
<color-grid id="accent_color_selector"></color-grid>
|
||||
<h4>Chat preview</h4>
|
||||
<div class="message sent">
|
||||
<p class="message-body">Hey there!</p>
|
||||
<time class="time">12:00PM</time>
|
||||
</div>
|
||||
<div class="message received">
|
||||
<p class="message-body">How are you?</p>
|
||||
<time class="time">12:00PM</time>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<div id="backup_panel" class="panel hide-completely">
|
||||
<section>
|
||||
@ -1267,6 +1281,18 @@
|
||||
showFrame(2)
|
||||
} */
|
||||
getRef("greet_tag").textContent = myFloID
|
||||
|
||||
getRef('accent_color_selector').colors = selectedColors
|
||||
|
||||
if(localStorage.getItem(`accent-color${myFloID}`)){
|
||||
const color = localStorage.getItem(`accent-color${myFloID}`)
|
||||
getRef('accent_color_selector').selectedColor = color
|
||||
document.body.style.setProperty('--accent-color', color);
|
||||
}
|
||||
else{
|
||||
getRef('accent_color_selector').selectedColor = '#3D5AFE'
|
||||
}
|
||||
|
||||
//load messages from IDB and render them
|
||||
console.log(`Loading Data! Please Wait...`)
|
||||
messenger.initUserDB().then(result => {
|
||||
@ -1478,6 +1504,8 @@
|
||||
senderName.style.color = contactColor(sender)
|
||||
senderName.textContent = getContactName(sender)
|
||||
cardContainer.prepend(senderName)
|
||||
|
||||
cardContainer.classList.add('distinct-sender')
|
||||
|
||||
messageContent = cardContainer.children[1]
|
||||
messageTime = cardContainer.children[2]
|
||||
@ -3287,17 +3315,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
getRef('accent_color_selector').colors = selectedColors
|
||||
|
||||
if(localStorage.getItem('accent-color')){
|
||||
const color = localStorage.getItem('accent-color')
|
||||
getRef('accent_color_selector').selectedColor = color
|
||||
document.body.style.setProperty('--accent-color', color);
|
||||
}
|
||||
|
||||
document.addEventListener('colorselected', e => {
|
||||
const color = e.detail.value
|
||||
localStorage.setItem("accent-color", color);
|
||||
localStorage.setItem(`accent-color${myFloID}`, color);
|
||||
document.body.style.setProperty('--accent-color', color);
|
||||
})
|
||||
|
||||
|
||||
@ -969,6 +969,22 @@ smSwitch.innerHTML = `
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
}
|
||||
label{
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
:host(:not([disable])) label:focus-visible{
|
||||
-webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
|
||||
box-shadow: 0 0 0 0.1rem var(--accent-color);
|
||||
}
|
||||
.switch {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
@ -978,11 +994,10 @@ smSwitch.innerHTML = `
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 2.4rem;
|
||||
margin-left: auto;
|
||||
padding: 0.2rem;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border-radius: 2rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
input {
|
||||
@ -1065,10 +1080,13 @@ smSwitch.innerHTML = `
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
<label class="switch" tabindex="0">
|
||||
<input type="checkbox">
|
||||
<div class="track"></div>
|
||||
<div class="button"></div>
|
||||
<label tabindex="0">
|
||||
<slot name="left"></slot>
|
||||
<div part="switch" class="switch">
|
||||
<input type="checkbox">
|
||||
<div class="track"></div>
|
||||
<div class="button"></div>
|
||||
</div>
|
||||
</label>`
|
||||
|
||||
customElements.define('sm-switch', class extends HTMLElement {
|
||||
@ -1996,7 +2014,8 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
const scrollY = document.body.style.top;
|
||||
window.scrollTo(0, parseInt(scrollY || '0') * -1);
|
||||
setTimeout(() => {
|
||||
document.body.setAttribute('style', `overflow: auto; top: initial`)
|
||||
document.body.style.overflow = 'auto';
|
||||
document.body.style.top= 'initial'
|
||||
}, 300);
|
||||
}
|
||||
|
||||
@ -2025,7 +2044,8 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
}
|
||||
this.popupContainer.classList.remove('hide')
|
||||
this.popup.style.transform = 'none';
|
||||
document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.body.style.top= `-${window.scrollY}px`
|
||||
return this.popupStack
|
||||
}
|
||||
hide = () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user