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

Code refactoring

Browse Source
This commit is contained in:
sairaj mote 2023-03-22 19:10:18 +05:30
parent 27caa9db21
commit c0e1dd4017
4 changed files with 74 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/main.css
View File

@ -1045,6 +1045,9 @@ ol li::before {
user-select: none; user-select: none;
overflow: hidden; overflow: hidden;
} }
.contact > *:empty {
display: none;
}
.contact.highlight { .contact.highlight {
-webkit-animation: highlight 0.5s ease-in-out 4 alternate; -webkit-animation: highlight 0.5s ease-in-out 4 alternate;
animation: highlight 0.5s ease-in-out 4 alternate; animation: highlight 0.5s ease-in-out 4 alternate;
@ -1055,11 +1058,11 @@ ol li::before {
} }
.contact.chat, .contact.group { .contact.chat, .contact.group {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
grid-template-areas: "dp name time" "dp . ."; grid-template-areas: "dp name time" "dp . menu";
} }
.contact.pipeline { .contact.pipeline {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
grid-template-areas: "dp tag time" "dp name name" "dp . ."; grid-template-areas: "dp tag time" "dp name name" "dp . menu";
} }
.contact.pipeline .name { .contact.pipeline .name {
margin: 0.5rem 0 0.3rem 0; margin: 0.5rem 0 0.3rem 0;
@ -1089,6 +1092,17 @@ ol li::before {
border-radius: 0.3rem; border-radius: 0.3rem;
margin-right: auto; margin-right: auto;
font-weight: 500; font-weight: 500;
justify-self: flex-start;
}
.contact.no-message.chat, .contact.no-message.group {
grid-template-areas: "dp name menu";
grid-template-rows: 1fr;
}
.contact.no-message.pipeline {
grid-template-areas: "dp tag tag" "dp name menu";
}
.contact.no-message .name {
margin-bottom: 0;
} }
.contact .name { .contact .name {
grid-area: name; grid-area: name;
@ -1111,6 +1125,7 @@ ol li::before {
opacity: 0.9; opacity: 0.9;
} }
.contact .menu { .contact .menu {
grid-area: menu;
flex-shrink: 0; flex-shrink: 0;
justify-self: flex-end; justify-self: flex-end;
padding: 0.2rem; padding: 0.2rem;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

26
css/main.scss
View File

@ -1051,6 +1051,11 @@ ol {
flex-shrink: 0; flex-shrink: 0;
user-select: none; user-select: none;
overflow: hidden; overflow: hidden;
& > * {
&:empty {
display: none;
}
}
&.highlight { &.highlight {
animation: highlight 0.5s ease-in-out 4 alternate; animation: highlight 0.5s ease-in-out 4 alternate;
} }
@ -1064,14 +1069,14 @@ ol {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
grid-template-areas: grid-template-areas:
"dp name time" "dp name time"
"dp . ."; "dp . menu";
} }
&.pipeline { &.pipeline {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
grid-template-areas: grid-template-areas:
"dp tag time" "dp tag time"
"dp name name" "dp name name"
"dp . ."; "dp . menu";
.name { .name {
margin: 0.5rem 0 0.3rem 0; margin: 0.5rem 0 0.3rem 0;
} }
@ -1105,6 +1110,22 @@ ol {
border-radius: 0.3rem; border-radius: 0.3rem;
margin-right: auto; margin-right: auto;
font-weight: 500; font-weight: 500;
justify-self: flex-start;
}
&.no-message {
&.chat,
&.group {
grid-template-areas: "dp name menu";
grid-template-rows: 1fr;
}
&.pipeline {
grid-template-areas:
"dp tag tag"
"dp name menu";
}
.name {
margin-bottom: 0;
}
} }
.name { .name {
grid-area: name; grid-area: name;
@ -1130,6 +1151,7 @@ ol {
} }
.menu { .menu {
grid-area: menu;
flex-shrink: 0; flex-shrink: 0;
justify-self: flex-end; justify-self: flex-end;
padding: 0.2rem; padding: 0.2rem;

70
index.html
View File

@ -1371,21 +1371,20 @@
let btcChatID = btcOperator.convert.legacy2bech(floChatID); let btcChatID = btcOperator.convert.legacy2bech(floChatID);
Promise.all([messenger.getChat(floChatID), messenger.getChat(btcChatID)]) Promise.all([messenger.getChat(floChatID), messenger.getChat(btcChatID)])
.then(async ([floChat, btcChat]) => { .then(async ([floChat, btcChat]) => {
let chat = mergeSortedArrays(Object.values(floChat), Object.values(btcChat), 'time') const transaction = mergeSortedArrays(Object.values(floChat), Object.values(btcChat), 'time')
for (const key in chat) { .find(message => message.tx_hex)
const { type, tx_hex } = chat[key] if (transaction) {
if (type === 'TRANSACTION' && tx_hex) { const { type, tx_hex } = transaction
let details let details
switch (messenger.pipeline[floID].model) { switch (messenger.pipeline[floID].model) {
case 'flo_multisig': case 'flo_multisig':
details = await floBlockchainAPI.parseTransaction(tx_hex) details = await floBlockchainAPI.parseTransaction(tx_hex)
break; break;
case 'btc_multisig': case 'btc_multisig':
details = await btcOperator.parseTransaction(tx_hex) details = await btcOperator.parseTransaction(tx_hex)
break; break;
}
getRef('contact_flo_id').value = details.inputs[0].address
} }
getRef('contact_flo_id').value = details.inputs[0].address
} }
}).catch(error => { }).catch(error => {
console.error(error) console.error(error)
@ -2586,14 +2585,14 @@
if (chatCard && !chatCard.querySelector('.last-message')) { if (chatCard && !chatCard.querySelector('.last-message')) {
const timeAndOptions = html` const timeAndOptions = html`
<time class="time">${time ? getFormattedTime(time, 'relative') : ''}</time> <time class="time">${time ? getFormattedTime(time, 'relative') : ''}</time>
<div class="span-2"> <p class="last-message">${lastText}</p>
<p class="last-message">${lastText}</p> <button class="menu">
<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>
<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> </button>
</button> `;
</div>
`;
chatCard.append(html.node`${timeAndOptions}`) chatCard.append(html.node`${timeAndOptions}`)
if (time)
chatCard.classList.remove('no-message')
} }
}).catch(error => console.error(error)) }).catch(error => console.error(error))
if (prepend) { if (prepend) {
@ -2605,7 +2604,7 @@
if (type === 'pipeline' && messenger.pipeline[contactAddress].model === 'flo_multisig') { if (type === 'pipeline' && messenger.pipeline[contactAddress].model === 'flo_multisig') {
tag = 'FLO' tag = 'FLO'
} }
const className = `contact ${type !== 'contact' ? type : ''} ${markUnread ? 'unread' : ''} interactive` const className = `contact ${type !== 'contact' ? type : ''} ${markUnread ? 'unread' : ''} interactive no-message`
return html.for(ref, contactAddress)` return html.for(ref, contactAddress)`
<div class="${className}" .dataset=${{ floAddress: contactAddress }} style=${`--contact-color: var(${contactColor(contactAddress)})`}> <div class="${className}" .dataset=${{ floAddress: contactAddress }} style=${`--contact-color: var(${contactColor(contactAddress)})`}>
<div class="initial flex align-center"> <div class="initial flex align-center">
@ -3149,7 +3148,7 @@
{ transform: 'none' }, { transform: 'none' },
], animOptions) ], animOptions)
getRef('chats_list').prepend(cloneContact) getRef('chats_list').prepend(cloneContact)
cloneContact.animate([ await cloneContact.animate([
{ {
transform: 'scale(0.8)', transform: 'scale(0.8)',
opacity: 0 opacity: 0
@ -3158,7 +3157,7 @@
transform: 'none', transform: 'none',
opacity: 1 opacity: 1
}, },
], animOptions) ], animOptions).finished
} }
} else { } else {
const chatType = floID ? 'chat' : groupID ? 'group' : 'pipeline' const chatType = floID ? 'chat' : groupID ? 'group' : 'pipeline'
@ -3168,23 +3167,21 @@
} }
} }
getRef('chats_list').prepend(html.node`${render.contactCard(chatAddress, { type: chatType, prepend: true, markUnread: true, ref: getRef('chats_list') })}`) getRef('chats_list').prepend(html.node`${render.contactCard(chatAddress, { type: chatType, prepend: true, markUnread: true, ref: getRef('chats_list') })}`)
chatCard = getRef('chats_list').firstElementChild }
if (sentByMe) { chatCard = getRef('chats_list').firstElementChild
chatCard.classList.add('active') if (sentByMe) {
} chatCard.classList.add('active')
} }
let finalMessage let finalMessage
if (messenger.groups && messenger.groups[groupID]) { if (messenger.groups && messenger.groups[groupID]) {
if (floGlobals.contacts[sender]) finalMessage = `${getContactName(sender)}: ${message}`
finalMessage = `${floGlobals.contacts[sender]}: ${message}`
else if (sender === floDapps.user.id)
finalMessage = `You: ${message}`
} }
else else
finalMessage = message finalMessage = message
console.log(finalMessage, 'finalMessage') if (chatCard.querySelector('.last-message')) {
if (chatCard.querySelector('.last-message'))
chatCard.querySelector('.last-message').textContent = finalMessage chatCard.querySelector('.last-message').textContent = finalMessage
chatCard.classList.remove('no-message')
}
if (chatCard.querySelector('.time')) if (chatCard.querySelector('.time'))
chatCard.querySelector('.time').textContent = getFormattedTime(time, 'relative') chatCard.querySelector('.time').textContent = getFormattedTime(time, 'relative')
@ -3821,9 +3818,6 @@
} }
if (getRef('messages_container').querySelector(`.unconfirmed`)) if (getRef('messages_container').querySelector(`.unconfirmed`))
getRef('messages_container').querySelector(`.unconfirmed`).classList.remove('unconfirmed') getRef('messages_container').querySelector(`.unconfirmed`).classList.remove('unconfirmed')
const chatCard = getChatCard(receiver)
chatCard.querySelector('.last-message').textContent = `You: ${message}`
chatCard.querySelector('.time').textContent = getFormattedTime(Date.now(), 'relative')
} catch (err) { } catch (err) {
notify(err, "error") notify(err, "error")
} }
@ -4112,7 +4106,7 @@
</div> </div>
</div> </div>
${floData ? html` ${floData ? html`
<div class="grid gap-0-3"> <div class="grid">
<h5>FLO data</h5> <h5>FLO data</h5>
<p>${floData}</p> <p>${floData}</p>
</div>`: '' </div>`: ''