Started private message refactor

This commit is contained in:
Justin Ferrari 2022-12-09 20:55:28 +01:00
parent 0f65a5dfda
commit 74cf2d13a5
3 changed files with 45 additions and 24 deletions

View File

@ -510,7 +510,6 @@ class ChatPage extends LitElement {
constructor() {
super()
this.changeMsgInput = this.changeMsgInput.bind(this)
this.getOldMessage = this.getOldMessage.bind(this)
this._sendMessage = this._sendMessage.bind(this)
this.insertImage = this.insertImage.bind(this)
@ -629,9 +628,7 @@ class ChatPage extends LitElement {
.chatEditor=${this.chatEditor}
.imageFile=${this.imageFile}
.insertImage=${this.insertImage}
.chatMessageInput=${this.chatMessageInput}
.editedMessageObj=${this.editedMessageObj}
.mirrorChatInput=${this.mirrorChatInput}
?isLoading=${this.isLoading}
?isLoadingMessages=${this.isLoadingMessages}
?isEditMessageOpen=${this.isEditMessageOpen}>
@ -726,9 +723,6 @@ class ChatPage extends LitElement {
if (file.type.includes('image')) {
this.imageFile = file;
this.chatEditor.disable();
// this.changeMsgInput('newChat')
// this.initChatEditor();
// this.chatEditor.disable();
return;
}
parentEpml.request('showSnackBar', get("chatpage.cchange28"));
@ -739,13 +733,6 @@ class ChatPage extends LitElement {
this.chatEditor.enable();
}
changeMsgInput(id) {
this.chatEditor.remove()
this.chatMessageInput = this.shadowRoot.getElementById(id);
this.initChatEditor();
}
async firstUpdated() {
window.addEventListener('storage', () => {
const checkLanguage = localStorage.getItem('qortalLanguage');

View File

@ -172,7 +172,7 @@ class ChatTextEditor extends LitElement {
}
return html`
<div
class=${["chatbar-container", this.iframeId === "newChat" ? "chatbar-caption" : ""].join(" ")}
class=${["chatbar-container", (this.iframeId === "newChat" || this.iframeId === "privateMessage") ? "chatbar-caption" : ""].join(" ")}
style="${scrollHeightBool ? 'align-items: flex-end' : "align-items: center"}">
<div class="file-picker-container" @click=${(e) => {
this.preventUserSendingImage(e)
@ -300,7 +300,6 @@ class ChatTextEditor extends LitElement {
}
})
this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
this.chatMessageInput = this.shadowRoot.getElementById(this.iframeId);

View File

@ -34,7 +34,10 @@ class Chat extends LitElement {
balance: { type: Number },
theme: { type: String, reflect: true },
blockedUsers: { type: Array },
blockedUserList: { type: Array }
blockedUserList: { type: Array },
privateMessagePlaceholder: { type: String},
chatEditor: { type: Object },
imageFile: { type: Object }
}
}
@ -321,9 +324,12 @@ class Chat extends LitElement {
this.isLoading = false
this.showNewMesssageBar = this.showNewMesssageBar.bind(this)
this.hideNewMesssageBar = this.hideNewMesssageBar.bind(this)
this.insertImage = this.insertImage.bind(this)
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
this.blockedUsers = []
this.blockedUserList = []
this.privateMessagePlaceholder = ""
this.imageFile = null
}
render() {
@ -362,17 +368,33 @@ class Chat extends LitElement {
<p>${translate("chatpage.cchange6")}</p>
<textarea class="input" ?disabled=${this.isLoading} id="sendTo" placeholder="${translate("chatpage.cchange7")}" rows="1"></textarea>
<p style="margin-bottom:0;">
<textarea class="textarea" @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id="messageBox" placeholder="${translate("chatpage.cchange8")}" rows="1"></textarea>
</p>
<textarea
class="input"
?disabled=${this.isLoading}
id="sendTo"
placeholder="${translate("chatpage.cchange7")}"
rows="1">
</textarea>
<chat-text-editor
id="messageBox"
iframeId="privateMessage"
?hasGlobalEvents=${true}
placeholder="${translate("chatpage.cchange8")}"
_sendMessage=${this._sendMessage}
.setChatEditor=${(editor)=> this.setChatEditor(editor)}
.chatEditor=${this.chatEditor}
.imageFile=${this.imageFile}
.insertImage=${this.insertImage}
?isLoading=${this.isLoading}>
</chat-text-editor>
<mwc-button
?disabled="${this.isLoading}"
slot="primaryAction"
@click=${this._sendMessage}
>
${this.isLoading === false ? this.renderSendText() : html`<paper-spinner-lite active></paper-spinner-lite>`}
${this.isLoading === false ? this.renderSendText() : html`<paper-spinner-lite active></paper-spinner-lite>`}
</mwc-button>
<mwc-button
?disabled="${this.isLoading}"
@ -380,7 +402,7 @@ class Chat extends LitElement {
dialogAction="cancel"
class="red"
>
${translate("general.close")}
${translate("general.close")}
</mwc-button>
</mwc-dialog>
@ -416,7 +438,6 @@ class Chat extends LitElement {
}
firstUpdated() {
this.changeLanguage()
this.changeTheme()
this.getChatBlockedList()
@ -523,6 +544,7 @@ class Chat extends LitElement {
this.config = JSON.parse(c)
})
parentEpml.subscribe('chat_heads', chatHeads => {
console.log("here51");
chatHeads = JSON.parse(chatHeads)
this.getChatHeadFromState(chatHeads)
})
@ -542,6 +564,19 @@ class Chat extends LitElement {
parentEpml.imReady()
}
setChatEditor(editor) {
this.chatEditor = editor;
}
insertImage(file) {
if (file.type.includes('image')) {
this.imageFile = file;
this.chatEditor.disable();
return;
}
parentEpml.request('showSnackBar', get("chatpage.cchange28"));
}
renderLoadingText() {
return html`${translate("chatpage.cchange2")}`
}
@ -712,7 +747,7 @@ class Chat extends LitElement {
const compareArgs = (a, b) => {
return b.timestamp - a.timestamp
}
console.log({chatHeadMasterList});
this.chatHeads = chatHeadMasterList.sort(compareArgs)
}