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

implemented UI for requesting pub-key

Browse Source
This commit is contained in:
sairaj mote 2022-09-03 02:38:26 +05:30
parent 619a261732
commit 643d764f44
4 changed files with 30 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css/main.css
View File

@ -28,7 +28,7 @@ body {
--kinda-pink: #e40273; --kinda-pink: #e40273;
--purple: #462191; --purple: #462191;
--shady-blue: #324de6; --shady-blue: #324de6;
--nice-blue: #256eff; --nice-blue: #3d5afe;
--maybe-cyan: #00b0ff; --maybe-cyan: #00b0ff;
--teal: #00bcd4; --teal: #00bcd4;
--mint-green: #16c79a; --mint-green: #16c79a;
@ -61,7 +61,7 @@ body[data-theme=dark] {
--kinda-pink: #c44ae6; --kinda-pink: #c44ae6;
--purple: #9565f7; --purple: #9565f7;
--shady-blue: #8295fb; --shady-blue: #8295fb;
--nice-blue: #86afff; --nice-blue: #6d83ff;
--maybe-cyan: #66cfff; --maybe-cyan: #66cfff;
--teal: #6aeeff; --teal: #6aeeff;
--mint-green: #4dffd2; --mint-green: #4dffd2;
@ -996,7 +996,7 @@ sm-button[variant=primary] {
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
fill: var(--accent-color); fill: var(--accent-color);
border-radius: 2rem; border-radius: 2rem;
padding: 0.6rem; padding: 0.7rem;
height: 2.6rem; height: 2.6rem;
width: 2.6rem; width: 2.6rem;
margin-right: 0.5rem; margin-right: 0.5rem;
@ -1719,7 +1719,7 @@ sm-button[variant=primary] {
.sent { .sent {
margin-left: auto; margin-left: auto;
background: var(--accent-color); background: var(--accent-color);
border-radius: 0.3rem 0 0.3rem 0.3rem; border-radius: 0.5rem 0 0.5rem 0.5rem;
} }
.sent > * { .sent > * {
color: rgba(var(--background-color), 1); color: rgba(var(--background-color), 1);
@ -1738,7 +1738,7 @@ sm-button[variant=primary] {
.received { .received {
margin-right: auto; margin-right: auto;
border-radius: 0 0.3rem 0.3rem 0.3rem; border-radius: 0 0.5rem 0.5rem 0.5rem;
background-color: rgba(var(--text-color), 0.1); background-color: rgba(var(--text-color), 0.1);
} }
.received::after { .received::after {
@ -1765,12 +1765,12 @@ sm-button[variant=primary] {
.sent + .sent, .sent + .sent,
.received + .received { .received + .received {
border-radius: 0.3rem; border-radius: 0.5rem;
} }
.distinct-sender { .distinct-sender {
display: grid; display: grid;
border-radius: 0 0.3rem 0.3rem 0.3rem !important; border-radius: 0 0.5rem 0.5rem 0.5rem !important;
margin-top: 0.8rem !important; margin-top: 0.8rem !important;
} }
.distinct-sender::after { .distinct-sender::after {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

14
css/main.scss
View File

@ -29,7 +29,7 @@ body {
--kinda-pink: #e40273; --kinda-pink: #e40273;
--purple: #462191; --purple: #462191;
--shady-blue: #324de6; --shady-blue: #324de6;
--nice-blue: #256eff; --nice-blue: #3d5afe;
--maybe-cyan: #00b0ff; --maybe-cyan: #00b0ff;
--teal: #00bcd4; --teal: #00bcd4;
--mint-green: #16c79a; --mint-green: #16c79a;
@ -64,7 +64,7 @@ body[data-theme="dark"] {
--kinda-pink: #c44ae6; --kinda-pink: #c44ae6;
--purple: #9565f7; --purple: #9565f7;
--shady-blue: #8295fb; --shady-blue: #8295fb;
--nice-blue: #86afff; --nice-blue: #6d83ff;
--maybe-cyan: #66cfff; --maybe-cyan: #66cfff;
--teal: #6aeeff; --teal: #6aeeff;
--mint-green: #4dffd2; --mint-green: #4dffd2;
@ -1025,7 +1025,7 @@ sm-button[variant="primary"] {
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
fill: var(--accent-color); fill: var(--accent-color);
border-radius: 2rem; border-radius: 2rem;
padding: 0.6rem; padding: 0.7rem;
height: 2.6rem; height: 2.6rem;
width: 2.6rem; width: 2.6rem;
margin-right: 0.5rem; margin-right: 0.5rem;
@ -1798,7 +1798,7 @@ sm-button[variant="primary"] {
.sent { .sent {
margin-left: auto; margin-left: auto;
background: var(--accent-color); background: var(--accent-color);
border-radius: 0.3rem 0 0.3rem 0.3rem; border-radius: 0.5rem 0 0.5rem 0.5rem;
& > * { & > * {
color: rgba(var(--background-color), 1); color: rgba(var(--background-color), 1);
@ -1819,7 +1819,7 @@ sm-button[variant="primary"] {
.received { .received {
margin-right: auto; margin-right: auto;
border-radius: 0 0.3rem 0.3rem 0.3rem; border-radius: 0 0.5rem 0.5rem 0.5rem;
background-color: rgba(var(--text-color), 0.1); background-color: rgba(var(--text-color), 0.1);
&::after { &::after {
content: ""; content: "";
@ -1847,12 +1847,12 @@ sm-button[variant="primary"] {
.sent + .sent, .sent + .sent,
.received + .received { .received + .received {
border-radius: 0.3rem; border-radius: 0.5rem;
} }
.distinct-sender { .distinct-sender {
display: grid; display: grid;
border-radius: 0 0.3rem 0.3rem 0.3rem !important; border-radius: 0 0.5rem 0.5rem 0.5rem !important;
margin-top: 0.8rem !important; margin-top: 0.8rem !important;
&::after { &::after {

24
index.html
View File

@ -219,10 +219,10 @@
<main id="main_page" class="page grid hidden"> <main id="main_page" class="page grid hidden">
<section id="chat_page" class="inner-page"> <section id="chat_page" class="inner-page">
<div id="contacts" class="grid"> <div id="contacts" class="grid">
<section class="grid gap-0-5 card" style="padding: 1rem 1rem 0 1rem; border-radius: 0 0 1rem 1rem;"> <section class="grid gap-0-5 card" style="padding: 1rem 1rem 0 1rem; border-radius: 0;">
<h4>Bitcoin multisig</h4> <h4>Bitcoin multisig</h4>
<div class="flex align-center gap-0-5" style="margin: 0 -0.5rem 0.5rem;"> <div class="flex align-center" style="margin: 0 -0.5rem 0.5rem;">
<button class="prime-action" onclick="openCreationPopup('multisig')"> <button class="prime-action interactive" onclick="openCreationPopup('multisig')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000"> width="24px" fill="#000000">
<path d="M0 0h24v24H0z" fill="none" /> <path d="M0 0h24v24H0z" fill="none" />
@ -231,7 +231,7 @@
</svg> </svg>
Create address Create address
</button> </button>
<button class="prime-action" onclick="openPopup('multisig_tx_popup')"> <button class="prime-action interactive" onclick="openPopup('multisig_tx_popup')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000"> width="24px" fill="#000000">
<path d="M0 0h24v24H0z" fill="none" /> <path d="M0 0h24v24H0z" fill="none" />
@ -1407,12 +1407,18 @@
break break
case 'creation_popup': { case 'creation_popup': {
const contacts = [] const contacts = []
const sentRequests = await messenger.list_request_sent();
const skipSendingRequest = new Set();
for (const key in sentRequests) {
skipSendingRequest.add(sentRequests[key].floID)
}
for (const floID in floGlobals.contacts) { for (const floID in floGlobals.contacts) {
if (getFloIdType(floID) !== 'plain') continue; if (getFloIdType(floID) !== 'plain') continue;
if (floGlobals.pubKeys.hasOwnProperty(floID)) { if (floGlobals.pubKeys.hasOwnProperty(floID)) {
contacts.push(render.selectableContact(floID)) contacts.push(render.selectableContact(floID))
} else { } else {
contacts.push(render.actionableContact(floID)) const hasSentRequest = skipSendingRequest.has(floID)
contacts.push(render.actionableContact(floID, hasSentRequest))
} }
} }
renderElem(getRef('select_contacts_container'), html`${contacts}`) renderElem(getRef('select_contacts_container'), html`${contacts}`)
@ -2428,14 +2434,14 @@
</label> </label>
` `
}, },
actionableContact(floID) { actionableContact(floID, hasSentRequest) {
const name = getContactName(floID) const name = getContactName(floID)
const initial = name.charAt(0) const initial = name.charAt(0)
return html` return html`
<div class="flex align-center selectable-contact" data-flo-id=${floID} style=${`--contact-color: var(${contactColor(floID)})`}> <div class="flex align-center selectable-contact" 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>
<button class="button button--small request-pubkey">Request</button> <button class="button button--small request-pubkey" ?disabled=${hasSentRequest}>${hasSentRequest ? 'Request sent' : 'Request'}</button>
</div> </div>
` `
}, },
@ -2727,6 +2733,7 @@
document.title = `New mail(s)` document.title = `New mail(s)`
addNotificationBadge('#mail_page_button', Object.keys(data.mails).length) addNotificationBadge('#mail_page_button', Object.keys(data.mails).length)
} }
console.log(data.requests, data.responses)
updateMessageUI(data.messages) updateMessageUI(data.messages)
renderMailList(data.mails, true) renderMailList(data.mails, true)
} }
@ -3074,7 +3081,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, 'hey there!')
e.delegateTarget.disabled = true; e.delegateTarget.disabled = true;
e.delegateTarget.textContent = 'Request sent' e.delegateTarget.textContent = 'Request sent'
}) })
@ -3586,7 +3593,6 @@
`) `)
} }
} }
// to-do: fix signed transaction detection error caused due to lazy loading
resolve() resolve()
}) })
}) })