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

Merge branch 'feature/implement-logic-edit-reply-messages' of https://github.com/PhillipLangMartinez/qortal-ui into feature/implement-UI-edit-reply-messages

Browse Source
This commit is contained in:
Justin Ferrari 2022-11-26 21:56:27 -05:00
commit d49f814cd3
3 changed files with 49 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -491,7 +491,8 @@
"cchange29": "Maximum message size is 1000 bytes", "cchange29": "Maximum message size is 1000 bytes",
"cchange30": "Uploading image. This may take up to one minute.", "cchange30": "Uploading image. This may take up to one minute.",
"cchange31": "Deleting image. This may take up to one minute.", "cchange31": "Deleting image. This may take up to one minute.",
"cchange33": "Cancel" "cchange33": "Cancel",
"cchange34": "This chat message is using an older message version and cannot use this feature."
}, },
"welcomepage": { "welcomepage": {
"wcchange1": "Welcome to Q-Chat", "wcchange1": "Welcome to Q-Chat",

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

@ -2,7 +2,7 @@ import { LitElement, html, css } from 'lit';
import { render } from 'lit/html.js'; import { render } from 'lit/html.js';
import { Epml } from '../../../epml.js'; import { Epml } from '../../../epml.js';
import { use, get, translate, registerTranslateConfig } from 'lit-translate'; import { use, get, translate, registerTranslateConfig } from 'lit-translate';
import localForage from "localforage"; // import localForage from "localforage";
registerTranslateConfig({ registerTranslateConfig({
loader: lang => fetch(`/language/${lang}.json`).then(res => res.json()) loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
}); });
@ -25,10 +25,10 @@ import { publishData } from '../../utils/publish-image.js';
import WebWorker from 'web-worker:./computePowWorker.js'; import WebWorker from 'web-worker:./computePowWorker.js';
import WebWorkerImage from 'web-worker:./computePowWorkerImage.js'; import WebWorkerImage from 'web-worker:./computePowWorkerImage.js';
// hello
const messagesCache = localForage.createInstance({ // const messagesCache = localForage.createInstance({
name: "messages-cache", // name: "messages-cache",
}); // });
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
@ -1142,8 +1142,8 @@ class ChatPage extends LitElement {
const chatReference1 = isReceipient ? 'direct' : 'group'; const chatReference1 = isReceipient ? 'direct' : 'group';
const chatReference2 = this.chatId.split('/')[1]; const chatReference2 = this.chatId.split('/')[1];
const cachedData = await messagesCache.getItem(`${chatReference1}-${chatReference2}`); // const cachedData = await messagesCache.getItem(`${chatReference1}-${chatReference2}`);
const cachedData = null
let getInitialMessages = [] let getInitialMessages = []
if (cachedData && cachedData.length !== 0) { if (cachedData && cachedData.length !== 0) {
const lastMessage = cachedData[cachedData.length - 1] const lastMessage = cachedData[cachedData.length - 1]
@ -1228,8 +1228,8 @@ class ChatPage extends LitElement {
const chatReference1 = isGroup ? 'group' : 'direct'; const chatReference1 = isGroup ? 'group' : 'direct';
const chatReference2 = this.chatId.split('/')[1]; const chatReference2 = this.chatId.split('/')[1];
const cachedData = await messagesCache.getItem(`${chatReference1}-${chatReference2}`); // const cachedData = await messagesCache.getItem(`${chatReference1}-${chatReference2}`);
const cachedData = null;
let getInitialMessages = [] let getInitialMessages = []
if (cachedData && cachedData.length !== 0) { if (cachedData && cachedData.length !== 0) {

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

@ -25,10 +25,10 @@ class ChatScroller extends LitElement {
escapeHTML: { attribute: false }, escapeHTML: { attribute: false },
messages: { type: Array }, messages: { type: Array },
hideMessages: { type: Array }, hideMessages: { type: Array },
setRepliedToMessageObj: { type: Function }, setRepliedToMessageObj: {attribute: false},
setEditedMessageObj: { type: Function }, setEditedMessageObj: {attribute: false},
focusChatEditor: { type: Function }, focusChatEditor: {attribute: false},
sendMessage: { type: Function}, sendMessage: {attribute: false},
showLastMessageRefScroller: { type: Function }, showLastMessageRefScroller: { type: Function },
} }
} }
@ -193,11 +193,11 @@ class MessageTemplate extends LitElement {
openDialogPrivateMessage: {type: Boolean}, openDialogPrivateMessage: {type: Boolean},
openDialogBlockUser: {type: Boolean}, openDialogBlockUser: {type: Boolean},
showBlockAddressIcon: { type: Boolean }, showBlockAddressIcon: { type: Boolean },
setRepliedToMessageObj: { type: Function }, setRepliedToMessageObj: {attribute: false},
setEditedMessageObj: { type: Function }, setEditedMessageObj: {attribute: false},
focusChatEditor: { type: Function }, focusChatEditor: {attribute: false},
sendMessage: { type: Function }, sendMessage: {attribute: false},
openDialogImage: { type: Function }, openDialogImage: {attribute: false},
isImageLoaded: { type: Boolean }, isImageLoaded: { type: Boolean },
isFirstMessage: { type: Boolean }, isFirstMessage: { type: Boolean },
isSingleMessageInGroup: { type: Boolean }, isSingleMessageInGroup: { type: Boolean },
@ -256,12 +256,14 @@ class MessageTemplate extends LitElement {
let repliedToData = null; let repliedToData = null;
let image = null; let image = null;
let isImageDeleted = false; let isImageDeleted = false;
let version = 0;
try { try {
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage); const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage);
message = parsedMessageObj.messageText; message = parsedMessageObj.messageText;
repliedToData = this.messageObj.repliedToData; repliedToData = this.messageObj.repliedToData;
isImageDeleted = parsedMessageObj.isImageDeleted; isImageDeleted = parsedMessageObj.isImageDeleted;
reactions = parsedMessageObj.reactions || []; reactions = parsedMessageObj.reactions || [];
version = parsedMessageObj.version
if (parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0) { if (parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0) {
image = parsedMessageObj.images[0]; image = parsedMessageObj.images[0];
} }
@ -455,6 +457,7 @@ class MessageTemplate extends LitElement {
.myAddress=${this.myAddress} .myAddress=${this.myAddress}
@blur=${() => this.showBlockIconFunc(false)} @blur=${() => this.showBlockIconFunc(false)}
.sendMessage=${this.sendMessage} .sendMessage=${this.sendMessage}
version=${version}
> >
</chat-menu> </chat-menu>
</div> </div>
@ -518,18 +521,19 @@ class ChatMenu extends LitElement {
static get properties() { static get properties() {
return { return {
menuItems: { type: Array }, menuItems: { type: Array },
showPrivateMessageModal: { type: Function }, showPrivateMessageModal: {attribute: false},
showBlockUserModal: { type: Function }, showBlockUserModal: {attribute: false},
toblockaddress: { type: String, attribute: true }, toblockaddress: { type: String, attribute: true },
showBlockIconFunc: { type: Function }, showBlockIconFunc: {attribute: false},
showBlockAddressIcon: { type: Boolean }, showBlockAddressIcon: { type: Boolean },
originalMessage: { type: Object }, originalMessage: { type: Object },
setRepliedToMessageObj: { type: Function }, setRepliedToMessageObj: {attribute: false},
setEditedMessageObj: { type: Function }, setEditedMessageObj: {attribute: false},
focusChatEditor: { type: Function }, focusChatEditor: {attribute: false},
myAddress: { type: Object }, myAddress: { type: Object },
emojiPicker: { attribute: false }, emojiPicker: { attribute: false },
sendMessage: {type: Function}, sendMessage: {attribute: false},
version: {type: String}
} }
} }
@ -554,6 +558,11 @@ class ChatMenu extends LitElement {
} }
} }
versionErrorSnack(){
let errorMsg = get("chatpage.cchange34")
parentEpml.request('showSnackBar', `${errorMsg}`)
}
firstUpdated () { firstUpdated () {
this.emojiPicker = new EmojiPicker({ this.emojiPicker = new EmojiPicker({
style: "twemoji", style: "twemoji",
@ -577,12 +586,17 @@ editedMessageObj: this.originalMessage,
} }
render() { render() {
console.log('version', this.version)
return html` return html`
<div class="container"> <div class="container">
<div <div
class="menu-icon tooltip reaction" class="menu-icon tooltip reaction"
data-text="${translate("blockpage.bcchange13")}" data-text="${translate("blockpage.bcchange13")}"
@click=${(e) => { @click=${(e) => {
if(this.version === '0'){
this.versionErrorSnack()
return
}
this.emojiPicker.togglePicker(e.target) this.emojiPicker.togglePicker(e.target)
}} }}
> >
@ -598,6 +612,10 @@ editedMessageObj: this.originalMessage,
class="menu-icon tooltip" class="menu-icon tooltip"
data-text="${translate("blockpage.bcchange11")}" data-text="${translate("blockpage.bcchange11")}"
@click="${() => { @click="${() => {
if(this.version === '0'){
this.versionErrorSnack()
return
}
this.setRepliedToMessageObj(this.originalMessage); this.setRepliedToMessageObj(this.originalMessage);
this.focusChatEditor(); this.focusChatEditor();
}}"> }}">
@ -610,6 +628,10 @@ editedMessageObj: this.originalMessage,
class="menu-icon tooltip" class="menu-icon tooltip"
data-text="${translate("blockpage.bcchange12")}" data-text="${translate("blockpage.bcchange12")}"
@click=${() => { @click=${() => {
if(this.version === '0'){
this.versionErrorSnack()
return
}
this.setEditedMessageObj(this.originalMessage); this.setEditedMessageObj(this.originalMessage);
this.focusChatEditor(); this.focusChatEditor();
}}> }}>