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

Feature update and code refactoring

Browse Source 
-- added option to block a FLO ID
This commit is contained in:
sairaj mote 2022-06-25 01:15:08 +05:30
parent 16d93a03c2
commit 8eb3a988d1
5 changed files with 205 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
css/main.css
View File

@ -555,6 +555,10 @@ ol li::before {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
.margin-left-auto {
margin-left: auto;
}
.icon-button { .icon-button {
padding: 0.6rem; padding: 0.6rem;
border-radius: 0.8rem; border-radius: 0.8rem;
@ -1007,12 +1011,6 @@ sm-button[variant=primary] {
grid-area: time; grid-area: time;
font-size: 0.8rem; font-size: 0.8rem;
} }
.contact .admin-tag {
padding: 0.1rem 0.6rem;
font-size: 0.8rem;
border: var(--accent-color) thin solid;
border-radius: 3rem;
}
.selectable-contact { .selectable-contact {
-webkit-user-select: none; -webkit-user-select: none;
@ -1026,6 +1024,22 @@ sm-button[variant=primary] {
margin-left: auto; margin-left: auto;
} }
.group-member {
display: flex;
align-items: center;
padding: 0.5rem 0;
}
.group-member .initial {
margin-right: 1rem;
}
.group-member .admin-tag {
margin-left: auto;
padding: 0.1rem 0.6rem;
font-size: 0.8rem;
border-radius: 3rem;
background-color: rgba(var(--text-color), 0.1);
}
#selected_contacts_container { #selected_contacts_container {
display: flex; display: flex;
overflow: auto hidden; overflow: auto hidden;
@ -1449,7 +1463,7 @@ sm-button[variant=primary] {
#contacts .header, #contacts .header,
#mails .header, #mails .header,
#settings .header { #settings .header {
padding: 1rem 1.5rem 1rem 1.5rem; padding: 1rem 1.5rem;
position: relative; position: relative;
gap: 0.5rem; gap: 0.5rem;
min-height: 4rem; min-height: 4rem;
@ -1461,24 +1475,11 @@ 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;
pointer-events: none;
transition: opacity 0.3s, transform 0.3s;
}
#contacts .header .expanding-search.expand,
#mails .header .expanding-search.expand,
#settings .header .expanding-search.expand {
transform: none;
opacity: 1;
pointer-events: all;
} }
#contacts .header sm-input, #contacts .header sm-input,
#mails .header sm-input, #mails .header sm-input,
#settings .header sm-input { #settings .header sm-input {
margin: 0;
width: 100%; width: 100%;
--padding: 0.5rem 1rem;
} }
#contacts .header h4, #contacts .header h4,
#mails .header h4, #mails .header h4,
@ -1486,26 +1487,11 @@ sm-button[variant=primary] {
text-transform: capitalize; text-transform: capitalize;
font-weight: 500; font-weight: 500;
} }
#contacts .header .icon,
#mails .header .icon,
#settings .header .icon {
-webkit-tap-highlight-color: transparent;
margin-right: 1rem;
}
#contacts .header .flex h4, #contacts .header .flex h4,
#mails .header .flex h4, #mails .header .flex h4,
#settings .header .flex h4 { #settings .header .flex h4 {
flex: 1; flex: 1;
} }
#contacts .header .flex .icon,
#mails .header .flex .icon,
#settings .header .flex .icon {
height: 2.2rem;
width: 2.2rem;
padding: 0.6rem;
margin-left: -0.4rem;
cursor: pointer;
}
#contacts .header .flex sm-menu, #contacts .header .flex sm-menu,
#mails .header .flex sm-menu, #mails .header .flex sm-menu,
#settings .header .flex sm-menu { #settings .header .flex sm-menu {
@ -1527,6 +1513,11 @@ sm-button[variant=primary] {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
#chat_search_field .icon-only {
margin-left: -0.5rem;
margin-right: 0.5rem;
}
#chat_page, #chat_page,
#mail_page, #mail_page,
#settings { #settings {
@ -2270,16 +2261,15 @@ sm-button[variant=primary] {
width: auto; width: auto;
} }
#contact_details_popup { #contact_details_popup.is-group {
--width: 52rem; --width: 52rem;
} }
#contact_details_popup.is-group #contact_details_section {
#contact_details_section {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 1.5rem; gap: 1.5rem;
} }
#contact_details_section > :first-child { #contact_details_popup.is-group #contact_details_section > :first-child {
padding-right: 1.5rem; padding-right: 1.5rem;
border-right: thin solid rgba(var(--text-color), 0.3); border-right: thin solid rgba(var(--text-color), 0.3);
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

