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 {
+ ${this.myAddress === this.originalMessage.sender ? (
+ html`
+
+ `
+ ) : html``}