Qortal
/
qortal-ui
mirror of https://github.com/qortal/qortal-ui
4
1
Fork 4
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #107 from JustinWesleyFerrari/feature/show-reaction-names 

Feature/show reaction names
pull/110/head
AlphaX-Projects 2 years ago committed by GitHub
parent
256b273108 1f07621700
commit
f5a7a8b934
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 90 additions and 19 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      qortal-ui-core/font/switch-theme.css
  2. 4
      qortal-ui-core/src/styles/switch-theme.css
  3. 13
      qortal-ui-plugins/plugins/core/components/ChatPage.js
  4. 13
      qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
  5. 75
      qortal-ui-plugins/plugins/core/components/ChatScroller.js

4
qortal-ui-core/font/switch-theme.css
Unescape View File

@ -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;
}

4
qortal-ui-core/src/styles/switch-theme.css
Unescape View File

@ -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;
}

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

@ -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 = {

13
qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
Unescape View File

@ -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);
}
}
`

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

@ -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>

Write Preview
Loading…
Cancel
Save