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

adding UI for pub key requests

Browse Source
This commit is contained in:
sairaj mote 2022-11-11 23:10:16 +05:30
parent 6868c4d900
commit 0f06448152
5 changed files with 289 additions and 3982 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
css/main.css
View File

@ -1541,7 +1541,6 @@ sm-button[variant=primary] {
padding: 1rem; padding: 1rem;
position: relative; position: relative;
gap: 0.5rem; gap: 0.5rem;
min-height: 4rem;
} }
#contacts .header sm-input, #contacts .header sm-input,
#mails .header sm-input, #mails .header sm-input,
@ -1586,8 +1585,8 @@ sm-button[variant=primary] {
#contacts { #contacts {
position: relative; position: relative;
overflow-x: hidden; overflow-x: hidden;
grid-template-rows: -webkit-max-content -webkit-max-content 1fr; grid-template-rows: -webkit-max-content 1fr;
grid-template-rows: max-content max-content 1fr; grid-template-rows: max-content 1fr;
} }
#contacts .header { #contacts .header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
@ -1606,6 +1605,41 @@ sm-button[variant=primary] {
padding: 0.5rem 0; padding: 0.5rem 0;
} }
#notifications_wrapper {
position: absolute;
z-index: 5;
top: 0;
right: 0;
width: 100%;
height: 100%;
padding: 1rem;
}
#notifications_wrapper .icon-only {
margin-left: -0.5rem;
}
#notifications_list {
margin-top: 0.5rem;
}
.notification {
padding: 1rem;
background-color: rgba(var(--text-color), 0.06);
border-radius: 0.5rem;
margin: 0 -0.8rem;
gap: 0.8rem;
}
.notification:not(:last-of-type) {
margin-bottom: 0.3rem;
}
.notification__message {
line-height: normal;
}
.notification__time {
font-size: 0.8rem;
color: rgba(var(--text-color), 0.7);
}
#creation_process .group-icon { #creation_process .group-icon {
background-color: var(--accent-color); background-color: var(--accent-color);
justify-self: center; justify-self: center;
@ -1960,11 +1994,20 @@ sm-button[variant=primary] {
text-align: center; text-align: center;
} }
.icon--medium,
.icon--big {
margin-bottom: 1.5rem;
justify-self: center;
}
.icon--medium {
height: 4rem;
width: 4rem;
}
.icon--big { .icon--big {
height: 8rem; height: 8rem;
width: 8rem; width: 8rem;
margin-bottom: 1.5rem;
justify-self: center;
} }
#messages_container, #messages_container,
@ -1980,7 +2023,7 @@ sm-button[variant=primary] {
#chats_list { #chats_list {
gap: 0.2rem; gap: 0.2rem;
padding-bottom: 6rem; padding-bottom: 4rem;
} }
.mail-container { .mail-container {
@ -2234,6 +2277,9 @@ sm-button[variant=primary] {
#contact_container { #contact_container {
gap: 0.2rem; gap: 0.2rem;
} }
#chats_list {
padding-bottom: 10rem;
}
#chat_view .message { #chat_view .message {
width: auto; width: auto;
max-width: 90%; max-width: 90%;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

53
css/main.scss
View File

