Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-12 02:05:51 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'feature/edit-message' into qchat-updates-integration

Browse Source
This commit is contained in:
Justin Ferrari 2022-10-22 11:45:28 -05:00
commit c2e5f8ca0c
4 changed files with 119 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
qortal-ui-core/language/us.json
View File

@ -483,7 +483,8 @@
"cchange21": "Sending failed, Please retry...", "cchange21": "Sending failed, Please retry...",
"cchange22": "Loading Messages...", "cchange22": "Loading Messages...",
"cchange23": "Cannot Decrypt Message!", "cchange23": "Cannot Decrypt Message!",
"cchange24": "Maximum Characters per message is 255" "cchange24": "Maximum Characters per message is 255",
"cchange25": "Edit Message"
}, },
"welcomepage": { "welcomepage": {
"wcchange1": "Welcome to Q-Chat", "wcchange1": "Welcome to Q-Chat",
@ -507,7 +508,8 @@
"bcchange8": "Copy Address", "bcchange8": "Copy Address",
"bcchange9": "Private Message", "bcchange9": "Private Message",
"bcchange10": "More", "bcchange10": "More",
"bcchange11": "Reply" "bcchange11": "Reply",
"bcchange12": "Edit"
}, },
"grouppage": { "grouppage": {
"gchange1": "Qortal Groups", "gchange1": "Qortal Groups",

70
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -51,6 +51,7 @@ class ChatPage extends LitElement {
chatEditorPlaceholder: { type: String }, chatEditorPlaceholder: { type: String },
messagesRendered: { type: Array }, messagesRendered: { type: Array },
repliedToMessageObj: { type: Object }, repliedToMessageObj: { type: Object },
editedMessageObj: { type: Object },
} }
} }
@ -131,9 +132,18 @@ class ChatPage extends LitElement {
color: var(--mdc-theme-primary); color: var(--mdc-theme-primary);
} }
.checkmark-icon {
width: 30px;
color: var(--mdc-theme-primary);
margin: 0 8px;
}
.checkmark-icon:hover {
cursor: pointer;
}
.close-icon { .close-icon {
color: #676b71; color: #676b71;
width: 25px; width: 18px;
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
} }
@ -197,6 +207,7 @@ class ChatPage extends LitElement {
this.chatEditorPlaceholder = this.renderPlaceholder() this.chatEditorPlaceholder = this.renderPlaceholder()
this.messagesRendered = [] this.messagesRendered = []
this.repliedToMessageObj = null this.repliedToMessageObj = null
this.editedMessageObj = null
} }
render() { render() {
@ -221,12 +232,40 @@ class ChatPage extends LitElement {
></vaadin-icon> ></vaadin-icon>
</div> </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"> <div class="chatbar">
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea> <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> <iframe class="chat-editor" id="_chatEditorDOM" tabindex="-1"></iframe>
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}> <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>`} ${this.isLoading === false ? html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg">` : html`<paper-spinner-lite active></paper-spinner-lite>`}
</button> </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> </div>
</div> </div>
@ -359,6 +398,10 @@ class ChatPage extends LitElement {
} }
} }
if (changedProperties && changedProperties.has('editedMessageObj')) {
console.log('yo123')
this.chatEditor.insertText(this.editedMessageObj.decodedMessage)
}
} }
changeLanguage() { changeLanguage() {
@ -387,6 +430,7 @@ class ChatPage extends LitElement {
.escapeHTML=${escape} .escapeHTML=${escape}
.getOldMessage=${this.getOldMessage} .getOldMessage=${this.getOldMessage}
.setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)} .setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
.setEditedMessageObj=${(val) => this.setEditedMessageObj(val)}
.focusChatEditor=${() => this.focusChatEditor()} .focusChatEditor=${() => this.focusChatEditor()}
> >
</chat-scroller>` </chat-scroller>`
@ -518,12 +562,28 @@ class ChatPage extends LitElement {
} }
} }
async setRepliedToMessageObj(messageObj) { // set replied to message in chat editor
console.log(messageObj, "Replied To Message Object Here")
setRepliedToMessageObj(messageObj) {
this.repliedToMessageObj = {...messageObj}; this.repliedToMessageObj = {...messageObj};
this.editedMessageObj = null;
this.requestUpdate();
}
// 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(); this.requestUpdate();
await this.updateComplete;
console.log(this.repliedToMessageObj);
} }
closeRepliedToContainer() { closeRepliedToContainer() {

8
qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
View File

@ -181,7 +181,7 @@ export const chatStyles = css`
display: none; display: none;
position: absolute; position: absolute;
top: -38px; top: -38px;
right: 25px; right: 5px;
} }
.emoji { .emoji {
@ -235,12 +235,10 @@ export const chatStyles = css`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 5px;
background-color: white; background-color: white;
border: 1px solid #dad9d9; border: 1px solid #dad9d9;
border-radius: 5px; border-radius: 5px;
height:100%; height:100%;
width: 100px;
position: relative; position: relative;
} }
@ -250,7 +248,7 @@ export const chatStyles = css`
.menu-icon { .menu-icon {
width: 100%; width: 100%;
padding: 5px; padding: 5px 7px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 13px; font-size: 13px;
@ -307,7 +305,7 @@ export const chatStyles = css`
} }
.block-user-container { .block-user-container {
display: none; display: block;
position: absolute; position: absolute;
left: -5px; left: -5px;
} }

76
qortal-ui-plugins/plugins/core/components/ChatScroller.js
View File

