Started Tip User

qortal-ui-core/language/us.json

@@ -565,7 +565,7 @@
       "gchange32": "Date Updated",
       "gchange33": "Joining",
       "gchange34": "Join Group",
-      "gchange35": "Leave Group Request",
+      "gchange35": "User Info",
       "gchange36": "Leaving",
       "gchange37": "Leave Group",
       "gchange38": "Manage Group Owner:",
@@ -584,7 +584,12 @@
       "gchange51": "Join",
       "gchange52": "Admin",
       "gchange53": "Member",
-      "gchange54": "Members"
+      "gchange54": "Members",
+      "gchange55": "Tip QORT to",
+      "gchange56": "SEND MESSAGE",
+      "gchange57": "TIP USER",
+      "gchange58": "Tip Amount",
+      "gchange59": "Available Balance"
    },
    "puzzlepage": {
       "pchange1": "Puzzles",

qortal-ui-core/src/components/app-view.js

@@ -44,7 +44,6 @@ class AppView extends connect(store)(LitElement) {
 
                 app-drawer {
                     box-shadow: var(--shadow-2);
-                    background: var(--sidetopbar);
                 }
 
                 app-header {
@@ -66,24 +65,31 @@ class AppView extends connect(store)(LitElement) {
                     background: var(--sidetopbar);
                 }
 
-                .sideBarMenu{
+                .sideBarMenu {
                     overflow-y: auto;
                     flex: 1 1;
                 }
 
-                #sideBar::-webkit-scrollbar {
+                .sideBarMenu::-webkit-scrollbar-track {
-                    width: 7px;
+                    background-color: whitesmoke;
-                    background-color: transparent;
+                    border-radius: 7px;
                 }
         
-                #sideBar::-webkit-scrollbar-track {
+                .sideBarMenu::-webkit-scrollbar {
-                     background-color: transparent;
+                    width: 6px;
+                    border-radius: 7px;
+                    background-color: whitesmoke;
                 }
         
-                #sideBar::-webkit-scrollbar-thumb {
+                .sideBarMenu::-webkit-scrollbar-thumb {
-                     background-color: #333;
+                    background-color: rgb(180, 176, 176);
-                     border-radius: 6px;
+                    border-radius: 7px;
-                     border: 3px solid #333;
+                    transition: all 0.3s ease-in-out;
+                }
+        
+                .sideBarMenu::-webkit-scrollbar-thumb:hover {
+                    background-color: rgb(148, 146, 146);
+                    cursor: pointer;
                 }     
             `
         ]

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

@@ -105,6 +105,7 @@ class ChatPage extends LitElement {
         flex-direction: column;
         height: 50vh;
         overflow-y: auto;
+        overflow-x: hidden;
         width: 100%;
     }
 
@@ -287,7 +288,6 @@ class ChatPage extends LitElement {
 
   .chat-container {
       display: grid;
-      grid-template-rows: minmax(6%, 92vh) minmax(40px, auto);
       max-height: 100%;
   }
 
@@ -575,13 +575,6 @@ class ChatPage extends LitElement {
       object-fit: contain;
   }
 
-    .chat-container {
-        display: grid;
-        grid-template-rows: minmax(40px, auto) minmax(6%, 92vh) minmax(40px, auto);
-        max-height: 100%;
-        flex: 3;
-    }
-
     .chat-right-panel {
         flex: 0;
         border-left: 3px solid rgb(221, 221, 221);
@@ -845,13 +838,16 @@ class ChatPage extends LitElement {
     render() {
         return html`
             <div class="main-container">
-            <div class="chat-container">
+            <div 
-                ${(!this.isReceipient && +this._chatId !== 0) ? html`
+            class="chat-container" 
+            style=${(!this.isReceipient && +this._chatId !== 0) ? "grid-template-rows: minmax(40px, auto) minmax(6%, 92vh) minmax(40px, auto); flex: 3;" : "grid-template-rows: minmax(6%, 92vh) minmax(40px, auto); flex: 2;"}>
+                ${(!this.isReceipient && +this._chatId !== 0) ? 
+                html`
                 <div class="group-nav-container">
-                <div @click=${this._toggle} style="height: 100%;display: flex;align-items: center;flex-grow: 1;cursor: pointer;cursor:pointer;user-select:none">
+                    <div @click=${this._toggle} style="height: 100%; display: flex; align-items: center;flex-grow: 1; cursor: pointer; cursor: pointer; user-select: none">
                         <p class="group-name">${this.groupInfo && this.groupInfo.groupName}</p>
                     </div>
-                   <div style="display:flex;height:100%;align-items:center">
+                    <div style="display: flex; height: 100%; align-items: center">
                         <vaadin-icon class="top-bar-icon" @click=${this._toggle} style="margin: 0px 10px" icon="vaadin:info" slot="icon"></vaadin-icon>
                         <!-- <chat-group-settings .chatHeads=${this.chatHeads} .selectedAddress=${this.selectedAddress} .leaveGroupObj=${this.groupInfo} .setActiveChatHeadUrl=${(val)=> this.setActiveChatHeadUrl(val)}></chat-group-settings> -->
                         <!-- <vaadin-icon class="top-bar-icon" style="margin: 0px 20px" icon="vaadin:search" slot="icon"></vaadin-icon> -->
@@ -859,7 +855,7 @@ class ChatPage extends LitElement {
                         <!-- <chat-leave-group .chatHeads=${this.chatHeads} .selectedAddress=${this.selectedAddress} .leaveGroupObj=${this.groupInfo} .setActiveChatHeadUrl=${(val)=> this.setActiveChatHeadUrl(val)}></chat-leave-group> -->
                     </div>
                 </div>
-                ` : html`<div></div>`}
+                ` : null}
                
                 <div>
                     ${this.isLoadingMessages ? 
@@ -1145,7 +1141,17 @@ class ChatPage extends LitElement {
             </wrapper-modal>
         </div>
         <div  class="chat-right-panel ${this.shifted ? "movedin" : "movedout"}"   ${animate()}>
-               <chat-right-panel .getMoreMembers=${(val)=> this.getMoreMembers(val)} .toggle=${(val)=> this._toggle(val)} .selectedAddress=${this.selectedAddress} .groupMembers=${this.groupMembers} .groupAdmin=${this.groupAdmin} .leaveGroupObj=${this.groupInfo}></chat-right-panel>
+               <chat-right-panel 
+               .getMoreMembers=${(val)=> this.getMoreMembers(val)} 
+               .toggle=${(val)=> this._toggle(val)} 
+               .selectedAddress=${this.selectedAddress} 
+               .groupMembers=${this.groupMembers} 
+               .groupAdmin=${this.groupAdmin} 
+               .leaveGroupObj=${this.groupInfo}
+               .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
+               .chatEditor=${this.chatEditor}
+               >
+            </chat-right-panel>
            
             </div>
             </div>

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

@@ -2,6 +2,7 @@ import { LitElement, html, css } from "lit"
 import { render } from "lit/html.js"
 import { get, translate } from "lit-translate"
 import { Epml } from "../../../epml"
+import { getUserNameFromAddress } from "../../utils/getUserNameFromAddress"
 import snackbar from "./snackbar.js"
 import "@material/mwc-button"
 import "@material/mwc-dialog"
@@ -15,7 +16,7 @@ class ChatRightPanel extends LitElement {
 	static get properties() {
 		return {
 			isLoading: { type: Boolean },
-			isOpenLeaveModal: { type: Boolean },
+			openUserInfo: { type: Boolean },
 			leaveGroupObj: { type: Object },
 			error: { type: Boolean },
 			message: { type: String },
@@ -24,14 +25,18 @@ class ChatRightPanel extends LitElement {
 			groupMembers: { attribute: false },
 			selectedHead: { type: Object },
             toggle: { attribute: false },
-            getMoreMembers:{ attribute: false }
+            getMoreMembers:{ attribute: false },
+            setOpenPrivateMessage: { attribute: false },
+            openTipUser: { type: Boolean },
+            userName: { type: String },
+            chatEditor: { type: Object }
 		}
 	}
 
 	constructor() {
 		super()
 		this.isLoading = false
-		this.isOpenLeaveModal = false
+		this.openUserInfo = false
 		this.leaveGroupObj = {}
 		this.leaveFee = 0.001
 		this.error = false
@@ -42,10 +47,13 @@ class ChatRightPanel extends LitElement {
         this.observerHandler = this.observerHandler.bind(this)
         this.viewElement = ''
         this.downObserverElement = ''
+        this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
+        this.openTipUser = false
+        this.userName = {}
 	}
 
-static get styles() {
+    static get styles() {
-return css`
+    return css`
         .top-bar-icon {
             cursor: pointer;
             height: 18px;
@@ -171,8 +179,94 @@ return css`
             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;
+        }
+
+        .tip-user-header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 12px;
+            border-bottom: 1px solid whitesmoke;
+            gap: 25px;
+        }
+
+        .tip-user-header-font {
+            font-family: Montserrat, sans-serif;
+            font-size: 20px;
+            color: var(--chat-bubble-msg-color);
+        }
+
+        .tip-user-body {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            padding: 15px 10px;
+        }
+
+        .tip-input {
+            width: 300px;
+            margin-bottom: 15px;
+            outline: 0;
+            border-width: 0 0 2px;
+            border-color: var(--mdc-theme-primary);
+            background-color: transparent;
+            padding: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 15px;
+            color: var(--chat-bubble-msg-color);
+        }
+
+        .tip-input::selection {
+            background-color: var(--mdc-theme-primary);
+            color: white;   
+        }
+
+        .tip-input::placeholder {
+            opacity: 0.9;
+            color: var(--black);
+        }
+
+    `
+    }
 
 	firstUpdated() {
         this.viewElement = this.shadowRoot.getElementById('viewElement');
@@ -180,6 +274,15 @@ return css`
         this.elementObserver();
     }
 
+    async updated(changedProperties) {
+        if (changedProperties && changedProperties.has('selectedHead')) {
+            if (this.selectedHead !== {}) {             
+                const userName = await getUserNameFromAddress(this.selectedHead.address);
+                this.userName = userName;
+            }
+        }
+    }
+
 	timeIsoString(timestamp) {
 		let myTimestamp = timestamp === undefined ? 1587560082346 : timestamp
 		let time = new Date(myTimestamp)
@@ -212,7 +315,7 @@ return css`
 					if (myRef && myRef.type) {
 						clearInterval(interval)
 						this.isLoading = false
-						this.isOpenLeaveModal = false
+						this.openUserInfo = false
 					}
 				} catch (error) {}
 				stop = false
@@ -437,7 +540,7 @@ return css`
         }
 	render() {
         console.log('this.groupMembers', this.groupMembers);
-        console.log(5, "Chat Right Panel Here");
+        console.log(18, "Chat Right Panel Here");
         const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner)
 		return html`
         <div class="container">
@@ -457,7 +560,12 @@ return css`
                 ${owner.map((item) => {
                     return html`<chat-side-nav-heads
                         activeChatHeadUrl=""
-                    .setActiveChatHeadUrl=${(val) => {}}
+                        .setActiveChatHeadUrl=${(val) => {
+                            if (val.address === this.myAddress) return;
+                            console.log({ val });
+                            this.selectedHead = val;
+                            this.openUserInfo = true;
+                        }}
                         chatInfo=${JSON.stringify(item)}
                     ></chat-side-nav-heads>`
                 })}
@@ -465,7 +573,12 @@ return css`
                 ${this.groupAdmin.map((item) => {
                     return html`<chat-side-nav-heads
                         activeChatHeadUrl=""
-                    .setActiveChatHeadUrl=${(val) => {}}
+                        .setActiveChatHeadUrl=${(val) => {
+                            if (val.address === this.myAddress) return;
+                            console.log({ val });
+                            this.selectedHead = val;
+                            this.openUserInfo = true;
+                        }}
                         chatInfo=${JSON.stringify(item)}
                     ></chat-side-nav-heads>`
                 })}
@@ -474,9 +587,10 @@ return css`
                     return html`<chat-side-nav-heads
                         activeChatHeadUrl=""
                         .setActiveChatHeadUrl=${(val) => {
-                        console.log({ val })
+                            if (val.address === this.myAddress) return;
-                        this.selectedHead = val
+                            console.log({ val });
-                        this.isOpenLeaveModal = true
+                            this.selectedHead = val;
+                            this.openUserInfo = true;
                         }}
                         chatInfo=${JSON.stringify(item)}
                     ></chat-side-nav-heads>`
@@ -485,27 +599,49 @@ return css`
             </div>
 
          <wrapper-modal 
-                .removeImage=${() => {
+            .onClickFunc=${() => {
                 if (this.isLoading) return
-					this.isOpenLeaveModal = false
+                this.openUserInfo = false
             }} 
             style=${
-					this.isOpenLeaveModal ? "display: block" : "display: none"
+                this.openUserInfo ? "display: block" : "display: none"
             }>
-                    <div style="text-align:center">
+            <div style=${"position: relative;"}>
-                        <h1>${translate("grouppage.gchange35")}</h1>
+                <vaadin-icon
-                        <hr>
+                class="close-icon"
+                icon="vaadin:close-big"
+                slot="icon"
+                @click=${() => {
+                    this.openUserInfo = false
+                }}
+                ?disabled="${this.isLoading}">
+                </vaadin-icon>
+                <div class="user-info-header">
+                ${translate("grouppage.gchange35")}
                 </div>
-                    
+                <div 
-                    <button @click=${() =>
+                    class="send-message-button" 
-						this._addAdmin(
+                    @click="${() => {
-							this.leaveGroupObj.groupId
+                        this.setOpenPrivateMessage({
-						)}>Promote to Admin</button>
+                            name: this.userName,
-                     <button @click=${() =>
+                            open: true   
-						this._removeAdmin(
+                        })
-							this.leaveGroupObj.groupId
+                        this.openUserInfo = false
-						)}>Remove as Admin</button>
+                    }   
-                    <div style="text-align:right; height:36px;">
+                }">
+                    ${translate("grouppage.gchange56")}
+                </div>
+                    <div 
+                    style=${"margin-top: 5px;"} 
+                    class="send-message-button" 
+                    @click=${() => {
+                        this.openTipUser = true
+                        this.openUserInfo = false
+                        this.chatEditor.disable();
+                    }}>
+                        ${translate("grouppage.gchange57")}
+                    </div>
+                <div ?hidden="${!this.isLoading || this.message === ""}" style="text-align: right; height: 36px;">
                     <span ?hidden="${!this.isLoading}">
                         <!-- loading message -->
                         ${translate("grouppage.gchange36")} &nbsp;
@@ -516,25 +652,29 @@ return css`
                         >
                         </paper-spinner-lite>
                     </span>
-                        <span ?hidden=${this.message === ""} style="${
+                    <span 
-			this.error ? "color:red;" : ""
+                    ?hidden=${this.message === ""} 
-		}">
+                    style="${this.error ? "color:red;" : ""}">
                         ${this.message}
                     </span>
                 </div>
-                    
+            </div>
-                  
+            </wrapper-modal>
-                    <button
+            <wrapper-modal
-                    @click=${() => {
+            .onClickFunc=${() => {
-						this.isOpenLeaveModal = false
+                this.openTipUser = false;
+                this.chatEditor.enable();
             }}
-                    class="modal-button"
+             style=${this.openTipUser ? "display: block" : "display: none"}>
-                        ?disabled="${this.isLoading}"
+                <div class="tip-user-header">      
-                    
+                    <img src="/img/qort.png" width="32" height="32">
-                    >
+                    <p class="tip-user-header-font">${translate("grouppage.gchange55")} ${this.userName}</p>
-                    ${translate("general.close")}
+                </div>
-                    </button>
+                <div class="tip-user-body">
-                </wrapper-modal >
+                    <p class="tip-available">${translate("grouppage.gchange59")}</p>
+                    <input class="tip-input" type="number" placeholder="${translate("grouppage.gchange58")}" />
+                </div>
+            </wrapper-modal>
         </div>
     </div>
     `

qortal-ui-plugins/plugins/utils/getUserNameFromAddress.js

@@ -0,0 +1,20 @@
+import { Epml } from '../../epml.js';
+
+const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
+
+export const getUserNameFromAddress = async (address) => {
+  try {
+    const getNames = await parentEpml.request("apiCall", {
+      type: "api",
+      url: `/names/address/${address}`,
+    });
+
+    if (Array.isArray(getNames) && getNames.length > 0 ) {
+        return getNames[0].name;
+    } else {
+        return address;
+    }
+  } catch (error) {
+      console.error(error);
+  }
+}