@ -1606,7 +1606,6 @@ sm-button[variant="primary"] {
padding: 1rem; padding: 1rem;
position: relative; position: relative;
gap: 0.5rem; gap: 0.5rem;
min-height: 4rem;
sm-input { sm-input {
width: 100%; width: 100%;
@ -1652,7 +1651,7 @@ sm-button[variant="primary"] {
#contacts { #contacts {
position: relative; position: relative;
overflow-x: hidden; overflow-x: hidden;
grid-template-rows: max-content max-content 1fr; grid-template-rows: max-content 1fr;
.header { .header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
@ -1676,6 +1675,39 @@ sm-button[variant="primary"] {
} }
} }
#notifications_wrapper {
position: absolute;
z-index: 5;
top: 0;
right: 0;
width: 100%;
height: 100%;
padding: 1rem;
.icon-only {
margin-left: -0.5rem;
}
}
#notifications_list {
margin-top: 0.5rem;
}
.notification {
padding: 1rem;
background-color: rgba(var(--text-color), 0.06);
border-radius: 0.5rem;
margin: 0 -0.8rem;
gap: 0.8rem;
&:not(:last-of-type) {
margin-bottom: 0.3rem;
}
&__message {
line-height: normal;
}
&__time {
font-size: 0.8rem;
color: rgba(var(--text-color), 0.7);
}
}
#creation_process { #creation_process {
.group-icon { .group-icon {
background-color: var(--accent-color); background-color: var(--accent-color);
@ -2038,12 +2070,18 @@ sm-button[variant="primary"] {
user-select: none; user-select: none;
text-align: center; text-align: center;
} }
.icon--medium,
.icon--big {
margin-bottom: 1.5rem;
justify-self: center;
}
.icon--medium {
height: 4rem;
width: 4rem;
}
.icon--big { .icon--big {
height: 8rem; height: 8rem;
width: 8rem; width: 8rem;
margin-bottom: 1.5rem;
justify-self: center;
} }
#messages_container, #messages_container,
@ -2059,7 +2097,7 @@ sm-button[variant="primary"] {
#chats_list { #chats_list {
gap: 0.2rem; gap: 0.2rem;
padding-bottom: 6rem; padding-bottom: 4rem;
} }
.mail-container { .mail-container {
@ -2343,6 +2381,9 @@ sm-button[variant="primary"] {
#contact_container { #contact_container {
gap: 0.2rem; gap: 0.2rem;
} }
#chats_list {
padding-bottom: 10rem;
}
#chat_view { #chat_view {
.message { .message {

250
index.html
View File

@ -30,7 +30,7 @@
<script src="scripts/messenger.js"></script> <script src="scripts/messenger.js"></script>
<script id="onLoadStartUp"> <script id="onLoadStartUp">
function onLoadStartUp() { function onLoadStartUp() {
showPage('loading') routeTo('loading')
floDapps.setAppObjectStores({ userSettings: {} }) floDapps.setAppObjectStores({ userSettings: {} })
document.body.classList.remove('hidden') document.body.classList.remove('hidden')
@ -55,7 +55,7 @@
console.log(result); console.log(result);
//Check for available bg image //Check for available bg image
setBgImage(); setBgImage();
showPage(window.location.hash, { firstLoad: true }) routeTo(window.location.hash, { firstLoad: true })
floGlobals.loaded = true; floGlobals.loaded = true;
}).catch(error => notify(error, "error")) }).catch(error => notify(error, "error"))
}).catch(error => notify(error, "error")) }).catch(error => notify(error, "error"))
@ -238,46 +238,79 @@
</button> </button>
</div> </div>
</section> </section>
<div class="grid header"> <div class="flex flex-direction-column" style="overflow-y: auto; position: relative;">
<div class="flex align-center space-between"> <div class="grid header">
<h4>Messages</h4> <div class="flex align-center gap-0-5">
<sm-menu align-options="right"> <h4>Messages</h4>
<menu-option onclick="openCreationPopup('group')"> <button id="notification_panel_button" class="icon-only margin-left-auto"
Create new group onclick="toggleNotifications()">
</menu-option> <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
</sm-menu> width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z" />
</svg>
</button>
<sm-menu align-options="right">
<menu-option onclick="openCreationPopup('group')">
Create new group
</menu-option>
</sm-menu>
</div>
<sm-input id="search_chats" class="margin-right-0-5" type="search"
placeholder="Search FLO ID or name">
<svg slot="icon" 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="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>
</sm-input>
</div> </div>
<sm-input id="search_chats" class="margin-right-0-5" type="search" <div id="chats_list" class="flex observe-empty-state"></div>
placeholder="Search FLO ID or name"> <div class="empty-state flex flex-direction-column align-center text-center align-self-center">
<svg slot="icon" class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" <svg class="icon icon--big" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
viewBox="0 0 24 24" width="24px" fill="#000000"> width="24px" fill="#000000">
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z" />
</svg>
<h4 class="margin-bottom-0-5">Start your first conversation</h4>
<p>Tap/click on 'New chat' to add or select a contact.</p>
</div>
<button id="new_message_button" onclick="openPopup('new_message_popup')"
class="button button--primary fab round">
<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="M0 0h24v24H0V0z" fill="none" />
<path <path
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" /> d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM5.92 19H5v-.92l9.06-9.06.92.92L5.92 19zM20.71 5.63l-2.34-2.34c-.2-.2-.45-.29-.71-.29s-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41z" />
</svg> </svg>
</sm-input> New chat
</button>
<div id="notifications_wrapper" class="hidden">
<div class="flex align-center gap-0-5">
<button class="icon-only" onclick="toggleNotifications()">
<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>
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
</svg>
</button>
<h4>Notifications</h4>
</div>
<ul id="notifications_list" class="observe-empty-state"></ul>
<div class="empty-state flex flex-direction-column align-center text-center align-self-center">
<svg class="icon icon--medium" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000">
<path
d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z" />
</svg>
<h4 class="margin-bottom-0-5">No notifications</h4>
<p>When you receive a notification, it will appear here.</p>
</div>
</div>
</div> </div>
<div id="chats_list" class="flex observe-empty-state"></div>
<div class="empty-state flex flex-direction-column align-center text-center align-self-center">
<svg class="icon icon--big" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000">
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z" />
</svg>
<h4 class="margin-bottom-0-5">Start your first conversation</h4>
<p>Tap/click on 'New chat' to add or select a contact.</p>
</div>
<button id="new_message_button" onclick="openPopup('new_message_popup')"
class="button button--primary fab round">
<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="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM5.92 19H5v-.92l9.06-9.06.92.92L5.92 19zM20.71 5.63l-2.34-2.34c-.2-.2-.45-.29-.71-.29s-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41z" />
</svg>
New chat
</button>
</div> </div>
<div id="chat_view" class="grid hidden"> <div id="chat_view" class="grid hidden">
<header id="chat_header" class="grid align-center"> <header id="chat_header" class="grid align-center">
@ -678,7 +711,7 @@
<h4>Add contact</h4> <h4>Add contact</h4>
</header> </header>
<sm-form> <sm-form>
<sm-input id="add_contact_floID" floId placeholder="FLO address" animate required></sm-input> <sm-input id="add_contact_floID" floId placeholder="FLO address" animate autofocus required></sm-input>
<sm-input id="add_contact_name" placeholder="Name" animate required></sm-input> <sm-input id="add_contact_name" placeholder="Name" animate required></sm-input>
<sm-button id="add_contact_button" variant="primary" disabled>Add</sm-button> <sm-button id="add_contact_button" variant="primary" disabled>Add</sm-button>
</sm-form> </sm-form>
@ -1426,7 +1459,7 @@
} else { } else {
getRef('search_contacts').classList.add('hidden') getRef('search_contacts').classList.add('hidden')
} }
renderContactList(floGlobals.contacts) renderContactList()
break break
case 'creation_popup': { case 'creation_popup': {
renderCreationList() renderCreationList()
@ -1650,7 +1683,7 @@
else else
return floID return floID
} }
window.addEventListener('hashchange', e => showPage(window.location.hash)) window.addEventListener('hashchange', e => routeTo(window.location.hash))
window.addEventListener("load", () => { window.addEventListener("load", () => {
document.body.classList.remove('hidden') document.body.classList.remove('hidden')
document.querySelectorAll('sm-input[data-flo-id]').forEach(input => input.customValidation = floCrypto.validateAddr) document.querySelectorAll('sm-input[data-flo-id]').forEach(input => input.customValidation = floCrypto.validateAddr)
@ -1720,7 +1753,7 @@
params: {}, params: {},
openedPages: new Set(), openedPages: new Set(),
} }
async function showPage(targetPage, options = {}) { async function routeTo(targetPage, options = {}) {
const { firstLoad, hashChange } = options const { firstLoad, hashChange } = options
let pageId let pageId
let subPageId1 let subPageId1
@ -1738,21 +1771,17 @@
if (targetPage.includes('/')) { if (targetPage.includes('/')) {
if (targetPage.includes('?')) { if (targetPage.includes('?')) {
const splitAddress = targetPage.split('?') const splitAddress = targetPage.split('?')
searchParams = splitAddress.pop() searchParams = splitAddress.pop();
const pages = splitAddress.pop().split('/') [, pageId, subPageId1, subPageId2] = splitAddress.pop().split('/')
pageId = pages[1]
subPageId1 = pages[2]
subPageId2 = pages[3]
} else { } else {
const pages = targetPage.split('/') [, pageId, subPageId1, subPageId2] = targetPage.split('/')
pageId = pages[1]
subPageId1 = pages[2]
subPageId2 = pages[3]
} }
} else { } else {
pageId = targetPage pageId = targetPage
} }
} }
console.log(pageId, subPageId1, subPageId2)
if (!document.querySelector(`#${pageId}`)?.classList.contains('inner-page')) return
try { try {
if (floDapps.user.id && (['sign_up', 'sign_in', 'loading', 'landing'].includes(pageId))) { if (floDapps.user.id && (['sign_up', 'sign_in', 'loading', 'landing'].includes(pageId))) {
history.replaceState(null, null, '#/chat_page'); history.replaceState(null, null, '#/chat_page');
@ -1805,13 +1834,15 @@
history.replaceState(null, null, `#/chat_page/messages?floId=${activeChat.floID}`); history.replaceState(null, null, `#/chat_page/messages?floId=${activeChat.floID}`);
} else { } else {
history.replaceState(null, null, '#/chat_page'); history.replaceState(null, null, '#/chat_page');
getRef('chat_view').classList.add('hide-on-mobile') getRef('chat_view').classList.add('hidden')
getRef('chat_view').nextElementSibling.classList.remove('hidden') getRef('chat_view').nextElementSibling.classList.remove('hidden')
getRef('contacts').classList.remove('hide-on-mobile') getRef('contacts').classList.remove('hide-on-mobile')
getRef('chats_list').querySelector('.active')?.classList.remove('active')
activeChat = {} activeChat = {}
getRef('main_navbar').classList.remove('hide-on-mobile') getRef('main_navbar').classList.remove('hide-on-mobile')
} }
} }
messenger.list_request_received().then(requests => addNotificationBadge('#notification_panel_button', Object.keys(requests).length, { replace: true }))
removeNotificationBadge('#chat_page_button') removeNotificationBadge('#chat_page_button')
break; break;
case 'mail_page': case 'mail_page':
@ -2162,7 +2193,7 @@
const slideInLeft = [ const slideInLeft = [
{ {
opacity: 0, opacity: 0,
transform: 'translateX(1rem)' transform: 'translateX(100%)'
}, },
{ {
opacity: 1, opacity: 1,
@ -2176,13 +2207,13 @@
}, },
{ {
opacity: 0, opacity: 0,
transform: 'translateX(-1rem)' transform: 'translateX(-100%)'
}, },
] ]
const slideInRight = [ const slideInRight = [
{ {
opacity: 0, opacity: 0,
transform: 'translateX(-1rem)' transform: 'translateX(-100%)'
}, },
{ {
opacity: 1, opacity: 1,
@ -2196,13 +2227,13 @@
}, },
{ {
opacity: 0, opacity: 0,
transform: 'translateX(1rem)' transform: 'translateX(100%)'
}, },
] ]
const slideInDown = [ const slideInDown = [
{ {
opacity: 0, opacity: 0,
transform: 'translateY(-1rem)' transform: 'translateY(-100%)'
}, },
{ {
opacity: 1, opacity: 1,
@ -2216,7 +2247,7 @@
}, },
{ {
opacity: 0, opacity: 0,
transform: 'translateY(-1rem)' transform: 'translateY(-100%)'
}, },
] ]
@ -2228,34 +2259,34 @@
easing: 'ease', easing: 'ease',
fill: 'forwards' fill: 'forwards'
} }
const visibleElement = [...getRef(id).children].find(elem => !elem.classList.contains(mobileView ? 'hide-on-mobile' : 'hidden')); const parent = typeof id === 'string' ? document.getElementById(id) : id;
if (visibleElement === getRef(id).children[index]) return; const visibleElement = [...parent.children].find(elem => !elem.classList.contains(mobileView ? 'hide-on-mobile' : 'hidden'));
if (visibleElement === parent.children[index]) return;
visibleElement.getAnimations().forEach(anim => anim.cancel()) visibleElement.getAnimations().forEach(anim => anim.cancel())
getRef(id).children[index].getAnimations().forEach(anim => anim.cancel()) parent.children[index].getAnimations().forEach(anim => anim.cancel())
if (visibleElement) { if (visibleElement) {
if (exit) { if (exit) {
visibleElement.animate(exit, animOptions).onfinish = () => { visibleElement.animate(exit, animOptions).onfinish = () => {
visibleElement.classList.add(mobileView ? 'hide-on-mobile' : 'hidden') visibleElement.classList.add(mobileView ? 'hide-on-mobile' : 'hidden')
getRef(id).children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hidden') parent.children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hidden')
if (entry) if (entry)
getRef(id).children[index].animate(entry, animOptions).onfinish = () => resolve() parent.children[index].animate(entry, animOptions).onfinish = () => resolve()
} }
} else { } else {
visibleElement.classList.add(mobileView ? 'hide-on-mobile' : 'hidden') visibleElement.classList.add(mobileView ? 'hide-on-mobile' : 'hidden')
getRef(id).children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hidden') parent.children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hidden')
resolve() resolve()
} }
} else { } else {
getRef(id).children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hidden') parent.children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hidden')
getRef(id).children[index].animate(entry, animOptions).onfinish = () => resolve() parent.children[index].animate(entry, animOptions).onfinish = () => resolve()
} }
}) })
} }
function getSignedIn(passwordType) { function getSignedIn(passwordType) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
showPage('landing') routeTo('landing')
try { try {
console.log(floDapps.user.id)
getPromptInput('Enter password', '', { getPromptInput('Enter password', '', {
isPassword: true, isPassword: true,
}).then(password => { }).then(password => {
@ -2278,19 +2309,19 @@
getRef('secure_pwd_button').closest('.card').classList.remove('hidden'); getRef('secure_pwd_button').closest('.card').classList.remove('hidden');
} }
if (window.location.hash.includes('sign_in') || window.location.hash.includes('sign_up')) { if (window.location.hash.includes('sign_in') || window.location.hash.includes('sign_up')) {
showPage(window.location.hash); routeTo(window.location.hash);
} else { } else {
location.hash = floGlobals.isPrivKeySecured ? '#/sign_in' : `#/landing`; location.hash = floGlobals.isPrivKeySecured ? '#/sign_in' : `#/landing`;
} }
getRef('sign_in_button').onclick = () => { getRef('sign_in_button').onclick = () => {
resolve(getRef('private_key_field').value.trim()); resolve(getRef('private_key_field').value.trim());
getRef('private_key_field').value = ''; getRef('private_key_field').value = '';
showPage('loading'); routeTo('loading');
}; };
getRef('sign_up_button').onclick = () => { getRef('sign_up_button').onclick = () => {
resolve(getRef('generated_private_key').value.trim()); resolve(getRef('generated_private_key').value.trim());
getRef('generated_private_key').value = ''; getRef('generated_private_key').value = '';
showPage('loading'); routeTo('loading');
}; };
} }
}); });
@ -2633,6 +2664,37 @@
</label> </label>
</li> </li>
` `
},
notification(id, details) {
let { floID, message, time, type } = details
if (message === '')
message = `${getContactName(floID)} wants to connect with you`
return html`
<li class="notification grid align-center" .dataset=${{ id }}>
<div class="flex align-center space-between gap-0-5">
<h4>${type}</h4>
<time class="notification__time">${getFormattedTime(time, 'relative')}</time>
</div>
<p class="notification__message">${message}</p>
<div class="flex align-center gap-0-3 margin-left-auto">
<button class="button button--small reject">Reject</button>
<button class="button button--small accept">Accept</button>
</div>
</li>
`
},
async notifications() {
try {
const notifications = await messenger.list_request_received()
let receivedRequests = []
for (const key in notifications) {
receivedRequests.unshift(render.notification(key, notifications[key]))
}
renderElem(getRef('notifications_list'), html`${receivedRequests}`)
} catch (err) {
notify(err, 'error')
}
} }
} }
@ -2686,7 +2748,7 @@
}) })
return messageBody return messageBody
} }
function addNotificationBadge(elem, text) { function addNotificationBadge(elem, text, { replace = false }) {
const animOptions = { const animOptions = {
duration: 200, duration: 200,
fill: 'forwards', fill: 'forwards',
@ -2706,7 +2768,10 @@
], animOptions) ], animOptions)
} else { } else {
const badge = target.querySelector('.badge'); const badge = target.querySelector('.badge');
badge.textContent = parseInt(badge.textContent) + parseFloat(text); const oldValue = parseInt(badge.textContent)
const newValue = parseInt(text)
if (oldValue === newValue) return
badge.textContent = replace ? newValue : oldValue + newValue;
badge.animate([ badge.animate([
{ transform: 'scale(1)' }, { transform: 'scale(1)' },
{ transform: `scale(1.5)` }, { transform: `scale(1.5)` },
@ -2879,6 +2944,38 @@
} }
} }
} }
function toggleNotifications() {
const animOptions = {
duration: 300,
easing: 'ease',
fill: 'forwards'
}
getRef('notifications_wrapper').parentNode.style.overflow = 'hidden';
const allChildren = [...getRef('notifications_wrapper').parentNode.children];
const index = allChildren.indexOf(getRef('notifications_wrapper'));
const siblings = allChildren.slice(0, index);
if (getRef('notifications_wrapper').classList.contains('hidden')) {
siblings.forEach(child => {
child.animate(slideOutLeft, animOptions).onfinish = e => {
child.classList.add('hidden')
}
})
getRef('notifications_wrapper').classList.remove('hidden')
render.notifications()
getRef('notifications_wrapper').animate(slideInLeft, animOptions).onfinish = e => {
getRef('notifications_wrapper').parentNode.style.overflow = 'auto';
}
} else {
getRef('notifications_wrapper').animate(slideOutLeft, animOptions).onfinish = e => {
getRef('notifications_wrapper').classList.add('hidden');
getRef('notifications_wrapper').parentNode.style.overflow = 'auto';
}
siblings.slice(0, 4).forEach(child => {
child.classList.remove('hidden')
child.animate(slideInLeft, animOptions)
})
}
}
getRef('search_chats').addEventListener('keyup', e => { getRef('search_chats').addEventListener('keyup', e => {
if (e.code === 'ArrowDown') { if (e.code === 'ArrowDown') {
for (child of getRef('chats_list').children) { for (child of getRef('chats_list').children) {
@ -2973,8 +3070,6 @@
for (contact in floGlobals.contacts) { for (contact in floGlobals.contacts) {
if (contact.toLowerCase().includes(this.value.toLowerCase()) || floGlobals.contacts[contact].toLowerCase().includes(this.value.toLowerCase())) { if (contact.toLowerCase().includes(this.value.toLowerCase()) || floGlobals.contacts[contact].toLowerCase().includes(this.value.toLowerCase())) {
contacts[contact] = floGlobals.contacts[contact] contacts[contact] = floGlobals.contacts[contact]
if (!(contact in floGlobals.pubKeys))
delete contacts[contact]
} }
} }
renderContactList(contacts) renderContactList(contacts)
@ -3108,7 +3203,7 @@
}) })
delegate(getRef('select_contacts_container'), 'click', '.request-pubkey', e => { delegate(getRef('select_contacts_container'), 'click', '.request-pubkey', e => {
const floID = e.delegateTarget.closest('.selectable-contact').dataset.floId const floID = e.delegateTarget.closest('.selectable-contact').dataset.floId
messenger.request_pubKey(floID, 'hey there!') messenger.request_pubKey(floID)
e.delegateTarget.disabled = true; e.delegateTarget.disabled = true;
e.delegateTarget.textContent = 'Request sent' e.delegateTarget.textContent = 'Request sent'
}) })
@ -3480,12 +3575,15 @@
if (popupStack.items.find(elem => elem.popup.id === 'creation_popup')) { if (popupStack.items.find(elem => elem.popup.id === 'creation_popup')) {
renderCreationList() renderCreationList()
} }
if (popupStack.items.find(elem => elem.popup.id === 'new_message_popup')) {
renderContactList()
}
if (activeChat.floID === floID) if (activeChat.floID === floID)
updateChatHeaderName(name) updateChatHeaderName(name)
}).catch(error => notify(error, "error")); }).catch(error => notify(error, "error"));
} }
function renderContactList(contactList = {}) { function renderContactList(contactList = floGlobals.contacts) {
const contacts = [] const contacts = []
for (floID in contactList) { for (floID in contactList) {
let isSelected = selectedMembers.has(floID) let isSelected = selectedMembers.has(floID)

3908
scripts/components.js
View File

File diff suppressed because one or more lines are too long