From 98bb4cbb52de342a8d5a2c64cea966fe74abc849 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Sat, 22 Oct 2022 08:56:56 -0500 Subject: [PATCH] Completed ui of edit message --- qortal-ui-core/language/us.json | 6 +- .../plugins/core/components/ChatPage.js | 73 ++++++++++++++++-- .../core/components/ChatScroller-css.js | 8 +- .../plugins/core/components/ChatScroller.js | 76 ++++++++++++------- 4 files changed, 122 insertions(+), 41 deletions(-) diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index 6c34d8d6..5c5a1ce6 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -478,7 +478,8 @@ "cchange21": "Sending failed, Please retry...", "cchange22": "Loading Messages...", "cchange23": "Cannot Decrypt Message!", - "cchange24": "Maximum Characters per message is 255" + "cchange24": "Maximum Characters per message is 255", + "cchange25": "Edit Message" }, "welcomepage": { "wcchange1": "Welcome to Q-Chat", @@ -502,7 +503,8 @@ "bcchange8": "Copy Address", "bcchange9": "Private Message", "bcchange10": "More", - "bcchange11": "Reply" + "bcchange11": "Reply", + "bcchange12": "Edit" }, "grouppage": { "gchange1": "Qortal Groups", diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 52a09501..d98d0204 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -47,6 +47,7 @@ class ChatPage extends LitElement { chatEditorPlaceholder: { type: String }, messagesRendered: { type: Array }, repliedToMessageObj: { type: Object }, + editedMessageObj: { type: Object }, } } @@ -127,9 +128,18 @@ class ChatPage extends LitElement { color: var(--mdc-theme-primary); } + .checkmark-icon { + width: 30px; + color: var(--mdc-theme-primary); + margin: 0 8px; + } + .checkmark-icon:hover { + cursor: pointer; + } + .close-icon { color: #676b71; - width: 25px; + width: 18px; transition: all 0.1s ease-in-out; } @@ -193,6 +203,7 @@ class ChatPage extends LitElement { this.chatEditorPlaceholder = this.renderPlaceholder() this.messagesRendered = [] this.repliedToMessageObj = null + this.editedMessageObj = null } render() { @@ -217,12 +228,40 @@ class ChatPage extends LitElement { > `} + ${this.editedMessageObj && html` +
+
+ +
+

${translate("chatpage.cchange25")}

+

${this.editedMessageObj.decodedMessage}

+
+
+ this.closeEditMessageContainer()} + > +
+ `}
+ ${this.editedMessageObj ? ( + html` + this.closeEditMessageContainer()} + > + ` + ) : html`
` + }
@@ -340,6 +379,13 @@ class ChatPage extends LitElement { parentEpml.imReady(); } + updated(changedProperties) { + if (changedProperties && changedProperties.has('editedMessageObj')) { + console.log('yo123') + this.chatEditor.insertText(this.editedMessageObj.decodedMessage) + } + } + changeLanguage() { const checkLanguage = localStorage.getItem('qortalLanguage') @@ -366,6 +412,7 @@ class ChatPage extends LitElement { .escapeHTML=${escape} .getOldMessage=${this.getOldMessage} .setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)} + .setEditedMessageObj=${(val) => this.setEditedMessageObj(val)} .focusChatEditor=${() => this.focusChatEditor()} > ` @@ -471,15 +518,31 @@ class ChatPage extends LitElement { } } + + // set replied to message in chat editor - async setRepliedToMessageObj(messageObj) { - console.log(messageObj, "Replied To Message Object Here") + setRepliedToMessageObj(messageObj) { this.repliedToMessageObj = {...messageObj}; + this.editedMessageObj = null; this.requestUpdate(); - await this.updateComplete; - console.log(this.repliedToMessageObj); } + // set edited message in chat editor + + setEditedMessageObj(messageObj) { + console.log(messageObj, "Edited Message Object Here") + this.editedMessageObj = {...messageObj}; + this.repliedToMessageObj = null; + this.requestUpdate(); + console.log(this.editedMessageObj); + } + + closeEditMessageContainer() { + this.editedMessageObj = null; + this.chatEditor.resetValue(); + this.requestUpdate(); + } + closeRepliedToContainer() { this.repliedToMessageObj = null; this.requestUpdate(); diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index 1be44de6..3e56949f 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -181,7 +181,7 @@ export const chatStyles = css` display: none; position: absolute; top: -38px; - right: 25px; + right: 5px; } .emoji { @@ -235,12 +235,10 @@ export const chatStyles = css` display: flex; flex-direction: row; align-items: center; - gap: 5px; background-color: white; border: 1px solid #dad9d9; border-radius: 5px; height:100%; - width: 100px; position: relative; } @@ -250,7 +248,7 @@ export const chatStyles = css` .menu-icon { width: 100%; - padding: 5px; + padding: 5px 7px; display: flex; align-items: center; font-size: 13px; @@ -307,7 +305,7 @@ export const chatStyles = css` } .block-user-container { - display: none; + display: block; position: absolute; left: -5px; } diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index b8b52c9f..14d314be 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -26,6 +26,7 @@ class ChatScroller extends LitElement { messages: { type: Array }, hideMessages: { type: Array }, setRepliedToMessageObj: { type: Function }, + setEditedMessageObj: { type: Function }, focusChatEditor: { type: Function } } } @@ -56,6 +57,7 @@ class ChatScroller extends LitElement { .messageObj=${message} .hideMessages=${this.hideMessages} .setRepliedToMessageObj=${this.setRepliedToMessageObj} + .setEditedMessageObj=${this.setEditedMessageObj} .focusChatEditor=${this.focusChatEditor} > ` @@ -150,6 +152,7 @@ class MessageTemplate extends LitElement { openDialogBlockUser: {type: Boolean}, showBlockAddressIcon: { type: Boolean }, setRepliedToMessageObj: { type: Function }, + setEditedMessageObj: { type: Function }, focusChatEditor: { type: Function }, } } @@ -258,21 +261,23 @@ class MessageTemplate extends LitElement {
${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))}
- this.showPrivateMessageModal()} - .showBlockUserModal=${() => this.showBlockUserModal()} - .showBlockIconFunc=${(props) => this.showBlockIconFunc(props)} - .showBlockAddressIcon=${this.showBlockAddressIcon} - .originalMessage=${this.messageObj} - .setRepliedToMessageObj=${this.setRepliedToMessageObj} - .focusChatEditor=${this.focusChatEditor} - @blur=${() => this.showBlockIconFunc(false)} - > - + this.showPrivateMessageModal()} + .showBlockUserModal=${() => this.showBlockUserModal()} + .showBlockIconFunc=${(props) => this.showBlockIconFunc(props)} + .showBlockAddressIcon=${this.showBlockAddressIcon} + .originalMessage=${this.messageObj} + .setRepliedToMessageObj=${this.setRepliedToMessageObj} + .setEditedMessageObj=${this.setEditedMessageObj} + .focusChatEditor=${this.focusChatEditor} + .myAddress=${this.myAddress} + @blur=${() => this.showBlockIconFunc(false)} + > + {}; this.showBlockUserModal = () => {}; } @@ -338,14 +343,27 @@ class ChatMenu extends LitElement {
+ class="menu-icon tooltip" + data-text="${translate("blockpage.bcchange11")}" + @click="${() => { + this.setRepliedToMessageObj(this.originalMessage); + this.focusChatEditor(); + }}">
+ ${this.myAddress === this.originalMessage.sender ? ( + html` +
{ + this.setEditedMessageObj(this.originalMessage); + this.focusChatEditor(); + }}> + +
+ ` + ) : html`
`}