@ -26,6 +26,7 @@ class ChatScroller extends LitElement {
messages: { type: Array }, messages: { type: Array },
hideMessages: { type: Array }, hideMessages: { type: Array },
setRepliedToMessageObj: { type: Function }, setRepliedToMessageObj: { type: Function },
setEditedMessageObj: { type: Function },
focusChatEditor: { type: Function } focusChatEditor: { type: Function }
} }
} }
@ -56,6 +57,7 @@ class ChatScroller extends LitElement {
.messageObj=${message} .messageObj=${message}
.hideMessages=${this.hideMessages} .hideMessages=${this.hideMessages}
.setRepliedToMessageObj=${this.setRepliedToMessageObj} .setRepliedToMessageObj=${this.setRepliedToMessageObj}
.setEditedMessageObj=${this.setEditedMessageObj}
.focusChatEditor=${this.focusChatEditor} .focusChatEditor=${this.focusChatEditor}
> >
</message-template>` </message-template>`
@ -150,6 +152,7 @@ class MessageTemplate extends LitElement {
openDialogBlockUser: {type: Boolean}, openDialogBlockUser: {type: Boolean},
showBlockAddressIcon: { type: Boolean }, showBlockAddressIcon: { type: Boolean },
setRepliedToMessageObj: { type: Function }, setRepliedToMessageObj: { type: Function },
setEditedMessageObj: { type: Function },
focusChatEditor: { type: Function }, focusChatEditor: { type: Function },
} }
} }
@ -258,21 +261,23 @@ class MessageTemplate extends LitElement {
<div id="messageContent" class="message"> <div id="messageContent" class="message">
${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))} ${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))}
</div> </div>
<chat-menu <chat-menu
tabindex="0" tabindex="0"
class="chat-hover" class="chat-hover"
style=${this.showBlockAddressIcon && "display: block"} style=${this.showBlockAddressIcon && "display: block"}
toblockaddress="${this.messageObj.sender}" toblockaddress="${this.messageObj.sender}"
.showPrivateMessageModal=${() => this.showPrivateMessageModal()} .showPrivateMessageModal=${() => this.showPrivateMessageModal()}
.showBlockUserModal=${() => this.showBlockUserModal()} .showBlockUserModal=${() => this.showBlockUserModal()}
.showBlockIconFunc=${(props) => this.showBlockIconFunc(props)} .showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
.showBlockAddressIcon=${this.showBlockAddressIcon} .showBlockAddressIcon=${this.showBlockAddressIcon}
.originalMessage=${this.messageObj} .originalMessage=${this.messageObj}
.setRepliedToMessageObj=${this.setRepliedToMessageObj} .setRepliedToMessageObj=${this.setRepliedToMessageObj}
.focusChatEditor=${this.focusChatEditor} .setEditedMessageObj=${this.setEditedMessageObj}
@blur=${() => this.showBlockIconFunc(false)} .focusChatEditor=${this.focusChatEditor}
> .myAddress=${this.myAddress}
</chat-menu> @blur=${() => this.showBlockIconFunc(false)}
>
</chat-menu>
</div> </div>
</li> </li>
<chat-modals <chat-modals
@ -294,21 +299,21 @@ class ChatMenu extends LitElement {
static get properties() { static get properties() {
return { return {
menuItems: { type: Array }, menuItems: { type: Array },
selectedAddress: { type: Object }, showPrivateMessageModal: { type: Function },
showPrivateMessageModal: {type: Function}, showBlockUserModal: { type: Function },
showBlockUserModal: {type: Function},
toblockaddress: { type: String, attribute: true }, toblockaddress: { type: String, attribute: true },
showBlockIconFunc: {type: Function}, showBlockIconFunc: { type: Function },
showBlockAddressIcon: {type: Boolean}, showBlockAddressIcon: { type: Boolean },
originalMessage: {type: Object}, originalMessage: { type: Object },
setRepliedToMessageObj: { type: Function }, setRepliedToMessageObj: { type: Function },
focusChatEditor: {type: Function}, setEditedMessageObj: { type: Function },
focusChatEditor: { type: Function },
myAddress: { type: Object }
} }
} }
constructor() { constructor() {
super(); super();
this.selectedAddress = window.parent.reduxStore.getState().app.selectedAddress.address;
this.showPrivateMessageModal = () => {}; this.showPrivateMessageModal = () => {};
this.showBlockUserModal = () => {}; this.showBlockUserModal = () => {};
} }
@ -338,14 +343,27 @@ class ChatMenu extends LitElement {
<vaadin-icon icon="vaadin:copy" slot="icon"></vaadin-icon> <vaadin-icon icon="vaadin:copy" slot="icon"></vaadin-icon>
</div> </div>
<div <div
class="menu-icon tooltip" class="menu-icon tooltip"
data-text="${translate("blockpage.bcchange11")}" data-text="${translate("blockpage.bcchange11")}"
@click="${() => { @click="${() => {
this.setRepliedToMessageObj(this.originalMessage); this.setRepliedToMessageObj(this.originalMessage);
this.focusChatEditor(); this.focusChatEditor();
}}"> }}">
<vaadin-icon icon="vaadin:reply" slot="icon"></vaadin-icon> <vaadin-icon icon="vaadin:reply" slot="icon"></vaadin-icon>
</div> </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)}"> <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> <vaadin-icon icon="vaadin:ellipsis-dots-h" slot="icon"></vaadin-icon>
</div> </div>