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

v0.8.60

Browse Source 
UI (user): change message bubble layout
This commit is contained in:
sairaj mote 2021-01-19 18:40:11 +05:30
parent be0d18f8e5
commit d543be4939
5 changed files with 1181 additions and 1068 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2066
assets/illustrations-2.ai
View File

File diff suppressed because one or more lines are too long

67
css/main.css
View File

@ -395,7 +395,9 @@ sm-button[variant=primary] .icon {
font-weight: 500; font-weight: 500;
} }
#landing .left p { #landing .left p {
font-weight: 500; margin-top: 1rem;
font-size: 1.1rem;
color: rgba(var(--text-color), 0.8);
} }
#landing_page { #landing_page {
@ -570,6 +572,13 @@ sm-button[variant=primary] .icon {
text-transform: uppercase; text-transform: uppercase;
} }
.group-icon {
height: 1.6rem;
width: 1.6rem;
fill: white;
stroke: none;
}
.contact { .contact {
position: relative; position: relative;
display: grid; display: grid;
@ -604,7 +613,7 @@ sm-button[variant=primary] .icon {
text-overflow: ellipsis; text-overflow: ellipsis;
font-weight: 400; font-weight: 400;
font-size: 0.9em; font-size: 0.9em;
color: rgba(var(--text-color), 0.9); color: rgba(var(--text-color), 0.8);
} }
.contact .menu { .contact .menu {
grid-area: menu; grid-area: menu;
@ -613,8 +622,8 @@ sm-button[variant=primary] .icon {
fill: rgba(var(--text-color), 1); fill: rgba(var(--text-color), 1);
} }
.contact .time { .contact .time {
font-weight: 400; font-weight: 500;
opacity: 0.8; color: rgba(var(--text-color), 0.7);
grid-area: time; grid-area: time;
} }
@ -915,8 +924,14 @@ sm-button[variant=primary] .icon {
padding-top: 0.7rem; padding-top: 0.7rem;
} }
#contacts .option { #contacts .option {
display: flex;
align-items: center;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
} }
#contacts .option .icon {
margin-right: 1rem;
stroke: rgba(var(--text-color), 0.7);
}
#contacts .scrolling-wrapper { #contacts .scrolling-wrapper {
height: 100%; height: 100%;
flex: 1; flex: 1;
@ -1056,6 +1071,7 @@ sm-button[variant=primary] .icon {
margin-right: 1rem; margin-right: 1rem;
height: 2.2rem; height: 2.2rem;
width: 2.2rem; width: 2.2rem;
flex-shrink: 0;
} }
#chat header h4 { #chat header h4 {
font-weight: 500; font-weight: 500;
@ -1133,14 +1149,14 @@ sm-button[variant=primary] .icon {
#chat .message { #chat .message {
position: relative; position: relative;
display: grid; display: grid;
grid-auto-flow: column;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.2rem;
width: 100%; width: 100%;
font-size: 0.92rem; 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;
padding: 0.6em 1em;
} }
#chat .message .message-body { #chat .message .message-body {
display: inline-flex; display: inline-flex;
@ -1154,7 +1170,6 @@ sm-button[variant=primary] .icon {
-webkit-hyphens: auto; -webkit-hyphens: auto;
hyphens: auto; hyphens: auto;
white-space: pre-wrap; white-space: pre-wrap;
padding: 0.6em 1em;
line-height: 1.6; line-height: 1.6;
} }
#chat .message .message-body a { #chat .message .message-body a {
@ -1172,6 +1187,9 @@ sm-button[variant=primary] .icon {
} }
#chat .sent { #chat .sent {
margin-left: auto; margin-left: auto;
background: var(--accent-color);
color: #f0f0f0;
border-radius: 1em 0 1em 1em;
} }
#chat .sent::after { #chat .sent::after {
content: ""; content: "";
@ -1184,13 +1202,12 @@ sm-button[variant=primary] .icon {
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 .sent .message-body {
background: var(--accent-color);
color: #f0f0f0;
border-radius: 1.5em 0 1.5em 1.5em;
}
#chat .sent .time { #chat .sent .time {
grid-column: 1; margin-left: auto;
}
#chat .received {
background: rgba(var(--text-color), 0.1);
border-radius: 0 1em 1em 1em;
} }
#chat .received::after { #chat .received::after {
content: ""; content: "";
@ -1203,10 +1220,6 @@ sm-button[variant=primary] .icon {
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 .received .message-body {
background: rgba(var(--text-color), 0.1);
border-radius: 0 1.5em 1.5em 1.5em;
}
#chat .sent + .sent, #chat .sent + .sent,
#chat .received + .received { #chat .received + .received {
margin-top: 0; margin-top: 0;
@ -1215,9 +1228,9 @@ sm-button[variant=primary] .icon {
#chat .received + .received::after { #chat .received + .received::after {
display: none; display: none;
} }
#chat .sent + .sent .message-body, #chat .sent + .sent,
#chat .received + .received .message-body { #chat .received + .received {
border-radius: 1.5em; border-radius: 1em;
} }
#chat .unconfirmed { #chat .unconfirmed {
opacity: 0.7; opacity: 0.7;
@ -1233,12 +1246,7 @@ sm-button[variant=primary] .icon {
transform: none; transform: none;
} }
} }
.big-emoji::after {
display: none;
}
.big-emoji .message-body { .big-emoji .message-body {
background: none !important;
padding: 0 !important;
font-size: 2.6rem; font-size: 2.6rem;
} }
@ -1416,8 +1424,12 @@ sm-panel {
display: grid; display: grid;
gap: 0.3rem; gap: 0.3rem;
} }
#settings_page section sm-button {
margin-top: 0.5rem;
margin-bottom: 0;
}
#settings_page section:not(:last-of-type) { #settings_page section:not(:last-of-type) {
margin-bottom: 1.5rem; margin-bottom: 2rem;
} }
#settings_page section.setting-toggle { #settings_page section.setting-toggle {
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
@ -1450,6 +1462,9 @@ sm-panel {
font-size: 2rem; font-size: 2rem;
font-weight: 500; font-weight: 500;
} }
#landing .left p {
text-align: center;
}
#landing sm-button { #landing sm-button {
width: 100%; width: 100%;
display: flex; display: flex;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

