Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-11 17:55: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...",
"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",
@ -507,7 +508,8 @@
"bcchange8": "Copy Address",
"bcchange9": "Private Message",
"bcchange10": "More",
"bcchange11": "Reply"
"bcchange11": "Reply",
"bcchange12": "Edit"
},
"grouppage": {
"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 },
messagesRendered: { type: Array },
repliedToMessageObj: { type: Object },
editedMessageObj: { type: Object },
}
}
@ -131,9 +132,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;
}
@ -197,6 +207,7 @@ class ChatPage extends LitElement {
this.chatEditorPlaceholder = this.renderPlaceholder()
this.messagesRendered = []
this.repliedToMessageObj = null
this.editedMessageObj = null
}
render() {
@ -221,12 +232,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>
@ -359,6 +398,10 @@ class ChatPage extends LitElement {
}
}
if (changedProperties && changedProperties.has('editedMessageObj')) {
console.log('yo123')
this.chatEditor.insertText(this.editedMessageObj.decodedMessage)
}
}
changeLanguage() {
@ -387,6 +430,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>`
@ -517,15 +561,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();

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

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

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

@ -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>