From 89694f6e209ed5085ae5fd5fe9234f89f960f832 Mon Sep 17 00:00:00 2001
From: Justin Ferrari <‘justinwesleyferrari@gmail.com’>
Date: Sun, 15 Jan 2023 20:14:57 -0500
Subject: [PATCH] Solved tip-user bug & message bubble padding
---
.../plugins/core/components/ChatPage.js | 106 ++++++++++++++----
.../plugins/core/components/ChatRightPanel.js | 63 +++--------
.../core/components/ChatScroller-css.js | 9 +-
.../plugins/core/components/ChatScroller.js | 75 +++----------
.../plugins/core/components/WrapperModal.js | 10 +-
.../core/messaging/q-chat/q-chat.src.js | 4 +-
6 files changed, 129 insertions(+), 138 deletions(-)
diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js
index 0085562d..f630b65a 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatPage.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js
@@ -24,6 +24,7 @@ import './NameMenu.js';
import './TimeAgo.js';
import './ChatTextEditor.js';
import './WrapperModal.js';
+import './TipUser'
import './ChatSelect.js'
import './ChatSideNavHeads.js'
import './ChatLeaveGroup.js'
@@ -99,7 +100,9 @@ class ChatPage extends LitElement {
currentEditor: {type: String},
isEnabledChatEnter: {type: Boolean},
openTipUser: { type: Boolean },
- setOpenTipUser: {attribute: false}
+ openUserInfo: { type: Boolean },
+ selectedHead: { type: Object },
+ userName: { type: String }
}
}
@@ -829,7 +832,12 @@ class ChatPage extends LitElement {
this.insertImage = this.insertImage.bind(this)
this.toggleEnableChatEnter = this.toggleEnableChatEnter.bind(this)
this._downObserverhandler = this._downObserverhandler.bind(this)
+ this.setOpenTipUser = this.setOpenTipUser.bind(this)
+ this.setOpenUserInfo = this.setOpenUserInfo.bind(this)
+ this.setUserName = this.setUserName.bind(this)
+ this.setSelectedHead = this.setSelectedHead.bind(this)
this.selectedAddress = {}
+ this.userName = ""
this.chatId = ''
this.myAddress = ''
this.messages = []
@@ -889,16 +897,35 @@ class ChatPage extends LitElement {
this.requestUpdate()
}
- setOpenTipUser(props) {
+ setOpenTipUser(props) {
this.openTipUser = props;
}
+ setOpenUserInfo(props) {
+ this.openUserInfo = props;
+ }
+
+ setUserName(props) {
+ console.log({props})
+ this.userName = props.senderName ? props.senderName : props.sender;
+ this.setSelectedHead(props);
+ }
+
+ setSelectedHead(props) {
+ this.selectedHead = {
+ ...this.selectedHead,
+ address: props.sender,
+ name: props.senderName,
+ };
+ }
+
toggleEnableChatEnter(){
localStorage.setItem('isEnabledChatEnter', !this.isEnabledChatEnter )
this.isEnabledChatEnter = !this.isEnabledChatEnter
}
render() {
+ console.log(this.userName, "username here");
return html`
+
{
+ this.setOpenTipUser(false);
+ }}
+ zIndex=${55}
+ style=${this.openTipUser ? "display: block;" : "display: none;"}>
+ this.setOpenTipUser(val)}>
+
+
+
{
+ this.setOpenUserInfo(false);
+ this.setUserName("");
+ this.setSelectedHead({});
+ }}
+ style=${
+ this.openUserInfo ? "display: block" : "display: none"
+ }>
+ this.setOpenUserInfo(val)}
+ .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
+ .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
+ .userName=${this.userName}
+ .selectedHead=${this.selectedHead}
+ >
+
this.setOpenPrivateMessage(val)}
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}
- ?openTipUser=${this.openTipUser}
+ .setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
+ .setUserName=${(val) => this.setUserName(val)}
>
@@ -1670,27 +1727,30 @@ class ChatPage extends LitElement {
}
renderChatScroller() {
- console.log('renderChatScroller')
return html`
- this.setRepliedToMessageObj(val)}
- .setEditedMessageObj=${(val) => this.setEditedMessageObj(val)}
- .sendMessage=${(val) => this._sendMessage(val)}
- .sendMessageForward=${(messageText, typeMessage, chatReference, isForward, forwardParams)=> this.sendMessage(messageText, typeMessage, chatReference, isForward, forwardParams)}
- .showLastMessageRefScroller=${(val) => this.showLastMessageRefScroller(val)}
- .emojiPicker=${this.emojiPicker}
- ?isLoadingMessages=${this.isLoadingOldMessages}
- .setIsLoadingMessages=${(val) => this.setIsLoadingMessages(val)}
- .setForwardProperties=${(forwardedMessage)=> this.setForwardProperties(forwardedMessage)}
- .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
- .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
- ?openTipUser=${this.openTipUser}
- >
-
+ this.setRepliedToMessageObj(val)}
+ .setEditedMessageObj=${(val) => this.setEditedMessageObj(val)}
+ .sendMessage=${(val) => this._sendMessage(val)}
+ .sendMessageForward=${(messageText, typeMessage, chatReference, isForward, forwardParams)=> this.sendMessage(messageText, typeMessage, chatReference, isForward, forwardParams)}
+ .showLastMessageRefScroller=${(val) => this.showLastMessageRefScroller(val)}
+ .emojiPicker=${this.emojiPicker}
+ ?isLoadingMessages=${this.isLoadingOldMessages}
+ .setIsLoadingMessages=${(val) => this.setIsLoadingMessages(val)}
+ .setForwardProperties=${(forwardedMessage)=> this.setForwardProperties(forwardedMessage)}
+ .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
+ .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
+ .setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
+ .setUserName=${(val) => this.setUserName(val)}
+ .setSelectedHead=${(val) => this.setSelectedHead(val)}
+ ?openTipUser=${this.openTipUser}
+ .selectedHead=${this.selectedHead}
+ >
+
`
}
setIsLoadingMessages(val){
diff --git a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js
index 4abf5b0f..a63bc8c5 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js
@@ -17,7 +17,6 @@ import "./UserInfo/UserInfo";
class ChatRightPanel extends LitElement {
static get properties() {
return {
- openUserInfo: { type: Boolean },
leaveGroupObj: { type: Object },
error: { type: Boolean },
chatHeads: { type: Array },
@@ -27,7 +26,6 @@ class ChatRightPanel extends LitElement {
toggle: { attribute: false },
getMoreMembers:{ attribute: false },
setOpenPrivateMessage: { attribute: false },
- openTipUser: { type: Boolean },
userName: { type: String },
walletBalance: { type: Number },
sendMoneyLoading: { type: Boolean },
@@ -35,12 +33,13 @@ class ChatRightPanel extends LitElement {
errorMessage: { type: String },
successMessage: { type: String },
setOpenTipUser: { attribute: false },
+ setOpenUserInfo: { attribute: false },
+ setUserName: { attribute: false },
}
}
constructor() {
super()
- this.openUserInfo = false
this.leaveGroupObj = {}
this.leaveFee = 0.001
this.error = false
@@ -51,13 +50,10 @@ class ChatRightPanel extends LitElement {
this.viewElement = ''
this.downObserverElement = ''
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
- this.openTipUser = false
- this.userName = ""
this.sendMoneyLoading = false
this.btnDisable = false
this.errorMessage = ""
this.successMessage = ""
- this.setOpenUserInfo = this.setOpenUserInfo.bind(this);
}
static get styles() {
@@ -232,12 +228,6 @@ class ChatRightPanel extends LitElement {
}
}
-
-
- setOpenUserInfo(props) {
- this.openUserInfo = props
- }
-
render() {
const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner)
return html`
@@ -262,7 +252,11 @@ class ChatRightPanel extends LitElement {
if (val.address === this.myAddress) return;
console.log({ val });
this.selectedHead = val;
- this.openUserInfo = true;
+ this.setOpenUserInfo(true);
+ this.setUserName({
+ sender: val.address,
+ senderName: val.name ? val.name : ""
+ });
}}
chatInfo=${JSON.stringify(item)}
>`
@@ -275,7 +269,11 @@ class ChatRightPanel extends LitElement {
if (val.address === this.myAddress) return;
console.log({ val });
this.selectedHead = val;
- this.openUserInfo = true;
+ this.setOpenUserInfo(true);
+ this.setUserName({
+ sender: val.address,
+ senderName: val.name ? val.name : ""
+ });
}}
chatInfo=${JSON.stringify(item)}
>`
@@ -288,44 +286,17 @@ class ChatRightPanel extends LitElement {
if (val.address === this.myAddress) return;
console.log({ val });
this.selectedHead = val;
- this.openUserInfo = true;
+ this.setOpenUserInfo(true);
+ this.setUserName({
+ sender: val.address,
+ senderName: val.name ? val.name : ""
+ });
}}
chatInfo=${JSON.stringify(item)}
>`
})}
-
- {
- this.openUserInfo = false;
- this.userName = "";
- this.shadowRoot.querySelector("tip-user").shadowRoot.getElementById('amountInput').value = "";
- }}
- style=${
- this.openUserInfo ? "display: block" : "display: none"
- }>
- this.setOpenUserInfo(val)}
- .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
- .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
- .userName=${this.userName}
- .selectedHead=${this.selectedHead}
- >
-
- {
- this.setOpenTipUser(false);
- }}
- style=${this.openTipUser ? "display: block" : "display: none"}>
- this.setOpenTipUser(val)}
- >
-
-
`
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
index 82f04c84..2c62a563 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
@@ -87,8 +87,7 @@ export const chatStyles = css`
user-select: none;
float: right;
padding-left: 15px;
- padding-bottom: 3px;
- transform: translateY(10px);
+ text-align: right;
}
.message-data-time-hidden {
@@ -100,7 +99,7 @@ export const chatStyles = css`
float: right;
padding-left: 15px;
padding-bottom: 3px;
- transform: translateY(10px);
+ text-align: right;
}
.message-user-info {
@@ -134,7 +133,7 @@ export const chatStyles = css`
align-items: flex-start;
justify-content: center;
border-radius: 5px;
- padding: 12px 15px;
+ padding: 12px 15px 4px 15px;
width: fit-content;
min-width: 150px;
}
@@ -204,6 +203,8 @@ export const chatStyles = css`
}
.message {
+ display: flex;
+ flex-direction: column;
color: var(--chat-bubble-msg-color);
line-height: 19px;
overflow-wrap: anywhere;
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
index cea7541f..e9db4e5e 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
@@ -10,7 +10,6 @@ import './LevelFounder.js';
import './NameMenu.js';
import './ChatModals.js';
import './WrapperModal';
-import './TipUser'
import "./UserInfo/UserInfo";
import '@vaadin/icons';
import '@vaadin/icon';
@@ -44,6 +43,10 @@ class ChatScroller extends LitElement {
chatId: { type: String },
setForwardProperties: { attribute: false },
setOpenPrivateMessage: { attribute: false },
+ setOpenUserInfo: { attribute: false },
+ setOpenTipUser: { attribute: false },
+ setUserName: { attribute: false },
+ setSelectedHead: { attribute: false },
openTipUser: { type: Boolean },
openUserInfo: { type: Boolean },
userName: { type: String },
@@ -58,13 +61,10 @@ class ChatScroller extends LitElement {
this.messages = []
this._upObserverhandler = this._upObserverhandler.bind(this)
this._downObserverHandler = this._downObserverHandler.bind(this)
- this.setOpenUserInfo = this.setOpenUserInfo.bind(this)
- this.setUserName = this.setUserName.bind(this)
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")
this.openTipUser = false;
this.openUserInfo = false;
- this.userName = "";
}
render() {
@@ -138,36 +138,6 @@ class ChatScroller extends LitElement {
})}
- {
- this.setOpenTipUser(false);
- }}
- zIndex=${55}
- style=${this.openTipUser ? "display: block;" : "display: none;"}>
- this.setOpenTipUser(val)}>
-
-
- {
- this.openUserInfo = false;
- this.userName = "";
- this.selectedHead = {};
- }}
- style=${
- this.openUserInfo ? "display: block" : "display: none"
- }>
- this.setOpenUserInfo(val)}
- .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
- .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
- .userName=${this.userName}
- .selectedHead=${this.selectedHead}
- >
-
`
}
@@ -198,26 +168,10 @@ class ChatScroller extends LitElement {
return true;
}
- setToggledMessage (message) {
+ setToggledMessage(message) {
toggledMessage = message;
}
-
-
- setOpenUserInfo(props) {
- this.openUserInfo = props;
- }
-
- setUserName(props) {
- console.log({props})
- this.userName = props.senderName ? props.senderName : props.sender;
- this.selectedHead = {
- ...this.selectedHead,
- address: props.sender,
- name: props.senderName,
- };
- }
-
async firstUpdated() {
this.emojiPicker.on('emoji', selection => {
@@ -316,7 +270,7 @@ class MessageTemplate extends LitElement {
setOpenTipUser: { attribute: false },
setOpenUserInfo: { attribute: false },
setUserName: { attribute: false },
- openTipUser:{type: Boolean}
+ openTipUser:{ type: Boolean }
}
}
@@ -365,7 +319,6 @@ class MessageTemplate extends LitElement {
}
render() {
- console.log('this.userName', this.userName)
const hidemsg = this.hideMessages;
let message = "";
let messageVersion2 = ""
@@ -873,10 +826,13 @@ class ChatMenu extends LitElement {
}}">
-