Completed ui of edit message

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",

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 {
                                  ></vaadin-icon>
                             </div>
                         `}
+                        ${this.editedMessageObj && html`
+                            <div class="repliedTo-container">
+                                <div class="repliedTo-subcontainer">
+                                    <vaadin-icon class="reply-icon" icon="vaadin:pencil" slot="icon"></vaadin-icon>
+                                    <div class="repliedTo-message">
+                                        <p class="senderName">${translate("chatpage.cchange25")}</p>
+                                        <p class="original-message">${this.editedMessageObj.decodedMessage}</p>
+                                    </div>
+                                </div>
+                                <vaadin-icon
+                                 class="close-icon"
+                                 icon="vaadin:close-big"
+                                 slot="icon"
+                                 @click=${() => this.closeEditMessageContainer()}
+                                 ></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}>
                             ${this.isLoading === false ? html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg">` : html`<paper-spinner-lite active></paper-spinner-lite>`}
                         </button>
+                        ${this.editedMessageObj ? (
+                            html`
+                                <vaadin-icon
+                                 class="checkmark-icon"
+                                 icon="vaadin:check"
+                                 slot="icon"
+                                 @click=${() => this.closeEditMessageContainer()}
+                                 ></vaadin-icon>
+                                 `
+                                 ) : html`<div></div>`
+                        }
                     </div>
                 </div>
             </div>
@@ -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()}
         >
         </chat-scroller>`
@@ -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();

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;
 	}

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}
                     >
                     </message-template>`
@@ -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 {
                 <div id="messageContent" class="message">
                     ${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))}
                 </div>
-                    <chat-menu 
-                        tabindex="0"
-                        class="chat-hover"
-                        style=${this.showBlockAddressIcon && "display: block"}
-                        toblockaddress="${this.messageObj.sender}" 
-                        .showPrivateMessageModal=${() => 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)}
-                    > 
-                    </chat-menu>
+                <chat-menu 
+                    tabindex="0"
+                    class="chat-hover"
+                    style=${this.showBlockAddressIcon && "display: block"}
+                    toblockaddress="${this.messageObj.sender}" 
+                    .showPrivateMessageModal=${() => 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)}
+                > 
+                </chat-menu>
                 </div>
             </li>
             <chat-modals 
@@ -294,21 +299,21 @@ class ChatMenu extends LitElement {
     static get properties() {
         return {
             menuItems: { type: Array },
-            selectedAddress: { type: Object },
-            showPrivateMessageModal: {type: Function},
-            showBlockUserModal: {type: Function},
+            showPrivateMessageModal: { type: Function },
+            showBlockUserModal: { type: Function },
             toblockaddress: { type: String, attribute: true },
-            showBlockIconFunc: {type: Function},
-            showBlockAddressIcon: {type: Boolean},
-            originalMessage: {type: Object},
+            showBlockIconFunc: { type: Function },
+            showBlockAddressIcon: { type: Boolean },
+            originalMessage: { type: Object },
             setRepliedToMessageObj: { type: Function },
-            focusChatEditor: {type: Function},
+            setEditedMessageObj: { type: Function },
+            focusChatEditor: { type: Function },
+            myAddress: { type: Object }
         }
     }
 
     constructor() {
         super();
-        this.selectedAddress = window.parent.reduxStore.getState().app.selectedAddress.address;
         this.showPrivateMessageModal = () => {};
         this.showBlockUserModal = () => {};
     }
@@ -338,14 +343,27 @@ class ChatMenu extends LitElement {
                     <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();
-                        }}">
+                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>
+                ${this.myAddress === this.originalMessage.sender ? (
+                    html`
+                    <div 
+                    class="menu-icon tooltip" 
+                    data-text="${translate("blockpage.bcchange12")}" 
+                    @click=${() => {
+                    this.setEditedMessageObj(this.originalMessage);
+                    this.focusChatEditor();
+                    }}>
+                        <vaadin-icon icon="vaadin:pencil" slot="icon"></vaadin-icon>
+                    </div>
+                    `
+                ) : html`<div></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>