fix issues with tipuser

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

@@ -97,7 +97,9 @@ class ChatPage extends LitElement {
             myTrimmedMeassage: { type: String },
             editor: {type: Object},
             currentEditor: {type: String},
-            isEnabledChatEnter: {type: Boolean}
+            isEnabledChatEnter: {type: Boolean},
+            openTipUser: { type: Boolean },
+            setOpenTipUser: {attribute: false}
         }
     }
 
@@ -887,6 +889,10 @@ class ChatPage extends LitElement {
         this.requestUpdate()
       }
 
+      setOpenTipUser(props) {
+        this.openTipUser = props;
+    }
+
     toggleEnableChatEnter(){
         localStorage.setItem('isEnabledChatEnter', !this.isEnabledChatEnter ) 
         this.isEnabledChatEnter = !this.isEnabledChatEnter
@@ -1229,7 +1235,9 @@ class ChatPage extends LitElement {
             .groupAdmin=${this.groupAdmin} 
             .leaveGroupObj=${this.groupInfo}
             .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
-            .chatEditor=${this.chatEditor}>
+            .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
+        ?openTipUser=${this.openTipUser}
+            >
             </chat-right-panel>
         </div>
     </div>
@@ -1356,13 +1364,11 @@ class ChatPage extends LitElement {
       }
 
       initialChat(e) {
-        if (this.editor && !this.editor.isFocused && this.currentEditor === '_chatEditorDOM' && !this.openForwardOpen) {
+        if (this.editor && !this.editor.isFocused && this.currentEditor === '_chatEditorDOM' && !this.openForwardOpen && !this.openTipUser) {
             // WARNING: Deprecated methods from KeyBoard Event
             if (e.code === "Space" || e.keyCode === 32 || e.which === 32) {
-                // this.chatEditor.insertText('&nbsp;');
             } else if (inputKeyCodes.includes(e.keyCode)) {
                 this.editor.commands.insertContent(e.key)
-                // this.chatEditor.insertText(e.key);
                 this.editor.commands.focus('end')
             } else {
                this.editor.commands.focus('end')
@@ -1664,12 +1670,12 @@ class ChatPage extends LitElement {
     }
 
     renderChatScroller() {
+        console.log('renderChatScroller')
         return html`
         <chat-scroller 
         chatId=${this.chatId}
         .messages=${this.messagesRendered} 
         .escapeHTML=${escape} 
-        .chatEditor=${this.chatEditor}
         .getOldMessage=${this.getOldMessage}
         .setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
         .setEditedMessageObj=${(val) => this.setEditedMessageObj(val)}
@@ -1681,6 +1687,8 @@ class ChatPage extends LitElement {
         .setIsLoadingMessages=${(val) => this.setIsLoadingMessages(val)}
         .setForwardProperties=${(forwardedMessage)=> this.setForwardProperties(forwardedMessage)}
         .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
+        .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
+        ?openTipUser=${this.openTipUser}
         >
         </chat-scroller>
         `

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

@@ -29,12 +29,12 @@ class ChatRightPanel extends LitElement {
             setOpenPrivateMessage: { attribute: false },
             openTipUser: { type: Boolean },
             userName: { type: String },
-            chatEditor: { type: Object },
             walletBalance: { type: Number },
             sendMoneyLoading: { type: Boolean },
             btnDisable: { type: Boolean },
             errorMessage: { type: String },
-            successMessage: { type: String }
+            successMessage: { type: String },
+            setOpenTipUser: { attribute: false },
 		}
 	}
 
@@ -57,7 +57,6 @@ class ChatRightPanel extends LitElement {
         this.btnDisable = false
         this.errorMessage = ""
         this.successMessage = ""
-        this.setOpenTipUser = this.setOpenTipUser.bind(this);
         this.setOpenUserInfo = this.setOpenUserInfo.bind(this);
 	}
 
@@ -233,9 +232,7 @@ class ChatRightPanel extends LitElement {
         }
     }
 
-    setOpenTipUser(props) {
+   
-        this.openTipUser = props
-    }
 
     setOpenUserInfo(props) {
         this.openUserInfo = props
@@ -312,20 +309,18 @@ class ChatRightPanel extends LitElement {
                     .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>
             <wrapper-modal
+            zIndex=${55}
             .onClickFunc=${() => {
-                this.openTipUser = false;
+                this.setOpenTipUser(false);
-                this.chatEditor.enable();
             }}
              style=${this.openTipUser ? "display: block" : "display: none"}>
              <tip-user
                 .closeTipUser=${this.openUserInfo}
-                .chatEditor=${this.chatEditor}
                 .userName=${this.userName}
                 .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
              >

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

@@ -35,7 +35,6 @@ class ChatScroller extends LitElement {
             hideMessages: { type: Array },
             setRepliedToMessageObj: { attribute: false },
             setEditedMessageObj: { attribute: false },
-            focusChatEditor: { attribute: false },
             sendMessage: { attribute: false },
             sendMessageForward: { attribute: false },
             showLastMessageRefScroller: { attribute: false },
@@ -43,7 +42,6 @@ class ChatScroller extends LitElement {
             isLoadingMessages: { type: Boolean},
             setIsLoadingMessages: { attribute: false },
             chatId: { type: String },
-            chatEditor: { type: Object },
             setForwardProperties: { attribute: false },
             setOpenPrivateMessage: { attribute: false },
             openTipUser: { type: Boolean },
@@ -60,7 +58,6 @@ class ChatScroller extends LitElement {
         this.messages = []
         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
@@ -143,14 +140,13 @@ class ChatScroller extends LitElement {
             </ul>
             <wrapper-modal
             .onClickFunc=${() => {
-                this.openTipUser = false;
+                this.setOpenTipUser(false);
-                this.chatEditor.enable();
             }}
+               zIndex=${55}
             style=${this.openTipUser ? "display: block;" : "display: none;"}>
                 <tip-user
+                 
                     .closeTipUser=${!this.openTipUser}
-                    .chatEditor=${this.chatEditor}
-                    .focusChatEditor=${this.focusChatEditor}
                     .userName=${this.userName}
                     .setOpenTipUser=${(val) => this.setOpenTipUser(val)}>
                 </tip-user>
@@ -158,7 +154,6 @@ class ChatScroller extends LitElement {
             <wrapper-modal 
             .onClickFunc=${() => {
                 this.openUserInfo = false;
-                this.chatEditor.enable();
                 this.userName = "";
                 this.selectedHead = {};
             }} 
@@ -169,7 +164,6 @@ class ChatScroller extends LitElement {
                     .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>
@@ -190,6 +184,9 @@ class ChatScroller extends LitElement {
         if(changedProperties.has('openUserInfo')){
             return true
         }
+        if(changedProperties.has('userName')){
+            return true
+        }
         // Only update element if prop1 changed.
         return changedProperties.has('messages');
       }
@@ -205,17 +202,14 @@ class ChatScroller extends LitElement {
         toggledMessage = message;
     }
 
-    setOpenTipUser(props) {
+
-        this.openTipUser = props;
-        this.chatEditor.disable();
-    }
 
     setOpenUserInfo(props) {
         this.openUserInfo = props;
-        this.chatEditor.disable();
     }
 
     setUserName(props) {
+        console.log({props})
         this.userName = props.senderName ? props.senderName : props.sender;
         this.selectedHead = {
             ...this.selectedHead,
@@ -321,7 +315,8 @@ class MessageTemplate extends LitElement {
             setOpenPrivateMessage : { attribute: false },
             setOpenTipUser: { attribute: false },
             setOpenUserInfo: { attribute: false },
-            setUserName: { attribute: false }
+            setUserName: { attribute: false },
+            openTipUser:{type: Boolean}
         }
     }
 
@@ -370,6 +365,7 @@ class MessageTemplate extends LitElement {
     }
 
     render() {
+        console.log('this.userName', this.userName)
         const hidemsg = this.hideMessages;
         let message = "";
         let messageVersion2 = ""

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

@@ -12,7 +12,6 @@ export class TipUser extends LitElement {
   static get properties() {
 		return {
         userName: { type: String },
-        chatEditor: { type: Object },
         walletBalance: { type: Number },
         sendMoneyLoading: { type: Boolean },
         closeTipUser: { type: Boolean },
@@ -20,7 +19,6 @@ export class TipUser extends LitElement {
         errorMessage: { type: String },
         successMessage: { type: String },
         setOpenTipUser: { attribute: false },
-        focusChatEditor: { attribute: false }
         }
 	}
 
@@ -221,8 +219,6 @@ export class TipUser extends LitElement {
             this.btnDisable = false;
             setTimeout(() => {
                 this.setOpenTipUser(false);
-                this.chatEditor.enable();
-                this.focusChatEditor();
                 this.successMessage = "";
             }, 3000);
         } else {

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

@@ -15,7 +15,6 @@ export class UserInfo extends LitElement {
         setOpenUserInfo: { attribute: false },
         setOpenTipUser: { attribute: false },
         setOpenPrivateMessage: { attribute: false },
-        chatEditor: { type: Object },
         userName: { type: String },
         selectedHead: { type: Object },
         isImageLoaded: { type: Boolean }
@@ -69,7 +68,6 @@ export class UserInfo extends LitElement {
           slot="icon"
           @click=${() => {
               this.setOpenUserInfo(false)
-              this.chatEditor.enable();
           }}>
         </vaadin-icon>
           ${this.isImageLoaded ? 
@@ -114,7 +112,6 @@ export class UserInfo extends LitElement {
             @click=${() => {
                 this.setOpenTipUser(true);
                 this.setOpenUserInfo(false);
-                this.chatEditor.disable();
             }}>
                 ${translate("chatpage.cchange59")}
             </div>

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

@@ -30,7 +30,7 @@ export const wrapperModalStyles = css`
     overflow-y: auto;
     animation: 1s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal forwards running modal_transition;
     max-height: 80%;
-    z-index: 51
+    z-index: 60
   }
 
   @keyframes backdrop_blur {

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

@@ -7,6 +7,7 @@ export class WrapperModal extends LitElement {
 		return {
       customStyle: {type: String},
       onClickFunc: { attribute: false },
+      zIndex: {type: Number}
     }
 	}
 
@@ -15,7 +16,7 @@ export class WrapperModal extends LitElement {
   render() {
     return html`
       <div>
-        <div class="backdrop" @click=${() => {
+        <div style="z-index: ${this.zIndex || 50}" class="backdrop" @click=${() => {
             this.onClickFunc();
         }}></div>
           <div class="modal-body" style=${this.customStyle ? this.customStyle : ""}>

qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js

@@ -44,7 +44,6 @@ class Chat extends LitElement {
             blockedUsers: { type: Array },
             blockedUserList: { type: Array },
             privateMessagePlaceholder: { type: String},
-            chatEditor: { type:  Object },
             imageFile: { type: Object },
             activeChatHeadUrl: { type: String },
             openPrivateMessage: { type: Boolean },
@@ -537,12 +536,10 @@ class Chat extends LitElement {
 
     async _sendMessage(outSideMsg, msg) { 
         this.isLoading = true;
-        // this.chatEditor.disable();
 
         const trimmedMessage = msg
         if (/^\s*$/.test(trimmedMessage)) {
             this.isLoading = false;
-            // this.chatEditor.enable();
         } else {
             const messageObject = {
                 messageText: trimmedMessage,
@@ -600,7 +597,6 @@ class Chat extends LitElement {
                 _publicKey = false;
                 let err4string = get("chatpage.cchange19");
                 parentEpml.request('showSnackBar', `${err4string}`);
-                // this.chatEditor.enable();
                 this.isLoading = false;
             } else if (addressPublicKey !== false) {
                 isEncrypted = 1;
@@ -609,7 +605,6 @@ class Chat extends LitElement {
             } else {
                 let err4string = get("chatpage.cchange39");
                 parentEpml.request('showSnackBar', `${err4string}`);
-                // this.chatEditor.enable();
                 this.isLoading = false;
             }
         };
@@ -675,7 +670,6 @@ class Chat extends LitElement {
             }
       
             this.isLoading = false;
-            // this.chatEditor.enable();
         };
       
         // Exec..
@@ -686,7 +680,6 @@ class Chat extends LitElement {
     insertImage(file) {
         if (file.type.includes('image')) {
             this.imageFile = file;
-            // this.chatEditor.disable();
             return;
         }       
          parentEpml.request('showSnackBar', get("chatpage.cchange28"));