forked from Qortal/qortal-ui
Merge pull request #1 from JustinWesleyFerrari/feature/replies
Feature/replies
This commit is contained in:
JustinWesleyFerrari
GitHub
commit
e10256eb75
@ -501,7 +501,8 @@
|
||||
"bcchange7": "MENU",
|
||||
"bcchange8": "Copy Address",
|
||||
"bcchange9": "Private Message",
|
||||
"bcchange10":"More"
|
||||
"bcchange10": "More",
|
||||
"bcchange11": "Reply"
|
||||
},
|
||||
"grouppage": {
|
||||
"gchange1": "Qortal Groups",
|
||||
|
||||
@ -46,6 +46,7 @@ class ChatPage extends LitElement {
|
||||
hideNewMesssageBar: { attribute: false },
|
||||
chatEditorPlaceholder: { type: String },
|
||||
messagesRendered: { type: Array },
|
||||
repliedToMessageObj: { type: Object },
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,12 +64,11 @@ class ChatPage extends LitElement {
|
||||
|
||||
.chat-text-area .typing-area {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 98%;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid var(--black);
|
||||
border-radius: 10px;
|
||||
@ -90,10 +90,67 @@ class ChatPage extends LitElement {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.repliedTo-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px 8px 10px;
|
||||
}
|
||||
|
||||
.repliedTo-subcontainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.repliedTo-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
|
||||
.senderName {
|
||||
margin: 0;
|
||||
color: var(--mdc-theme-primary);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.original-message {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.reply-icon {
|
||||
width: 20px;
|
||||
color: var(--mdc-theme-primary);
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
color: #676b71;
|
||||
width: 25px;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.close-icon:hover {
|
||||
cursor: pointer;
|
||||
color: #494c50;
|
||||
}
|
||||
|
||||
.chat-text-area .typing-area .chatbar {
|
||||
width: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.chat-text-area .typing-area .emoji-button {
|
||||
width: 45px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
padding-top: 4px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
@ -135,6 +192,7 @@ class ChatPage extends LitElement {
|
||||
this.isPasteMenuOpen = false
|
||||
this.chatEditorPlaceholder = this.renderPlaceholder()
|
||||
this.messagesRendered = []
|
||||
this.repliedToMessageObj = null
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -142,6 +200,24 @@ class ChatPage extends LitElement {
|
||||
${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)}
|
||||
<div class="chat-text-area">
|
||||
<div class="typing-area">
|
||||
${this.repliedToMessageObj && html`
|
||||
<div class="repliedTo-container">
|
||||
<div class="repliedTo-subcontainer">
|
||||
<vaadin-icon class="reply-icon" icon="vaadin:reply" slot="icon"></vaadin-icon>
|
||||
<div class="repliedTo-message">
|
||||
<p class="senderName">${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}</p>
|
||||
<p class="original-message">${this.repliedToMessageObj.decodedMessage}</p>
|
||||
</div>
|
||||
</div>
|
||||
<vaadin-icon
|
||||
class="close-icon"
|
||||
icon="vaadin:close-big"
|
||||
slot="icon"
|
||||
@click=${() => this.closeRepliedToContainer()}
|
||||
></vaadin-icon>
|
||||
</div>
|
||||
`}
|
||||
<div class="chatbar">
|
||||
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
|
||||
<iframe class="chat-editor" id="_chatEditorDOM" tabindex="-1"></iframe>
|
||||
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
|
||||
@ -149,6 +225,7 @@ class ChatPage extends LitElement {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
@ -281,7 +358,17 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
renderChatScroller(initialMessages) {
|
||||
return html`<chat-scroller .initialMessages=${initialMessages} .messages=${this.messagesRendered} .emojiPicker=${this.emojiPicker} .escapeHTML=${escape} .getOldMessage=${this.getOldMessage} > </chat-scroller>`
|
||||
return html`
|
||||
<chat-scroller
|
||||
.initialMessages=${initialMessages}
|
||||
.messages=${this.messagesRendered}
|
||||
.emojiPicker=${this.emojiPicker}
|
||||
.escapeHTML=${escape}
|
||||
.getOldMessage=${this.getOldMessage}
|
||||
.setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
|
||||
.focusChatEditor=${() => this.focusChatEditor()}
|
||||
>
|
||||
</chat-scroller>`
|
||||
}
|
||||
|
||||
async getUpdateComplete() {
|
||||
@ -385,6 +472,23 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
async setRepliedToMessageObj(messageObj) {
|
||||
console.log(messageObj, "Replied To Message Object Here")
|
||||
this.repliedToMessageObj = {...messageObj};
|
||||
this.requestUpdate();
|
||||
await this.updateComplete;
|
||||
console.log(this.repliedToMessageObj);
|
||||
}
|
||||
|
||||
closeRepliedToContainer() {
|
||||
this.repliedToMessageObj = null;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
focusChatEditor() {
|
||||
this.chatEditor.focus();
|
||||
}
|
||||
|
||||
/**
|
||||
* New Message Template implementation, takes in a message object.
|
||||
* @param { Object } messageObj
|
||||
@ -436,10 +540,6 @@ class ChatPage extends LitElement {
|
||||
async renderNewMessage(newMessage) {
|
||||
|
||||
const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement');
|
||||
const downObserver = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('downObserver');
|
||||
const li = document.createElement('li');
|
||||
li.innerHTML = this.chatMessageTemplate(newMessage);
|
||||
li.id = newMessage.signature;
|
||||
|
||||
if (newMessage.sender === this.selectedAddress.address) {
|
||||
|
||||
@ -642,6 +742,13 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
_sendMessage() {
|
||||
// have params to determine if it's a reply or not
|
||||
// have variable to determine if it's a response, holds signature in constructor
|
||||
// need original message signature
|
||||
// need whole original message object, transform the data and put it in local storage
|
||||
// create new var called repliedToData and use that to modify the UI
|
||||
// find specific object property in local
|
||||
|
||||
this.isLoading = true;
|
||||
this.chatEditor.disable();
|
||||
const messageText = this.mirrorChatInput.value;
|
||||
@ -658,8 +765,24 @@ class ChatPage extends LitElement {
|
||||
this.chatEditor.enable();
|
||||
let err1string = get("chatpage.cchange24");
|
||||
parentEpml.request('showSnackBar', `${err1string}`);
|
||||
} else if (this.repliedToMessageObj) {
|
||||
const messageObject = {
|
||||
messageText,
|
||||
images: [''],
|
||||
repliedTo: this.repliedToMessageObj.signature,
|
||||
version: 1
|
||||
}
|
||||
const stringifyMessageObject = JSON.stringify(messageObject)
|
||||
this.sendMessage(stringifyMessageObject);
|
||||
} else {
|
||||
this.sendMessage(trimmedMessage);
|
||||
const messageObject = {
|
||||
messageText,
|
||||
images: [''],
|
||||
repliedTo: '',
|
||||
version: 1
|
||||
}
|
||||
const stringifyMessageObject = JSON.stringify(messageObject)
|
||||
this.sendMessage(stringifyMessageObject);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -17,6 +17,10 @@ export const chatStyles = css`
|
||||
--mdc-theme-secondary: var(--mdc-theme-primary);
|
||||
}
|
||||
|
||||
* :focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: var(--scrollbarBG);
|
||||
}
|
||||
@ -68,7 +72,7 @@ export const chatStyles = css`
|
||||
.message-data {
|
||||
width: 92%;
|
||||
margin-bottom: 15px;
|
||||
margin-left: 50px;
|
||||
margin-left: 55px;
|
||||
}
|
||||
|
||||
.message-data-name {
|
||||
@ -89,48 +93,87 @@ export const chatStyles = css`
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.chat-bubble-container {
|
||||
display:flex;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.message-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
background-color: whitesmoke;
|
||||
border-radius: 5px;
|
||||
padding: 10px 15px;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.original-message {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: black;
|
||||
line-height: 19px;
|
||||
overflow-wrap: break-word;
|
||||
user-select: text;
|
||||
font-size: 16px;
|
||||
width: 90%;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(209, 209, 209, 0.79);
|
||||
padding: 8px 5px 8px 25px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.original-message:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 10px;
|
||||
height: 75%;
|
||||
width: 2.6px;
|
||||
background-color: var(--mdc-theme-primary);
|
||||
}
|
||||
|
||||
.original-message-sender {
|
||||
margin: 0 0 5px 0;
|
||||
color: var(--mdc-theme-primary);
|
||||
}
|
||||
|
||||
.replied-message {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.message {
|
||||
color: black;
|
||||
padding: 12px 10px;
|
||||
line-height: 19px;
|
||||
white-space: pre-line;
|
||||
word-wrap: break-word;
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
font-size: 16px;
|
||||
border-radius: 7px;
|
||||
margin-bottom: 20px;
|
||||
width: 90%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message:after {
|
||||
bottom: 100%;
|
||||
left: 93%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
white-space: pre-line;
|
||||
word-wrap: break-word;
|
||||
pointer-events: none;
|
||||
border-bottom-color: #ddd;
|
||||
border-width: 10px;
|
||||
margin-left: -10px;
|
||||
.message-data-avatar {
|
||||
margin: 0px 8px 3px 3px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.message-parent:hover .chat-hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.message-parent:hover .message{
|
||||
.message-parent:hover .message-container {
|
||||
filter:brightness(0.90);
|
||||
}
|
||||
|
||||
@ -138,7 +181,7 @@ export const chatStyles = css`
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -38px;
|
||||
left: 88.2%;
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
@ -154,21 +197,11 @@ export const chatStyles = css`
|
||||
border: 2px solid #eeeeee;
|
||||
}
|
||||
|
||||
.my-message:after {
|
||||
border-bottom-color: #d1d1d1;
|
||||
left: 7%;
|
||||
}
|
||||
|
||||
.other-message {
|
||||
background: #f1f1f1;
|
||||
border: 2px solid #dedede;
|
||||
}
|
||||
|
||||
.other-message:after {
|
||||
border-bottom-color: #f1f1f1;
|
||||
left: 7%;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
@ -211,6 +244,10 @@ export const chatStyles = css`
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
@ -220,6 +257,7 @@ export const chatStyles = css`
|
||||
}
|
||||
|
||||
.menu-icon:hover {
|
||||
border-radius: 5px;
|
||||
background-color: #dad9d9;
|
||||
transition: all 0.1s ease-in-out;
|
||||
cursor: pointer;
|
||||
@ -231,11 +269,12 @@ export const chatStyles = css`
|
||||
|
||||
.tooltip:before {
|
||||
content: attr(data-text);
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -47px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 90px;
|
||||
width: auto;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background:#fff;
|
||||
@ -244,7 +283,8 @@ export const chatStyles = css`
|
||||
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
||||
font-size: 12px;
|
||||
z-index: 5;
|
||||
display: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tooltip:hover:before {
|
||||
@ -267,9 +307,9 @@ export const chatStyles = css`
|
||||
}
|
||||
|
||||
.block-user-container {
|
||||
display: block;
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: -48px;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
.block-user {
|
||||
@ -277,7 +317,7 @@ export const chatStyles = css`
|
||||
border: 1px solid rgb(218, 217, 217);
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
width: 90px;
|
||||
height: 32px;
|
||||
padding: 3px 8px;
|
||||
box-shadow: rgba(77, 77, 82, 0.2) 0px 7px 29px 0px;
|
||||
|
||||
@ -24,7 +24,9 @@ class ChatScroller extends LitElement {
|
||||
escapeHTML: { attribute: false },
|
||||
initialMessages: { type: Array }, // First set of messages to load.. 15 messages max ( props )
|
||||
messages: { type: Array },
|
||||
hideMessages: { type: Array }
|
||||
hideMessages: { type: Array },
|
||||
setRepliedToMessageObj: { type: Function },
|
||||
focusChatEditor: { type: Function }
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,7 +49,16 @@ class ChatScroller extends LitElement {
|
||||
${repeat(
|
||||
this.messages,
|
||||
(message) => message.reference,
|
||||
(message) => html`<message-template .emojiPicker=${this.emojiPicker} .escapeHTML=${this.escapeHTML} .messageObj=${message} .hideMessages=${this.hideMessages}></message-template>`
|
||||
(message) => html`
|
||||
<message-template
|
||||
.emojiPicker=${this.emojiPicker}
|
||||
.escapeHTML=${this.escapeHTML}
|
||||
.messageObj=${message}
|
||||
.hideMessages=${this.hideMessages}
|
||||
.setRepliedToMessageObj=${this.setRepliedToMessageObj}
|
||||
.focusChatEditor=${this.focusChatEditor}
|
||||
>
|
||||
</message-template>`
|
||||
)}
|
||||
<div id='downObserver'></div>
|
||||
<div class='last-message-ref'>
|
||||
@ -137,7 +148,9 @@ class MessageTemplate extends LitElement {
|
||||
hideMessages: { type: Array },
|
||||
openDialogPrivateMessage: {type: Boolean},
|
||||
openDialogBlockUser: {type: Boolean},
|
||||
showBlockAddressIcon: { type: Boolean }
|
||||
showBlockAddressIcon: { type: Boolean },
|
||||
setRepliedToMessageObj: { type: Function },
|
||||
focusChatEditor: { type: Function },
|
||||
}
|
||||
}
|
||||
|
||||
@ -181,7 +194,28 @@ class MessageTemplate extends LitElement {
|
||||
|
||||
render() {
|
||||
const hidemsg = this.hideMessages
|
||||
let message = ""
|
||||
let repliedToData = null
|
||||
try {
|
||||
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage)
|
||||
message = parsedMessageObj.messageText
|
||||
repliedToData = {
|
||||
"timestamp": 1663419371885,
|
||||
"txGroupId": 0,
|
||||
"reference": "5LuncmE2RsGVdQizkZLnjgqU8QozR2hHhkiSujUgywEfqAvm6RW4xZ7c9XjuMnb76bNmX2ntRNhnBF4ErvawM1dW",
|
||||
"senderPublicKey": "xmZXCYzGU2t3S6Ehm2zp4pVm83q9d143NKRgmiU1dXW",
|
||||
"sender": "Qj9aLrdK2FLQY6YssRQUkDmXNJCko2zF7e",
|
||||
"senderName": "GiseleH",
|
||||
"data": "3JLP9vViLoRPJ1Pqt2uC6Ufqf7wgTrs4HuV4Ltgwdnf5ekcBCCf5MTm2Sg3sXHeuVnCpoJAyVdqgAbr7tcBoq3soNZTjteusXjjW3NSMNcJEAadaTYC68xGXGmvK1jRyioPqGaKiXKzR2jPPRV5SyiPd66788Z2Rqt3VQB98rvronX5w5tE9UUWRor6bmMeVL3dj7fHYhLPPE5VBpCS9Eskti7vnTgDUQxnjfr",
|
||||
"isText": true,
|
||||
"isEncrypted": false,
|
||||
"signature": "3jWvhQKSDt4Zqeup5sLfyNksVVphFW5iF11PsTZzXQLCCPH9pDMqwNoKE2oe3DPYz47VbbLgJaAWMVA44z9dUr9U",
|
||||
"decodedMessage": "for TrentB512 who computer crashed your registered name in qortal for your level 3 account was TrentB512 https://exqlorer.com/address/Qf58otnEXeoyvD7dvYmfEGpQ64oMD3uvwM"
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
message = this.messageObj.decodedMessage
|
||||
}
|
||||
let avatarImg = ''
|
||||
let nameMenu = ''
|
||||
let levelFounder = ''
|
||||
@ -209,9 +243,21 @@ class MessageTemplate extends LitElement {
|
||||
<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" style="width:42px; height:42px; ${this.messageObj.sender === this.myAddress ? "float:left;" : "float:left;"} margin:3px;">${avatarImg}</div>
|
||||
<div class="message-container">
|
||||
<div id="messageContent" class="message ${this.messageObj.sender === this.myAddress ? "my-message float-left" : "other-message float-left"}">${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(this.messageObj.decodedMessage)))}</div>
|
||||
<div class="message-data-avatar">
|
||||
${avatarImg}
|
||||
</div>
|
||||
<div class="message-container ${this.messageObj.sender === this.myAddress ? "my-message" : "other-message"}">
|
||||
${repliedToData && html`
|
||||
<div
|
||||
class="original-message"
|
||||
style=${this.messageObj.sender === this.myAddress && "background-color: rgb(179 179 179 / 79%)"}>
|
||||
<p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p>
|
||||
<p class="replied-message">${repliedToData.decodedMessage}</p>
|
||||
</div>
|
||||
`}
|
||||
<div id="messageContent" class="message">
|
||||
${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))}
|
||||
</div>
|
||||
<chat-menu
|
||||
tabindex="0"
|
||||
class="chat-hover"
|
||||
@ -221,6 +267,9 @@ class MessageTemplate extends LitElement {
|
||||
.showBlockUserModal=${() => this.showBlockUserModal()}
|
||||
.showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
|
||||
.showBlockAddressIcon=${this.showBlockAddressIcon}
|
||||
.originalMessage=${this.messageObj}
|
||||
.setRepliedToMessageObj=${this.setRepliedToMessageObj}
|
||||
.focusChatEditor=${this.focusChatEditor}
|
||||
@blur=${() => this.showBlockIconFunc(false)}
|
||||
>
|
||||
</chat-menu>
|
||||
@ -250,7 +299,10 @@ class ChatMenu extends LitElement {
|
||||
showBlockUserModal: {type: Function},
|
||||
toblockaddress: { type: String, attribute: true },
|
||||
showBlockIconFunc: {type: Function},
|
||||
showBlockAddressIcon: {type: Boolean}
|
||||
showBlockAddressIcon: {type: Boolean},
|
||||
originalMessage: {type: Object},
|
||||
setRepliedToMessageObj: { type: Function },
|
||||
focusChatEditor: {type: Function},
|
||||
}
|
||||
}
|
||||
|
||||
@ -278,13 +330,22 @@ class ChatMenu extends LitElement {
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="container" style=${this.showBlockAddressIcon && "width: 70px" }>
|
||||
<div class="container">
|
||||
<div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange9")}" @click="${() => this.showPrivateMessageModal()}">
|
||||
<vaadin-icon icon="vaadin:paperplane" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
<div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange8")}" @click="${() => this.copyToClipboard(this.toblockaddress)}">
|
||||
<vaadin-icon icon="vaadin:copy" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
<div
|
||||
class="menu-icon tooltip"
|
||||
data-text="${translate("blockpage.bcchange11")}"
|
||||
@click="${() => {
|
||||
this.setRepliedToMessageObj(this.originalMessage);
|
||||
this.focusChatEditor();
|
||||
}}">
|
||||
<vaadin-icon icon="vaadin:reply" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
<div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange10")}" @click="${() => this.showBlockIconFunc(true)}">
|
||||
<vaadin-icon icon="vaadin:ellipsis-dots-h" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user