jschulthess/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

Started Chat UI Refactor

Browse Source
This commit is contained in:
Justin Ferrari 2022-11-11 14:57:54 -05:00
parent 353cacb789
commit 5cfa092017
5 changed files with 226 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
qortal-ui-core/font/switch-theme.css
View File

@ -8,6 +8,8 @@ html {
--border2: #dde2e8; --border2: #dde2e8;
--copybutton: #707584; --copybutton: #707584;
--chat-bubble: #efefef73; --chat-bubble: #efefef73;
--chat-bubble-bg: #f3f3f3;
--chat-bubble-msg-color: #080808;
--sectxt: #576374; --sectxt: #576374;
--vdicon: #707b8a; --vdicon: #707b8a;
--tradehead: #6a6c75; --tradehead: #6a6c75;
@ -45,6 +47,8 @@ html[theme="dark"] {
--border2: #0b305e; --border2: #0b305e;
--copybutton: #d0d6de; --copybutton: #d0d6de;
--chat-bubble: #9694941a; --chat-bubble: #9694941a;
--chat-bubble-bg: #2d3749;
--chat-bubble-msg-color: #ffffff;
--sectxt: #bbc3cd; --sectxt: #bbc3cd;
--vdicon: #d0d6de; --vdicon: #d0d6de;
--tradehead: #008fd5; --tradehead: #008fd5;

4
qortal-ui-core/src/styles/switch-theme.css
View File

@ -8,6 +8,8 @@ html {
--border2: #dde2e8; --border2: #dde2e8;
--copybutton: #707584; --copybutton: #707584;
--chat-bubble: #efefef73; --chat-bubble: #efefef73;
--chat-bubble-bg: #f3f3f3;
--chat-bubble-msg-color: #080808;
--sectxt: #576374; --sectxt: #576374;
--vdicon: #707b8a; --vdicon: #707b8a;
--tradehead: #6a6c75; --tradehead: #6a6c75;
@ -44,6 +46,8 @@ html[theme="dark"] {
--border2: #0b305e; --border2: #0b305e;
--copybutton: #d0d6de; --copybutton: #d0d6de;
--chat-bubble: #9694941a; --chat-bubble: #9694941a;
--chat-bubble-bg: #2d3749;
--chat-bubble-msg-color: #ffffff;
--sectxt: #bbc3cd; --sectxt: #bbc3cd;
--vdicon: #d0d6de; --vdicon: #d0d6de;
--tradehead: #008fd5; --tradehead: #008fd5;

82
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -129,6 +129,7 @@ class ChatPage extends LitElement {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center;
gap: 15px; gap: 15px;
width: 100%; width: 100%;
} }
@ -137,7 +138,7 @@ class ChatPage extends LitElement {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 5px; gap: 5px;
width: 95%; width: 92%;
} }
@ -638,13 +639,13 @@ class ChatPage extends LitElement {
<p class="senderName">${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}</p> <p class="senderName">${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}</p>
<p class="original-message">${this.repliedToMessageObj.message}</p> <p class="original-message">${this.repliedToMessageObj.message}</p>
</div> </div>
<vaadin-icon
class="close-icon"
icon="vaadin:close-big"
slot="icon"
@click=${() => this.closeRepliedToContainer()}
></vaadin-icon>
</div> </div>
<vaadin-icon
class="close-icon"
icon="vaadin:close-big"
slot="icon"
@click=${() => this.closeRepliedToContainer()}
></vaadin-icon>
</div> </div>
`} `}
${this.editedMessageObj && html` ${this.editedMessageObj && html`
@ -655,35 +656,39 @@ class ChatPage extends LitElement {
<p class="senderName">${translate("chatpage.cchange25")}</p> <p class="senderName">${translate("chatpage.cchange25")}</p>
<p class="original-message">${this.editedMessageObj.message}</p> <p class="original-message">${this.editedMessageObj.message}</p>
</div> </div>
<vaadin-icon
class="close-icon"
icon="vaadin:close-big"
slot="icon"
@click=${() => this.closeEditMessageContainer()}
></vaadin-icon>
</div> </div>
<vaadin-icon
class="close-icon"
icon="vaadin:close-big"
slot="icon"
@click=${() => this.closeEditMessageContainer()}
></vaadin-icon>
</div> </div>
`} `}
<div class="chatbar" style="${this.chatMessageSize >= 750 && 'padding-bottom: 7px'}"> <div class="chatbar" style="${this.chatMessageSize >= 750 && 'padding-bottom: 7px'}">
<div class="chatbar-container" style="${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? 'align-items: flex-end' : "align-items: center"}" <div class="chatbar-container" style="${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? 'align-items: flex-end' : "align-items: center"}"
> >
<div class="file-picker-container"> ${this.accountName && (
<vaadin-icon html`
class="paperclip-icon" <div class="file-picker-container">
icon="vaadin:paperclip" <vaadin-icon
slot="icon" class="paperclip-icon"
@click=${() => this.closeEditMessageContainer()} icon="vaadin:paperclip"
> slot="icon"
</vaadin-icon> @click=${() => this.closeEditMessageContainer()}
<div class="file-picker-input-container"> >
<input </vaadin-icon>
.value="${this.imageFile}" <div class="file-picker-input-container">
@change="${e => this.insertImage(e.target.files[0])}" <input
class="file-picker-input" type="file" name="myImage" accept="image/*" /> .value="${this.imageFile}"
@change="${e => this.insertImage(e.target.files[0])}"
class="file-picker-input" type="file" name="myImage" accept="image/*" />
</div>
</div> </div>
</div> `
)}
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea> <textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
<iframe id="_chatEditorDOM" style="${`height: ${this.iframeHeight}px`}" class="chat-editor" id="_chatEditorDOM" tabindex="-1" height=${this.iframeHeight}> <iframe style="${`height: ${this.iframeHeight}px`}" class="chat-editor" id="_chatEditorDOM" tabindex="-1" height=${this.iframeHeight}>
</iframe> </iframe>
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}> <button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`} ${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
@ -783,6 +788,7 @@ class ChatPage extends LitElement {
this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button'); this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
this.mirrorChatInput = this.shadowRoot.getElementById('messageBox'); this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
this.chatMessageInput = this.shadowRoot.getElementById('_chatEditorDOM'); this.chatMessageInput = this.shadowRoot.getElementById('_chatEditorDOM');
this.accountName = window.parent.reduxStore.getState().app.accountInfo.names[0];
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {
if (!this.chatEditor.content.body.matches(':focus')) { if (!this.chatEditor.content.body.matches(':focus')) {
// WARNING: Deprecated methods from KeyBoard Event // WARNING: Deprecated methods from KeyBoard Event
@ -1503,7 +1509,7 @@ class ChatPage extends LitElement {
} }
} }
if(outSideMsg && outSideMsg.type === 'delete'){ if (outSideMsg && outSideMsg.type === 'delete') {
this.isDeletingImage = true this.isDeletingImage = true
const userName = outSideMsg.name const userName = outSideMsg.name
const identifier = outSideMsg.identifier const identifier = outSideMsg.identifier
@ -1530,19 +1536,18 @@ class ChatPage extends LitElement {
return blob; return blob;
} }
const blob = b64toBlob(str, 'image/png'); const blob = b64toBlob(str, 'image/png');
await new Promise(resolve => { await new Promise(resolve => {
new Compressor( blob, { new Compressor(blob, {
quality: 0.6, quality: 0.6,
maxWidth: 500, maxWidth: 500,
success(result){ success(result) {
console.log({result}) console.log({result});
const file = new File([result], "name", { const file = new File([result], "name", {
type: 'image/png' type: 'image/png'
}); });
console.log({file}) console.log({file});
compressedFile = file compressedFile = file;
resolve() resolve();
}, },
error(err) { error(err) {
console.log(err.message); console.log(err.message);
@ -1605,7 +1610,7 @@ class ChatPage extends LitElement {
const identifier = `qchat_${id}`; const identifier = `qchat_${id}`;
let compressedFile = ''; let compressedFile = '';
await new Promise(resolve => { await new Promise(resolve => {
new Compressor( outSideMsg.imageFile, { new Compressor(outSideMsg.imageFile, {
quality: .6, quality: .6,
maxWidth: 500, maxWidth: 500,
success(result){ success(result){
@ -1620,7 +1625,6 @@ class ChatPage extends LitElement {
}, },
}) })
}) })
const fileSize = compressedFile.size; const fileSize = compressedFile.size;
if (fileSize > 5000000) { if (fileSize > 5000000) {
parentEpml.request('showSnackBar', get("chatpage.cchange26")); parentEpml.request('showSnackBar', get("chatpage.cchange26"));
@ -1832,8 +1836,6 @@ class ChatPage extends LitElement {
worker.postMessage({chatBytes, path, difficulty}); worker.postMessage({chatBytes, path, difficulty});
worker.onmessage = e => { worker.onmessage = e => {
worker.terminate() worker.terminate()
chatBytesArray = e.data.chatBytesArray chatBytesArray = e.data.chatBytesArray
nonce = e.data.nonce nonce = e.data.nonce

40
qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
View File

@ -109,21 +109,43 @@ export const chatStyles = css`
.message-container { .message-container {
position: relative; position: relative;
margin-bottom: 20px;
} }
.message-subcontainer { .message-subcontainer1 {
position: relative;
display: flex;
align-items: flex-end;
}
.message-subcontainer2 {
position: relative; position: relative;
display: flex; display: flex;
background-color: #f3f3f3; background-color: var(--chat-bubble-bg);
flex-grow: 0; flex-grow: 0;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
border-radius: 5px; border-radius: 5px;
padding: 10px 15px; padding: 12px 15px;
gap: 10px; gap: 10px;
margin-bottom: 10px; width: fit-content;
min-width: 150px;
}
.message-triangle {
position: relative;
}
.message-triangle:after {
content: "";
position: absolute;
bottom: 0px;
left: -9px;
width: 0;
height: 0;
border-style: solid;
border-width: 0px 0px 7px 9px;
border-color: transparent transparent var(--chat-bubble-bg) transparent;
} }
.message-reactions { .message-reactions {
@ -170,7 +192,7 @@ export const chatStyles = css`
} }
.message { .message {
color: black; color: var(--chat-bubble-msg-color);
line-height: 19px; line-height: 19px;
word-wrap: break-word; word-wrap: break-word;
-webkit-user-select: text; -webkit-user-select: text;
@ -178,12 +200,12 @@ export const chatStyles = css`
-ms-user-select: text; -ms-user-select: text;
user-select: text; user-select: text;
font-size: 16px; font-size: 16px;
width: 90%; width: 100%;
position: relative; position: relative;
} }
.message-data-avatar { .message-data-avatar {
margin: 0px 8px 3px 3px; margin: 0px 10px 0px 3px;
width: 42px; width: 42px;
height: 42px; height: 42px;
float: left; float: left;
@ -207,7 +229,7 @@ export const chatStyles = css`
.chat-hover { .chat-hover {
display: none; display: none;
position: absolute; position: absolute;
top: -38px; top: -25px;
right: 5px; right: 5px;
} }

287
qortal-ui-plugins/plugins/core/components/ChatScroller.js
View File

@ -76,66 +76,27 @@ class ChatScroller extends LitElement {
return html` return html`
<ul id="viewElement" class="chat-list clearfix"> <ul id="viewElement" class="chat-list clearfix">
<div id="upObserver"></div> <div id="upObserver"></div>
${formattedMessages.map((formattedMessage)=> { ${formattedMessages.map((formattedMessage) => {
return repeat(
return repeat(
formattedMessage.messages, formattedMessage.messages,
(message) => message.reference, (message) => message.reference,
(message, indexMessage) => html` (message, indexMessage) => html`
<message-template <message-template
.emojiPicker=${this.emojiPicker} .emojiPicker=${this.emojiPicker}
.escapeHTML=${this.escapeHTML} .escapeHTML=${this.escapeHTML}
.messageObj=${message} .messageObj=${message}
.hideMessages=${this.hideMessages} .hideMessages=${this.hideMessages}
.setRepliedToMessageObj=${this.setRepliedToMessageObj} .setRepliedToMessageObj=${this.setRepliedToMessageObj}
.setEditedMessageObj=${this.setEditedMessageObj} .setEditedMessageObj=${this.setEditedMessageObj}
.focusChatEditor=${this.focusChatEditor} .focusChatEditor=${this.focusChatEditor}
.sendMessage=${this.sendMessage} .sendMessage=${this.sendMessage}
?isfirstmessage=${indexMessage === 0} ?isFirstMessage=${indexMessage === 0}
?isSingleMessageInGroup=${formattedMessage.messages.length > 1} ?isSingleMessageInGroup=${formattedMessage.messages.length > 1}
> ?isLastMessageInGroup=${indexMessage === formattedMessage.messages.length - 1}
</message-template>` >
) </message-template>`
)
})} })}
<!-- ${repeat(
testMessages,
(testMessage)=> testMessage.signature,
(testMessage)=> {
return repeat(
testMessage.messages,
(message) => message.reference,
(message, indexMessage) => html`
<message-template
.emojiPicker=${this.emojiPicker}
.escapeHTML=${this.escapeHTML}
.messageObj=${message}
.hideMessages=${this.hideMessages}
.setRepliedToMessageObj=${this.setRepliedToMessageObj}
.setEditedMessageObj=${this.setEditedMessageObj}
.focusChatEditor=${this.focusChatEditor}
.sendMessage=${this.sendMessage}
?isfirstmessage=${indexMessage === 0}
>
</message-template>`
)
}
)} -->
<!-- ${repeat(
this.messages,
(message) => message.reference,
(message) => html`
<message-template
.emojiPicker=${this.emojiPicker}
.escapeHTML=${this.escapeHTML}
.messageObj=${message}
.hideMessages=${this.hideMessages}
.setRepliedToMessageObj=${this.setRepliedToMessageObj}
.setEditedMessageObj=${this.setEditedMessageObj}
.focusChatEditor=${this.focusChatEditor}
.sendMessage=${this.sendMessage}
>
</message-template>`
)} -->
<div id='downObserver'></div> <div id='downObserver'></div>
<div class='last-message-ref'> <div class='last-message-ref'>
<vaadin-icon class='arrow-down-icon' icon='vaadin:arrow-circle-down' slot='icon' @click=${() => { <vaadin-icon class='arrow-down-icon' icon='vaadin:arrow-circle-down' slot='icon' @click=${() => {
@ -234,10 +195,11 @@ class MessageTemplate extends LitElement {
setEditedMessageObj: { type: Function }, setEditedMessageObj: { type: Function },
focusChatEditor: { type: Function }, focusChatEditor: { type: Function },
sendMessage: { type: Function }, sendMessage: { type: Function },
openDialogImage: {type: Function}, openDialogImage: { type: Function },
isImageLoaded: {type: Boolean}, isImageLoaded: { type: Boolean },
isFirstMessage: {type: Boolean}, isFirstMessage: { type: Boolean },
isSingleMessageInGroup: {type: Boolean} isSingleMessageInGroup: { type: Boolean },
isLastMessageInGroup: { type: Boolean },
} }
} }
@ -253,6 +215,7 @@ class MessageTemplate extends LitElement {
this.isImageLoaded = false this.isImageLoaded = false
this.isFirstMessage = false this.isFirstMessage = false
this.isSingleMessageInGroup = false this.isSingleMessageInGroup = false
this.isLastMessageInGroup = false
} }
static styles = [chatStyles] static styles = [chatStyles]
@ -284,22 +247,22 @@ class MessageTemplate extends LitElement {
} }
} }
render() { render() {
console.log('isFirst', this.isFirstMessage) console.log('isFirst', this.isFirstMessage);
const hidemsg = this.hideMessages console.log("is single message in group", this.isSingleMessageInGroup);
let message = "" const hidemsg = this.hideMessages;
let reactions = [] let message = "";
let repliedToData = null let reactions = [];
let image = null let repliedToData = null;
let isImageDeleted = false let image = null;
let isImageDeleted = false;
try { try {
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage); const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage);
message = parsedMessageObj.messageText; message = parsedMessageObj.messageText;
repliedToData = this.messageObj.repliedToData; repliedToData = this.messageObj.repliedToData;
isImageDeleted = parsedMessageObj.isImageDeleted; isImageDeleted = parsedMessageObj.isImageDeleted;
reactions = parsedMessageObj.reactions || []; reactions = parsedMessageObj.reactions || [];
if(parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0){ if (parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0) {
image = parsedMessageObj.images[0]; image = parsedMessageObj.images[0];
} }
} catch (error) { } catch (error) {
@ -324,21 +287,20 @@ class MessageTemplate extends LitElement {
avatarImg = html`<img src='/img/incognito.png' style="max-width:100%; max-height:100%;" onerror="this.onerror=null;" />` avatarImg = html`<img src='/img/incognito.png' style="max-width:100%; max-height:100%;" onerror="this.onerror=null;" />`
} }
const createImage=(imageUrl)=>{ const createImage = (imageUrl) => {
const imageHTMLRes = new Image(); const imageHTMLRes = new Image();
imageHTMLRes.src = imageUrl; imageHTMLRes.src = imageUrl;
imageHTMLRes.style= "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer"; imageHTMLRes.style= "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer";
imageHTMLRes.onclick= () => { imageHTMLRes.onclick= () => {
this.openDialogImage = true this.openDialogImage = true;
} }
imageHTMLRes.onload = ()=> { imageHTMLRes.onload = () => {
this.isImageLoaded = true this.isImageLoaded = true;
} }
imageHTMLRes.onerror = ()=> { imageHTMLRes.onerror = () => {
console.log('inputRef', this.imageFetches);
console.log('inputRef', this.imageFetches)
if (this.imageFetches < 4) { if (this.imageFetches < 4) {
setTimeout(()=> { setTimeout(() => {
this.imageFetches = this.imageFetches + 1; this.imageFetches = this.imageFetches + 1;
imageHTMLRes.src = imageUrl; imageHTMLRes.src = imageUrl;
}, 500); }, 500);
@ -379,71 +341,112 @@ class MessageTemplate extends LitElement {
return hideit ? html`<li class="clearfix"></li>` : html` return hideit ? html`<li class="clearfix"></li>` : html`
<li class="clearfix message-parent"> <li
<div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}"> class="clearfix message-parent"
<span class="message-data-name">${nameMenu}</span> style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false && reactions.length === 0) ?
<span class="message-data-level">${levelFounder}</span> 'padding-bottom: 0;'
<span class="message-data-time"><message-time timestamp=${this.messageObj.timestamp}></message-time></span> : null}
</div> ${this.isFirstMessage && 'margin-top: 20px;'}">
<div class="message-data-avatar"> ${this.isFirstMessage ? (
${avatarImg} html`
</div> <div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}">
<div class="message-container"> <span class="message-data-name">${nameMenu}</span>
<div class="message-subcontainer"> <span class="message-data-level">${levelFounder}</span>
${repliedToData && html` <span class="message-data-time"><message-time timestamp=${this.messageObj.timestamp}></message-time></span>
<div class="original-message"> </div>
<p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p> `
<p class="replied-message">${repliedToData.decodedMessage.messageText}</p> ) : null}
</div> <div>
<div
class="message-container"
style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) && 'margin-bottom: 0'}">
<div class="message-subcontainer1">
${(this.isSingleMessageInGroup === false ||
(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true))
? (
html`
<div class="message-data-avatar">
${avatarImg}
</div>
`
) :
html`
<div class="message-data-avatar"></div>
`} `}
${image && !isImageDeleted ? html` <div
<div class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}> class="${`message-subcontainer2
${imageHTML}<vaadin-icon ${((this.isFirstMessage === true && this.isSingleMessageInGroup === false) ||
@click=${() => this.sendMessage({ (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) &&
type: 'delete', 'message-triangle'}`}"
name: image.name, style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) ? 'margin-bottom: 0;' : null}
identifier: image.identifier, ${(this.isFirstMessage === true && this.isSingleMessageInGroup === false && this.isLastMessageInGroup === false)
editedMessageObj: this.messageObj, ? 'border-radius: 25px 25px 25px 0px;'
})} : (this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false)
class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon> ? 'border-radius: 8px 25px 25px 8px;'
</div> : (this.isFirstMessage === true && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false)
` : html``} ? 'border-radius: 27px 25px 25px 12px;'
<div id="messageContent" class="message"> : (this.isSingleMessageInGroup === true && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true) ?
${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))} 'border-radius: 10px 25px 25px 0;'
: null
}">
${repliedToData && html`
<div class="original-message">
<p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p>
<p class="replied-message">${repliedToData.decodedMessage.messageText}</p>
</div>
`}
${image && !isImageDeleted ? html`
<div class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}>
${imageHTML}<vaadin-icon
@click=${() => this.sendMessage({
type: 'delete',
name: image.name,
identifier: image.identifier,
editedMessageObj: this.messageObj,
})}
class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon>
</div>
` : html``}
<div id="messageContent" class="message">
${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))}
</div>
</div> </div>
<chat-menu
tabindex="0"
class="chat-hover"
style="${this.showBlockAddressIcon ? 'display: block;' : null} ${this.isFirstMessage && 'top: -50px'}"
toblockaddress="${this.messageObj.sender}"
.showPrivateMessageModal=${() => this.showPrivateMessageModal()}
.showBlockUserModal=${() => this.showBlockUserModal()}
.showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
.showBlockAddressIcon=${this.showBlockAddressIcon}
.originalMessage=${{...this.messageObj, message}}
.setRepliedToMessageObj=${this.setRepliedToMessageObj}
.setEditedMessageObj=${this.setEditedMessageObj}
.focusChatEditor=${this.focusChatEditor}
.myAddress=${this.myAddress}
@blur=${() => this.showBlockIconFunc(false)}
.sendMessage=${this.sendMessage}
>
</chat-menu>
</div>
<div class="message-reactions" style="${reactions.length > 0 &&
'margin-top: 10px; margin-bottom: 5px;'}">
${reactions.map((reaction)=> {
return html`
<span
@click=${() => this.sendMessage({
type: 'reaction',
editedMessageObj: this.messageObj,
reaction: reaction.type,
})}
class="reactions-bg">
${reaction.type} ${reaction.qty}
</span>`
})}
</div>
</div> </div>
<div class="message-reactions">
${reactions.map((reaction)=> {
return html`
<span
@click=${() => this.sendMessage({
type: 'reaction',
editedMessageObj: this.messageObj,
reaction: reaction.type,
})}
class="reactions-bg">
${reaction.type} ${reaction.qty}
</span>`
})}
</div>
<chat-menu
tabindex="0"
class="chat-hover"
style=${this.showBlockAddressIcon && "display: block"}
toblockaddress="${this.messageObj.sender}"
.showPrivateMessageModal=${() => this.showPrivateMessageModal()}
.showBlockUserModal=${() => this.showBlockUserModal()}
.showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
.showBlockAddressIcon=${this.showBlockAddressIcon}
.originalMessage=${{...this.messageObj, message}}
.setRepliedToMessageObj=${this.setRepliedToMessageObj}
.setEditedMessageObj=${this.setEditedMessageObj}
.focusChatEditor=${this.focusChatEditor}
.myAddress=${this.myAddress}
@blur=${() => this.showBlockIconFunc(false)}
.sendMessage=${this.sendMessage}
>
</chat-menu>
</div> </div>
</div> </div>
</li> </li>