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] 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}` + ) + : "" }> + + + ` })}