forked from Qortal/qortal-ui
Started Chat UI Refactor
This commit is contained in:
Justin Ferrari
parent
353cacb789
commit
5cfa092017
@ -8,6 +8,8 @@ html {
|
||||
--border2: #dde2e8;
|
||||
--copybutton: #707584;
|
||||
--chat-bubble: #efefef73;
|
||||
--chat-bubble-bg: #f3f3f3;
|
||||
--chat-bubble-msg-color: #080808;
|
||||
--sectxt: #576374;
|
||||
--vdicon: #707b8a;
|
||||
--tradehead: #6a6c75;
|
||||
@ -45,6 +47,8 @@ html[theme="dark"] {
|
||||
--border2: #0b305e;
|
||||
--copybutton: #d0d6de;
|
||||
--chat-bubble: #9694941a;
|
||||
--chat-bubble-bg: #2d3749;
|
||||
--chat-bubble-msg-color: #ffffff;
|
||||
--sectxt: #bbc3cd;
|
||||
--vdicon: #d0d6de;
|
||||
--tradehead: #008fd5;
|
||||
|
||||
@ -8,6 +8,8 @@ html {
|
||||
--border2: #dde2e8;
|
||||
--copybutton: #707584;
|
||||
--chat-bubble: #efefef73;
|
||||
--chat-bubble-bg: #f3f3f3;
|
||||
--chat-bubble-msg-color: #080808;
|
||||
--sectxt: #576374;
|
||||
--vdicon: #707b8a;
|
||||
--tradehead: #6a6c75;
|
||||
@ -44,6 +46,8 @@ html[theme="dark"] {
|
||||
--border2: #0b305e;
|
||||
--copybutton: #d0d6de;
|
||||
--chat-bubble: #9694941a;
|
||||
--chat-bubble-bg: #2d3749;
|
||||
--chat-bubble-msg-color: #ffffff;
|
||||
--sectxt: #bbc3cd;
|
||||
--vdicon: #d0d6de;
|
||||
--tradehead: #008fd5;
|
||||
|
||||
@ -129,6 +129,7 @@ class ChatPage extends LitElement {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
@ -137,7 +138,7 @@ class ChatPage extends LitElement {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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="original-message">${this.repliedToMessageObj.message}</p>
|
||||
</div>
|
||||
<vaadin-icon
|
||||
class="close-icon"
|
||||
icon="vaadin:close-big"
|
||||
slot="icon"
|
||||
@click=${() => this.closeRepliedToContainer()}
|
||||
></vaadin-icon>
|
||||
</div>
|
||||
<vaadin-icon
|
||||
class="close-icon"
|
||||
icon="vaadin:close-big"
|
||||
slot="icon"
|
||||
@click=${() => this.closeRepliedToContainer()}
|
||||
></vaadin-icon>
|
||||
</div>
|
||||
`}
|
||||
${this.editedMessageObj && html`
|
||||
@ -655,35 +656,39 @@ class ChatPage extends LitElement {
|
||||
<p class="senderName">${translate("chatpage.cchange25")}</p>
|
||||
<p class="original-message">${this.editedMessageObj.message}</p>
|
||||
</div>
|
||||
<vaadin-icon
|
||||
class="close-icon"
|
||||
icon="vaadin:close-big"
|
||||
slot="icon"
|
||||
@click=${() => this.closeEditMessageContainer()}
|
||||
></vaadin-icon>
|
||||
</div>
|
||||
<vaadin-icon
|
||||
class="close-icon"
|
||||
icon="vaadin:close-big"
|
||||
slot="icon"
|
||||
@click=${() => this.closeEditMessageContainer()}
|
||||
></vaadin-icon>
|
||||
</div>
|
||||
`}
|
||||
<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="file-picker-container">
|
||||
<vaadin-icon
|
||||
class="paperclip-icon"
|
||||
icon="vaadin:paperclip"
|
||||
slot="icon"
|
||||
@click=${() => this.closeEditMessageContainer()}
|
||||
>
|
||||
</vaadin-icon>
|
||||
<div class="file-picker-input-container">
|
||||
<input
|
||||
.value="${this.imageFile}"
|
||||
@change="${e => this.insertImage(e.target.files[0])}"
|
||||
class="file-picker-input" type="file" name="myImage" accept="image/*" />
|
||||
${this.accountName && (
|
||||
html`
|
||||
<div class="file-picker-container">
|
||||
<vaadin-icon
|
||||
class="paperclip-icon"
|
||||
icon="vaadin:paperclip"
|
||||
slot="icon"
|
||||
@click=${() => this.closeEditMessageContainer()}
|
||||
>
|
||||
</vaadin-icon>
|
||||
<div class="file-picker-input-container">
|
||||
<input
|
||||
.value="${this.imageFile}"
|
||||
@change="${e => this.insertImage(e.target.files[0])}"
|
||||
class="file-picker-input" type="file" name="myImage" accept="image/*" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
<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>
|
||||
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
|
||||
${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.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
|
||||
this.chatMessageInput = this.shadowRoot.getElementById('_chatEditorDOM');
|
||||
this.accountName = window.parent.reduxStore.getState().app.accountInfo.names[0];
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (!this.chatEditor.content.body.matches(':focus')) {
|
||||
// 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
|
||||
const userName = outSideMsg.name
|
||||
const identifier = outSideMsg.identifier
|
||||
@ -1530,19 +1536,18 @@ class ChatPage extends LitElement {
|
||||
return blob;
|
||||
}
|
||||
const blob = b64toBlob(str, 'image/png');
|
||||
|
||||
await new Promise(resolve => {
|
||||
new Compressor( blob, {
|
||||
new Compressor(blob, {
|
||||
quality: 0.6,
|
||||
maxWidth: 500,
|
||||
success(result){
|
||||
console.log({result})
|
||||
success(result) {
|
||||
console.log({result});
|
||||
const file = new File([result], "name", {
|
||||
type: 'image/png'
|
||||
});
|
||||
console.log({file})
|
||||
compressedFile = file
|
||||
resolve()
|
||||
console.log({file});
|
||||
compressedFile = file;
|
||||
resolve();
|
||||
},
|
||||
error(err) {
|
||||
console.log(err.message);
|
||||
@ -1605,7 +1610,7 @@ class ChatPage extends LitElement {
|
||||
const identifier = `qchat_${id}`;
|
||||
let compressedFile = '';
|
||||
await new Promise(resolve => {
|
||||
new Compressor( outSideMsg.imageFile, {
|
||||
new Compressor(outSideMsg.imageFile, {
|
||||
quality: .6,
|
||||
maxWidth: 500,
|
||||
success(result){
|
||||
@ -1620,7 +1625,6 @@ class ChatPage extends LitElement {
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
const fileSize = compressedFile.size;
|
||||
if (fileSize > 5000000) {
|
||||
parentEpml.request('showSnackBar', get("chatpage.cchange26"));
|
||||
@ -1832,8 +1836,6 @@ class ChatPage extends LitElement {
|
||||
worker.postMessage({chatBytes, path, difficulty});
|
||||
|
||||
worker.onmessage = e => {
|
||||
|
||||
|
||||
worker.terminate()
|
||||
chatBytesArray = e.data.chatBytesArray
|
||||
nonce = e.data.nonce
|
||||
|
||||
@ -109,21 +109,43 @@ export const chatStyles = css`
|
||||
|
||||
.message-container {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.message-subcontainer {
|
||||
.message-subcontainer1 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.message-subcontainer2 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
background-color: #f3f3f3;
|
||||
background-color: var(--chat-bubble-bg);
|
||||
flex-grow: 0;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
padding: 10px 15px;
|
||||
padding: 12px 15px;
|
||||
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 {
|
||||
@ -170,7 +192,7 @@ export const chatStyles = css`
|
||||
}
|
||||
|
||||
.message {
|
||||
color: black;
|
||||
color: var(--chat-bubble-msg-color);
|
||||
line-height: 19px;
|
||||
word-wrap: break-word;
|
||||
-webkit-user-select: text;
|
||||
@ -178,12 +200,12 @@ export const chatStyles = css`
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
font-size: 16px;
|
||||
width: 90%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message-data-avatar {
|
||||
margin: 0px 8px 3px 3px;
|
||||
margin: 0px 10px 0px 3px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
float: left;
|
||||
@ -207,7 +229,7 @@ export const chatStyles = css`
|
||||
.chat-hover {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -38px;
|
||||
top: -25px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
|
||||
@ -76,66 +76,27 @@ class ChatScroller extends LitElement {
|
||||
return html`
|
||||
<ul id="viewElement" class="chat-list clearfix">
|
||||
<div id="upObserver"></div>
|
||||
${formattedMessages.map((formattedMessage)=> {
|
||||
|
||||
return repeat(
|
||||
${formattedMessages.map((formattedMessage) => {
|
||||
return repeat(
|
||||
formattedMessage.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}
|
||||
?isSingleMessageInGroup=${formattedMessage.messages.length > 1}
|
||||
>
|
||||
</message-template>`
|
||||
)
|
||||
(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}
|
||||
?isSingleMessageInGroup=${formattedMessage.messages.length > 1}
|
||||
?isLastMessageInGroup=${indexMessage === formattedMessage.messages.length - 1}
|
||||
>
|
||||
</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 class='last-message-ref'>
|
||||
<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 },
|
||||
focusChatEditor: { type: Function },
|
||||
sendMessage: { type: Function },
|
||||
openDialogImage: {type: Function},
|
||||
isImageLoaded: {type: Boolean},
|
||||
isFirstMessage: {type: Boolean},
|
||||
isSingleMessageInGroup: {type: Boolean}
|
||||
openDialogImage: { type: Function },
|
||||
isImageLoaded: { type: Boolean },
|
||||
isFirstMessage: { type: Boolean },
|
||||
isSingleMessageInGroup: { type: Boolean },
|
||||
isLastMessageInGroup: { type: Boolean },
|
||||
}
|
||||
}
|
||||
|
||||
@ -253,6 +215,7 @@ class MessageTemplate extends LitElement {
|
||||
this.isImageLoaded = false
|
||||
this.isFirstMessage = false
|
||||
this.isSingleMessageInGroup = false
|
||||
this.isLastMessageInGroup = false
|
||||
}
|
||||
|
||||
static styles = [chatStyles]
|
||||
@ -284,22 +247,22 @@ class MessageTemplate extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
console.log('isFirst', this.isFirstMessage)
|
||||
const hidemsg = this.hideMessages
|
||||
let message = ""
|
||||
let reactions = []
|
||||
let repliedToData = null
|
||||
let image = null
|
||||
let isImageDeleted = false
|
||||
console.log('isFirst', this.isFirstMessage);
|
||||
console.log("is single message in group", this.isSingleMessageInGroup);
|
||||
const hidemsg = this.hideMessages;
|
||||
let message = "";
|
||||
let reactions = [];
|
||||
let repliedToData = null;
|
||||
let image = null;
|
||||
let isImageDeleted = false;
|
||||
try {
|
||||
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage);
|
||||
message = parsedMessageObj.messageText;
|
||||
repliedToData = this.messageObj.repliedToData;
|
||||
isImageDeleted = parsedMessageObj.isImageDeleted;
|
||||
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];
|
||||
}
|
||||
} 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;" />`
|
||||
}
|
||||
|
||||
const createImage=(imageUrl)=>{
|
||||
const imageHTMLRes = new Image();
|
||||
const createImage = (imageUrl) => {
|
||||
const imageHTMLRes = new Image();
|
||||
imageHTMLRes.src = imageUrl;
|
||||
imageHTMLRes.style= "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer";
|
||||
imageHTMLRes.onclick= () => {
|
||||
this.openDialogImage = true
|
||||
this.openDialogImage = true;
|
||||
}
|
||||
imageHTMLRes.onload = ()=> {
|
||||
this.isImageLoaded = true
|
||||
imageHTMLRes.onload = () => {
|
||||
this.isImageLoaded = true;
|
||||
}
|
||||
imageHTMLRes.onerror = ()=> {
|
||||
|
||||
console.log('inputRef', this.imageFetches)
|
||||
imageHTMLRes.onerror = () => {
|
||||
console.log('inputRef', this.imageFetches);
|
||||
if (this.imageFetches < 4) {
|
||||
setTimeout(()=> {
|
||||
setTimeout(() => {
|
||||
this.imageFetches = this.imageFetches + 1;
|
||||
imageHTMLRes.src = imageUrl;
|
||||
}, 500);
|
||||
@ -379,71 +341,112 @@ class MessageTemplate extends LitElement {
|
||||
|
||||
|
||||
return hideit ? html`<li class="clearfix"></li>` : html`
|
||||
<li class="clearfix message-parent">
|
||||
<div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}">
|
||||
<span class="message-data-name">${nameMenu}</span>
|
||||
<span class="message-data-level">${levelFounder}</span>
|
||||
<span class="message-data-time"><message-time timestamp=${this.messageObj.timestamp}></message-time></span>
|
||||
</div>
|
||||
<div class="message-data-avatar">
|
||||
${avatarImg}
|
||||
</div>
|
||||
<div class="message-container">
|
||||
<div class="message-subcontainer">
|
||||
${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>
|
||||
<li
|
||||
class="clearfix message-parent"
|
||||
style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false && reactions.length === 0) ?
|
||||
'padding-bottom: 0;'
|
||||
: null}
|
||||
${this.isFirstMessage && 'margin-top: 20px;'}">
|
||||
${this.isFirstMessage ? (
|
||||
html`
|
||||
<div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}">
|
||||
<span class="message-data-name">${nameMenu}</span>
|
||||
<span class="message-data-level">${levelFounder}</span>
|
||||
<span class="message-data-time"><message-time timestamp=${this.messageObj.timestamp}></message-time></span>
|
||||
</div>
|
||||
`
|
||||
) : null}
|
||||
<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 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
|
||||
class="${`message-subcontainer2
|
||||
${((this.isFirstMessage === true && this.isSingleMessageInGroup === false) ||
|
||||
(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) &&
|
||||
'message-triangle'}`}"
|
||||
style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) ? 'margin-bottom: 0;' : null}
|
||||
${(this.isFirstMessage === true && this.isSingleMessageInGroup === false && this.isLastMessageInGroup === false)
|
||||
? 'border-radius: 25px 25px 25px 0px;'
|
||||
: (this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false)
|
||||
? 'border-radius: 8px 25px 25px 8px;'
|
||||
: (this.isFirstMessage === true && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false)
|
||||
? 'border-radius: 27px 25px 25px 12px;'
|
||||
: (this.isSingleMessageInGroup === true && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true) ?
|
||||
'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>
|
||||
<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 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>
|
||||
</li>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user