qortal.link/qortal-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Completed ui of edit message

Browse Source
This commit is contained in:
Justin Ferrari 2022-10-22 08:56:56 -05:00
parent e10256eb75
commit 98bb4cbb52
4 changed files with 122 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

@ -478,7 +478,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",
@ -502,7 +503,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",

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

@ -47,6 +47,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 },
} }
} }
@ -127,9 +128,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;
} }
@ -193,6 +203,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() {
@ -217,12 +228,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>
@ -340,6 +379,13 @@ class ChatPage extends LitElement {
parentEpml.imReady(); parentEpml.imReady();
} }
updated(changedProperties) {
if (changedProperties && changedProperties.has('editedMessageObj')) {
console.log('yo123')
this.chatEditor.insertText(this.editedMessageObj.decodedMessage)
}
}
changeLanguage() { changeLanguage() {
const checkLanguage = localStorage.getItem('qortalLanguage') const checkLanguage = localStorage.getItem('qortalLanguage')
@ -366,6 +412,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>`
@ -472,12 +519,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;
} }

34
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 },
} }
} }
@ -269,7 +272,9 @@ class MessageTemplate extends LitElement {
.showBlockAddressIcon=${this.showBlockAddressIcon} .showBlockAddressIcon=${this.showBlockAddressIcon}
.originalMessage=${this.messageObj} .originalMessage=${this.messageObj}
.setRepliedToMessageObj=${this.setRepliedToMessageObj} .setRepliedToMessageObj=${this.setRepliedToMessageObj}
.setEditedMessageObj=${this.setEditedMessageObj}
.focusChatEditor=${this.focusChatEditor} .focusChatEditor=${this.focusChatEditor}
.myAddress=${this.myAddress}
@blur=${() => this.showBlockIconFunc(false)} @blur=${() => this.showBlockIconFunc(false)}
> >
</chat-menu> </chat-menu>
@ -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 = () => {};
} }
@ -346,6 +351,19 @@ class ChatMenu extends LitElement {
}}"> }}">
<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>