64
css/main.scss
View File

@ -346,7 +346,9 @@ sm-button[variant="primary"]{
font-weight: 500; font-weight: 500;
} }
p{ p{
font-weight: 500; margin-top: 1rem;
font-size: 1.1rem;
color: rgba(var(--text-color), 0.8);
} }
} }
} }
@ -519,6 +521,12 @@ sm-button[variant="primary"]{
border-radius: 2rem; border-radius: 2rem;
text-transform: uppercase; text-transform: uppercase;
} }
.group-icon{
height: 1.6rem;
width: 1.6rem;
fill: white;
stroke: none;
}
.contact{ .contact{
position: relative; position: relative;
display: grid; display: grid;
@ -554,7 +562,7 @@ sm-button[variant="primary"]{
text-overflow: ellipsis; text-overflow: ellipsis;
font-weight: 400; font-weight: 400;
font-size: 0.9em; font-size: 0.9em;
color: rgba(var(--text-color), 0.9); color: rgba(var(--text-color), 0.8);
} }
.menu{ .menu{
grid-area: menu; grid-area: menu;
@ -563,8 +571,8 @@ sm-button[variant="primary"]{
fill: rgba(var(--text-color), 1); fill: rgba(var(--text-color), 1);
} }
.time{ .time{
font-weight: 400; font-weight: 500;
opacity: 0.8; color: rgba(var(--text-color), 0.7);
grid-area: time; grid-area: time;
} }
} }
@ -855,7 +863,13 @@ sm-button[variant="primary"]{
} }
} }
.option{ .option{
display: flex;
align-items: center;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
.icon{
margin-right: 1rem;
stroke: rgba(var(--text-color), 0.7);
}
} }
.scrolling-wrapper{ .scrolling-wrapper{
height: 100%; height: 100%;
@ -993,6 +1007,7 @@ sm-button[variant="primary"]{
margin-right: 1rem; margin-right: 1rem;
height: 2.2rem; height: 2.2rem;
width: 2.2rem; width: 2.2rem;
flex-shrink: 0;
} }
h4{ h4{
font-weight: 500; font-weight: 500;
@ -1073,14 +1088,14 @@ sm-button[variant="primary"]{
.message{ .message{
position: relative; position: relative;
display: grid; display: grid;
grid-auto-flow: column;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.2rem;
width: 100%; width: 100%;
font-size: 0.92rem; 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;
padding: 0.6em 1em;
.message-body{ .message-body{
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -1093,7 +1108,6 @@ sm-button[variant="primary"]{
-webkit-hyphens: auto; -webkit-hyphens: auto;
hyphens: auto; hyphens: auto;
white-space: pre-wrap; white-space: pre-wrap;
padding: 0.6em 1em;
line-height: 1.6; line-height: 1.6;
a{ a{
color: inherit; color: inherit;
@ -1112,6 +1126,9 @@ sm-button[variant="primary"]{
} }
.sent{ .sent{
margin-left: auto; margin-left: auto;
background: var(--accent-color);
color: #f0f0f0;
border-radius: 1em 0 1em 1em;
&::after{ &::after{
content: ''; content: '';
position: absolute; position: absolute;
@ -1123,16 +1140,13 @@ sm-button[variant="primary"]{
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;
} }
.message-body{
background: var(--accent-color);
color: #f0f0f0;
border-radius: 1.5em 0 1.5em 1.5em;
}
.time{ .time{
grid-column: 1; margin-left: auto;
} }
} }
.received{ .received{
background: rgba(var(--text-color), 0.1);
border-radius: 0 1em 1em 1em;
&::after{ &::after{
content: ''; content: '';
position: absolute; position: absolute;
@ -1144,10 +1158,6 @@ sm-button[variant="primary"]{
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;
} }
.message-body{
background: rgba(var(--text-color), 0.1);
border-radius: 0 1.5em 1.5em 1.5em;
}
} }
.sent + .sent, .sent + .sent,
.received + .received{ .received + .received{
@ -1157,9 +1167,9 @@ sm-button[variant="primary"]{
.received + .received::after{ .received + .received::after{
display: none; display: none;
} }
.sent + .sent .message-body, .sent + .sent,
.received + .received .message-body{ .received + .received{
border-radius: 1.5em; border-radius: 1em;
} }
.unconfirmed{ .unconfirmed{
opacity: 0.7; opacity: 0.7;
@ -1176,12 +1186,7 @@ sm-button[variant="primary"]{
} }
} }
.big-emoji{ .big-emoji{
&::after{
display: none;
}
.message-body{ .message-body{
background: none !important;
padding: 0 !important;
font-size: 2.6rem; font-size: 2.6rem;
} }
} }
@ -1346,8 +1351,12 @@ sm-panel{
max-width: 50ch; max-width: 50ch;
display: grid; display: grid;
gap: .3rem; gap: .3rem;
sm-button{
margin-top: 0.5rem;
margin-bottom: 0;
}
&:not(:last-of-type){ &:not(:last-of-type){
margin-bottom: 1.5rem; margin-bottom: 2rem;
} }
&.setting-toggle{ &.setting-toggle{
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
@ -1380,6 +1389,9 @@ sm-panel{
font-size: 2rem; font-size: 2rem;
font-weight: 500; font-weight: 500;
} }
.left p {
text-align: center;
}
sm-button{ sm-button{
width: 100%; width: 100%;
display: flex; display: flex;

50
index.html
View File

@ -53,6 +53,7 @@
<h1 class="title-font"> <h1 class="title-font">
Truly Secure, Private and Reliable. Truly Secure, Private and Reliable.
</h1> </h1>
<p>A messenger made with <strong>Blockchain</strong> and <strong>Open Source</strong> technologies. Take back control of your data that belongs to you and you alone.</p>
<sm-button variant="primary" onclick="showPopup('sign_in_popup')">Sign In / Create account</sm-button> <sm-button variant="primary" onclick="showPopup('sign_in_popup')">Sign In / Create account</sm-button>
</div> </div>
<div id="landing_illustration" class="right"> <div id="landing_illustration" class="right">
@ -343,7 +344,9 @@
<line x1="63.65" y1="63.66" x2="43.36" y2="43.37"/> <line x1="63.65" y1="63.66" x2="43.36" y2="43.37"/>
</svg> </svg>
<sm-menu align-options="right"> <sm-menu align-options="right">
<sm-menu-option onclick="initGroupCreation()">Create new group</sm-menu-option> <sm-menu-option onclick="initGroupCreation()">
Create new group
</sm-menu-option>
</sm-menu> </sm-menu>
</div> </div>
<div id="chat_search_field" class="expanding-search flex align-center"> <div id="chat_search_field" class="expanding-search flex align-center">
@ -405,7 +408,7 @@
</div> </div>
<div class="scrolling-wrapper"> <div class="scrolling-wrapper">
<div id="create_group_option" class="option interact" onclick="initGroupCreation()"> <div id="create_group_option" class="option interact" onclick="initGroupCreation()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M14.77,20.69c-1.72,0-4.95-2.46-5.59-3.74A22.74,22.74,0,0,1,7.76,9.27s-.28-6.36,7-6.36a6.69,6.69,0,0,1,7,6.36A23,23,0,0,1,20.36,17c-.65,1.28-3.88,3.74-5.59,3.74"/><path d="M34,24.52c-2.32,0-6.68-3.32-7.55-5.06A30.72,30.72,0,0,1,24.57,9.1S24.2.5,34,.5c9.09,0,9.46,8.6,9.46,8.6a30.72,30.72,0,0,1-1.92,10.36c-.86,1.74-5.23,5.06-7.54,5.06"/><path d="M51.11,31.69c-4.36-1.92-9-3.23-10.84-6.71A12.57,12.57,0,0,1,34,28.89,12.57,12.57,0,0,1,27.8,25C26,28.46,21.32,29.77,17,31.69,15.18,32.43,13.71,42,15.78,42"/><path d="M25,25c-2.38-1-4.55-2-5.57-3.93a9.38,9.38,0,0,1-4.62,2.89A9.32,9.32,0,0,1,10.15,21c-1.37,2.57-4.8,3.54-8,5-1.31.55-2.41,7.66-.87,7.66a25.71,25.71,0,0,0,11.38,3.46"/><line x1="52" y1="40" x2="52" y2="64"/><line x1="64" y1="52" x2="40" y2="52"/></svg>
Create new group Create new group
</div> </div>
<div id="contacts_container"></div> <div id="contacts_container"></div>
@ -1233,9 +1236,16 @@
cardContainer.setAttribute("flo-id", floID) cardContainer.setAttribute("flo-id", floID)
cardContainer.querySelector('.name').textContent = name || floID cardContainer.querySelector('.name').textContent = name || floID
let initial = card.querySelector('.initial') let initial = card.querySelector('.initial')
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)
if(type === 'group'){
initial.innerHTML = `
<svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg>
`
}
else{
initial.textContent = name ? name.charAt(0) : floID.charAt(0)
}
cardContainer.setAttribute("background-color", color) cardContainer.setAttribute("background-color", color)
initial.setAttribute(`style`, `background-color: ${color};`) initial.setAttribute(`style`, `background-color: ${color};`)
if(type === 'contact'){ if(type === 'contact'){
@ -1611,7 +1621,7 @@
"<", "<",
"👶", "👧", "🧒", "👦", "👩", "🧑", "👨", "👩‍🦱", "👨‍🦱", "👩‍🦰", "👨‍🦰", "👱‍♀️", "👱", "👱‍♂️", "👩‍🦳", "👨‍🦳", "👩‍🦲", "👨‍🦲", "🧔", "👵", "🧓", "👴", "👲", "👳‍♀️", "👳", "👶", "👧", "🧒", "👦", "👩", "🧑", "👨", "👩‍🦱", "👨‍🦱", "👩‍🦰", "👨‍🦰", "👱‍♀️", "👱", "👱‍♂️", "👩‍🦳", "👨‍🦳", "👩‍🦲", "👨‍🦲", "🧔", "👵", "🧓", "👴", "👲", "👳‍♀️", "👳",
"👳‍♂️", "🧕", "👮‍♀️", "👮", "👮‍♂️", "👷‍♀️", "👷", "👷‍♂️", "💂‍♀️", "💂", "💂‍♂️", "🕵️‍♀️", "🕵️", "🕵️‍♂️", "👩‍⚕️", "👨‍⚕️", "👩‍🌾", "👨‍🌾", "👩‍🍳", "👨‍🍳", "👩‍🎓", "👨‍🎓", "👩‍🎤", "👨‍🎤", "🧕", "👮‍♀️", "👮", "👷‍♀️", "👷", "👷‍♂️", "💂‍♀️", "💂", "🕵️‍♀️", "🕵️", "🕵️‍♂️", "👩‍⚕️", "👨‍⚕️", "👩‍🌾", "👨‍🌾", "👩‍🍳", "👨‍🍳", "👩‍🎓", "👨‍🎓", "👩‍🎤", "👨‍🎤",
"👩‍🏫", "👨‍🏫", "👩‍🏭", "👨‍🏭", "👩‍💻", "👨‍💻", "👩‍💼", "👨‍💼", "👩‍🔧", "👨‍🔧", "👩‍🔬", "👨‍🔬", "👩‍🎨", "👨‍🎨", "👩‍🚒", "👨‍🚒", "👩‍✈️", "👨‍✈️", "👩‍🏫", "👨‍🏫", "👩‍🏭", "👨‍🏭", "👩‍💻", "👨‍💻", "👩‍💼", "👨‍💼", "👩‍🔧", "👨‍🔧", "👩‍🔬", "👨‍🔬", "👩‍🎨", "👨‍🎨", "👩‍🚒", "👨‍🚒", "👩‍✈️", "👨‍✈️",
"👩‍🚀", "👨‍🚀", "👩‍⚖️", "👨‍⚖️", "👰", "🤵", "👸", "🤴", "🦸‍♀️", "🦸", "🦸‍♂️", "🦹‍♀️", "🦹", "🦹‍♂️", "🤶", "🎅", "🧙‍♀️", "🧙", "🧙‍♂️", "🧝‍♀️", "🧝", "👩‍🚀", "👨‍🚀", "👩‍⚖️", "👨‍⚖️", "👰", "🤵", "👸", "🤴", "🦸‍♀️", "🦸", "🦸‍♂️", "🦹‍♀️", "🦹", "🦹‍♂️", "🤶", "🎅", "🧙‍♀️", "🧙", "🧙‍♂️", "🧝‍♀️", "🧝",
"🧝‍♂️", "🧛‍♀️", "🧛", "🧛‍♂️", "🧟‍♀️", "🧟", "🧟‍♂️", "🧞‍♀️", "🧞", "🧞‍♂️", "🧜‍♀️", "🧜", "🧜‍♂️", "🧚‍♀️", "🧚", "🧚‍♂️", "👼", "🤰", "🤱", "🙇‍♀️", "🙇", "🙇‍♂️", "💁‍♀️", "💁", "💁‍♂️", "🙅‍♀️", "🙅", "🧝‍♂️", "🧛‍♀️", "🧛", "🧛‍♂️", "🧟‍♀️", "🧟", "🧟‍♂️", "🧞‍♀️", "🧞", "🧞‍♂️", "🧜‍♀️", "🧜", "🧜‍♂️", "🧚‍♀️", "🧚", "🧚‍♂️", "👼", "🤰", "🤱", "🙇‍♀️", "🙇", "🙇‍♂️", "💁‍♀️", "💁", "💁‍♂️", "🙅‍♀️", "🙅",
@ -1929,7 +1939,7 @@
let time = Date.now() let time = Date.now()
getRef('messages_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('chat_container').querySelector(`.chat[flo-id="${receiver}"]`) const contact = getRef('chat_container').querySelector(`.chat[flo-id="${receiver}"], .group[flo-id="${receiver}"]`)
if(contact){ if(contact){
if(activeChat['chatCard'] !== getRef('chat_container').children[0]){ if(activeChat['chatCard'] !== getRef('chat_container').children[0]){
const cloneContact = contact.cloneNode(true) const cloneContact = contact.cloneNode(true)
@ -1951,11 +1961,19 @@
messenger.addChat(receiver) messenger.addChat(receiver)
render.contactCard(receiver, floGlobals.contacts[receiver], 'chat', {prepend: true}) render.contactCard(receiver, floGlobals.contacts[receiver], 'chat', {prepend: true})
} }
messenger.sendMessage(message, receiver).then(data => { if(activeChat.isGroup)
getRef(`${receiver}_${time}`).classList.remove('unconfirmed') messenger.sendGroupMessage(message, receiver).then(data => {
activeChat.chatCard.querySelector('.last-message').textContent = message console.log('sent group message')
activeChat.chatCard.querySelector('.time').textContent = getFormatedTime(Date.now(), true) getRef('messages_container').querySelector(`#${receiver}_${time}`).classList.remove('unconfirmed')
}).catch(error => notify(error, "error")); activeChat.chatCard.querySelector('.last-message').textContent = message
activeChat.chatCard.querySelector('.time').textContent = getFormatedTime(Date.now(), true)
}).catch(error => notify(error, "error"));
else
messenger.sendMessage(message, receiver).then(data => {
getRef('messages_container').querySelector(`#${receiver}_${time}`).classList.remove('unconfirmed')
activeChat.chatCard.querySelector('.last-message').textContent = message
activeChat.chatCard.querySelector('.time').textContent = getFormatedTime(Date.now(), true)
}).catch(error => notify(error, "error"));
} }
function removeElement(element) { function removeElement(element) {
@ -2117,10 +2135,18 @@
textColor = contact.getAttribute('text-color'), textColor = contact.getAttribute('text-color'),
backgroundColor = contact.getAttribute('background-color') backgroundColor = contact.getAttribute('background-color')
activeChat['receiver'] = floID activeChat['receiver'] = floID
getRef("receiver_initial").textContent = floGlobals.contacts[floID] ? floGlobals.contacts[floID].charAt(0) : name.charAt(0) || ' '; activeChat['isGroup'] = floGlobals.groups[floID] ? true : false
if(activeChat.isGroup){
getRef("receiver_initial").innerHTML = `
<svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg>
`
}
else{
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] || floID || ' '; getRef("receiver_name").textContent = floGlobals.contacts[floID] || floID || ' ';
if (floGlobals.pubKeys[floID]) if (floGlobals.pubKeys[floID] || activeChat.isGroup)
getRef("warn_no_encryption").classList.add("hide-completely"); getRef("warn_no_encryption").classList.add("hide-completely");
else else
getRef("warn_no_encryption").classList.remove("hide-completely"); getRef("warn_no_encryption").classList.remove("hide-completely");