From dd52365abb4d565b23f31253c1ec3146576fac87 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Fri, 20 Jan 2023 21:43:49 -0500 Subject: [PATCH] Added Edited Message Tag to Chat Bubbles --- qortal-ui-core/language/us.json | 3 ++- .../core/components/ChatScroller-css.js | 22 ++++++++++++------ .../plugins/core/components/ChatScroller.js | 23 +++++++++++++++---- .../core/messaging/q-chat/q-chat.src.js | 2 -- 4 files changed, 36 insertions(+), 14 deletions(-) diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index 819b2454..9d77a5d7 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -573,7 +573,8 @@ "cchange64": "Enter Disabled", "cchange65": "Uploading attachment. This may take up to one minute.", "cchange66": "Deleting attachment. This may take up to one minute.", - "cchange67": "Attachment size exceeds 1 MB" + "cchange67": "Attachment size exceeds 1 MB", + "cchange68": "edited" }, "welcomepage": { "wcchange1": "Welcome to Q-Chat", diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index 4be2d907..da79a691 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -85,9 +85,10 @@ export const chatStyles = css` color: #888888; font-size: 13px; user-select: none; - float: right; - padding-left: 15px; - text-align: right; + display: flex; + justify-content: space-between; + width: 100%; + padding-top: 2px; } .message-data-time-hidden { @@ -96,10 +97,10 @@ export const chatStyles = css` color: #888888; font-size: 13px; user-select: none; - float: right; - padding-left: 15px; - padding-bottom: 3px; - text-align: right; + display: flex; + justify-content: space-between; + width: 100%; + padding-top: 2px; } .message-user-info { @@ -711,4 +712,11 @@ export const chatStyles = css` background-color: transparent; transition: all 0.3s ease-in-out; } + + .edited-message-style { + font-family: "Work Sans", sans-serif; + font-style: italic; + font-size: 13px; + visibility: visible; + } ` diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 3eaecb94..17100219 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -71,12 +71,12 @@ class ChatScroller extends LitElement { } render() { + console.log(4, "here"); let formattedMessages = this.messages.reduce((messageArray, message, index) => { const lastGroupedMessage = messageArray[messageArray.length - 1]; let timestamp; let sender; let repliedToData; - let firstMessageInChat; if (index === 0) { @@ -328,7 +328,6 @@ class MessageTemplate extends LitElement { const res = await axios.get(`${nodeUrl}/arbitrary/QCHAT_ATTACHMENT/${attachment.name}/${attachment.identifier}`, { responseType: 'blob' }) .then(response =>{ let filename = attachment.attachmentName; - console.log({response: response.data}); let blob = new Blob([response.data], { type:"application/octet-stream" }); saveAs(blob , filename); }) @@ -338,6 +337,7 @@ class MessageTemplate extends LitElement { } render() { + console.log(this.messageObj, "message object here"); const hidemsg = this.hideMessages; let message = ""; let messageVersion2 = "" @@ -347,10 +347,10 @@ class MessageTemplate extends LitElement { let isImageDeleted = false; let version = 0; let isForwarded = false + let isEdited = false let attachment = null; try { const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage); - console.log({parsedMessageObj}); if(parsedMessageObj.version.toString() === '2'){ messageVersion2 = generateHTML(parsedMessageObj.messageText, [ @@ -366,10 +366,10 @@ class MessageTemplate extends LitElement { reactions = parsedMessageObj.reactions || []; version = parsedMessageObj.version isForwarded = parsedMessageObj.type === 'forward' + isEdited = this.messageObj.editedTimestamp && true if (parsedMessageObj.attachments && Array.isArray(parsedMessageObj.attachments) && parsedMessageObj.attachments.length > 0) { attachment = parsedMessageObj.attachments[0]; } - console.log({parsedMessageObj}); if (parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0) { image = parsedMessageObj.images[0]; } @@ -384,6 +384,7 @@ class MessageTemplate extends LitElement { let levelFounder = ''; let hideit = hidemsg.includes(this.messageObj.sender); let forwarded = '' + let edited = '' levelFounder = html``; if (this.messageObj.senderName) { @@ -446,6 +447,12 @@ class MessageTemplate extends LitElement { `; + edited = html` + + ${translate("chatpage.cchange68")} + + `; + if (repliedToData) { try { const parsedMsg = JSON.parse(repliedToData.decodedMessage); @@ -634,6 +641,14 @@ class MessageTemplate extends LitElement { ? 'message-data-time' : 'message-data-time-hidden' }"> + ${isEdited ? + html` + + ${edited} + + ` + : null + } diff --git a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js index c4580e35..6610a848 100644 --- a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js +++ b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js @@ -163,8 +163,6 @@ class Chat extends LitElement { } render() { - console.log(12, "q-chat here"); - console.log(window.location.href); return html`