Added User Info Folder (Fixed .gitignore)

.gitignore

@@ -5,7 +5,7 @@ yarn.lock
 qortal-ui-plugins/plugins/core/**/*.js
 !*.src.js
 qortal-ui-core/src/redux/app/version.js
-!qortal-ui-plugins/plugins/core/components/*.js
+!qortal-ui-plugins/plugins/core/components/**/*.js
 
 # Node modules
 node_modules/

qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo-css.js

@@ -0,0 +1,69 @@
+import { css } from 'lit'
+
+export const userInfoStyles = css`
+  .user-info-header {
+    font-family: Montserrat, sans-serif;
+    text-align: center;
+    font-size: 28px;
+    color: var(--chat-bubble-msg-color);
+    margin-bottom: 10px;
+    padding: 10px 0;
+    user-select: none;
+  }
+
+  .avatar-container {
+    display: flex;
+    justify-content: center;
+  }
+
+  .user-info-avatar {
+    width: 100px; 
+    height: 100px; 
+    border-radius: 50%; 
+    margin: 10px 0;
+  }
+
+  .user-info-no-avatar {
+    display: flex; 
+    justify-content: center; 
+    align-items: center; 
+    text-transform: capitalize;
+    font-size: 50px;
+    font-family: Roboto, sans-serif;
+    width: 100px; 
+    height: 100px; 
+    border-radius:50%; 
+    background: var(--chatHeadBg);
+    color: var(--chatHeadText); 
+  }
+  
+  .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;
+  }
+`

qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo.js

@@ -0,0 +1,134 @@
+import { LitElement, html } from 'lit';
+import { render } from 'lit/html.js';
+import { translate } from 'lit-translate';
+import { userInfoStyles } from './UserInfo-css.js';
+import { Epml } from '../../../../epml';
+import '@vaadin/button';
+import '@polymer/paper-progress/paper-progress.js';
+import { cropAddress } from '../../../utils/cropAddress.js';
+
+// const parentEpml = new Epml({ type: "WINDOW", source: window.parent });
+
+export class UserInfo extends LitElement {
+  static get properties() {
+		return {
+        setOpenUserInfo: { attribute: false },
+        setOpenTipUser: { attribute: false },
+        setOpenPrivateMessage: { attribute: false },
+        chatEditor: { type: Object },
+        userName: { type: String },
+        selectedHead: { type: Object },
+        isImageLoaded: { type: Boolean }
+        }
+	}
+
+  constructor() {
+    super()
+    this.isImageLoaded = false
+    this.selectedHead = {}
+    this.imageFetches = 0
+}
+
+  static styles = [userInfoStyles]
+
+  createImage(imageUrl)  {
+    const imageHTMLRes = new Image();
+    imageHTMLRes.src = imageUrl;
+    imageHTMLRes.classList.add("user-info-avatar");
+    // imageHTMLRes.style= "width:30px; height:30px; float: left; border-radius:50%; font-size:14px";
+    imageHTMLRes.onload = () => {
+        this.isImageLoaded = true;
+    }
+    imageHTMLRes.onerror = () => {   
+        if (this.imageFetches < 4) {
+            setTimeout(() => {
+                this.imageFetches = this.imageFetches + 1;
+                imageHTMLRes.src = imageUrl;
+            }, 500);
+        } else {
+            this.isImageLoaded = false
+        }
+    };
+    return imageHTMLRes;
+  }
+
+   updated(changedProperties) {
+    if (changedProperties && changedProperties.has('selectedHead')) {
+      if (this.selectedHead) {
+        console.log(this.selectedHead, "selected head")
+      }
+      }
+    }
+
+  render() {
+    let avatarImg = "";
+    if (this.selectedHead.name) {
+        const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
+        const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
+        const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.selectedHead.name}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`;
+       avatarImg = this.createImage(avatarUrl);
+    }
+    return html`
+      <div style=${"position: relative;"}>
+        <vaadin-icon
+          class="close-icon"
+          icon="vaadin:close-big"
+          slot="icon"
+          @click=${() => {
+              this.setOpenUserInfo(false)
+              this.chatEditor.enable();
+          }}>
+        </vaadin-icon>
+          ${this.isImageLoaded ? 
+          html`
+            <div class="avatar-container">
+              ${avatarImg}
+            </div>` : 
+          html``}
+          ${!this.isImageLoaded && this.selectedHead.name ? 
+            html`
+            <div class="avatar-container">
+              <div class="user-info-no-avatar">
+                ${this.selectedHead.name.charAt(0)}
+              </div>
+            </div>
+            `
+            : ""}
+          ${!this.isImageLoaded && !this.selectedHead.name ? 
+            html`
+              <div
+                class="avatar-container"
+              >
+                <img src="/img/qortal-chat-logo.png" alt="avatar" />
+              </div>`
+            : ""}
+        <div class="user-info-header">
+          ${this.selectedHead.name ? this.selectedHead.name : cropAddress(this.selectedHead.address)}
+        </div>
+        <div 
+            class="send-message-button" 
+            @click="${() => {
+                this.setOpenPrivateMessage({
+                    name: this.userName,
+                    open: true   
+                })
+                this.setOpenUserInfo(false);
+            }   
+        }">
+            ${translate("chatpage.cchange58")}
+        </div>
+            <div 
+            style=${"margin-top: 5px;"} 
+            class="send-message-button" 
+            @click=${() => {
+                this.setOpenTipUser(true);
+                this.setOpenUserInfo(false);
+                this.chatEditor.disable();
+            }}>
+                ${translate("chatpage.cchange59")}
+            </div>
+      </div>
+     `
+  }
+}
+customElements.define('user-info', UserInfo);