74
css/main.scss
View File

@ -520,6 +520,9 @@ ol {
.margin-left-0-5 { .margin-left-0-5 {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
.margin-left-auto {
margin-left: auto;
}
.icon-button { .icon-button {
padding: 0.6rem; padding: 0.6rem;
@ -898,12 +901,6 @@ sm-button[variant="primary"] {
grid-area: time; grid-area: time;
font-size: 0.8rem; font-size: 0.8rem;
} }
.admin-tag {
padding: 0.1rem 0.6rem;
font-size: 0.8rem;
border: var(--accent-color) thin solid;
border-radius: 3rem;
}
} }
.selectable-contact { .selectable-contact {
user-select: none; user-select: none;
@ -913,6 +910,21 @@ sm-button[variant="primary"] {
margin-left: auto; margin-left: auto;
} }
} }
.group-member {
display: flex;
align-items: center;
padding: 0.5rem 0;
.initial {
margin-right: 1rem;
}
.admin-tag {
margin-left: auto;
padding: 0.1rem 0.6rem;
font-size: 0.8rem;
border-radius: 3rem;
background-color: rgba(var(--text-color), 0.1);
}
}
#selected_contacts_container { #selected_contacts_container {
display: flex; display: flex;
overflow: auto hidden; overflow: auto hidden;
@ -1303,7 +1315,7 @@ sm-button[variant="primary"] {
height: 100%; height: 100%;
overflow-y: hidden; overflow-y: hidden;
.header { .header {
padding: 1rem 1.5rem 1rem 1.5rem; padding: 1rem 1.5rem;
position: relative; position: relative;
gap: 0.5rem; gap: 0.5rem;
min-height: 4rem; min-height: 4rem;
@ -1312,40 +1324,18 @@ 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;
pointer-events: none;
transition: opacity 0.3s, transform 0.3s;
&.expand {
transform: none;
opacity: 1;
pointer-events: all;
}
} }
sm-input { sm-input {
margin: 0;
width: 100%; width: 100%;
--padding: 0.5rem 1rem;
} }
h4 { h4 {
text-transform: capitalize; text-transform: capitalize;
font-weight: 500; font-weight: 500;
} }
.icon {
-webkit-tap-highlight-color: transparent;
margin-right: 1rem;
}
.flex { .flex {
h4 { h4 {
flex: 1; flex: 1;
} }
.icon {
height: 2.2rem;
width: 2.2rem;
padding: 0.6rem;
margin-left: -0.4rem;
cursor: pointer;
}
sm-menu { sm-menu {
margin-right: -0.7rem; margin-right: -0.7rem;
} }
@ -1363,6 +1353,12 @@ sm-button[variant="primary"] {
} }
} }
} }
#chat_search_field {
.icon-only {
margin-left: -0.5rem;
margin-right: 0.5rem;
}
}
#chat_page, #chat_page,
#mail_page, #mail_page,
#settings { #settings {
@ -2045,15 +2041,17 @@ sm-button[variant="primary"] {
width: auto; width: auto;
} }
#contact_details_popup { #contact_details_popup {
--width: 52rem; &.is-group {
} --width: 52rem;
#contact_details_section { #contact_details_section {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 1.5rem; gap: 1.5rem;
& > :first-child { & > :first-child {
padding-right: 1.5rem; padding-right: 1.5rem;
border-right: thin solid rgba(var(--text-color), 0.3); border-right: thin solid rgba(var(--text-color), 0.3);
}
}
} }
} }
} }

174
index.html
View File

