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 {
|
body {
|
||||||
--accent-color:#5b00d3;
|
--accent-color: #3D5AFE;
|
||||||
--secondary-color: #ffac2e;
|
--secondary-color: #ffac2e;
|
||||||
--text-color: 17, 17, 17;
|
--text-color: 17, 17, 17;
|
||||||
--text-color-light: 100, 100, 100;
|
--text-color-light: 100, 100, 100;
|
||||||
@ -33,12 +33,12 @@ body #scroll_to_bottom {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body[data-theme=dark] {
|
body[data-theme=dark] {
|
||||||
--accent-color:#923eff;
|
--accent-color:#3D5AFE;
|
||||||
--secondary-color: #d60739;
|
--secondary-color: #d60739;
|
||||||
--text-color: 240, 240, 240;
|
--text-color: 240, 240, 240;
|
||||||
--text-color-light: 170, 170, 170;
|
--text-color-light: 170, 170, 170;
|
||||||
--foreground-color: 20, 20, 20;
|
--foreground-color: 20, 20, 20;
|
||||||
--theme-color-red: #f8fc22;
|
--error-color: rgb(255, 106, 106);
|
||||||
}
|
}
|
||||||
body[data-theme=dark] .initial {
|
body[data-theme=dark] .initial {
|
||||||
color: rgba(var(--text-color), 1) !important;
|
color: rgba(var(--text-color), 1) !important;
|
||||||
@ -556,8 +556,10 @@ sm-button.danger {
|
|||||||
position: relative;
|
position: relative;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
width: 2.5rem;
|
font-weight: 500;
|
||||||
height: 2.5rem;
|
width: 2.8rem;
|
||||||
|
height: 2.8rem;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
color: white;
|
color: white;
|
||||||
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.06);
|
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.06);
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
@ -581,7 +583,7 @@ sm-button.danger {
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0 1rem;
|
gap: 0 1rem;
|
||||||
padding: 0.8rem 1.5rem;
|
padding: 1rem 1.5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
@ -723,13 +725,13 @@ sm-button.danger {
|
|||||||
}
|
}
|
||||||
#contact_details_popup .group-icon {
|
#contact_details_popup .group-icon {
|
||||||
padding: 0.2rem !important;
|
padding: 0.2rem !important;
|
||||||
height: 2.4rem;
|
height: 3rem;
|
||||||
width: 2.4rem;
|
width: 3rem;
|
||||||
}
|
}
|
||||||
#contact_details_popup #contact_initial {
|
#contact_details_popup #contact_initial {
|
||||||
height: 3.6rem;
|
height: 4.6rem;
|
||||||
width: 3.6rem;
|
width: 4.6rem;
|
||||||
font-size: 1.6rem;
|
font-size: 2.4rem;
|
||||||
border-radius: 4rem;
|
border-radius: 4rem;
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
@ -1250,7 +1252,8 @@ sm-button.danger {
|
|||||||
position: relative;
|
position: relative;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
#chat .message {
|
|
||||||
|
.message {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -1262,12 +1265,12 @@ sm-button.danger {
|
|||||||
padding: 0.6em 1em;
|
padding: 0.6em 1em;
|
||||||
transition: opacity 0.3s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
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-size: 0.85rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: 0.3rem;
|
margin-bottom: 0.3rem;
|
||||||
}
|
}
|
||||||
#chat .message .message-body {
|
.message .message-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@ -1281,15 +1284,15 @@ sm-button.danger {
|
|||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
#chat .message .message-body a {
|
.message .message-body a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
#chat .message .message-body .text-emoji {
|
.message .message-body .text-emoji {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
letter-spacing: 0ch;
|
letter-spacing: 0ch;
|
||||||
}
|
}
|
||||||
#chat .message .time {
|
.message .time {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
@ -1298,13 +1301,14 @@ sm-button.danger {
|
|||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
margin-top: 0.2rem;
|
margin-top: 0.2rem;
|
||||||
}
|
}
|
||||||
#chat .sent {
|
|
||||||
|
.sent {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
color: #efefef;
|
color: #efefef;
|
||||||
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;
|
||||||
}
|
}
|
||||||
#chat .sent::after {
|
.sent::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 100%;
|
left: 100%;
|
||||||
@ -1315,12 +1319,13 @@ sm-button.danger {
|
|||||||
border-width: 0.5em 0.3em 0 0;
|
border-width: 0.5em 0.3em 0 0;
|
||||||
border-color: var(--accent-color) transparent transparent transparent;
|
border-color: var(--accent-color) transparent transparent transparent;
|
||||||
}
|
}
|
||||||
#chat .received {
|
|
||||||
|
.received {
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
background: rgba(var(--text-color), 0.1);
|
background: rgba(var(--text-color), 0.1);
|
||||||
border-radius: 0 0.8rem 0.8rem 0.8rem;
|
border-radius: 0 0.8rem 0.8rem 0.8rem;
|
||||||
}
|
}
|
||||||
#chat .received::after {
|
.received::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -0.5em;
|
left: -0.5em;
|
||||||
@ -1331,19 +1336,40 @@ sm-button.danger {
|
|||||||
border-width: 0 0.5em 0.5em 0;
|
border-width: 0 0.5em 0.5em 0;
|
||||||
border-color: transparent rgba(var(--text-color), 0.1) transparent transparent;
|
border-color: transparent rgba(var(--text-color), 0.1) transparent transparent;
|
||||||
}
|
}
|
||||||
#chat .sent + .sent,
|
|
||||||
#chat .received + .received {
|
.sent + .sent,
|
||||||
|
.received + .received {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
#chat .sent + .sent::after,
|
|
||||||
#chat .received + .received::after {
|
.sent + .sent::after,
|
||||||
|
.received + .received::after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
#chat .sent + .sent,
|
|
||||||
#chat .received + .received {
|
.sent + .sent,
|
||||||
|
.received + .received {
|
||||||
border-radius: 0.8rem;
|
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;
|
opacity: 0.7;
|
||||||
transform-origin: left;
|
transform-origin: left;
|
||||||
animation: pop 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
animation: pop 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
@ -1639,7 +1665,9 @@ sm-panel {
|
|||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
#settings_page sm-switch {
|
#settings_page sm-switch {
|
||||||
padding-left: 1rem;
|
display: flex;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
width: min(60ch, 100%);
|
||||||
}
|
}
|
||||||
#settings_page sm-button {
|
#settings_page sm-button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -1654,7 +1682,7 @@ sm-panel {
|
|||||||
padding: 0 1.5rem;
|
padding: 0 1.5rem;
|
||||||
}
|
}
|
||||||
#settings_page section {
|
#settings_page section {
|
||||||
max-width: 50ch;
|
width: min(60ch, 100%);
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0.3rem;
|
gap: 0.3rem;
|
||||||
}
|
}
|
||||||
@ -1665,21 +1693,12 @@ sm-panel {
|
|||||||
#settings_page section:not(:last-of-type) {
|
#settings_page section:not(:last-of-type) {
|
||||||
margin-bottom: 2rem;
|
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) {
|
#settings_page #sign_out::part(button) {
|
||||||
color: var(--error-color);
|
color: var(--error-color);
|
||||||
}
|
}
|
||||||
#settings_page color-grid {
|
#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) {
|
@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%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
body{
|
body{
|
||||||
--accent-color:#5b00d3;
|
--accent-color: #3D5AFE;
|
||||||
--secondary-color: #ffac2e;
|
--secondary-color: #ffac2e;
|
||||||
--text-color: 17, 17, 17;
|
--text-color: 17, 17, 17;
|
||||||
--text-color-light: 100, 100, 100;
|
--text-color-light: 100, 100, 100;
|
||||||
@ -29,12 +29,12 @@ body{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
body[data-theme='dark']{
|
body[data-theme='dark']{
|
||||||
--accent-color:#923eff;
|
--accent-color:#3D5AFE;
|
||||||
--secondary-color: #d60739;
|
--secondary-color: #d60739;
|
||||||
--text-color: 240, 240, 240;
|
--text-color: 240, 240, 240;
|
||||||
--text-color-light: 170, 170, 170;
|
--text-color-light: 170, 170, 170;
|
||||||
--foreground-color: 20, 20, 20;
|
--foreground-color: 20, 20, 20;
|
||||||
--theme-color-red: #f8fc22;
|
--error-color: rgb(255, 106, 106);
|
||||||
.initial{
|
.initial{
|
||||||
color: rgba(var(--text-color), 1) !important;
|
color: rgba(var(--text-color), 1) !important;
|
||||||
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.16);
|
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.16);
|
||||||
@ -504,8 +504,10 @@ sm-button.danger{
|
|||||||
position: relative;
|
position: relative;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
width: 2.5rem;
|
font-weight: 500;
|
||||||
height: 2.5rem;
|
width: 2.8rem;
|
||||||
|
height: 2.8rem;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
color: white;
|
color: white;
|
||||||
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.06);
|
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.06);
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
@ -526,7 +528,7 @@ sm-button.danger{
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0 1rem;
|
gap: 0 1rem;
|
||||||
padding: 0.8rem 1.5rem;
|
padding: 1rem 1.5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
@ -669,13 +671,13 @@ sm-button.danger{
|
|||||||
}
|
}
|
||||||
.group-icon{
|
.group-icon{
|
||||||
padding: 0.2rem !important;
|
padding: 0.2rem !important;
|
||||||
height: 2.4rem;
|
height: 3rem;
|
||||||
width: 2.4rem;
|
width: 3rem;
|
||||||
}
|
}
|
||||||
#contact_initial{
|
#contact_initial{
|
||||||
height: 3.6rem;
|
height: 4.6rem;
|
||||||
width: 3.6rem;
|
width: 4.6rem;
|
||||||
font-size: 1.6rem;
|
font-size: 2.4rem;
|
||||||
border-radius: 4rem;
|
border-radius: 4rem;
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
@ -1177,105 +1179,121 @@ sm-button.danger{
|
|||||||
#chat{
|
#chat{
|
||||||
position: relative;
|
position: relative;
|
||||||
grid-template-columns: 1fr;
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
width: auto;
|
flex-wrap: wrap;
|
||||||
font-size: 0.92rem;
|
overflow-wrap: break-word;
|
||||||
max-width: max-content;
|
word-wrap: break-word;
|
||||||
margin-bottom: 0.2rem;
|
word-break: break-all;
|
||||||
margin-top: 0.8rem;
|
word-break: break-word;
|
||||||
padding: 0.6em 1em;
|
-moz-hyphens: auto;
|
||||||
transition: opacity 0.3s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
-webkit-hyphens: auto;
|
||||||
.sender-name{
|
hyphens: auto;
|
||||||
font-size: 0.85rem;
|
white-space: pre-wrap;
|
||||||
font-weight: 500;
|
line-height: 1.5;
|
||||||
margin-bottom: 0.3rem;
|
a{
|
||||||
|
color: inherit;
|
||||||
}
|
}
|
||||||
.message-body{
|
.text-emoji{
|
||||||
display: flex;
|
align-self: center;
|
||||||
align-items: center;
|
font-size: 1.4em;
|
||||||
flex-wrap: wrap;
|
letter-spacing: 0ch;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.sent{
|
.time{
|
||||||
margin-left: auto;
|
white-space: nowrap;
|
||||||
color: #efefef;
|
font-size: 0.8em;
|
||||||
background: var(--accent-color);
|
opacity: 0.8;
|
||||||
border-radius: 0.8rem 0 0.8rem 0.8rem;
|
justify-self: flex-end;
|
||||||
&::after{
|
padding-left: 1rem;
|
||||||
content: '';
|
align-self: flex-end;
|
||||||
position: absolute;
|
margin-top: 0.2rem;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.received{
|
}
|
||||||
margin-right: auto;
|
.sent{
|
||||||
background: rgba(var(--text-color), 0.1);
|
margin-left: auto;
|
||||||
border-radius: 0 0.8rem 0.8rem 0.8rem;
|
color: #efefef;
|
||||||
&::after{
|
background: var(--accent-color);
|
||||||
content: '';
|
border-radius: 0.8rem 0 0.8rem 0.8rem;
|
||||||
position: absolute;
|
&::after{
|
||||||
left: -0.5em;
|
content: '';
|
||||||
top: 0;
|
position: absolute;
|
||||||
width: 0;
|
left: 100%;
|
||||||
height: 0;
|
top: 0;
|
||||||
border-style: solid;
|
width: 0;
|
||||||
border-width: 0 0.5em 0.5em 0;
|
height: 0;
|
||||||
border-color: transparent rgba(var(--text-color), 0.1) transparent transparent;
|
border-style: solid;
|
||||||
}
|
border-width: 0.5em 0.3em 0 0;
|
||||||
|
border-color: var(--accent-color) transparent transparent transparent;
|
||||||
}
|
}
|
||||||
.sent + .sent,
|
}
|
||||||
.received + .received{
|
.received{
|
||||||
margin-top: 0;
|
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{
|
.sent + .sent,
|
||||||
display: none;
|
.received + .received{
|
||||||
}
|
margin-top: 0;
|
||||||
.sent + .sent,
|
}
|
||||||
.received + .received{
|
.sent + .sent::after,
|
||||||
border-radius: 0.8rem;
|
.received + .received::after{
|
||||||
}
|
display: none;
|
||||||
.unconfirmed{
|
}
|
||||||
opacity: 0.7;
|
.sent + .sent,
|
||||||
transform-origin: left;
|
.received + .received{
|
||||||
animation: pop .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
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{
|
@keyframes pop{
|
||||||
0%{
|
0%{
|
||||||
transform: rotate(5deg) translate(-0.5rem, 1rem)
|
transform: rotate(5deg) translate(-0.5rem, 1rem)
|
||||||
@ -1553,7 +1571,9 @@ sm-panel{
|
|||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
sm-switch{
|
sm-switch{
|
||||||
padding-left: 1rem;
|
display: flex;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
width: min(60ch, 100%);
|
||||||
}
|
}
|
||||||
sm-button{
|
sm-button{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -1568,7 +1588,7 @@ sm-panel{
|
|||||||
padding: 0 1.5rem;
|
padding: 0 1.5rem;
|
||||||
}
|
}
|
||||||
section{
|
section{
|
||||||
max-width: 50ch;
|
width: min(60ch, 100%);
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: .3rem;
|
gap: .3rem;
|
||||||
sm-button{
|
sm-button{
|
||||||
@ -1578,23 +1598,13 @@ sm-panel{
|
|||||||
&:not(:last-of-type){
|
&:not(:last-of-type){
|
||||||
margin-bottom: 2rem;
|
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){
|
#sign_out::part(button){
|
||||||
color: var(--error-color);
|
color: var(--error-color);
|
||||||
}
|
}
|
||||||
color-grid{
|
color-grid{
|
||||||
width: min(24rem, 100%);
|
margin: 0.5rem 0 1.5rem 0;
|
||||||
|
width: min(60ch, 100%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 640px){
|
@media screen and (max-width: 640px){
|
||||||
|
|||||||
72
index.html
72
index.html
@ -605,6 +605,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="sidebar-item interact active" data-target="profile_panel">Account</div>
|
<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="personalise_panel">personalise</div>
|
||||||
<div class="sidebar-item interact" data-target="backup_panel">backup & restore</div>
|
<div class="sidebar-item interact" data-target="backup_panel">backup & restore</div>
|
||||||
<div class="sidebar-item interact" data-target="about_panel">About</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>
|
<sm-button id="sign_out" onclick="signOut()">Sign Out</sm-button>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</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">
|
<div id="personalise_panel" class="panel hide-completely">
|
||||||
<section class="setting-toggle">
|
<sm-switch id="theme_switcher">
|
||||||
<h4>Dark mode</h4>
|
<div slot="left" class="flex direction-column">
|
||||||
<p>Toggle dark mode on/off.<br><strong>*Setting applies to this browser only</strong></p>
|
<h4>Dark mode</h4>
|
||||||
<sm-switch id="theme_switcher"></sm-switch>
|
<p>Toggle dark mode on/off.<br><strong>*Setting applies to this browser only</strong></p>
|
||||||
</section>
|
</div>
|
||||||
<section class="setting-toggle">
|
</sm-switch>
|
||||||
<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>
|
|
||||||
<section>
|
<section>
|
||||||
<h4>Colors</h4>
|
<h4>Accent color</h4>
|
||||||
<color-grid id="accent_color_selector"></color-grid>
|
<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>
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div id="backup_panel" class="panel hide-completely">
|
<div id="backup_panel" class="panel hide-completely">
|
||||||
<section>
|
<section>
|
||||||
@ -1267,6 +1281,18 @@
|
|||||||
showFrame(2)
|
showFrame(2)
|
||||||
} */
|
} */
|
||||||
getRef("greet_tag").textContent = myFloID
|
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
|
//load messages from IDB and render them
|
||||||
console.log(`Loading Data! Please Wait...`)
|
console.log(`Loading Data! Please Wait...`)
|
||||||
messenger.initUserDB().then(result => {
|
messenger.initUserDB().then(result => {
|
||||||
@ -1479,6 +1505,8 @@
|
|||||||
senderName.textContent = getContactName(sender)
|
senderName.textContent = getContactName(sender)
|
||||||
cardContainer.prepend(senderName)
|
cardContainer.prepend(senderName)
|
||||||
|
|
||||||
|
cardContainer.classList.add('distinct-sender')
|
||||||
|
|
||||||
messageContent = cardContainer.children[1]
|
messageContent = cardContainer.children[1]
|
||||||
messageTime = cardContainer.children[2]
|
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 => {
|
document.addEventListener('colorselected', e => {
|
||||||
const color = e.detail.value
|
const color = e.detail.value
|
||||||
localStorage.setItem("accent-color", color);
|
localStorage.setItem(`accent-color${myFloID}`, color);
|
||||||
document.body.style.setProperty('--accent-color', color);
|
document.body.style.setProperty('--accent-color', color);
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -969,6 +969,22 @@ smSwitch.innerHTML = `
|
|||||||
display: -ms-inline-flexbox;
|
display: -ms-inline-flexbox;
|
||||||
display: inline-flex;
|
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 {
|
.switch {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
@ -978,11 +994,10 @@ smSwitch.innerHTML = `
|
|||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 2.4rem;
|
width: 2.4rem;
|
||||||
|
margin-left: auto;
|
||||||
padding: 0.2rem;
|
padding: 0.2rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
outline: none;
|
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
@ -1065,10 +1080,13 @@ smSwitch.innerHTML = `
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<label class="switch" tabindex="0">
|
<label tabindex="0">
|
||||||
<input type="checkbox">
|
<slot name="left"></slot>
|
||||||
<div class="track"></div>
|
<div part="switch" class="switch">
|
||||||
<div class="button"></div>
|
<input type="checkbox">
|
||||||
|
<div class="track"></div>
|
||||||
|
<div class="button"></div>
|
||||||
|
</div>
|
||||||
</label>`
|
</label>`
|
||||||
|
|
||||||
customElements.define('sm-switch', class extends HTMLElement {
|
customElements.define('sm-switch', class extends HTMLElement {
|
||||||
@ -1996,7 +2014,8 @@ customElements.define('sm-popup', class extends HTMLElement {
|
|||||||
const scrollY = document.body.style.top;
|
const scrollY = document.body.style.top;
|
||||||
window.scrollTo(0, parseInt(scrollY || '0') * -1);
|
window.scrollTo(0, parseInt(scrollY || '0') * -1);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
document.body.setAttribute('style', `overflow: auto; top: initial`)
|
document.body.style.overflow = 'auto';
|
||||||
|
document.body.style.top= 'initial'
|
||||||
}, 300);
|
}, 300);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2025,7 +2044,8 @@ customElements.define('sm-popup', class extends HTMLElement {
|
|||||||
}
|
}
|
||||||
this.popupContainer.classList.remove('hide')
|
this.popupContainer.classList.remove('hide')
|
||||||
this.popup.style.transform = 'none';
|
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
|
return this.popupStack
|
||||||
}
|
}
|
||||||
hide = () => {
|
hide = () => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user