|
|
@ -8,6 +8,8 @@ import { Epml } from "../../../epml"; |
|
|
|
import './LevelFounder.js'; |
|
|
|
import './LevelFounder.js'; |
|
|
|
import './NameMenu.js'; |
|
|
|
import './NameMenu.js'; |
|
|
|
import './ChatModals.js'; |
|
|
|
import './ChatModals.js'; |
|
|
|
|
|
|
|
import './WrapperModal'; |
|
|
|
|
|
|
|
import './TipUser' |
|
|
|
import '@vaadin/icons'; |
|
|
|
import '@vaadin/icons'; |
|
|
|
import '@vaadin/icon'; |
|
|
|
import '@vaadin/icon'; |
|
|
|
import '@material/mwc-button'; |
|
|
|
import '@material/mwc-button'; |
|
|
@ -36,8 +38,11 @@ class ChatScroller extends LitElement { |
|
|
|
isLoadingMessages: { type: Boolean}, |
|
|
|
isLoadingMessages: { type: Boolean}, |
|
|
|
setIsLoadingMessages: {attribute: false}, |
|
|
|
setIsLoadingMessages: {attribute: false}, |
|
|
|
chatId: { type: String }, |
|
|
|
chatId: { type: String }, |
|
|
|
|
|
|
|
chatEditor: { type: Object }, |
|
|
|
setForwardProperties: { attribute: false }, |
|
|
|
setForwardProperties: { attribute: false }, |
|
|
|
setOpenPrivateMessage: { attribute: false }, |
|
|
|
setOpenPrivateMessage: { attribute: false }, |
|
|
|
|
|
|
|
openTipUser: { type: Boolean }, |
|
|
|
|
|
|
|
userName: { type: String } |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -48,12 +53,17 @@ class ChatScroller extends LitElement { |
|
|
|
this.messages = [] |
|
|
|
this.messages = [] |
|
|
|
this._upObserverhandler = this._upObserverhandler.bind(this) |
|
|
|
this._upObserverhandler = this._upObserverhandler.bind(this) |
|
|
|
this._downObserverHandler = this._downObserverHandler.bind(this) |
|
|
|
this._downObserverHandler = this._downObserverHandler.bind(this) |
|
|
|
|
|
|
|
this.setOpenTipUser = this.setOpenTipUser.bind(this) |
|
|
|
|
|
|
|
this.setUserName = this.setUserName.bind(this) |
|
|
|
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address |
|
|
|
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address |
|
|
|
this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")
|
|
|
|
this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")
|
|
|
|
|
|
|
|
this.openTipUser = false; |
|
|
|
|
|
|
|
this.userName = ""; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
render() { |
|
|
|
|
|
|
|
console.log(6, "chat scroller here"); |
|
|
|
|
|
|
|
console.log(this.openTipUser, "openTipUser here"); |
|
|
|
let formattedMessages = this.messages.reduce((messageArray, message, index) => { |
|
|
|
let formattedMessages = this.messages.reduce((messageArray, message, index) => { |
|
|
|
const lastGroupedMessage = messageArray[messageArray.length - 1]; |
|
|
|
const lastGroupedMessage = messageArray[messageArray.length - 1]; |
|
|
|
let timestamp; |
|
|
|
let timestamp; |
|
|
@ -117,12 +127,27 @@ class ChatScroller extends LitElement { |
|
|
|
.setToggledMessage=${this.setToggledMessage} |
|
|
|
.setToggledMessage=${this.setToggledMessage} |
|
|
|
.setForwardProperties=${this.setForwardProperties} |
|
|
|
.setForwardProperties=${this.setForwardProperties} |
|
|
|
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} |
|
|
|
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} |
|
|
|
> |
|
|
|
.setOpenTipUser=${(val) => this.setOpenTipUser(val)} |
|
|
|
|
|
|
|
.setUserName=${(val) => this.setUserName(val)}> |
|
|
|
</message-template>` |
|
|
|
</message-template>` |
|
|
|
) |
|
|
|
) |
|
|
|
})} |
|
|
|
})} |
|
|
|
<div id='downObserver'></div> |
|
|
|
<div id='downObserver'></div> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<wrapper-modal |
|
|
|
|
|
|
|
.onClickFunc=${() => { |
|
|
|
|
|
|
|
this.openTipUser = false; |
|
|
|
|
|
|
|
this.chatEditor.enable(); |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
style=${this.openTipUser ? "display: block;" : "display: none;"}> |
|
|
|
|
|
|
|
<tip-user |
|
|
|
|
|
|
|
.closeTipUser=${!this.openTipUser} |
|
|
|
|
|
|
|
.chatEditor=${this.chatEditor} |
|
|
|
|
|
|
|
.focusChatEditor=${this.focusChatEditor} |
|
|
|
|
|
|
|
.userName=${this.userName} |
|
|
|
|
|
|
|
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}> |
|
|
|
|
|
|
|
</tip-user> |
|
|
|
|
|
|
|
</wrapper-modal> |
|
|
|
` |
|
|
|
` |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -133,6 +158,9 @@ class ChatScroller extends LitElement { |
|
|
|
if(changedProperties.has('chatId') && changedProperties.get('chatId')){ |
|
|
|
if(changedProperties.has('chatId') && changedProperties.get('chatId')){ |
|
|
|
return true |
|
|
|
return true |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
if(changedProperties.has('openTipUser')){ |
|
|
|
|
|
|
|
return true |
|
|
|
|
|
|
|
} |
|
|
|
// Only update element if prop1 changed.
|
|
|
|
// Only update element if prop1 changed.
|
|
|
|
return changedProperties.has('messages'); |
|
|
|
return changedProperties.has('messages'); |
|
|
|
} |
|
|
|
} |
|
|
@ -148,6 +176,15 @@ class ChatScroller extends LitElement { |
|
|
|
toggledMessage = message; |
|
|
|
toggledMessage = message; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setOpenTipUser(props) { |
|
|
|
|
|
|
|
this.openTipUser = props; |
|
|
|
|
|
|
|
this.chatEditor.disable(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setUserName(props) { |
|
|
|
|
|
|
|
this.userName = props; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
async firstUpdated() { |
|
|
|
async firstUpdated() { |
|
|
|
this.emojiPicker.on('emoji', selection => { |
|
|
|
this.emojiPicker.on('emoji', selection => { |
|
|
|
|
|
|
|
|
|
|
@ -240,10 +277,12 @@ class MessageTemplate extends LitElement { |
|
|
|
isFirstMessage: { type: Boolean }, |
|
|
|
isFirstMessage: { type: Boolean }, |
|
|
|
isSingleMessageInGroup: { type: Boolean }, |
|
|
|
isSingleMessageInGroup: { type: Boolean }, |
|
|
|
isLastMessageInGroup: { type: Boolean }, |
|
|
|
isLastMessageInGroup: { type: Boolean }, |
|
|
|
setToggledMessage: {attribute: false}, |
|
|
|
setToggledMessage: { attribute: false }, |
|
|
|
setForwardProperties: {attribute: false}, |
|
|
|
setForwardProperties: { attribute: false }, |
|
|
|
viewImage: {type: Boolean}, |
|
|
|
viewImage: { type: Boolean }, |
|
|
|
setOpenPrivateMessage : { attribute: false } |
|
|
|
setOpenPrivateMessage : { attribute: false }, |
|
|
|
|
|
|
|
setOpenTipUser: { attribute: false }, |
|
|
|
|
|
|
|
setUserName: { attribute: false } |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -538,6 +577,8 @@ class MessageTemplate extends LitElement { |
|
|
|
.setForwardProperties=${this.setForwardProperties} |
|
|
|
.setForwardProperties=${this.setForwardProperties} |
|
|
|
?firstMessageInChat=${this.messageObj.firstMessageInChat} |
|
|
|
?firstMessageInChat=${this.messageObj.firstMessageInChat} |
|
|
|
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} |
|
|
|
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} |
|
|
|
|
|
|
|
.setOpenTipUser=${(val) => this.setOpenTipUser(val)} |
|
|
|
|
|
|
|
.setUserName=${(val) => this.setUserName(val)} |
|
|
|
>
|
|
|
|
>
|
|
|
|
</chat-menu> |
|
|
|
</chat-menu> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -643,7 +684,9 @@ class ChatMenu extends LitElement { |
|
|
|
sendMessageForward: { attribute: false }, |
|
|
|
sendMessageForward: { attribute: false }, |
|
|
|
setForwardProperties: { attribute: false }, |
|
|
|
setForwardProperties: { attribute: false }, |
|
|
|
firstMessageInChat: { type: Boolean }, |
|
|
|
firstMessageInChat: { type: Boolean }, |
|
|
|
setOpenPrivateMessage: { attribute: false } |
|
|
|
setOpenPrivateMessage: { attribute: false }, |
|
|
|
|
|
|
|
setOpenTipUser: { attribute: false }, |
|
|
|
|
|
|
|
setUserName: { attribute: false }, |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -789,6 +832,19 @@ class ChatMenu extends LitElement { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
` |
|
|
|
` |
|
|
|
) : html`<div></div>`} |
|
|
|
) : html`<div></div>`} |
|
|
|
|
|
|
|
${this.myAddress !== this.originalMessage.sender ? ( |
|
|
|
|
|
|
|
html` |
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} |
|
|
|
|
|
|
|
data-text="${translate("blockpage.bcchange18")}"
|
|
|
|
|
|
|
|
@click=${() => { |
|
|
|
|
|
|
|
this.setOpenTipUser(true); |
|
|
|
|
|
|
|
this.setUserName(this.originalMessage.sender); |
|
|
|
|
|
|
|
}}> |
|
|
|
|
|
|
|
<vaadin-icon icon="vaadin:dollar" slot="icon"></vaadin-icon> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
` |
|
|
|
|
|
|
|
) : html`<div></div>`} |
|
|
|
<div class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} data-text="${translate("blockpage.bcchange10")}" @click="${() => this.showBlockIconFunc(true)}"> |
|
|
|
<div class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} data-text="${translate("blockpage.bcchange10")}" @click="${() => this.showBlockIconFunc(true)}"> |
|
|
|
<vaadin-icon icon="vaadin:ellipsis-dots-h" slot="icon"></vaadin-icon> |
|
|
|
<vaadin-icon icon="vaadin:ellipsis-dots-h" slot="icon"></vaadin-icon> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|