Merge pull request #107 from JustinWesleyFerrari/feature/show-reaction-names
Feature/show reaction names
This commit is contained in:
AlphaX-Projects
GitHub
commit
f5a7a8b934
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -2693,6 +2693,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;
|
||||
|
||||
@ -2714,11 +2715,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],
|
||||
@ -2732,7 +2736,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 = {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
`
|
||||
|
||||
@ -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 {
|
||||
</div>
|
||||
<div class="message-reactions" style="${reactions.length > 0 &&
|
||||
'margin-top: 10px; margin-bottom: 5px;'}">
|
||||
${reactions.map((reaction)=> {
|
||||
${reactions.map((reaction, index)=> {
|
||||
return html`
|
||||
<span
|
||||
@click=${() => this.sendMessage({
|
||||
@click=${() => this.sendMessage({
|
||||
type: 'reaction',
|
||||
editedMessageObj: this.messageObj,
|
||||
reaction: reaction.type,
|
||||
})}
|
||||
class="reactions-bg">
|
||||
${reaction.type} ${reaction.qty}
|
||||
</span>`
|
||||
id=${`reactions-${index}`}
|
||||
class="reactions-bg">
|
||||
${reaction.type}
|
||||
${reaction.qty}
|
||||
<vaadin-tooltip
|
||||
for=${`reactions-${index}`}
|
||||
position="top"
|
||||
hover-delay=${400}
|
||||
hide-delay=${1}
|
||||
text=${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)},
|
||||
${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}`
|
||||
)
|
||||
: "" }>
|
||||
</vaadin-tooltip>
|
||||
</span>
|
||||
`
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user