From 8988bdb6fa3de83cc554b15a081d16f7de01e833 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Sat, 3 Dec 2022 19:31:30 -0500 Subject: [PATCH] Fixed chat modal bug & edit mesage bug --- .../plugins/core/components/ChatPage.js | 28 +++++++++-------- .../plugins/core/components/ChatTextEditor.js | 30 ++++++++----------- .../core/components/WrapperModal-css.js | 2 +- 3 files changed, 30 insertions(+), 30 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 3289b993..8c0d6849 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -655,7 +655,7 @@ class ChatPage extends LitElement { `: ''} this.removeImage()} - style=${this.imageFile ? "display: block" : "display: none"}> + style=${(this.imageFile && !this.isUploadingImage) ? "display: block" : "display: none"}>
${this.imageFile && html` @@ -673,7 +673,7 @@ class ChatPage extends LitElement { .insertImage=${this.insertImage} .editedMessageObj=${this.editedMessageObj} ?isLoading=${this.isLoading} - ?isLoadingMessages=${this.isLoadingMessages}> + ?isLoadingMessages=${this.isLoadingMessages}>
@@ -813,8 +813,11 @@ class ChatPage extends LitElement { await new Promise(r => setTimeout(r, 100)); this.chatEditorPlaceholder = this.isReceipient === true ? `Message ${this._chatId}` : `${get("chatpage.cchange8")}`; } - if (changedProperties && changedProperties.has('isEditMessageOpen')) { - console.log(this.isEditMessageOpen, "1111"); + // if (changedProperties && changedProperties.has('isEditMessageOpen')) { + // console.log(this.isEditMessageOpen, "1111"); + // } + if (changedProperties && changedProperties.has('imageFile')) { + console.log(this.imageFile, "1111"); } } @@ -1466,11 +1469,11 @@ class ChatPage extends LitElement { if (fileSize > 500000) { parentEpml.request('showSnackBar', get("chatpage.cchange26")); this.isLoading = false; + this.isUploadingImage = false; this.chatEditor.enable(); - this.chatEditorNewChat.enable() + this.chatEditorNewChat.enable(); return; } - try { await publishData({ registeredName: userName, @@ -1482,15 +1485,16 @@ class ChatPage extends LitElement { uploadType: 'file', selectedAddress: this.selectedAddress, worker: new WebWorkerImage() - }) - - this.isUploadingImage = false + }); + this.isUploadingImage = false; + this.imageFile = null; } catch (error) { console.error(error) this.isLoading = false; + this.isUploadingImage = false; this.chatEditor.enable(); - this.chatEditorNewChat.enable() - return + this.chatEditorNewChat.enable(); + return; } const messageTextWithImage = this.chatEditorNewChat.mirror.value; // Format and Sanitize Message @@ -1506,7 +1510,7 @@ class ChatPage extends LitElement { isImageDeleted: false, repliedTo: '', version: 1 - } + }; const stringifyMessageObject = JSON.stringify(messageObject); this.sendMessage(stringifyMessageObject, typeMessage); } else if (outSideMsg && outSideMsg.type === 'reaction') { diff --git a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js index 9e8da169..1ebaa8cb 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js +++ b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js @@ -161,12 +161,9 @@ class ChatTextEditor extends LitElement { } render() { - console.log(this.isEditMessageOpen, "here5000"); let scrollHeightBool = false; try { - if (this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 - // && this.shadowRoot.querySelector(".chat-editor").contentDocument.body.querySelector("#chatbarId").innerHTML.trim() !== "" - ) { + if (this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 && this.shadowRoot.querySelector(".chat-editor").contentDocument.body.querySelector("#chatbarId").innerHTML.trim() !== "") { scrollHeightBool = true; } } catch (error) { @@ -330,19 +327,18 @@ class ChatTextEditor extends LitElement { async updated(changedProperties) { console.log({changedProperties}); if (changedProperties && changedProperties.has('editedMessageObj')) { - this.chatEditor.insertText(this.editedMessageObj.message); - this.getMessageSize(this.editedMessageObj.message); + if (this.editedMessageObj) { + this.chatEditor.insertText(this.editedMessageObj.message); + this.getMessageSize(this.editedMessageObj.message); + } else { + this.chatEditor.insertText(""); + this.chatMessageSize = 0; + } } if (changedProperties && changedProperties.has('placeholder')) { const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId'); captionEditor.setAttribute('data-placeholder', this.placeholder); } - if (changedProperties && changedProperties.has("isEditMessageOpen")) { - if (this.iframeId === "newChat") { - console.log(this.isEditMessageOpen, 'isEditMessageOpen'); - this.getMessageSize(""); - } - } if (changedProperties && changedProperties.has("chatMessageSize")) { console.log(this.chatMessageSize, "chat message size"); } @@ -355,11 +351,11 @@ class ChatTextEditor extends LitElement { } } - // shouldUpdate(changedProperties) { - // // Only update element if prop1 changed. - // if(changedProperties.has('setChatEditor') && changedProperties.size === 1) return false - // return true - // } + shouldUpdate(changedProperties) { + // Only update element if prop1 changed. + if(changedProperties.has('setChatEditor') && changedProperties.size === 1) return false + return true + } sendMessageFunc(props) { if (this.chatMessageSize > 1000 ) { diff --git a/qortal-ui-plugins/plugins/core/components/WrapperModal-css.js b/qortal-ui-plugins/plugins/core/components/WrapperModal-css.js index bc8413e4..4dbdce66 100644 --- a/qortal-ui-plugins/plugins/core/components/WrapperModal-css.js +++ b/qortal-ui-plugins/plugins/core/components/WrapperModal-css.js @@ -24,7 +24,7 @@ export const wrapperModalStyles = css` background-color: var(--white); left: 50%; top: 0px; - transform: translate(-50%, 40%); + transform: translate(-50%, 10%); border-radius: 12px; overflow-y: auto; animation: 1s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal forwards running modal_transition;