From 9fec8908c1f7380922c8cdb42d0516ecd522f274 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Mon, 9 Jan 2023 19:37:52 -0500 Subject: [PATCH] Chat User Info Completed --- .../plugins/core/components/ChatRightPanel.js | 116 +++--------------- .../core/components/ChatScroller-css.js | 7 ++ .../plugins/core/components/ChatScroller.js | 80 ++++++++++-- .../core/components/ChatSideNavHeads.js | 15 +-- .../plugins/core/components/UserInfo.js | 0 5 files changed, 94 insertions(+), 124 deletions(-) delete mode 100644 qortal-ui-plugins/plugins/core/components/UserInfo.js diff --git a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js index ec38a6fd..fa1734c0 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js +++ b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js @@ -12,15 +12,14 @@ import "@material/mwc-icon"; import '@vaadin/button'; import "./WrapperModal"; import "./TipUser" +import "./UserInfo/UserInfo"; class ChatRightPanel extends LitElement { static get properties() { return { - isLoading: { type: Boolean }, openUserInfo: { type: Boolean }, leaveGroupObj: { type: Object }, error: { type: Boolean }, - message: { type: String }, chatHeads: { type: Array }, groupAdmin: { attribute: false }, groupMembers: { attribute: false }, @@ -41,12 +40,10 @@ class ChatRightPanel extends LitElement { constructor() { super() - this.isLoading = false this.openUserInfo = false this.leaveGroupObj = {} this.leaveFee = 0.001 this.error = false - this.message = "" this.chatHeads = [] this.groupAdmin = [] this.groupMembers = [] @@ -61,6 +58,7 @@ class ChatRightPanel extends LitElement { this.errorMessage = "" this.successMessage = "" this.setOpenTipUser = this.setOpenTipUser.bind(this); + this.setOpenUserInfo = this.setOpenUserInfo.bind(this); } static get styles() { @@ -190,46 +188,6 @@ class ChatRightPanel extends LitElement { font-size: 14px; color: var(--chat-bubble-msg-color); } - - .user-info-header { - font-family: Montserrat, sans-serif; - text-align: center; - font-size: 25px; - color: var(--chat-bubble-msg-color); - margin-bottom: 10px; - padding: 10px 0; - user-select: none; - } - - .send-message-button { - font-family: Roboto, sans-serif; - letter-spacing: 0.3px; - font-weight: 300; - padding: 8px 5px; - border-radius: 3px; - text-align: center; - color: var(--mdc-theme-primary); - transition: all 0.3s ease-in-out; - } - - .send-message-button:hover { - cursor: pointer; - background-color: #03a8f485; - } - - .close-icon { - position: absolute; - top: 3px; - right: 5px; - color: #676b71; - width: 14px; - transition: all 0.1s ease-in-out; - } - - .close-icon:hover { - cursor: pointer; - color: #494c50; - } ` } @@ -279,6 +237,10 @@ class ChatRightPanel extends LitElement { this.openTipUser = props } + setOpenUserInfo(props) { + this.openUserInfo = props + } + render() { const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner) return html` @@ -291,7 +253,7 @@ class ChatRightPanel extends LitElement {

${this.leaveGroupObj && this.leaveGroupObj.description}

Members: ${this.leaveGroupObj && this.leaveGroupObj.memberCount}

- +

Date created : ${new Date(this.leaveGroupObj.created).toLocaleDateString("en-US")}


@@ -337,9 +299,8 @@ class ChatRightPanel extends LitElement {
- { - if (this.isLoading) return this.openUserInfo = false; this.userName = ""; this.shadowRoot.querySelector("tip-user").shadowRoot.getElementById('amountInput').value = ""; @@ -347,59 +308,14 @@ class ChatRightPanel extends LitElement { style=${ this.openUserInfo ? "display: block" : "display: none" }> -
- { - this.openUserInfo = false - }} - ?disabled="${this.isLoading}"> - - -
- ${translate("chatpage.cchange58")} -
-
{ - this.openTipUser = true - this.openUserInfo = false - this.chatEditor.disable(); - }}> - ${translate("chatpage.cchange59")} -
-
- - - ${translate("grouppage.gchange36")}   - - - - - ${this.message} - -
-
+ this.setOpenUserInfo(val)} + .setOpenTipUser=${(val) => this.setOpenTipUser(val)} + .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} + .chatEditor=${this.chatEditor} + .userName=${this.userName} + .selectedHead=${this.selectedHead} + > { diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index 1d054bab..64b49b45 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -63,12 +63,19 @@ export const chatStyles = css` margin-bottom: 5px; } + .forwarded-text { + user-select: none; + color: #03a9f4; + margin-bottom: 5px; + } + .message-data-forward { user-select: none; color: var(--mainmenutext); margin-bottom: 5px; font-size: 12px; } + .message-data-my-name { color: #cf21e8; text-shadow: 0 0 3px #cf21e8; diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 5c0a7954..38903750 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -5,18 +5,19 @@ import { translate, get } from 'lit-translate'; import {unsafeHTML} from 'lit/directives/unsafe-html.js'; import { chatStyles } from './ChatScroller-css.js' import { Epml } from "../../../epml"; +import { EmojiPicker } from 'emoji-picker-js'; +import { cropAddress } from "../../utils/cropAddress"; import './LevelFounder.js'; import './NameMenu.js'; import './ChatModals.js'; import './WrapperModal'; import './TipUser' +import "./UserInfo/UserInfo"; import '@vaadin/icons'; import '@vaadin/icon'; import '@material/mwc-button'; import '@material/mwc-dialog'; import '@material/mwc-icon'; -import { EmojiPicker } from 'emoji-picker-js'; -import { cropAddress } from "../../utils/cropAddress"; const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) let toggledMessage = {} @@ -42,7 +43,9 @@ class ChatScroller extends LitElement { setForwardProperties: { attribute: false }, setOpenPrivateMessage: { attribute: false }, openTipUser: { type: Boolean }, - userName: { type: String } + openUserInfo: { type: Boolean }, + userName: { type: String }, + selectedHead: { type: Object } } } @@ -54,14 +57,17 @@ class ChatScroller extends LitElement { this._upObserverhandler = this._upObserverhandler.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.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]") this.openTipUser = false; + this.openUserInfo = false; this.userName = ""; } render() { + console.log(9, "chat scroller here"); let formattedMessages = this.messages.reduce((messageArray, message, index) => { const lastGroupedMessage = messageArray[messageArray.length - 1]; let timestamp; @@ -126,6 +132,7 @@ class ChatScroller extends LitElement { .setForwardProperties=${this.setForwardProperties} .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} .setOpenTipUser=${(val) => this.setOpenTipUser(val)} + .setOpenUserInfo=${(val) => this.setOpenUserInfo(val)} .setUserName=${(val) => this.setUserName(val)}> ` ) @@ -146,6 +153,25 @@ class ChatScroller extends LitElement { .setOpenTipUser=${(val) => this.setOpenTipUser(val)}> + { + this.openUserInfo = false; + this.chatEditor.enable(); + this.userName = ""; + this.selectedHead = {}; + }} + style=${ + this.openUserInfo ? "display: block" : "display: none" + }> + this.setOpenUserInfo(val)} + .setOpenTipUser=${(val) => this.setOpenTipUser(val)} + .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} + .chatEditor=${this.chatEditor} + .userName=${this.userName} + .selectedHead=${this.selectedHead} + > + ` } @@ -159,6 +185,9 @@ class ChatScroller extends LitElement { if(changedProperties.has('openTipUser')){ return true } + if(changedProperties.has('openUserInfo')){ + return true + } // Only update element if prop1 changed. return changedProperties.has('messages'); } @@ -179,8 +208,18 @@ class ChatScroller extends LitElement { this.chatEditor.disable(); } + setOpenUserInfo(props) { + this.openUserInfo = props; + this.chatEditor.disable(); + } + setUserName(props) { - this.userName = props; + this.userName = props.senderName ? props.senderName : props.sender; + this.selectedHead = { + ...this.selectedHead, + address: props.sender, + name: props.senderName, + }; } async firstUpdated() { @@ -280,6 +319,7 @@ class MessageTemplate extends LitElement { viewImage: { type: Boolean }, setOpenPrivateMessage : { attribute: false }, setOpenTipUser: { attribute: false }, + setOpenUserInfo: { attribute: false }, setUserName: { attribute: false } } } @@ -450,7 +490,13 @@ class MessageTemplate extends LitElement { (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) ? ( html` -
+
{ + if (this.myAddress === this.messageObj.sender) return; + this.setOpenUserInfo(true); + this.setUserName(this.messageObj); + }} class="message-data-avatar"> ${avatarImg}
` @@ -477,7 +523,14 @@ class MessageTemplate extends LitElement {
${this.isFirstMessage ? html` - + { + if (this.myAddress === this.messageObj.sender) return; + this.setOpenUserInfo(true); + this.setUserName(this.messageObj); + }} + class="message-data-name"> ${nameMenu} ` @@ -485,7 +538,7 @@ class MessageTemplate extends LitElement { } ${isForwarded ? html` - + ${forwarded} ` @@ -499,8 +552,15 @@ class MessageTemplate extends LitElement {
${repliedToData && html`
-

- ${repliedToData.senderName ?? cropAddress(repliedToData.sender)} +

{ + if (this.myAddress === repliedToData.sender) return; + this.setOpenUserInfo(true); + this.setUserName(repliedToData) + }} + class="original-message-sender"> + ${repliedToData.senderName ?? cropAddress(repliedToData.sender)}

${repliedToData.decodedMessage.messageText} @@ -837,7 +897,7 @@ class ChatMenu extends LitElement { data-text="${translate("blockpage.bcchange18")}" @click=${() => { this.setOpenTipUser(true); - this.setUserName(this.originalMessage.sender); + this.setUserName(this.originalMessage); }}>

diff --git a/qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js b/qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js index 220aeb79..b0798399 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js +++ b/qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js @@ -93,7 +93,6 @@ class ChatSideNavHeads extends LitElement { } imageHTMLRes.onload = () => { this.isImageLoaded = true; - this.requestUpdate(); } imageHTMLRes.onerror = () => { if (this.imageFetches < 4) { @@ -105,14 +104,10 @@ class ChatSideNavHeads extends LitElement { this.isImageLoaded = false } }; - console.log(imageHTMLRes, "here8") return imageHTMLRes; } render() { - console.log(9, 'chat side nav head'); - console.log(this.isImageLoaded, 'Is image loaded'); - console.log(this.chatInfo, 'Chat Info Here'); let avatarImg = "" if (this.chatInfo.name) { const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; @@ -181,15 +176,7 @@ class ChatSideNavHeads extends LitElement { this.config = JSON.parse(c) }) }) - parentEpml.imReady() - - - } - - updated(changedProperties) { - if (changedProperties && changedProperties.has("avatarImg")) { - console.log(this.avatarImg, "avatarImg"); - } + parentEpml.imReady(); } shouldUpdate(changedProperties) { diff --git a/qortal-ui-plugins/plugins/core/components/UserInfo.js b/qortal-ui-plugins/plugins/core/components/UserInfo.js deleted file mode 100644 index e69de29b..00000000