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

v0.8.59

Browse Source 
Feat (user): Add Shift + Enter shortcut to add new line while typing message

UI (user): Merge dm, group and notes into one chat

UI (user): Unknown contact now shows FLO ID instead of 'Unknown'

- Other miron UI chages
This commit is contained in:
sairaj mote 2021-01-19 03:02:59 +05:30
parent 37756ff554
commit be0d18f8e5
4 changed files with 295 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
css/main.css
View File

@ -577,15 +577,16 @@ sm-button[variant=primary] .icon {
padding: 0.8rem 1.5rem; padding: 0.8rem 1.5rem;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
} overflow: hidden;
.contact.chat {
grid-template-columns: auto 1fr auto;
grid-template-areas: "dp . menu" "dp . .";
} }
.contact:not(.chat) { .contact:not(.chat) {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-areas: "dp ."; grid-template-areas: "dp .";
} }
.contact.chat, .contact.group {
grid-template-columns: auto 1fr auto;
grid-template-areas: "dp . time" "dp . menu";
}
.contact .initial { .contact .initial {
grid-area: dp; grid-area: dp;
} }
@ -593,9 +594,11 @@ sm-button[variant=primary] .icon {
font-size: 1em; font-size: 1em;
font-weight: 500; font-weight: 500;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
} }
.contact .last-message { .contact .last-message {
grid-column: 2/4;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -603,11 +606,16 @@ sm-button[variant=primary] .icon {
font-size: 0.9em; font-size: 0.9em;
color: rgba(var(--text-color), 0.9); color: rgba(var(--text-color), 0.9);
} }
.contact .menu {
grid-area: menu;
justify-self: flex-end;
padding: 0.2rem;
fill: rgba(var(--text-color), 1);
}
.contact .time { .contact .time {
font-weight: 400; font-weight: 400;
opacity: 0.8; opacity: 0.8;
grid-area: menu; grid-area: time;
align-self: flex-start;
} }
#contact_details_popup > .flex:first-of-type { #contact_details_popup > .flex:first-of-type {
@ -644,6 +652,7 @@ sm-button[variant=primary] .icon {
border-radius: 0.5rem; border-radius: 0.5rem;
max-width: 30ch; max-width: 30ch;
padding: 0.6rem 1.2rem; padding: 0.6rem 1.2rem;
overflow-wrap: break-word;
} }
#contact_details_popup #contact_name:focus { #contact_details_popup #contact_name:focus {
outline: none; outline: none;
@ -666,8 +675,7 @@ sm-button[variant=primary] .icon {
color: #111; color: #111;
} }
.mail-card.unread::before, .mail-card.unread::before {
.contact.unread .initial::before {
content: ""; content: "";
position: absolute; position: absolute;
padding: 0.4rem; padding: 0.4rem;
@ -677,6 +685,23 @@ sm-button[variant=primary] .icon {
background: var(--accent-color); background: var(--accent-color);
} }
.contact .initial::after {
content: "";
position: absolute;
height: calc(100% + 0.8rem);
width: calc(100% + 0.8rem);
border: solid var(--accent-color) 0.2rem;
border-radius: 100%;
transform: scale(0.8);
opacity: 0;
transition: transform 0.3s, opacity 0.3s;
}
.contact.unread .initial::after {
transform: scale(1);
opacity: 1;
}
.mail-card.unread .time, .mail-card.unread .time,
.contact.unread .time { .contact.unread .time {
color: var(--accent-color); color: var(--accent-color);
@ -815,7 +840,7 @@ sm-button[variant=primary] .icon {
justify-content: flex-start; justify-content: flex-start;
flex-direction: row; flex-direction: row;
flex: none; flex: none;
padding: 1rem 1.2rem; padding: 1rem;
} }
#main_navbar .navbar-item .icon { #main_navbar .navbar-item .icon {
height: 1.2rem; height: 1.2rem;
@ -887,7 +912,7 @@ sm-button[variant=primary] .icon {
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
} }
#contacts #all_contacts .header { #contacts #all_contacts .header {
padding-bottom: 1rem; padding-top: 0.7rem;
} }
#contacts .option { #contacts .option {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
@ -936,9 +961,10 @@ sm-button[variant=primary] .icon {
overflow-y: hidden; overflow-y: hidden;
} }
#contacts .header, #mails .header, #settings_page .header { #contacts .header, #mails .header, #settings_page .header {
padding: 1rem 1.5rem 0 1.5rem; padding: 1rem 1.5rem 1rem 1.5rem;
position: relative; position: relative;
gap: 0.5rem; gap: 0.5rem;
min-height: 4rem;
} }
#contacts .header sm-tab::part(tab), #mails .header sm-tab::part(tab), #settings_page .header sm-tab::part(tab) { #contacts .header sm-tab::part(tab), #mails .header sm-tab::part(tab), #settings_page .header sm-tab::part(tab) {
padding: 0.8rem 1rem; padding: 0.8rem 1rem;
@ -948,28 +974,16 @@ sm-button[variant=primary] .icon {
width: 100%; width: 100%;
padding: 0.7rem 1.5rem; padding: 0.7rem 1.5rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
transform: scale(0.9);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: opacity 0.3s; transition: opacity 0.3s, transform 0.3s;
} }
#contacts .header .expanding-search.expand, #mails .header .expanding-search.expand, #settings_page .header .expanding-search.expand { #contacts .header .expanding-search.expand, #mails .header .expanding-search.expand, #settings_page .header .expanding-search.expand {
transform: none; transform: none;
opacity: 1; opacity: 1;
pointer-events: all; pointer-events: all;
} }
#contacts .header .expanding-search.expand sm-input,
#contacts .header .expanding-search.expand .back, #mails .header .expanding-search.expand sm-input,
#mails .header .expanding-search.expand .back, #settings_page .header .expanding-search.expand sm-input,
#settings_page .header .expanding-search.expand .back {
transform: none;
}
#contacts .header .expanding-search sm-input,
#contacts .header .expanding-search .back, #mails .header .expanding-search sm-input,
#mails .header .expanding-search .back, #settings_page .header .expanding-search sm-input,
#settings_page .header .expanding-search .back {
transform: translateX(0.5rem);
transition: transform 0.3s;
}
#contacts .header sm-input, #mails .header sm-input, #settings_page .header sm-input { #contacts .header sm-input, #mails .header sm-input, #settings_page .header sm-input {
margin: 0; margin: 0;
width: 100%; width: 100%;
@ -981,10 +995,11 @@ sm-button[variant=primary] .icon {
} }
#contacts .header sm-input::part(input), #mails .header sm-input::part(input), #settings_page .header sm-input::part(input) { #contacts .header sm-input::part(input), #mails .header sm-input::part(input), #settings_page .header sm-input::part(input) {
border-radius: 3rem; border-radius: 3rem;
padding: 0.3rem 0.8rem; padding: 0.2rem 0.8rem;
} }
#contacts .header h4, #mails .header h4, #settings_page .header h4 { #contacts .header h4, #mails .header h4, #settings_page .header h4 {
text-transform: capitalize; text-transform: capitalize;
font-weight: 500;
} }
#contacts .header .icon, #mails .header .icon, #settings_page .header .icon { #contacts .header .icon, #mails .header .icon, #settings_page .header .icon {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
@ -1023,10 +1038,12 @@ sm-button[variant=primary] .icon {
} }
#chat { #chat {
height: 100vh; height: 100%;
} }
#chat header { #chat header {
padding: 0.5rem 1rem; padding: 1rem;
min-height: 4rem;
grid-template-columns: auto 1fr auto;
} }
#chat header .back-button { #chat header .back-button {
padding: 0.1rem; padding: 0.1rem;
@ -1037,11 +1054,18 @@ sm-button[variant=primary] .icon {
#chat header .initial { #chat header .initial {
cursor: pointer; cursor: pointer;
margin-right: 1rem; margin-right: 1rem;
height: 2.2rem;
width: 2.2rem;
} }
#chat header h4 { #chat header h4 {
font-weight: 500; font-weight: 500;
font-size: 0.9rem; font-size: 0.9rem;
} }
#chat header #receiver_name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#chat #scroll_to_bottom { #chat #scroll_to_bottom {
position: fixed; position: fixed;
right: 0; right: 0;
@ -1057,7 +1081,7 @@ sm-button[variant=primary] .icon {
transform: scale(0); transform: scale(0);
transition: transform 0.3s; transition: transform 0.3s;
} }
#chat footer #toggle_emoji { #chat footer #emoji_toggle {
align-self: center; align-self: center;
padding: 0.6rem; padding: 0.6rem;
width: 2.6rem; width: 2.6rem;
@ -1065,10 +1089,10 @@ sm-button[variant=primary] .icon {
border-radius: 2rem; border-radius: 2rem;
cursor: pointer; cursor: pointer;
} }
#chat footer #toggle_emoji path { #chat footer #emoji_toggle path {
fill: rgba(var(--text-color), 0.5); fill: rgba(var(--text-color), 0.5);
} }
#chat footer #toggle_emoji.active path { #chat footer #emoji_toggle.active path {
fill: var(--accent-color); fill: var(--accent-color);
} }
#chat footer .flex { #chat footer .flex {
@ -1113,7 +1137,7 @@ sm-button[variant=primary] .icon {
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
width: 100%; width: 100%;
font-size: 0.9rem; font-size: 0.92rem;
max-width: max-content; max-width: max-content;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
margin-top: 0.8rem; margin-top: 0.8rem;
@ -1131,7 +1155,7 @@ sm-button[variant=primary] .icon {
hyphens: auto; hyphens: auto;
white-space: pre-wrap; white-space: pre-wrap;
padding: 0.6em 1em; padding: 0.6em 1em;
line-height: 1.5; line-height: 1.6;
} }
#chat .message .message-body a { #chat .message .message-body a {
color: inherit; color: inherit;
@ -1218,7 +1242,7 @@ sm-button[variant=primary] .icon {
font-size: 2.6rem; font-size: 2.6rem;
} }
#chat_container { #messages_container {
flex: 1; flex: 1;
padding: 0 1rem; padding: 0 1rem;
} }
@ -1281,8 +1305,8 @@ sm-button[variant=primary] .icon {
stroke: rgba(var(--text-color), 0.4); stroke: rgba(var(--text-color), 0.4);
} }
#messages_container,
#chat_container, #chat_container,
#dm_container,
#inbox_mail_container, #inbox_mail_container,
#sent_mail_container, #sent_mail_container,
#mail { #mail {
@ -1292,16 +1316,16 @@ sm-button[variant=primary] .icon {
overflow-y: auto; overflow-y: auto;
} }
#dm_container:empty { #chat_container:empty {
display: none; display: none;
} }
#dm_container:not(:empty) ~ .empty-state { #chat_container:not(:empty) ~ .empty-state {
display: none; display: none;
} }
#dm_container { #chat_container {
padding-bottom: 5rem; padding-bottom: 6rem;
} }
sm-tab-panels { sm-tab-panels {
@ -1461,18 +1485,11 @@ sm-panel {
transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;
} }
#dm_container, #chat_container,
#contact_container { #contact_container {
gap: 0.2rem; gap: 0.2rem;
} }
#chat header {
padding: 1rem;
}
#chat header .initial {
width: 2rem;
height: 2rem;
}
#chat .message { #chat .message {
width: fit-content; width: fit-content;
max-width: 90%; max-width: 90%;
@ -1554,7 +1571,7 @@ sm-panel {
} }
#main_navbar .navbar-item { #main_navbar .navbar-item {
margin: 0 0.5rem; margin: 0 0.5rem;
border-radius: 0.5rem; border-radius: 0.8rem;
} }
#main_navbar .navbar-item .icon { #main_navbar .navbar-item .icon {
margin-right: 0; margin-right: 0;
@ -1637,9 +1654,9 @@ sm-panel {
} }
#chat header { #chat header {
padding: 0.5rem 1.5rem; padding: 0.8rem 1.5rem;
} }
#chat #chat_container { #chat #messages_container {
padding: 1rem 5rem; padding: 1rem 5rem;
} }
} }
@ -1649,17 +1666,21 @@ sm-panel {
cursor: pointer; cursor: pointer;
} }
.contact sm-menu { .contact .menu {
opacity: 0; opacity: 0;
transition: opacity 0.3s; transition: opacity 0.3s;
} }
.contact:hover sm-menu, .contact:hover .menu {
sm-menu:focus-within {
opacity: 1; opacity: 1;
} }
.emoji:hover { .emoji:hover {
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
} }
}
@media (hover: none) {
.contact .menu {
display: none;
}
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

122
css/main.scss
View File

@ -526,15 +526,17 @@ sm-button[variant="primary"]{
padding: 0.8rem 1.5rem; padding: 0.8rem 1.5rem;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
&.chat{ overflow: hidden;
grid-template-columns: auto 1fr auto;
grid-template-areas: 'dp . menu'
'dp . .';
}
&:not(.chat){ &:not(.chat){
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-areas: 'dp .'; grid-template-areas: 'dp .';
} }
&.chat,
&.group{
grid-template-columns: auto 1fr auto;
grid-template-areas: 'dp . time'
'dp . menu';
}
.initial{ .initial{
grid-area: dp; grid-area: dp;
} }
@ -542,9 +544,11 @@ sm-button[variant="primary"]{
font-size: 1em; font-size: 1em;
font-weight: 500; font-weight: 500;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
} }
.last-message{ .last-message{
grid-column: 2/4;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -552,11 +556,16 @@ sm-button[variant="primary"]{
font-size: 0.9em; font-size: 0.9em;
color: rgba(var(--text-color), 0.9); color: rgba(var(--text-color), 0.9);
} }
.menu{
grid-area: menu;
justify-self: flex-end;
padding: 0.2rem;
fill: rgba(var(--text-color), 1);
}
.time{ .time{
font-weight: 400; font-weight: 400;
opacity: 0.8; opacity: 0.8;
grid-area: menu; grid-area: time;
align-self: flex-start;
} }
} }
#contact_details_popup{ #contact_details_popup{
@ -596,6 +605,7 @@ sm-button[variant="primary"]{
border-radius: 0.5rem; border-radius: 0.5rem;
max-width: 30ch; max-width: 30ch;
padding: 0.6rem 1.2rem; padding: 0.6rem 1.2rem;
overflow-wrap: break-word;
&:focus{ &:focus{
outline: none; outline: none;
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
@ -616,8 +626,7 @@ sm-button[variant="primary"]{
background: rgb(255, 253, 141); background: rgb(255, 253, 141);
color: #111; color: #111;
} }
.mail-card.unread::before, .mail-card.unread::before{
.contact.unread .initial::before{
content: ''; content: '';
position: absolute; position: absolute;
padding: 0.4rem; padding: 0.4rem;
@ -626,6 +635,21 @@ sm-button[variant="primary"]{
left: 0; left: 0;
background: var(--accent-color); background: var(--accent-color);
} }
.contact .initial::after{
content: '';
position: absolute;
height: calc(100% + 0.8rem);
width: calc(100% + 0.8rem);
border: solid var(--accent-color) 0.2rem;
border-radius: 100%;
transform: scale(0.8);
opacity: 0;
transition: transform 0.3s, opacity 0.3s;
}
.contact.unread .initial::after{
transform: scale(1);
opacity: 1;
}
.mail-card.unread, .mail-card.unread,
.contact.unread{ .contact.unread{
.time{ .time{
@ -757,7 +781,7 @@ sm-button[variant="primary"]{
justify-content: flex-start; justify-content: flex-start;
flex-direction: row; flex-direction: row;
flex: none; flex: none;
padding: 1rem 1.2rem; padding: 1rem;
.icon{ .icon{
height: 1.2rem; height: 1.2rem;
width: 2.4rem; width: 2.4rem;
@ -827,7 +851,7 @@ sm-button[variant="primary"]{
z-index: 1; z-index: 1;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
.header{ .header{
padding-bottom: 1rem; padding-top: 0.7rem;
} }
} }
.option{ .option{
@ -874,9 +898,10 @@ sm-button[variant="primary"]{
overflow-y: hidden; overflow-y: hidden;
.header{ .header{
//background: rgba(var(--text-color), 0.06); //background: rgba(var(--text-color), 0.06);
padding: 1rem 1.5rem 0 1.5rem; padding: 1rem 1.5rem 1rem 1.5rem;
position: relative; position: relative;
gap: 0.5rem; gap: 0.5rem;
min-height: 4rem;
// margin-bottom: 1rem; // margin-bottom: 1rem;
sm-tab::part(tab){ sm-tab::part(tab){
padding: 0.8rem 1rem; padding: 0.8rem 1rem;
@ -886,22 +911,14 @@ sm-button[variant="primary"]{
width: 100%; width: 100%;
padding: 0.7rem 1.5rem; padding: 0.7rem 1.5rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
transform: scale(0.9);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: opacity 0.3s; transition: opacity 0.3s, transform 0.3s;
&.expand{ &.expand{
transform: none; transform: none;
opacity: 1; opacity: 1;
pointer-events: all; pointer-events: all;
sm-input,
.back{
transform: none;
}
}
sm-input,
.back{
transform: translateX(0.5rem);
transition: transform 0.3s;
} }
} }
sm-input{ sm-input{
@ -915,10 +932,11 @@ sm-button[variant="primary"]{
} }
sm-input::part(input){ sm-input::part(input){
border-radius: 3rem; border-radius: 3rem;
padding: 0.3rem 0.8rem; padding: 0.2rem 0.8rem;
} }
h4{ h4{
text-transform: capitalize; text-transform: capitalize;
font-weight: 500;
} }
.icon{ .icon{
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
@ -959,9 +977,11 @@ sm-button[variant="primary"]{
overflow-y: hidden; overflow-y: hidden;
} }
#chat{ #chat{
height: 100vh; height: 100%;
header{ header{
padding: 0.5rem 1rem; padding: 1rem;
min-height: 4rem;
grid-template-columns: auto 1fr auto;
.back-button{ .back-button{
padding: 0.1rem; padding: 0.1rem;
stroke-width: 8; stroke-width: 8;
@ -971,11 +991,18 @@ sm-button[variant="primary"]{
.initial{ .initial{
cursor: pointer; cursor: pointer;
margin-right: 1rem; margin-right: 1rem;
height: 2.2rem;
width: 2.2rem;
} }
h4{ h4{
font-weight: 500; font-weight: 500;
font-size: 0.9rem; font-size: 0.9rem;
} }
#receiver_name{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
#scroll_to_bottom{ #scroll_to_bottom{
position: fixed; position: fixed;
@ -993,7 +1020,7 @@ sm-button[variant="primary"]{
transition: transform 0.3s; transition: transform 0.3s;
} }
footer{ footer{
#toggle_emoji{ #emoji_toggle{
align-self: center; align-self: center;
padding: 0.6rem; padding: 0.6rem;
width: 2.6rem; width: 2.6rem;
@ -1050,7 +1077,7 @@ sm-button[variant="primary"]{
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
width: 100%; width: 100%;
font-size: 0.9rem; font-size: 0.92rem;
max-width: max-content; max-width: max-content;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
margin-top: 0.8rem; margin-top: 0.8rem;
@ -1067,7 +1094,7 @@ sm-button[variant="primary"]{
hyphens: auto; hyphens: auto;
white-space: pre-wrap; white-space: pre-wrap;
padding: 0.6em 1em; padding: 0.6em 1em;
line-height: 1.5; line-height: 1.6;
a{ a{
color: inherit; color: inherit;
} }
@ -1158,7 +1185,7 @@ sm-button[variant="primary"]{
font-size: 2.6rem; font-size: 2.6rem;
} }
} }
#chat_container{ #messages_container{
flex: 1; flex: 1;
padding: 0 1rem; padding: 0 1rem;
} }
@ -1217,8 +1244,8 @@ sm-button[variant="primary"]{
stroke-width: 16; stroke-width: 16;
stroke: rgba(var(--text-color), 0.4); stroke: rgba(var(--text-color), 0.4);
} }
#messages_container,
#chat_container, #chat_container,
#dm_container,
#inbox_mail_container, #inbox_mail_container,
#sent_mail_container, #sent_mail_container,
#mail{ #mail{
@ -1227,14 +1254,14 @@ sm-button[variant="primary"]{
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
} }
#dm_container:empty{ #chat_container:empty{
display: none; display: none;
} }
#dm_container:not(:empty) ~ .empty-state{ #chat_container:not(:empty) ~ .empty-state{
display: none; display: none;
} }
#dm_container{ #chat_container{
padding-bottom: 5rem; padding-bottom: 6rem;
} }
sm-tab-panels{ sm-tab-panels{
overflow: hidden auto; overflow: hidden auto;
@ -1384,18 +1411,11 @@ sm-panel{
z-index: 2; z-index: 2;
transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;
} }
#dm_container, #chat_container,
#contact_container{ #contact_container{
gap: 0.2rem; gap: 0.2rem;
} }
#chat{ #chat{
header{
padding: 1rem;
.initial{
width: 2rem;
height: 2rem;
}
}
.message{ .message{
width: fit-content; width: fit-content;
max-width: 90%; max-width: 90%;
@ -1472,7 +1492,7 @@ sm-panel{
} }
.navbar-item{ .navbar-item{
margin: 0 0.5rem; margin: 0 0.5rem;
border-radius: 0.5rem; border-radius: 0.8rem;
.icon{ .icon{
margin-right: 0; margin-right: 0;
} }
@ -1549,9 +1569,9 @@ sm-panel{
} }
#chat{ #chat{
header{ header{
padding: 0.5rem 1.5rem; padding: 0.8rem 1.5rem;
} }
#chat_container{ #messages_container{
padding: 1rem 5rem; padding: 1rem 5rem;
} }
} }
@ -1561,15 +1581,19 @@ sm-panel{
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);
cursor: pointer; cursor: pointer;
} }
.contact sm-menu{ .contact .menu{
opacity: 0; opacity: 0;
transition: opacity 0.3s; transition: opacity 0.3s;
} }
.contact:hover sm-menu, .contact:hover .menu{
sm-menu:focus-within{
opacity: 1; opacity: 1;
} }
.emoji:hover{ .emoji:hover{
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
} }
}
@media (hover: none){
.contact .menu{
display: none;
}
} }

269
index.html
View File

@ -11,7 +11,7 @@
<link rel="stylesheet" href="css/main.min.css"> <link rel="stylesheet" href="css/main.min.css">
</head> </head>
<body data-theme="light" onload="onLoadStartUp()"> <body data-theme="light" onload="onLoadStartUp()" class="hide-completely">
<audio id="notification_sound"> <audio id="notification_sound">
<source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg"> <source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg">
<source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg"> <source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg">
@ -277,12 +277,9 @@
</template> </template>
<template id="contact_template"> <template id="contact_template">
<div class="contact interact"> <div class="contact">
<div class="initial flex align-center"></div> <div class="initial flex align-center"></div>
<h4 class="name"></h4> <h4 class="name"></h4>
<!--<sm-menu align-options="right">
<sm-menu-option class="send-mail-option">Send mail</sm-menu-option>
</sm-menu>-->
</div> </div>
</template> </template>
@ -339,7 +336,7 @@
<line y1="32" x2="64" y2="32"/> <line y1="32" x2="64" y2="32"/>
<line y1="53.34" x2="64" y2="53.34"/> <line y1="53.34" x2="64" y2="53.34"/>
</svg> </svg>
<h4>Chat</h4> <h4>FLO Messenger</h4>
<svg class="icon" onclick="toggleSearch('chat_search_field')" viewBox="0 0 64 64"> <svg class="icon" onclick="toggleSearch('chat_search_field')" viewBox="0 0 64 64">
<title>Search</title> <title>Search</title>
<path d="M25.69,1A24.7,24.7,0,0,1,43.15,43.15,24.7,24.7,0,0,1,8.23,8.22,24.53,24.53,0,0,1,25.69,1m0-1A25.7,25.7,0,1,0,43.85,7.51,25.64,25.64,0,0,0,25.69,0Z"/> <path d="M25.69,1A24.7,24.7,0,0,1,43.15,43.15,24.7,24.7,0,0,1,8.23,8.22,24.53,24.53,0,0,1,25.69,1m0-1A25.7,25.7,0,1,0,43.85,7.51,25.64,25.64,0,0,0,25.69,0Z"/>
@ -363,11 +360,6 @@
</svg> </svg>
</sm-input> </sm-input>
</div> </div>
<sm-tab-header target="chat_panels">
<sm-tab>Direct</sm-tab>
<sm-tab>Groups</sm-tab>
<sm-tab>Notes</sm-tab>
</sm-tab-header>
</header> </header>
<sm-button variant="primary" id="new_message_button" onclick="showContacts()" class="fab round"> <sm-button variant="primary" id="new_message_button" onclick="showContacts()" class="fab round">
<svg xmlns="http://www.w3.org/2000/svg"class="icon" viewBox="0 0 64 64"> <svg xmlns="http://www.w3.org/2000/svg"class="icon" viewBox="0 0 64 64">
@ -377,24 +369,18 @@
</svg> </svg>
New chat New chat
</sm-button> </sm-button>
<sm-tab-panels id="chat_panels"> <div id="chat_container" class="flex"></div>
<sm-panel> <div id="new_conversation" class="flex direction-column empty-state">
<div id="dm_container" class="flex"></div> <svg class="icon new-conversation align-center" viewBox="0 0 512 512">
<div id="new_conversation" class="flex direction-column empty-state"> <title>new conversation</title>
<svg class="icon new-conversation align-center" viewBox="0 0 512 512"> <path d="M304.11,403.5H101.42a51,51,0,0,1-51-51v-191L6.87,84.82H424.36a51,51,0,0,1,51,51v86.72"/>
<title>new conversation</title> <ellipse cx="423.3" cy="342.48" rx="84.7"/>
<path d="M304.11,403.5H101.42a51,51,0,0,1-51-51v-191L6.87,84.82H424.36a51,51,0,0,1,51,51v86.72"/> <line x1="423.3" y1="306.34" x2="423.3" y2="379.64"/>
<ellipse cx="423.3" cy="342.48" rx="84.7"/> <line x1="459.95" y1="342.99" x2="386.65" y2="342.99"/>
<line x1="423.3" y1="306.34" x2="423.3" y2="379.64"/> </svg>
<line x1="459.95" y1="342.99" x2="386.65" y2="342.99"/> <h4>Add a contact for getting started</h4>
</svg> <p class="light-text">Tap/click on added contact to start a conversation</p>
<h4>Add a contact for getting started</h4> </div>
<p class="light-text">Tap/click on added contact to start a conversation</p>
</div>
</sm-panel>
<sm-panel></sm-panel>
<sm-panel></sm-panel>
</sm-tab-panels>
<div id="all_contacts" class="flex direction-column hide-completely"> <div id="all_contacts" class="flex direction-column hide-completely">
<header class="grid header"> <header class="grid header">
<div class="flex align-center"> <div class="flex align-center">
@ -440,17 +426,19 @@
</div> </div>
</div> </div>
<div id="chat" class="flex direction-column hide-on-mobile hide-completely"> <div id="chat" class="flex direction-column hide-on-mobile hide-completely">
<header class="flex align-center"> <header class="grid align-center">
<svg class="icon hide-on-desktop back-button" onclick="goto('chats')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <svg class="icon hide-on-desktop back-button" onclick="goto('chats')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<title>Go to chat page</title> <title>Go to chat page</title>
<line x1="1" y1="32" x2="64" y2="32"/> <line x1="1" y1="32" x2="64" y2="32"/>
<polyline points="29.64 60.97 0.65 32 29.64 3.03"/> <polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
</svg> </svg>
<div id="receiver_initial" onclick="showPopup('contact_details_popup')" class="initial flex align-center"></div> <div class="flex align-center interact" onclick="showPopup('contact_details_popup')">
<h4 id="receiver_name"></h4> <div id="receiver_initial" class="initial flex align-center"></div>
<h4 id="receiver_name"></h4>
</div>
</header> </header>
<h5 id="warn_no_encryption">Messages are not encrypted until receiver replies</h5> <h5 id="warn_no_encryption">Messages are not encrypted until receiver replies</h5>
<section id="chat_container" class="flex direction-column"> <section id="messages_container" class="flex direction-column">
</section> </section>
<svg id="scroll_to_bottom" onclick="scrollToBottom()" class="icon" viewBox="0 0 64 64"> <svg id="scroll_to_bottom" onclick="scrollToBottom()" class="icon" viewBox="0 0 64 64">
<title></title> <title></title>
@ -459,7 +447,7 @@
<footer class="grid"> <footer class="grid">
<div id="emoji_picker" class="hide-completely"></div> <div id="emoji_picker" class="hide-completely"></div>
<div class="flex"> <div class="flex">
<svg id="toggle_emoji" onclick="toggleEmoji(this)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0ZM43.84,17.51a4.92,4.92,0,1,1-4.92,4.92A4.92,4.92,0,0,1,43.84,17.51Zm-23.62-.06a5,5,0,1,1-5,5A5,5,0,0,1,20.22,17.45ZM32,54.42A19.68,19.68,0,0,1,12.31,34.73H51.69A19.68,19.68,0,0,1,32,54.42Z"/></svg> <svg id="emoji_toggle" onclick="toggleEmoji()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0ZM43.84,17.51a4.92,4.92,0,1,1-4.92,4.92A4.92,4.92,0,0,1,43.84,17.51Zm-23.62-.06a5,5,0,1,1-5,5A5,5,0,0,1,20.22,17.45ZM32,54.42A19.68,19.68,0,0,1,12.31,34.73H51.69A19.68,19.68,0,0,1,32,54.42Z"/></svg>
<sm-textarea id="type_message" placeholder="Type a message" class="rest"></sm-textarea> <sm-textarea id="type_message" placeholder="Type a message" class="rest"></sm-textarea>
<svg xmlns="http://www.w3.org/2000/svg" id="send_message_button" class="icon" viewBox="0 0 64 64"> <svg xmlns="http://www.w3.org/2000/svg" id="send_message_button" class="icon" viewBox="0 0 64 64">
<path d="M63.34,31,3.07,4.71A2.19,2.19,0,0,0,.18,7.58L8.94,28.29,42.18,32,8.94,35.71.18,56.42a2.19,2.19,0,0,0,2.89,2.87L63.34,33A1.09,1.09,0,0,0,63.34,31Z"/> <path d="M63.34,31,3.07,4.71A2.19,2.19,0,0,0,.18,7.58L8.94,28.29,42.18,32,8.94,35.71.18,56.42a2.19,2.19,0,0,0,2.89,2.87L63.34,33A1.09,1.09,0,0,0,63.34,31Z"/>
@ -777,7 +765,7 @@
return color; return color;
} }
const selectedColors = ['#FF1744', '#F50057', '#8E24AA', '#5E35B1', '#3F51B5', '#3D5AFE', '#00B0FF', '#00BCD4', '#1DE9B6', '#66BB6A', '#8BC34A', '#FBC02D', '#FF6F00', '#FF9100', '#FF3D00'] const selectedColors = ['#FF1744', '#F50057', '#8E24AA', '#5E35B1', '#3F51B5', '#3D5AFE', '#00B0FF', '#00BCD4', '#16c79a', '#66BB6A', '#8BC34A', '#11698e', '#FF6F00', '#FF9100', '#FF3D00']
function randomColor(){ function randomColor(){
return selectedColors[Math.floor(Math.random() * selectedColors.length)] return selectedColors[Math.floor(Math.random() * selectedColors.length)]
} }
@ -984,32 +972,32 @@
} }
}) })
function createRipple(event, target) {
const circle = document.createElement("span");
const diameter = Math.max(target.clientWidth, target.clientHeight);
const radius = diameter / 2;
circle.style.width = circle.style.height = `${diameter}px`;
circle.style.left = `${event.clientX - (target.getBoundingClientRect().left + radius)}px`;
circle.style.top = `${event.clientY - (target.getBoundingClientRect().top + radius)}px`;
circle.classList.add("ripple");
const rippleAnimation = circle.animate([
{
transform: 'scale(3)',
opacity: 0
}
],
{
duration: 1000,
fill: "forwards",
easing: 'ease-out'
})
target.append(circle);
rippleAnimation.onfinish = () => {
circle.remove()
}
}
}) })
function createRipple(event, target) {
const circle = document.createElement("span");
const diameter = Math.max(target.clientWidth, target.clientHeight);
const radius = diameter / 2;
circle.style.width = circle.style.height = `${diameter}px`;
circle.style.left = `${event.clientX - (target.getBoundingClientRect().left + radius)}px`;
circle.style.top = `${event.clientY - (target.getBoundingClientRect().top + radius)}px`;
circle.classList.add("ripple");
const rippleAnimation = circle.animate([
{
transform: 'scale(3)',
opacity: 0
}
],
{
duration: 1000,
fill: "forwards",
easing: 'ease-out'
})
target.append(circle);
rippleAnimation.onfinish = () => {
circle.remove()
}
}
function generateId() { function generateId() {
getRef('generate_flo_id').classList.add('hide-completely') getRef('generate_flo_id').classList.add('hide-completely')
@ -1107,12 +1095,13 @@
</script> </script>
<script id="onLoadStartUp"> <script id="onLoadStartUp">
function onLoadStartUp() { function onLoadStartUp() {
document.body.classList.remove('hide-completely')
privKeyNotSecured = true; privKeyNotSecured = true;
//display loading screen //display loading screen
getRef('loading_page').classList.remove("hide-completely") getRef('loading_page').classList.remove("hide-completely")
//clear Rendered Elements //clear Rendered Elements
let elementsToReset = ['inbox_mail_container', 'sent_mail_container', 'contacts_container', 'dm_container', 'chat_container', let elementsToReset = ['inbox_mail_container', 'sent_mail_container', 'contacts_container', 'chat_container', 'messages_container',
'receiver_name', 'mail_contact_list' 'receiver_name', 'mail_contact_list'
] ]
//, "backup_info" //, "backup_info"
@ -1133,6 +1122,7 @@
floGlobals.appendix = data.appendix; floGlobals.appendix = data.appendix;
floGlobals.groups = data.groups; floGlobals.groups = data.groups;
floGlobals.chats = data.chats floGlobals.chats = data.chats
floGlobals['marked'] = data.marked
renderContactList(floGlobals.contacts) renderContactList(floGlobals.contacts)
renderChatList() renderChatList()
renderMailList(data.mails, false) renderMailList(data.mails, false)
@ -1235,14 +1225,15 @@
card.querySelector('.mail-content').textContent = content card.querySelector('.mail-content').textContent = content
return card return card
}, },
async contactCard(floID, name, type, prepend = false){ async contactCard(floID, name, type, options = {}){
let {prepend = false, markUnread = false} = options
let card = getRef('contact_template').content.cloneNode(true), let card = getRef('contact_template').content.cloneNode(true),
cardContainer = card.firstElementChild cardContainer = card.firstElementChild
cardContainer.setAttribute("name", name || 'Unknown') cardContainer.setAttribute("name", name || 'Unknown')
cardContainer.setAttribute("flo-id", floID) cardContainer.setAttribute("flo-id", floID)
cardContainer.querySelector('.name').textContent = name || 'Unknown' cardContainer.querySelector('.name').textContent = name || floID
let initial = card.querySelector('.initial') let initial = card.querySelector('.initial')
initial.textContent = name ? name.charAt(0) : 'U' initial.textContent = name ? name.charAt(0) : floID.charAt(0)
let color = contactColor(floID) let color = contactColor(floID)
//cardContainer.setAttribute("text-color", randomColor.primary) //cardContainer.setAttribute("text-color", randomColor.primary)
cardContainer.setAttribute("background-color", color) cardContainer.setAttribute("background-color", color)
@ -1255,23 +1246,36 @@
} }
else{ else{
//render chat card for newly added contact //render chat card for newly added contact
cardContainer.classList.add('chat') if(type === 'chat')
if(prepend){ cardContainer.classList.add('chat')
else
cardContainer.classList.add('group')
if(markUnread)
cardContainer.classList.add('unread')
messenger.getChat(floID).then(chat => {
let lastMessage = {message: '', time: 0}
if(Object.values(chat).length){
lastMessage = Object.values(chat).pop()
}
else if(type === 'group'){
lastMessage.time = floGlobals.groups[floID].created
}
cardContainer.innerHTML += ` cardContainer.innerHTML += `
<h5 class="last-message"></h5> <p class="last-message">${lastMessage.message}</p>
<h5 class="time"></h5>` <h5 class="time">${getFormatedTime(lastMessage.time, true)}</h5>
getRef('dm_container').prepend(card); <svg class="icon menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
getRef('dm_container').children[0].click() <circle cx="5.59" cy="32" r="5.59"/>
<circle cx="58.41" cy="32" r="5.59"/>
<circle cx="31.89" cy="32" r="5.59"/>
</svg>`
})
.catch(error => console.error(error))
if(prepend){
getRef('chat_container').prepend(card);
getRef('chat_container').children[0].click()
} }
else{ else{
messenger.getChat(floID).then(chat => { getRef('chat_container').append(card);
const lastMessage = Object.values(chat).pop()
cardContainer.innerHTML += `
<p class="last-message">${lastMessage.message}</p>
<h5 class="time">${getFormatedTime(lastMessage.time, true)}</h5>`
})
.catch(error => console.log(error))
getRef('dm_container').append(card);
} }
} }
}, },
@ -1409,7 +1413,7 @@
} }
if(e.target.closest('#search_chats')){ if(e.target.closest('#search_chats')){
if(e.code === 'ArrowDown'){ if(e.code === 'ArrowDown'){
for(child of getRef('dm_container').children){ for(child of getRef('chat_container').children){
if(!child.classList.contains('hide-completely')){ if(!child.classList.contains('hide-completely')){
child.focus() child.focus()
break break
@ -1446,7 +1450,7 @@
}) })
const chatScrollInfo = {}; const chatScrollInfo = {};
getRef('chat_container').addEventListener('scroll', function() { getRef('messages_container').addEventListener('scroll', function() {
chatScrollInfo['scrollTop'] = this.scrollTop chatScrollInfo['scrollTop'] = this.scrollTop
chatScrollInfo['scrollheight'] = this.scrollHeight chatScrollInfo['scrollheight'] = this.scrollHeight
if((this.scrollHeight > this.clientHeight) && (this.scrollHeight - this.clientHeight - this.scrollTop >= 100)){ if((this.scrollHeight > this.clientHeight) && (this.scrollHeight - this.clientHeight - this.scrollTop >= 100)){
@ -1475,7 +1479,7 @@
getRef('search_chats').addEventListener('input', function() { getRef('search_chats').addEventListener('input', function() {
if(this.value.trim !== ''){ if(this.value.trim !== ''){
for(child of getRef('dm_container').children) { for(child of getRef('chat_container').children) {
if(child.getAttribute('name').toUpperCase().indexOf(this.value.toUpperCase()) > -1){ if(child.getAttribute('name').toUpperCase().indexOf(this.value.toUpperCase()) > -1){
child.classList.remove('hide-completely') child.classList.remove('hide-completely')
} }
@ -1486,7 +1490,7 @@
} }
}) })
document.addEventListener('pointerdown', e => { document.addEventListener('click', e => {
if(e.target.closest('.sidebar-item')){ if(e.target.closest('.sidebar-item')){
let target = e.target.closest('.sidebar-item') let target = e.target.closest('.sidebar-item')
if(target.dataset.target) if(target.dataset.target)
@ -1521,9 +1525,6 @@
if(e.target.closest('#new_mail_button')){ if(e.target.closest('#new_mail_button')){
showPopup('compose_mail_popup') showPopup('compose_mail_popup')
} }
if(e.target.closest('#chat')){
messenger.removeMark(activeChat['receiver'], "unread");
}
//Detect click on send mail option //Detect click on send mail option
if (e.target.closest(".send-mail-option")){ if (e.target.closest(".send-mail-option")){
@ -1552,6 +1553,15 @@
}, 0); }, 0);
} }
} }
// detect click outside emoji panel and emoji button
if(isEmojiPickerOpen && (!e.target.closest('#emoji_picker') && !e.target.closest('#emoji_toggle') && !e.target.closest('#type_message'))){
isEmojiPickerOpen = false
getRef('emoji_toggle').classList.remove('active')
getRef('emoji_picker').classList.add('hide-completely')
getRef('scroll_to_bottom').setAttribute('style', `top: calc(${getRef('messages_container').getBoundingClientRect().height}px - 1.5rem`)
if(!chatScrollInfo.scrolledUp)
scrollToBottom()
}
}) })
let clickedContact = {} let clickedContact = {}
@ -1562,13 +1572,14 @@
clickedContact['card'] = contact clickedContact['card'] = contact
clickedContact['floID'] = contact.getAttribute("flo-id") clickedContact['floID'] = contact.getAttribute("flo-id")
clickedContact['name'] = contact.getAttribute("name") clickedContact['name'] = contact.getAttribute("name")
if(e.target.closest(".initial") || e.target.closest("sm-menu")){ if(e.target.closest(".initial") || e.target.closest(".icon")){
showPopup('contact_details_popup') showPopup('contact_details_popup')
} }
else if(isCreatingGroup){ else if(isCreatingGroup){
// code for adding group members // code for adding group members
} }
else{ else{
createRipple(e, contact)
contact.classList.remove('unread') contact.classList.remove('unread')
if(activeChat['chatCard'] === contact && window.innerWidth > 640) return if(activeChat['chatCard'] === contact && window.innerWidth > 640) return
document.title = `FLO Messenger` document.title = `FLO Messenger`
@ -1641,6 +1652,7 @@
} }
let renderedEmojis = '' let renderedEmojis = ''
let emojiSectionCounter = 0 let emojiSectionCounter = 0
let isEmojiPickerOpen = false
let emojiSections = ['Smileys', 'Gestures and Body Parts', 'People and Fantasy', 'Clothing and Accessories', 'Animals & Nature', 'Food & Drink', 'Activity and Sports'] let emojiSections = ['Smileys', 'Gestures and Body Parts', 'People and Fantasy', 'Clothing and Accessories', 'Animals & Nature', 'Food & Drink', 'Activity and Sports']
renderedEmojis += ` renderedEmojis += `
<section id="recent_emoji_section"> <section id="recent_emoji_section">
@ -1664,14 +1676,19 @@
emojis += `<span class="emoji">${emoji}</span>` emojis += `<span class="emoji">${emoji}</span>`
}) })
getRef('recent_emoji_section').innerHTML = '' getRef('recent_emoji_section').innerHTML = ''
getRef('recent_emoji_section').innerHTML = emojis if(recentEmojis.length)
getRef('recent_emoji_section').innerHTML = emojis
} }
renderRecentEmojis() renderRecentEmojis()
function toggleEmoji(button){ function toggleEmoji(button){
button.classList.toggle('active') getRef('emoji_toggle').classList.toggle('active')
getRef('emoji_picker').classList.toggle('hide-completely') getRef('emoji_picker').classList.toggle('hide-completely')
getRef('scroll_to_bottom').setAttribute('style', `top: calc(${getRef('chat_container').getBoundingClientRect().height}px - 1.5rem`) getRef('scroll_to_bottom').setAttribute('style', `top: calc(${getRef('messages_container').getBoundingClientRect().height}px - 1.5rem`)
if(getRef('emoji_picker').classList.contains('hide-completely'))
isEmojiPickerOpen = false
else
isEmojiPickerOpen = true
if(!chatScrollInfo.scrolledUp) if(!chatScrollInfo.scrolledUp)
scrollToBottom() scrollToBottom()
} }
@ -1721,7 +1738,7 @@
getRef('all_contacts').classList.remove('hide-completely') getRef('all_contacts').classList.remove('hide-completely')
contactsDrawerAnimation = animateTo(getRef('all_contacts'), [ contactsDrawerAnimation = animateTo(getRef('all_contacts'), [
{transform: 'translateY(2rem)'}, {transform: 'translateY(2rem)'},
{transform: 'none'}, {transform: 'translateY(0)'},
],{ ],{
duration: 300, duration: 300,
easing: 'ease' easing: 'ease'
@ -1800,11 +1817,11 @@
return return
} }
else{ else{
if(e.code === "Enter" && (e.code === "ShiftLeft" || e.code === "ShiftRight")){ if(e.code === "Enter" && e.shiftKey){
e.preventDefault() e.preventDefault()
getRef('type_message').value += '\r\n'; getRef('type_message').value += '\r\n';
} }
else if(e.code === "Enter" && isEnterSend){ else if(!e.shiftKey && e.code === "Enter" && isEnterSend){
e.preventDefault() e.preventDefault()
sendMessage() sendMessage()
} }
@ -1906,20 +1923,20 @@
getRef('type_message').focusIn() getRef('type_message').focusIn()
let receiver = activeChat['receiver'] let receiver = activeChat['receiver']
let container; let container;
let message = getRef('type_message').value; let message = getRef('type_message').value.trim();
getRef('type_message').value = '' getRef('type_message').value = ''
if(message.trim() === '') return if(message === '') return
let time = Date.now() let time = Date.now()
getRef('chat_container').append(render.messageBubble(receiver, message, time, 'sent', true)) getRef('messages_container').append(render.messageBubble(receiver, message, time, 'sent', true))
scrollToBottom(true) scrollToBottom(true)
const contact = getRef('dm_container').querySelector(`.chat[flo-id="${receiver}"]`) const contact = getRef('chat_container').querySelector(`.chat[flo-id="${receiver}"]`)
if(contact){ if(contact){
if(activeChat['chatCard'] !== getRef('dm_container').children[0]){ if(activeChat['chatCard'] !== getRef('chat_container').children[0]){
const cloneContact = contact.cloneNode(true) const cloneContact = contact.cloneNode(true)
contact.remove() contact.remove()
activeChat['chatCard'] = cloneContact activeChat['chatCard'] = cloneContact
getRef('dm_container').prepend(cloneContact) getRef('chat_container').prepend(cloneContact)
animateTo(getRef('dm_container').children[0], [ animateTo(getRef('chat_container').children[0], [
{transform: 'translateY(1rem)'}, {transform: 'translateY(1rem)'},
{transform: 'none'}, {transform: 'none'},
], ],
@ -1932,7 +1949,7 @@
} }
else{ else{
messenger.addChat(receiver) messenger.addChat(receiver)
render.contactCard(receiver, floGlobals.contacts[receiver], 'chat', true) render.contactCard(receiver, floGlobals.contacts[receiver], 'chat', {prepend: true})
} }
messenger.sendMessage(message, receiver).then(data => { messenger.sendMessage(message, receiver).then(data => {
getRef(`${receiver}_${time}`).classList.remove('unconfirmed') getRef(`${receiver}_${time}`).classList.remove('unconfirmed')
@ -1974,11 +1991,17 @@
} }
async function renderChatList() { async function renderChatList() {
getRef('dm_container').innerHTML = '' getRef('chat_container').innerHTML = ''
for (floID of messenger.getChatOrder().direct){ for (floID of messenger.getChatOrder().mixed){
render.contactCard(floID, floGlobals.contacts[floID], 'chat') const markUnread = floGlobals.marked[floID]?.[0] === 'unread' ? true : false
let type
if(floGlobals.chats[floID])
type = 'chat'
else if(floGlobals.groups[floID])
type = 'group'
render.contactCard(floID, floGlobals.contacts[floID], type, {markUnread})
} }
chatMutationObserver.observe(getRef('chat_container'), {childList: true}) chatMutationObserver.observe(getRef('messages_container'), {childList: true})
} }
function renderMarked(data) { function renderMarked(data) {
@ -1990,7 +2013,7 @@
} }
function scrollToBottom(smooth = false){ function scrollToBottom(smooth = false){
getRef('chat_container').scrollTo({top: getRef('chat_container').scrollHeight, behaviour: smooth ? 'smooth': ''}) getRef('messages_container').scrollTo({top: getRef('messages_container').scrollHeight, behaviour: smooth ? 'smooth': ''})
} }
let startIndex = 0, let startIndex = 0,
@ -2021,14 +2044,14 @@
//Stops message from rendering in wrong chat window //Stops message from rendering in wrong chat window
if(activeChat['receiver'] && activeChat['receiver'] === floID) if(activeChat['receiver'] && activeChat['receiver'] === floID)
frag.append(render.messageBubble(floID, message, time, category)) frag.append(render.messageBubble(floID, message, time, category))
const contact = getRef('dm_container').querySelector(`.chat[flo-id='${floID}']`) const contact = getRef('chat_container').querySelector(`.chat[flo-id='${floID}']`)
if (markUnread && contact){ if (markUnread && contact){
contact.classList.add("unread"); contact.classList.add("unread");
if(activeChat['chatCard'] !== getRef('dm_container').children[0] || contact !== getRef('dm_container').children[0]){ if(contact !== getRef('chat_container').children[0]){
const cloneContact = contact.cloneNode(true) const cloneContact = contact.cloneNode(true)
contact.remove() contact.remove()
getRef('dm_container').prepend(cloneContact) getRef('chat_container').prepend(cloneContact)
animateTo(getRef('dm_container').children[0], [ animateTo(getRef('chat_container').children[0], [
{transform: 'translateY(1rem)'}, {transform: 'translateY(1rem)'},
{transform: 'none'}, {transform: 'none'},
], ],
@ -2040,7 +2063,7 @@
} }
} }
if(updateChatCard){ if(updateChatCard){
const chatCard = getRef('dm_container').querySelector(`[flo-id="${floID}"]`) const chatCard = getRef('chat_container').querySelector(`[flo-id="${floID}"]`)
chatCard.querySelector('.last-message').textContent = message chatCard.querySelector('.last-message').textContent = message
chatCard.querySelector('.time').textContent = getFormatedTime(time, true) chatCard.querySelector('.time').textContent = getFormatedTime(time, true)
} }
@ -2048,15 +2071,15 @@
endIndex = startIndex endIndex = startIndex
if(!lazyLoad && !reRender){ if(!lazyLoad && !reRender){
endIndex = messages.length endIndex = messages.length
getRef('chat_container').append(frag) getRef('messages_container').append(frag)
if(!chatScrollInfo['scrolledUp']) if(!chatScrollInfo['scrolledUp'])
scrollToBottom() scrollToBottom()
} }
if(reRender || lazyLoad){ if(reRender || lazyLoad){
currentDate = null currentDate = null
chatScrollInfo['scrollTop'] = getRef('chat_container').scrollTop chatScrollInfo['scrollTop'] = getRef('messages_container').scrollTop
chatScrollInfo['scrollHeight'] = getRef('chat_container').scrollHeight chatScrollInfo['scrollHeight'] = getRef('messages_container').scrollHeight
getRef('chat_container').prepend(frag) getRef('messages_container').prepend(frag)
} }
if(reRender){ if(reRender){
scrollToBottom() scrollToBottom()
@ -2068,10 +2091,10 @@
(mutations, observer) => { (mutations, observer) => {
for(const mutation of mutations) { for(const mutation of mutations) {
if (mutation.type === 'childList' && mutation.addedNodes.length) { if (mutation.type === 'childList' && mutation.addedNodes.length) {
chatMessageObserver.observe(getRef('chat_container').firstElementChild) chatMessageObserver.observe(getRef('messages_container').firstElementChild)
chatScrollInfo['scrollTop'] += (getRef('chat_container').scrollHeight - chatScrollInfo['scrollHeight']) chatScrollInfo['scrollTop'] += (getRef('messages_container').scrollHeight - chatScrollInfo['scrollHeight'])
chatScrollInfo['scrollHeight'] = getRef('chat_container').scrollHeight chatScrollInfo['scrollHeight'] = getRef('messages_container').scrollHeight
getRef('chat_container').scrollTo({top: chatScrollInfo['scrollTop']}) getRef('messages_container').scrollTo({top: chatScrollInfo['scrollTop']})
} }
} }
} }
@ -2088,7 +2111,7 @@
) )
async function viewConversation(contact) { async function viewConversation(contact) {
getRef('chat_container').innerHTML = '' getRef('messages_container').innerHTML = ''
let floID = clickedContact['floID'], let floID = clickedContact['floID'],
name = contact.getAttribute('name'), name = contact.getAttribute('name'),
textColor = contact.getAttribute('text-color'), textColor = contact.getAttribute('text-color'),
@ -2096,7 +2119,7 @@
activeChat['receiver'] = floID activeChat['receiver'] = floID
getRef("receiver_initial").textContent = floGlobals.contacts[floID] ? floGlobals.contacts[floID].charAt(0) : name.charAt(0) || ' '; getRef("receiver_initial").textContent = floGlobals.contacts[floID] ? floGlobals.contacts[floID].charAt(0) : name.charAt(0) || ' ';
getRef("receiver_initial").setAttribute('style', `color: ${textColor}; background-color: ${backgroundColor};`) getRef("receiver_initial").setAttribute('style', `color: ${textColor}; background-color: ${backgroundColor};`)
getRef("receiver_name").textContent = floGlobals.contacts[floID] || name || ' '; getRef("receiver_name").textContent = floGlobals.contacts[floID] || floID || ' ';
if (floGlobals.pubKeys[floID]) if (floGlobals.pubKeys[floID])
getRef("warn_no_encryption").classList.add("hide-completely"); getRef("warn_no_encryption").classList.add("hide-completely");
else else
@ -2268,11 +2291,11 @@
windowSizeObserver.observe(document.body) windowSizeObserver.observe(document.body)
function animateTo(element, animation, options){ function animateTo(element, animation, options){
const anime = element.animate(animation, {...options}) const anime = element.animate(animation, {...options, fill: 'both'})
anime.onfinish = () => { anime.addEventListener('finish', () => {
anime.commitStyles() anime.commitStyles()
anime.cancel() anime.cancel()
} })
return anime return anime
} }