v0.8.60
UI (user): change message bubble layout
This commit is contained in:
sairaj mote
parent
be0d18f8e5
commit
d543be4939
File diff suppressed because one or more lines are too long
67
css/main.css
67
css/main.css
@ -395,7 +395,9 @@ sm-button[variant=primary] .icon {
|
||||
font-weight: 500;
|
||||
}
|
||||
#landing .left p {
|
||||
font-weight: 500;
|
||||
margin-top: 1rem;
|
||||
font-size: 1.1rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
#landing_page {
|
||||
@ -570,6 +572,13 @@ sm-button[variant=primary] .icon {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.group-icon {
|
||||
height: 1.6rem;
|
||||
width: 1.6rem;
|
||||
fill: white;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.contact {
|
||||
position: relative;
|
||||
display: grid;
|
||||
@ -604,7 +613,7 @@ sm-button[variant=primary] .icon {
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 400;
|
||||
font-size: 0.9em;
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.contact .menu {
|
||||
grid-area: menu;
|
||||
@ -613,8 +622,8 @@ sm-button[variant=primary] .icon {
|
||||
fill: rgba(var(--text-color), 1);
|
||||
}
|
||||
.contact .time {
|
||||
font-weight: 400;
|
||||
opacity: 0.8;
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
grid-area: time;
|
||||
}
|
||||
|
||||
@ -915,8 +924,14 @@ sm-button[variant=primary] .icon {
|
||||
padding-top: 0.7rem;
|
||||
}
|
||||
#contacts .option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
#contacts .option .icon {
|
||||
margin-right: 1rem;
|
||||
stroke: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
#contacts .scrolling-wrapper {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
@ -1056,6 +1071,7 @@ sm-button[variant=primary] .icon {
|
||||
margin-right: 1rem;
|
||||
height: 2.2rem;
|
||||
width: 2.2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#chat header h4 {
|
||||
font-weight: 500;
|
||||
@ -1133,14 +1149,14 @@ sm-button[variant=primary] .icon {
|
||||
#chat .message {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
gap: 0.2rem;
|
||||
width: 100%;
|
||||
font-size: 0.92rem;
|
||||
max-width: max-content;
|
||||
margin-bottom: 0.2rem;
|
||||
margin-top: 0.8rem;
|
||||
padding: 0.6em 1em;
|
||||
}
|
||||
#chat .message .message-body {
|
||||
display: inline-flex;
|
||||
@ -1154,7 +1170,6 @@ sm-button[variant=primary] .icon {
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
white-space: pre-wrap;
|
||||
padding: 0.6em 1em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
#chat .message .message-body a {
|
||||
@ -1172,6 +1187,9 @@ sm-button[variant=primary] .icon {
|
||||
}
|
||||
#chat .sent {
|
||||
margin-left: auto;
|
||||
background: var(--accent-color);
|
||||
color: #f0f0f0;
|
||||
border-radius: 1em 0 1em 1em;
|
||||
}
|
||||
#chat .sent::after {
|
||||
content: "";
|
||||
@ -1184,13 +1202,12 @@ sm-button[variant=primary] .icon {
|
||||
border-width: 0.5em 0.3em 0 0;
|
||||
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 {
|
||||
grid-column: 1;
|
||||
margin-left: auto;
|
||||
}
|
||||
#chat .received {
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
border-radius: 0 1em 1em 1em;
|
||||
}
|
||||
#chat .received::after {
|
||||
content: "";
|
||||
@ -1203,10 +1220,6 @@ sm-button[variant=primary] .icon {
|
||||
border-width: 0 0.5em 0.5em 0;
|
||||
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 .received + .received {
|
||||
margin-top: 0;
|
||||
@ -1215,9 +1228,9 @@ sm-button[variant=primary] .icon {
|
||||
#chat .received + .received::after {
|
||||
display: none;
|
||||
}
|
||||
#chat .sent + .sent .message-body,
|
||||
#chat .received + .received .message-body {
|
||||
border-radius: 1.5em;
|
||||
#chat .sent + .sent,
|
||||
#chat .received + .received {
|
||||
border-radius: 1em;
|
||||
}
|
||||
#chat .unconfirmed {
|
||||
opacity: 0.7;
|
||||
@ -1233,12 +1246,7 @@ sm-button[variant=primary] .icon {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
.big-emoji::after {
|
||||
display: none;
|
||||
}
|
||||
.big-emoji .message-body {
|
||||
background: none !important;
|
||||
padding: 0 !important;
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
|
||||
@ -1416,8 +1424,12 @@ sm-panel {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
#settings_page section sm-button {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#settings_page section:not(:last-of-type) {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
#settings_page section.setting-toggle {
|
||||
grid-template-columns: 1fr auto;
|
||||
@ -1450,6 +1462,9 @@ sm-panel {
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
#landing .left p {
|
||||
text-align: center;
|
||||
}
|
||||
#landing sm-button {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -346,7 +346,9 @@ sm-button[variant="primary"]{
|
||||
font-weight: 500;
|
||||
}
|
||||
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;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.group-icon{
|
||||
height: 1.6rem;
|
||||
width: 1.6rem;
|
||||
fill: white;
|
||||
stroke: none;
|
||||
}
|
||||
.contact{
|
||||
position: relative;
|
||||
display: grid;
|
||||
@ -554,7 +562,7 @@ sm-button[variant="primary"]{
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 400;
|
||||
font-size: 0.9em;
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.menu{
|
||||
grid-area: menu;
|
||||
@ -563,8 +571,8 @@ sm-button[variant="primary"]{
|
||||
fill: rgba(var(--text-color), 1);
|
||||
}
|
||||
.time{
|
||||
font-weight: 400;
|
||||
opacity: 0.8;
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
grid-area: time;
|
||||
}
|
||||
}
|
||||
@ -855,7 +863,13 @@ sm-button[variant="primary"]{
|
||||
}
|
||||
}
|
||||
.option{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem 1.5rem;
|
||||
.icon{
|
||||
margin-right: 1rem;
|
||||
stroke: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
}
|
||||
.scrolling-wrapper{
|
||||
height: 100%;
|
||||
@ -993,6 +1007,7 @@ sm-button[variant="primary"]{
|
||||
margin-right: 1rem;
|
||||
height: 2.2rem;
|
||||
width: 2.2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
h4{
|
||||
font-weight: 500;
|
||||
@ -1073,14 +1088,14 @@ sm-button[variant="primary"]{
|
||||
.message{
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
gap: 0.2rem;
|
||||
width: 100%;
|
||||
font-size: 0.92rem;
|
||||
max-width: max-content;
|
||||
margin-bottom: 0.2rem;
|
||||
margin-top: 0.8rem;
|
||||
padding: 0.6em 1em;
|
||||
.message-body{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -1093,7 +1108,6 @@ sm-button[variant="primary"]{
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
white-space: pre-wrap;
|
||||
padding: 0.6em 1em;
|
||||
line-height: 1.6;
|
||||
a{
|
||||
color: inherit;
|
||||
@ -1112,6 +1126,9 @@ sm-button[variant="primary"]{
|
||||
}
|
||||
.sent{
|
||||
margin-left: auto;
|
||||
background: var(--accent-color);
|
||||
color: #f0f0f0;
|
||||
border-radius: 1em 0 1em 1em;
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -1123,16 +1140,13 @@ sm-button[variant="primary"]{
|
||||
border-width: 0.5em 0.3em 0 0;
|
||||
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{
|
||||
grid-column: 1;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.received{
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
border-radius: 0 1em 1em 1em;
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -1144,10 +1158,6 @@ sm-button[variant="primary"]{
|
||||
border-width: 0 0.5em 0.5em 0;
|
||||
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,
|
||||
.received + .received{
|
||||
@ -1157,9 +1167,9 @@ sm-button[variant="primary"]{
|
||||
.received + .received::after{
|
||||
display: none;
|
||||
}
|
||||
.sent + .sent .message-body,
|
||||
.received + .received .message-body{
|
||||
border-radius: 1.5em;
|
||||
.sent + .sent,
|
||||
.received + .received{
|
||||
border-radius: 1em;
|
||||
}
|
||||
.unconfirmed{
|
||||
opacity: 0.7;
|
||||
@ -1176,12 +1186,7 @@ sm-button[variant="primary"]{
|
||||
}
|
||||
}
|
||||
.big-emoji{
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
.message-body{
|
||||
background: none !important;
|
||||
padding: 0 !important;
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
}
|
||||
@ -1346,8 +1351,12 @@ sm-panel{
|
||||
max-width: 50ch;
|
||||
display: grid;
|
||||
gap: .3rem;
|
||||
sm-button{
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:not(:last-of-type){
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
&.setting-toggle{
|
||||
grid-template-columns: 1fr auto;
|
||||
@ -1380,6 +1389,9 @@ sm-panel{
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.left p {
|
||||
text-align: center;
|
||||
}
|
||||
sm-button{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
50
index.html
50
index.html
@ -53,6 +53,7 @@
|
||||
<h1 class="title-font">
|
||||
Truly Secure, Private and Reliable.
|
||||
</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>
|
||||
</div>
|
||||
<div id="landing_illustration" class="right">
|
||||
@ -343,7 +344,9 @@
|
||||
<line x1="63.65" y1="63.66" x2="43.36" y2="43.37"/>
|
||||
</svg>
|
||||
<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>
|
||||
</div>
|
||||
<div id="chat_search_field" class="expanding-search flex align-center">
|
||||
@ -405,7 +408,7 @@
|
||||
</div>
|
||||
<div class="scrolling-wrapper">
|
||||
<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
|
||||
</div>
|
||||
<div id="contacts_container"></div>
|
||||
@ -1233,9 +1236,16 @@
|
||||
cardContainer.setAttribute("flo-id", floID)
|
||||
cardContainer.querySelector('.name').textContent = name || floID
|
||||
let initial = card.querySelector('.initial')
|
||||
initial.textContent = name ? name.charAt(0) : floID.charAt(0)
|
||||
let color = contactColor(floID)
|
||||
//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)
|
||||
initial.setAttribute(`style`, `background-color: ${color};`)
|
||||
if(type === 'contact'){
|
||||
@ -1611,7 +1621,7 @@
|
||||
|
||||
"<",
|
||||
"👶", "👧", "🧒", "👦", "👩", "🧑", "👨", "👩🦱", "👨🦱", "👩🦰", "👨🦰", "👱♀️", "👱", "👱♂️", "👩🦳", "👨🦳", "👩🦲", "👨🦲", "🧔", "👵", "🧓", "👴", "👲", "👳♀️", "👳",
|
||||
"👳♂️", "🧕", "👮♀️", "👮", "👮♂️", "👷♀️", "👷", "👷♂️", "💂♀️", "💂", "💂♂️", "🕵️♀️", "🕵️", "🕵️♂️", "👩⚕️", "👨⚕️", "👩🌾", "👨🌾", "👩🍳", "👨🍳", "👩🎓", "👨🎓", "👩🎤", "👨🎤",
|
||||
"🧕", "👮♀️", "👮", "👷♀️", "👷", "👷♂️", "💂♀️", "💂", "🕵️♀️", "🕵️", "🕵️♂️", "👩⚕️", "👨⚕️", "👩🌾", "👨🌾", "👩🍳", "👨🍳", "👩🎓", "👨🎓", "👩🎤", "👨🎤",
|
||||
"👩🏫", "👨🏫", "👩🏭", "👨🏭", "👩💻", "👨💻", "👩💼", "👨💼", "👩🔧", "👨🔧", "👩🔬", "👨🔬", "👩🎨", "👨🎨", "👩🚒", "👨🚒", "👩✈️", "👨✈️",
|
||||
"👩🚀", "👨🚀", "👩⚖️", "👨⚖️", "👰", "🤵", "👸", "🤴", "🦸♀️", "🦸", "🦸♂️", "🦹♀️", "🦹", "🦹♂️", "🤶", "🎅", "🧙♀️", "🧙", "🧙♂️", "🧝♀️", "🧝",
|
||||
"🧝♂️", "🧛♀️", "🧛", "🧛♂️", "🧟♀️", "🧟", "🧟♂️", "🧞♀️", "🧞", "🧞♂️", "🧜♀️", "🧜", "🧜♂️", "🧚♀️", "🧚", "🧚♂️", "👼", "🤰", "🤱", "🙇♀️", "🙇", "🙇♂️", "💁♀️", "💁", "💁♂️", "🙅♀️", "🙅",
|
||||
@ -1929,7 +1939,7 @@
|
||||
let time = Date.now()
|
||||
getRef('messages_container').append(render.messageBubble(receiver, message, time, 'sent', 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(activeChat['chatCard'] !== getRef('chat_container').children[0]){
|
||||
const cloneContact = contact.cloneNode(true)
|
||||
@ -1951,11 +1961,19 @@
|
||||
messenger.addChat(receiver)
|
||||
render.contactCard(receiver, floGlobals.contacts[receiver], 'chat', {prepend: true})
|
||||
}
|
||||
messenger.sendMessage(message, receiver).then(data => {
|
||||
getRef(`${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"));
|
||||
if(activeChat.isGroup)
|
||||
messenger.sendGroupMessage(message, receiver).then(data => {
|
||||
console.log('sent group message')
|
||||
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"));
|
||||
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) {
|
||||
@ -2117,10 +2135,18 @@
|
||||
textColor = contact.getAttribute('text-color'),
|
||||
backgroundColor = contact.getAttribute('background-color')
|
||||
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_name").textContent = floGlobals.contacts[floID] || floID || ' ';
|
||||
if (floGlobals.pubKeys[floID])
|
||||
if (floGlobals.pubKeys[floID] || activeChat.isGroup)
|
||||
getRef("warn_no_encryption").classList.add("hide-completely");
|
||||
else
|
||||
getRef("warn_no_encryption").classList.remove("hide-completely");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user