@ -215,25 +215,28 @@
<header class="grid header"> <header class="grid header">
<div class="flex align-center"> <div class="flex align-center">
<h4>FLO Messenger</h4> <h4>FLO Messenger</h4>
<svg class="icon" onclick="toggleSearch('chat_search_field')" xmlns="http://www.w3.org/2000/svg" <button class="icon-only" onclick="toggleSearch('chat_search_field')">
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
<path d="M0 0h24v24H0V0z" fill="none" /> width="24px" fill="#000000">
<path <path d="M0 0h24v24H0V0z" fill="none" />
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /> <path
</svg> d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
</svg>
</button>
<sm-menu align-options="right"> <sm-menu align-options="right">
<sm-menu-option onclick="openPopup('group_creation_popup')"> <sm-menu-option onclick="openPopup('group_creation_popup')">
Create new group Create new group
</sm-menu-option> </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 hide">
<svg xmlns="http://www.w3.org/2000/svg" class="icon back" <button class="icon-only" onclick="toggleSearch('chat_search_field')">
onclick="toggleSearch('chat_search_field')" viewBox="0 0 64 64"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
<title>back-arrow</title> width="24px" fill="#000000">
<line x1="1" y1="32" x2="64" y2="32" /> <path d="M0 0h24v24H0V0z" fill="none"></path>
<polyline points="29.64 60.97 0.65 32 29.64 3.03" /> <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
</svg> </svg>
</button>
<sm-input id="search_chats" type="search" placeholder="Search"></sm-input> <sm-input id="search_chats" type="search" placeholder="Search"></sm-input>
</div> </div>
</header> </header>
@ -366,6 +369,7 @@
</header> </header>
<a class="sidebar-item interactive active" href="#/settings/profile">Account</a> <a class="sidebar-item interactive active" href="#/settings/profile">Account</a>
<a class="sidebar-item interactive" href="#/settings/chat">chat</a> <a class="sidebar-item interactive" href="#/settings/chat">chat</a>
<a class="sidebar-item interactive" href="#/settings/blocked">Blocked</a>
<a class="sidebar-item interactive" href="#/settings/personalize">personalize</a> <a class="sidebar-item interactive" href="#/settings/personalize">personalize</a>
<a class="sidebar-item interactive" href="#/settings/backup">backup & restore</a> <a class="sidebar-item interactive" href="#/settings/backup">backup & restore</a>
<a class="sidebar-item interactive" href="#/settings/about">About</a> <a class="sidebar-item interactive" href="#/settings/about">About</a>
@ -439,6 +443,13 @@
</div> </div>
</sm-switch> </sm-switch>
</div> </div>
<div id="blocked" class="panel hide">
<h4>Blocked</h4>
<ul id="blocked_list" class="observe-empty-state"></ul>
<div class="empty-state">
<p>No blocked FLO IDs</p>
</div>
</div>
<div id="personalize" class="panel hide"> <div id="personalize" class="panel hide">
<section> <section>
<h4>Chat preview</h4> <h4>Chat preview</h4>
@ -1041,6 +1052,7 @@
getRef("last_interaction_time").textContent = `Created ${getFormattedTime(messenger.groups[clickedContact.floID].created)}`; getRef("last_interaction_time").textContent = `Created ${getFormattedTime(messenger.groups[clickedContact.floID].created)}`;
getRef("group_description").value = messenger.groups[clickedContact.floID].description === '' ? 'Add group description' : messenger.groups[clickedContact.floID].description; getRef("group_description").value = messenger.groups[clickedContact.floID].description === '' ? 'Add group description' : messenger.groups[clickedContact.floID].description;
render.groupMembers(clickedContact.floID) render.groupMembers(clickedContact.floID)
getRef('contact_details_popup').classList.add('is-group');
getRef('group_members_card').classList.remove('hide') getRef('group_members_card').classList.remove('hide')
getRef('group_description_card').classList.remove('hide') getRef('group_description_card').classList.remove('hide')
if (isAdmin) { if (isAdmin) {
@ -1056,6 +1068,7 @@
getRef('contact_name').disabled = false getRef('contact_name').disabled = false
getRef('contact_initial').textContent = getContactName(clickedContact['floID']).charAt(0) getRef('contact_initial').textContent = getContactName(clickedContact['floID']).charAt(0)
getRef("last_interaction_time").textContent = ``; getRef("last_interaction_time").textContent = ``;
getRef('contact_details_popup').classList.remove('is-group');
getRef('group_members_card').classList.add('hide') getRef('group_members_card').classList.add('hide')
getRef('group_description_card').classList.add('hide') getRef('group_description_card').classList.add('hide')
} }
@ -1114,7 +1127,7 @@
if (!e.state) return if (!e.state) return
switch (e.state.type) { switch (e.state.type) {
case 'popup': case 'popup':
hidePopup() closePopup()
break; break;
} }
}) })
@ -1689,21 +1702,16 @@
` `
}, },
contactCard(floID, options = {}) { contactCard(floID, options = {}) {
let { type, prepend = false, markUnread = false, contactOnly = false, isAdmin = false } = options let { type, prepend = false, markUnread = false } = options
let name = getContactName(floID) let name = getContactName(floID)
let initial let initial
let adminTag
if (type === 'group') { if (type === 'group') {
initial = html`<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> ` initial = html`<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> `
name = messenger.groups[floID].name name = messenger.groups[floID].name
} else { } else {
initial = name.charAt(0) initial = name.charAt(0)
} }
if (contactOnly || type === 'contact') { if (type !== 'contact') {
if (isAdmin) {
adminTag = html`<p class="admin-tag">Admin</p>`
}
} else {
//render chat card for newly added contact //render chat card for newly added contact
messenger.getChat(floID).then(chat => { messenger.getChat(floID).then(chat => {
let lastMessage = Object.values(chat).reverse().find(({ message }) => message) || { message: '', time: 0 } let lastMessage = Object.values(chat).reverse().find(({ message }) => message) || { message: '', time: 0 }
@ -1713,9 +1721,12 @@
const lastText = html`<p class="last-message">${amISender ? 'You: ' : ''} ${lastMessage.message}</p>` const lastText = html`<p class="last-message">${amISender ? 'You: ' : ''} ${lastMessage.message}</p>`
const timeAndOptions = html` const timeAndOptions = html`
<time class="time">${getFormattedTime(lastMessage.time, 'relative')}</time> <time class="time">${getFormattedTime(lastMessage.time, 'relative')}</time>
<svg class="icon menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <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> <button class="menu">
`; <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
getRef('chats_list').querySelector(`.contact[data-flo-id="${floID}"]`).append(html.node`${lastText}${timeAndOptions}`) </button>
`;
if (!getRef('chats_list').querySelector(`.contact[data-flo-id="${floID}"] .last-message`))
getRef('chats_list').querySelector(`.contact[data-flo-id="${floID}"]`).append(html.node`${lastText}${timeAndOptions}`)
}).catch(error => console.error(error)) }).catch(error => console.error(error))
if (prepend) { if (prepend) {
activeChat['floID'] = floID activeChat['floID'] = floID
@ -1730,16 +1741,14 @@
${initial} ${initial}
</div> </div>
<h4 class="name">${name}</h4> <h4 class="name">${name}</h4>
${adminTag}
</div> </div>
` `
}, },
selectableContact(floID) { selectableContact(floID) {
const name = getContactName(floID) const name = getContactName(floID)
const initial = name.charAt(0) const initial = name.charAt(0)
const className = `flex align-center selectable-contact interactive`
return html` return html`
<label class="${className}" data-flo-id=${floID} style=${`--contact-color: var(${contactColor(floID)})`}> <label class="flex align-center selectable-contact interactive" data-flo-id=${floID} style=${`--contact-color: var(${contactColor(floID)})`}>
<div class="initial flex align-center"> ${initial} </div> <div class="initial flex align-center"> ${initial} </div>
<h4 class="name">${name}</h4> <h4 class="name">${name}</h4>
<input type="checkbox" autocomplete="off" value=${floID}/> <input type="checkbox" autocomplete="off" value=${floID}/>
@ -1821,11 +1830,36 @@
}, },
groupMembers(groupID) { groupMembers(groupID) {
const groupMembersCards = messenger.groups[groupID].members.map(member => { const groupMembersCards = messenger.groups[groupID].members.map(floID => {
let isAdmin = messenger.groups[groupID].admin === member ? true : false let isAdmin = messenger.groups[groupID].admin === floID ? true : false
return render.contactCard(member, { type: 'contact', contactOnly: true, isAdmin }) let name = getContactName(floID)
let initial = name.charAt(0)
return html`
<div class="group-member interactive" .dataset=${{ floId: floID }} style=${`--contact-color: var(${contactColor(floID)})`}>
<div class="initial flex align-center">
${initial}
</div>
<h4 class="name">${name}</h4>
${isAdmin ? html`<p class="admin-tag">Group admin</p>` : ''}
</div>
`
}) })
renderElem(getRef('group_members_list'), html`${groupMembersCards}`) renderElem(getRef('group_members_list'), html`${groupMembersCards}`)
},
blockedList() {
const blockedListCards = [...messenger.blocked].map(floID => {
const name = getContactName(floID)
const initial = name.charAt(0)
return html`
<li class="flex align-center interactive blocked-id" data-flo-id=${floID} style=${`--contact-color: var(${contactColor(floID)})`}>
<div class="initial flex align-center"> ${initial} </div>
<h4 class="name">${name}</h4>
<button class="button margin-left-auto unblock">Unblock</button>
</li>
`
})
renderElem(getRef('blocked_list'), html`${blockedListCards}`)
} }
} }
@ -2035,8 +2069,7 @@
contacts.forEach(child => { contacts.forEach(child => {
if (child.getAttribute('search-tags').toLowerCase().includes(this.value.toLowerCase())) { if (child.getAttribute('search-tags').toLowerCase().includes(this.value.toLowerCase())) {
child.classList.remove('hide') child.classList.remove('hide')
} } else {
else {
child.classList.add('hide') child.classList.add('hide')
} }
}) })
@ -2542,14 +2575,17 @@
} }
async function renderChatList(chatOrder) { async function renderChatList(chatOrder) {
const chats = chatOrder.map(floID => { const chats = []
const markUnread = messenger.marked[floID]?.includes('unread') chatOrder.forEach(floID => {
let type if (!messenger.blocked.has(floID)) {
if (messenger.chats[floID]) const markUnread = messenger.marked[floID]?.includes('unread')
type = 'chat' let type
else if (messenger.groups[floID]) if (messenger.chats[floID])
type = 'group' type = 'chat'
return render.contactCard(floID, { type, markUnread }) else if (messenger.groups[floID])
type = 'group'
chats.push(render.contactCard(floID, { type, markUnread }))
}
}) })
renderElem(getRef('chats_list'), html`${chats}`) renderElem(getRef('chats_list'), html`${chats}`)
} }
@ -2778,6 +2814,13 @@
getRef('settings_panel').classList.remove('hide-on-mobile') getRef('settings_panel').classList.remove('hide-on-mobile')
} }
} }
switch (subPageId) {
case 'blocked':
render.blockedList()
break;
}
document.querySelectorAll('.sidebar-item').forEach(item => item.classList.remove('active')) document.querySelectorAll('.sidebar-item').forEach(item => item.classList.remove('active'))
document.querySelector(`.sidebar-item[href="#/settings/${subPageId}"]`).classList.add('active') document.querySelector(`.sidebar-item[href="#/settings/${subPageId}"]`).classList.add('active')
document.querySelectorAll('.panel').forEach(panel => panel.classList.add('hide')) document.querySelectorAll('.panel').forEach(panel => panel.classList.add('hide'))
@ -2860,11 +2903,22 @@
} }
function toggleSearch(target) { function toggleSearch(target) {
getRef(target).classList.toggle('expand') const animOptions = {
if (getRef(target).classList.contains('expand')) duration: 150,
getRef(target).children[1].focusIn() easing: 'ease',
else fill: 'forwards'
getRef(target).querySelector('sm-input').value = '' }
if (getRef(target).classList.contains('hide')) {
getRef(target).classList.remove('hide')
getRef(target).animate(flyInLeft, animOptions).onfinish = () => {
getRef(target).querySelector('sm-input').focusIn()
}
} else {
getRef(target).animate(flyOutLeft, animOptions).onfinish = () => {
getRef(target).classList.add('hide')
getRef(target).querySelector('sm-input').value = ''
}
}
} }
function addAsContact() { function addAsContact() {
@ -2897,15 +2951,22 @@
} }
}) })
} }
function unblockUser() { function unblockUser(floID) {
getConfirmation('Unblock this FLO ID?', { message: `Are you sure to unblock this FLO ID?`, confirmText: 'Unblock', cancelText: 'Cancel' }).then(confirmed => { getConfirmation('Unblock this FLO ID?', { message: `Are you sure to unblock this FLO ID?`, confirmText: 'Unblock', cancelText: 'Cancel' }).then(confirmed => {
if (confirmed) { if (confirmed) {
messenger.unblockUser(clickedContact.floID).then(result => { messenger.unblockUser(floID || clickedContact.floID).then(result => {
notify('FLo ID unblocked', 'success') notify('FLo ID unblocked', 'success')
render.blockedList()
renderChatList(messenger.getChatOrder())
}) })
} }
}) })
} }
getRef('blocked_list').addEventListener('click', e => {
if (e.target.closest('.unblock')) {
unblockUser(e.target.closest('.blocked-id').dataset.floId)
}
})
function clearChat() { function clearChat() {
getConfirmation('Clear chat?', { message: `Are you sure to clear this chat?`, confirmText: 'Clear', cancelText: 'Cancel' }).then(confirmed => { getConfirmation('Clear chat?', { message: `Are you sure to clear this chat?`, confirmText: 'Clear', cancelText: 'Cancel' }).then(confirmed => {
if (confirmed) { if (confirmed) {
@ -2936,27 +2997,14 @@
let isRemovingMember = false let isRemovingMember = false
function editGroupMembers() { function editGroupMembers() {
if (isGroupEditable) { if (isGroupEditable) {
getRef('group_members_list').querySelectorAll('.contact').forEach(contact => { // to-do: make group members non editable
if (contact.classList.contains('selectable')) {
contact.classList.remove('selectable')
} else if (contact.classList.contains('admin')) {
contact.classList.remove('hide')
}
})
membersToRemove.clear() membersToRemove.clear()
getRef('edit_group_button').textContent = 'Edit'; getRef('edit_group_button').textContent = 'Edit';
addClass(['#remove_members_tip', '#remove_members_tip', '#member_options'], 'hide') addClass(['#remove_members_tip', '#member_options'], 'hide')
isGroupEditable = false isGroupEditable = false
isRemovingMember = false isRemovingMember = false
} else { } else {
getRef('group_members_list').querySelectorAll('.contact').forEach(contact => { // to-do: make group members selectable except for admin
if (contact.classList.contains('admin')) {
contact.classList.add('hide')
}
else {
contact.classList.add('selectable')
}
})
getRef('edit_group_button').textContent = 'Done' getRef('edit_group_button').textContent = 'Done'
removeClass(['#remove_members_tip', '#member_options', '#init_add_members_button'], 'hide') removeClass(['#remove_members_tip', '#member_options', '#init_add_members_button'], 'hide')
getRef('remove_members_button').classList.add('hide') getRef('remove_members_button').classList.add('hide')

62
scripts/components.js
View File

@ -222,7 +222,7 @@ button:focus{
background: var(--background); background: var(--background);
width: 100%; width: 100%;
outline: none; outline: none;
min-height: 3.5rem; min-height: var(--min-height,3rem);
} }
.input.readonly .clear{ .input.readonly .clear{
opacity: 0 !important; opacity: 0 !important;
@ -2404,22 +2404,20 @@ smMenu.innerHTML = `
height: 2rem; height: 2rem;
width: 2rem; width: 2rem;
outline: none; outline: none;
background-color: transparent;
border: none;
cursor: pointer;
padding: 0.7rem;
-webkit-transition: background 0.3s;
-o-transition: background 0.3s;
transition: background 0.3s;
border-radius: 2rem;
} }
.icon { .icon {
position: absolute; position: absolute;
fill: rgba(var(--text-color), 0.7); fill: rgba(var(--text-color), 0.7);
height: 2.4rem; height: 1.2rem;
width: 2.4rem; width: 1.2rem;
padding: 0.7rem;
stroke: rgba(var(--text-color), 0.7);
stroke-width: 6;
overflow: visible;
stroke-linecap: round;
stroke-linejoin: round;
border-radius: 2rem;
-webkit-transition: background 0.3s;
-o-transition: background 0.3s;
transition: background 0.3s;
} }
:host{ :host{
display: -webkit-inline-box; display: -webkit-inline-box;
@ -2444,7 +2442,7 @@ smMenu.innerHTML = `
width: 100%; width: 100%;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
.menu:focus .icon, .menu:focus,
.focused{ .focused{
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
} }
@ -2502,20 +2500,17 @@ smMenu.innerHTML = `
transform: none !important; transform: none !important;
} }
@media (hover: hover){ @media (hover: hover){
.menu:hover .icon{ .menu:hover{
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
} }
} }
</style> </style>
<div class="select"> <div class="select">
<div class="menu" tabindex="0"> <button class="menu">
<svg class="icon" viewBox="0 0 64 64"> <slot name="icon">
<title>options</title> <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
<circle cx="32" cy="6" r="5.5"/> </slot>
<circle cx="32" cy="58" r="5.5"/> </button>
<circle cx="32" cy="31.89" r="5.5"/>
</svg>
</div>
<div class="options hide"> <div class="options hide">
<slot></slot> <slot></slot>
</div> </div>
@ -2526,6 +2521,11 @@ customElements.define('sm-menu', class extends HTMLElement {
this.attachShadow({ this.attachShadow({
mode: 'open' mode: 'open'
}).append(smMenu.content.cloneNode(true)) }).append(smMenu.content.cloneNode(true))
this.availableOptions
this.containerDimensions
this.optionList = this.shadowRoot.querySelector('.options')
this.menu = this.shadowRoot.querySelector('.menu')
this.open = false;
} }
static get observedAttributes() { static get observedAttributes() {
return ['value'] return ['value']
@ -2540,8 +2540,8 @@ customElements.define('sm-menu', class extends HTMLElement {
if (!this.open) { if (!this.open) {
this.optionList.classList.remove('hide') this.optionList.classList.remove('hide')
this.optionList.classList.add('no-transformations') this.optionList.classList.add('no-transformations')
this.menu.classList.add('focused')
this.open = true this.open = true
this.icon.classList.add('focused')
this.availableOptions.forEach(option => { this.availableOptions.forEach(option => {
option.setAttribute('tabindex', '0') option.setAttribute('tabindex', '0')
}) })
@ -2550,30 +2550,24 @@ customElements.define('sm-menu', class extends HTMLElement {
collapse() { collapse() {
if (this.open) { if (this.open) {
this.open = false this.open = false
this.icon.classList.remove('focused')
this.optionList.classList.add('hide') this.optionList.classList.add('hide')
this.optionList.classList.remove('no-transformations') this.optionList.classList.remove('no-transformations')
this.menu.classList.remove('focused')
this.availableOptions.forEach(option => { this.availableOptions.forEach(option => {
option.removeAttribute('tabindex') option.removeAttribute('tabindex')
}) })
} }
} }
connectedCallback() { connectedCallback() {
this.availableOptions let slot = this.shadowRoot.querySelector('.options slot')
this.containerDimensions this.menu.addEventListener('click', e => {
this.optionList = this.shadowRoot.querySelector('.options')
let slot = this.shadowRoot.querySelector('.options slot'),
menu = this.shadowRoot.querySelector('.menu')
this.icon = this.shadowRoot.querySelector('.icon')
this.open = false;
menu.addEventListener('click', e => {
if (!this.open) { if (!this.open) {
this.expand() this.expand()
} else { } else {
this.collapse() this.collapse()
} }
}) })
menu.addEventListener('keydown', e => { this.menu.addEventListener('keydown', e => {
if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
e.preventDefault() e.preventDefault()
this.availableOptions[0].focus() this.availableOptions[0].focus()