From 95db4912969490dc9eb342007b5059f4b7bb34d2 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Thu, 26 Jan 2023 15:06:57 -0500 Subject: [PATCH 1/7] Tooltip done --- qortal-ui-core/font/switch-theme.css | 4 +- qortal-ui-core/src/styles/switch-theme.css | 4 +- .../plugins/core/components/ChatPage.js | 13 +++- .../core/components/ChatScroller-css.js | 13 ++-- .../plugins/core/components/ChatScroller.js | 75 ++++++++++++++++--- 5 files changed, 90 insertions(+), 19 deletions(-) diff --git a/qortal-ui-core/font/switch-theme.css b/qortal-ui-core/font/switch-theme.css index d79d6906..c8b139c3 100644 --- a/qortal-ui-core/font/switch-theme.css +++ b/qortal-ui-core/font/switch-theme.css @@ -52,6 +52,7 @@ html { --lightChatHeadHover: #1e1f201a; --group-header: #929292; --group-drop-shadow: rgb(17 17 26 / 10%) 0px 1px 0px; + --reactions-tooltip-bg: #ffffff; } html[theme="dark"] { @@ -107,5 +108,6 @@ html[theme="dark"] { --chatHeadTextActive: #ffffff; --lightChatHeadHover: #e0e1e31a; --group-header: #c8c8c8; - --group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px + --group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px; + --reactions-tooltip-bg: #161515; } \ No newline at end of file diff --git a/qortal-ui-core/src/styles/switch-theme.css b/qortal-ui-core/src/styles/switch-theme.css index ab8187c9..130e8b8d 100644 --- a/qortal-ui-core/src/styles/switch-theme.css +++ b/qortal-ui-core/src/styles/switch-theme.css @@ -49,6 +49,7 @@ html { --chatHeadTextActive: #080808; --group-header: #929292; --group-drop-shadow: rgb(17 17 26 / 10%) 0px 1px 0px; + --reactions-tooltip-bg: #ffffff; } html[theme="dark"] { @@ -101,5 +102,6 @@ html[theme="dark"] { --chatHeadText: #ffffff; --chatHeadTextActive: #ffffff; --group-header: #c8c8c8; - --group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px + --group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px; + --reactions-tooltip-bg: #161515; } \ No newline at end of file diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 538240e9..55231d7e 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -2641,6 +2641,7 @@ class ChatPage extends LitElement { const stringifyMessageObject = JSON.stringify(messageObject); this.sendMessage(stringifyMessageObject, typeMessage); } else if (outSideMsg && outSideMsg.type === 'reaction') { + const userName = await getName(this.selectedAddress.address); typeMessage = 'edit'; let chatReference = outSideMsg.editedMessageObj.reference; @@ -2662,11 +2663,14 @@ class ChatPage extends LitElement { const findEmojiIndex = reactions.findIndex((reaction)=> reaction.type === outSideMsg.reaction) if(findEmojiIndex !== -1){ let users = reactions[findEmojiIndex].users || [] - const findUserIndex = users.findIndex((user)=> user === this.selectedAddress.address ) + const findUserIndex = users.findIndex((user)=> user.address === this.selectedAddress.address ) if(findUserIndex !== -1){ users.splice(findUserIndex, 1) } else { - users.push(this.selectedAddress.address) + users.push({ + address: this.selectedAddress.address, + name: userName + }) } reactions[findEmojiIndex] = { ...reactions[findEmojiIndex], @@ -2680,7 +2684,10 @@ class ChatPage extends LitElement { reactions = [...reactions, { type: outSideMsg.reaction, qty: 1, - users: [this.selectedAddress.address] + users: [{ + address: this.selectedAddress.address, + name: userName + }] }] } const messageObject = { diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index f3d8c32b..bbe4778a 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -175,9 +175,13 @@ export const chatStyles = css` } .message-reactions { - background-color: transparent; - width: calc(100% - 54px); - margin-left: 54px; + background-color: transparent; + width: calc(100% - 54px); + margin-left: 54px; + display: flex; + flex-flow: row wrap; + justify-content: left; + gap: 8px; } .original-message { @@ -412,11 +416,11 @@ export const chatStyles = css` } .reactions-bg { + position: relative; background-color: #d5d5d5; border-radius: 10px; padding: 5px; color: black; - margin-right: 10px; transition: all 0.1s ease-in-out; border: 0.5px solid transparent; cursor: pointer; @@ -723,6 +727,5 @@ export const chatStyles = css` transform: rotate(360deg); } } - ` diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 62033e44..17e40e3f 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -13,6 +13,7 @@ import './WrapperModal'; import "./UserInfo/UserInfo"; import '@vaadin/icons'; import '@vaadin/icon'; +import '@vaadin/tooltip'; import '@material/mwc-button'; import '@material/mwc-dialog'; import '@material/mwc-icon'; @@ -293,10 +294,9 @@ class MessageTemplate extends LitElement { setUserName: { attribute: false }, openTipUser:{ type: Boolean }, goToRepliedMessage: { attribute: false }, - listSeenMessages: {type: Array}, - addSeenMessage: {attribute: false}, - chatId: {type: String} - + listSeenMessages: { type: Array }, + addSeenMessage: { attribute: false }, + chatId: { type: String }, } } @@ -349,6 +349,13 @@ class MessageTemplate extends LitElement { if(autoSeeChatList.includes(this.chatId) || this.listSeenMessages.includes(this.messageObj.reference)){ this.viewImage = true } + + const tooltips = this.shadowRoot.querySelectorAll('vaadin-tooltip'); + tooltips.forEach(tooltip => { + const overlay = tooltip.shadowRoot.querySelector('vaadin-tooltip-overlay'); + overlay.shadowRoot.getElementById("overlay").style.cssText = "background-color: transparent; box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px"; + overlay.shadowRoot.getElementById('content').style.cssText = "background-color: var(--reactions-tooltip-bg); color: var(--chat-bubble-msg-color); text-align: center; padding: 20px 10px; border-radius: 8px; font-family: Roboto, sans-serif; letter-spacing: 0.3px; font-weight: 300; font-size: 13.5px; transition: all 0.3s ease-in-out;"; + }); } render() { @@ -377,6 +384,7 @@ class MessageTemplate extends LitElement { repliedToData = this.messageObj.repliedToData; isImageDeleted = parsedMessageObj.isImageDeleted; reactions = parsedMessageObj.reactions || []; + console.log(reactions, 'reactions here'); version = parsedMessageObj.version; isForwarded = parsedMessageObj.type === 'forward'; isEdited = parsedMessageObj.isEdited && true; @@ -684,17 +692,66 @@ class MessageTemplate extends LitElement {
- ${reactions.map((reaction)=> { + ${reactions.map((reaction, index)=> { return html` this.sendMessage({ + @click=${() => this.sendMessage({ type: 'reaction', editedMessageObj: this.messageObj, reaction: reaction.type, })} - class="reactions-bg"> - ${reaction.type} ${reaction.qty} - ` + id=${`reactions-${index}`} + class="reactions-bg"> + ${reaction.type} + ${reaction.qty} + 3 ? + ( + `${reaction.users[0].name + ? reaction.users[0].name + : cropAddress(reaction.users[0].address)}, + ${reaction.users[1].name + ? reaction.users[1].name + : cropAddress(reaction.users[1].address)}, + ${reaction.users[2].name + ? reaction.users[2].name + : cropAddress(reaction.users[2].address)} + and ${reaction.users.length - 3} other${(reaction.users.length - 3) > 1 ? "s" : ""} reacted with ${reaction.type}` + ) : reaction.users.length === 3 ? + ( + `${reaction.users[0].name + ? reaction.users[0].name + : cropAddress(reaction.users[0].address)}, + ${reaction.users[1].name + ? reaction.users[1].name + : cropAddress(reaction.users[1].address)} + and + ${reaction.users[2].name + ? reaction.users[2].name + : cropAddress(reaction.users[2].address)} reacted with ${reaction.type}` + ) : reaction.users.length === 2 ? + ( + `${reaction.users[0].name + ? reaction.users[0].name + : cropAddress(reaction.users[0].address)} + and + ${reaction.users[1].name + ? reaction.users[1].name + : cropAddress(reaction.users[1].address)} reacted with ${reaction.type}` + ) : reaction.users.length === 1 ? + ( + `${reaction.users[0].name + ? reaction.users[0].name + : cropAddress(reaction.users[0].address)} reacted with ${reaction.type}` + ) + : "" }> + + + ` })}
From dab0bb6bd4add8927865aa506c767d5fab10ddaa Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Fri, 27 Jan 2023 13:08:49 -0500 Subject: [PATCH 2/7] Paste image into text editor done --- qortal-ui-core/language/us.json | 5 +- .../plugins/core/components/ChatPage.js | 60 +++++++++++++++++-- 2 files changed, 59 insertions(+), 6 deletions(-) diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index a8d0ab47..dd0cb1d6 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -574,7 +574,8 @@ "cchange65": "Please enter a recipient", "cchange66": "Cannot fetch replied-to message. Message is too old.", "cchange68": "edited", - "cchange69": "Auto-show images" + "cchange69": "Auto-show images", + "cchange70": "This image type is not supported" }, "welcomepage": { "wcchange1": "Welcome to Q-Chat", @@ -882,4 +883,4 @@ "inf15": "Active Auto Buy Orders", "inf16": "Auto Buy" } -} +} \ No newline at end of file diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 538240e9..3a0484c4 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -830,6 +830,7 @@ class ChatPage extends LitElement { this.getOldMessage = this.getOldMessage.bind(this) this._sendMessage = this._sendMessage.bind(this) this.insertImage = this.insertImage.bind(this) + this.pasteImage = this.pasteImage.bind(this) this.toggleEnableChatEnter = this.toggleEnableChatEnter.bind(this) this._downObserverhandler = this._downObserverhandler.bind(this) this.setOpenTipUser = this.setOpenTipUser.bind(this) @@ -1334,7 +1335,7 @@ class ChatPage extends LitElement { - async connectedCallback() { + async connectedCallback() { super.connectedCallback(); this.webWorker = new WebWorker(); this.webWorkerImage = new WebWorkerImage(); @@ -1411,7 +1412,8 @@ class ChatPage extends LitElement { ] }) document.addEventListener('keydown', this.initialChat); - } + document.addEventListener('paste', this.pasteImage); + } disconnectedCallback() { super.disconnectedCallback(); @@ -1420,7 +1422,8 @@ class ChatPage extends LitElement { this.editor.destroy() this.editorImage.destroy() document.removeEventListener('keydown', this.initialChat); - } + document.removeEventListener('paste', this.pasteImage); + } initialChat(e) { if (this.editor && !this.editor.isFocused && this.currentEditor === '_chatEditorDOM' && !this.openForwardOpen && !this.openTipUser) { @@ -1433,8 +1436,55 @@ class ChatPage extends LitElement { this.editor.commands.focus('end') } } + } - + + async pasteImage (e) { + const event = e; + const handleTransferIntoURL = (dataTransfer) => { + try { + const [firstItem] = dataTransfer.items; + console.log({firstItem}); + const blob = firstItem.getAsFile(); + console.log({blob}); + return blob; + } catch (error) { + console.log(error); + } + } + if (event.clipboardData) { + const blobFound = handleTransferIntoURL(event.clipboardData) + if (blobFound) { + this.insertImage(blobFound); + return; + } else { + const item_list = await navigator.clipboard.read(); + let image_type; + const item = item_list.find(item => + item.types.some( type => { + if (type.startsWith( 'image/')) { + image_type = type; + return true; + } + }) + ); + if (item) { + try { + const blob = item && await item.getType(image_type); + let file = new File([blob], "name", { + type: image_type + }); + this.insertImage(file); + } catch (error) { + console.error(error); + let errorMsg = get("chatpage.cchange70") + parentEpml.request('showSnackBar', `${errorMsg}`) + } + } else { + return + } + } + } } async goToRepliedMessage(message){ @@ -2569,6 +2619,8 @@ class ChatPage extends LitElement { if (!userName) { parentEpml.request('showSnackBar', get("chatpage.cchange27")); this.isLoading = false; + this.isUploadingImage = false; + this.imageFile = null; return; } From c6e98525cbd5f440b31a9606ce6493c25233e8c4 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Fri, 27 Jan 2023 13:39:28 -0500 Subject: [PATCH 3/7] Fixed translations for message reactions --- qortal-ui-core/language/us.json | 8 ++++++-- .../plugins/core/components/ChatScroller.js | 12 ++++++------ 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index a8d0ab47..7ccf206a 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -574,7 +574,11 @@ "cchange65": "Please enter a recipient", "cchange66": "Cannot fetch replied-to message. Message is too old.", "cchange68": "edited", - "cchange69": "Auto-show images" + "cchange69": "Auto-show images", + "cchange71": "and", + "cchange72": "other", + "cchange73": "s", + "cchange74": "reacted with" }, "welcomepage": { "wcchange1": "Welcome to Q-Chat", @@ -882,4 +886,4 @@ "inf15": "Active Auto Buy Orders", "inf16": "Auto Buy" } -} +} \ No newline at end of file diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 17e40e3f..eddcb8b6 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -720,7 +720,7 @@ class MessageTemplate extends LitElement { ${reaction.users[2].name ? reaction.users[2].name : cropAddress(reaction.users[2].address)} - and ${reaction.users.length - 3} other${(reaction.users.length - 3) > 1 ? "s" : ""} reacted with ${reaction.type}` + ${get("chatpage.cchange71")} ${reaction.users.length - 3} ${get("chatpage.cchange72")}${(reaction.users.length - 3) > 1 ? html`${get("chatpage.cchange73")}` : ""} ${get("chatpage.cchange74")} ${reaction.type}` ) : reaction.users.length === 3 ? ( `${reaction.users[0].name @@ -729,24 +729,24 @@ class MessageTemplate extends LitElement { ${reaction.users[1].name ? reaction.users[1].name : cropAddress(reaction.users[1].address)} - and + ${get("chatpage.cchange71")} ${reaction.users[2].name ? reaction.users[2].name - : cropAddress(reaction.users[2].address)} reacted with ${reaction.type}` + : cropAddress(reaction.users[2].address)} ${get("chatpage.cchange74")} ${reaction.type}` ) : reaction.users.length === 2 ? ( `${reaction.users[0].name ? reaction.users[0].name : cropAddress(reaction.users[0].address)} - and + ${get("chatpage.cchange71")} ${reaction.users[1].name ? reaction.users[1].name - : cropAddress(reaction.users[1].address)} reacted with ${reaction.type}` + : cropAddress(reaction.users[1].address)} ${get("chatpage.cchange74")} ${reaction.type}` ) : reaction.users.length === 1 ? ( `${reaction.users[0].name ? reaction.users[0].name - : cropAddress(reaction.users[0].address)} reacted with ${reaction.type}` + : cropAddress(reaction.users[0].address)} ${get("chatpage.cchange74")} ${reaction.type}` ) : "" }> From f327ce5be62c1db741e47ba9269633096781c3b6 Mon Sep 17 00:00:00 2001 From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com> Date: Sat, 28 Jan 2023 08:40:30 +0100 Subject: [PATCH 4/7] Update us.json --- qortal-ui-core/language/us.json | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index dd0cb1d6..a8d0ab47 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -574,8 +574,7 @@ "cchange65": "Please enter a recipient", "cchange66": "Cannot fetch replied-to message. Message is too old.", "cchange68": "edited", - "cchange69": "Auto-show images", - "cchange70": "This image type is not supported" + "cchange69": "Auto-show images" }, "welcomepage": { "wcchange1": "Welcome to Q-Chat", @@ -883,4 +882,4 @@ "inf15": "Active Auto Buy Orders", "inf16": "Auto Buy" } -} \ No newline at end of file +} From 8a72a064d3ee7c08da48a7bc084ef4ba847a9867 Mon Sep 17 00:00:00 2001 From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com> Date: Sat, 28 Jan 2023 08:42:00 +0100 Subject: [PATCH 5/7] Update us.json --- qortal-ui-core/language/us.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index 7ccf206a..55ad9dd7 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -574,7 +574,8 @@ "cchange65": "Please enter a recipient", "cchange66": "Cannot fetch replied-to message. Message is too old.", "cchange68": "edited", - "cchange69": "Auto-show images", + "cchange69": "Auto-view images", + "cchange70": "This image type is not supported", "cchange71": "and", "cchange72": "other", "cchange73": "s", @@ -886,4 +887,4 @@ "inf15": "Active Auto Buy Orders", "inf16": "Auto Buy" } -} \ No newline at end of file +} From 5abc5f2dc73a82af600d8305641bebe338dd0860 Mon Sep 17 00:00:00 2001 From: "Jaymen.C" <68678251+JaymenChou@users.noreply.github.com> Date: Sat, 28 Jan 2023 18:16:14 +0800 Subject: [PATCH 6/7] Update zht.json Update new variables --- qortal-ui-core/language/zht.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/qortal-ui-core/language/zht.json b/qortal-ui-core/language/zht.json index def41926..f797fd5e 100644 --- a/qortal-ui-core/language/zht.json +++ b/qortal-ui-core/language/zht.json @@ -574,7 +574,12 @@ "cchange65": "請輸入收件人", "cchange66": "無法獲取回覆消息。消息太舊了。", "cchange68": "編輯", - "cchange69": "自動顯示圖像" + "cchange69": "自動顯示圖像", + "cchange70": "不支援此類型圖像", + "cchange71": "和", + "cchange72": "其他", + "cchange73": "的", + "cchange74": "心情回應" }, "welcomepage": { "wcchange1": "歡迎來到 Q-Chat", From 69a2c61cff09367977459f118cd209a97ebe2fb3 Mon Sep 17 00:00:00 2001 From: "Jaymen.C" <68678251+JaymenChou@users.noreply.github.com> Date: Sat, 28 Jan 2023 18:17:16 +0800 Subject: [PATCH 7/7] Update zhc.json Update new variables --- qortal-ui-core/language/zhc.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/qortal-ui-core/language/zhc.json b/qortal-ui-core/language/zhc.json index 1dfdff92..4b4ccde5 100644 --- a/qortal-ui-core/language/zhc.json +++ b/qortal-ui-core/language/zhc.json @@ -574,7 +574,12 @@ "cchange65": "请输入收件人", "cchange66": "无法获取回覆消息。消息太旧了。", "cchange68": "编辑", - "cchange69": "自动显示图像" + "cchange69": "自动显示图像", + "cchange70": "不支援此类型图像", + "cchange71": "和", + "cchange72": "其他", + "cchange73": "的", + "cchange74": "心情回应" }, "welcomepage": { "wcchange1": "欢迎来到Q-Chat",