Chat User Info Completed

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`
@@ -337,9 +299,8 @@ class ChatRightPanel extends LitElement {
                 <div id='downObserver'></div>
             </div>
 
-         <wrapper-modal 
+            <wrapper-modal 
             .onClickFunc=${() => {
-                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"
             }>
-            <div style=${"position: relative;"}>
+                <user-info
-                <vaadin-icon
+                    .setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
-                class="close-icon"
+                    .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
-                icon="vaadin:close-big"
+                    .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
-                slot="icon"
+                    .chatEditor=${this.chatEditor}
-                @click=${() => {
+                    .userName=${this.userName}
-                    this.openUserInfo = false
+                    .selectedHead=${this.selectedHead} 
-                }}
+                ></user-info>
-                ?disabled="${this.isLoading}">
-                </vaadin-icon>
-                <div class="user-info-header">
-                ${translate("chatpage.cchange57")}
-                </div>
-                <div 
-                    class="send-message-button" 
-                    @click="${() => {
-                        this.setOpenPrivateMessage({
-                            name: this.userName,
-                            open: true   
-                        })
-                        this.openUserInfo = false
-                    }   
-                }">
-                    ${translate("chatpage.cchange58")}
-                </div>
-                    <div 
-                    style=${"margin-top: 5px;"} 
-                    class="send-message-button" 
-                    @click=${() => {
-                        this.openTipUser = true
-                        this.openUserInfo = false
-                        this.chatEditor.disable();
-                    }}>
-                        ${translate("chatpage.cchange59")}
-                    </div>
-                <div ?hidden="${!this.isLoading || this.message === ""}" style="text-align: right; height: 36px;">
-                    <span ?hidden="${!this.isLoading}">
-                        <!-- loading message -->
-                        ${translate("grouppage.gchange36")} &nbsp;
-                        <paper-spinner-lite
-                            style="margin-top:12px;"
-                            ?active="${this.isLoading}"
-                            alt="Leaving"
-                        >
-                        </paper-spinner-lite>
-                    </span>
-                    <span 
-                    ?hidden=${this.message === ""} 
-                    style="${this.error ? "color:red;" : ""}">
-                        ${this.message}
-                    </span>
-                </div>
-            </div>
             </wrapper-modal>
             <wrapper-modal
             .onClickFunc=${() => {

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;

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)}>
                             </message-template>`
                     )
@@ -146,6 +153,25 @@ class ChatScroller extends LitElement {
                     .setOpenTipUser=${(val) => this.setOpenTipUser(val)}>
                 </tip-user>
             </wrapper-modal>
+            <wrapper-modal 
+            .onClickFunc=${() => {
+                this.openUserInfo = false;
+                this.chatEditor.enable();
+                this.userName = "";
+                this.selectedHead = {};
+            }} 
+            style=${
+                this.openUserInfo ? "display: block" : "display: none"
+            }>
+                <user-info
+                    .setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
+                    .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
+                    .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
+                    .chatEditor=${this.chatEditor}
+                    .userName=${this.userName}
+                    .selectedHead=${this.selectedHead} 
+                ></user-info>
+            </wrapper-modal>
         `
     }
 
@@ -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`
-                                    <div class="message-data-avatar">
+                                    <div 
+                                    style=${this.myAddress === this.messageObj.sender ? "cursor: auto;" : "cursor: pointer;"}
+                                    @click=${() => {
+                                        if (this.myAddress === this.messageObj.sender) return;
+                                        this.setOpenUserInfo(true);
+                                        this.setUserName(this.messageObj);
+                                    }} class="message-data-avatar">
                                         ${avatarImg}
                                     </div>
                                 `
@@ -477,7 +523,14 @@ class MessageTemplate extends LitElement {
                             <div class="message-user-info">
                                 ${this.isFirstMessage ? 
                                     html`
-                                        <span class="message-data-name">
+                                        <span 
+                                        style=${this.myAddress === this.messageObj.sender ? "cursor: auto;" : "cursor: pointer;"}
+                                        @click=${() => {
+                                            if (this.myAddress === this.messageObj.sender) return;
+                                            this.setOpenUserInfo(true);
+                                            this.setUserName(this.messageObj);
+                                        }}
+                                        class="message-data-name">
                                             ${nameMenu}
                                         </span>
                                         `
@@ -485,7 +538,7 @@ class MessageTemplate extends LitElement {
                                 }
                                 ${isForwarded ? 
                                     html`
-                                        <span class="message-data-name">
+                                        <span class="forwarded-text">
                                             ${forwarded}
                                         </span>
                                         `
@@ -499,8 +552,15 @@ class MessageTemplate extends LitElement {
                             </div>
                                 ${repliedToData && html`
                                     <div class="original-message">
-                                        <p class="original-message-sender">
+                                        <p 
-                                            ${repliedToData.senderName ?? cropAddress(repliedToData.sender)}
+                                        style=${this.myAddress === repliedToData.sender ? "cursor: auto;" : "cursor: pointer;"}
+                                        @click=${() => {
+                                            if (this.myAddress === repliedToData.sender) return;
+                                            this.setOpenUserInfo(true);
+                                            this.setUserName(repliedToData)
+                                        }} 
+                                            class="original-message-sender">
+                                             ${repliedToData.senderName ?? cropAddress(repliedToData.sender)}
                                         </p>
                                         <p class="replied-message">
                                             ${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);
                     }}>
                         <vaadin-icon icon="vaadin:dollar" slot="icon"></vaadin-icon>
                     </div>

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()
+        parentEpml.imReady();     
-
-        
-    }
-
-    updated(changedProperties) {
-        if (changedProperties && changedProperties.has("avatarImg")) {
-            console.log(this.avatarImg, "avatarImg");
-        }
     }
 
     shouldUpdate(changedProperties) {