Update Q-Chat

Update deps
new Menu
hide messages from blocked users
all messages on left side
prepare for reply

package.json

@@ -35,7 +35,7 @@
     "electron-log": "4.4.7"
   },
   "devDependencies": {
-    "electron": "17.4.5",
+    "electron": "17.4.7",
     "electron-builder": "23.0.3",
     "electron-notarize": "1.2.1",
     "electron-packager": "15.5.1",

qortal-ui-core/package.json

@@ -19,10 +19,10 @@
   "dependencies": {
     "@hapi/hapi": "20.2.2",
     "@hapi/inert": "6.0.5",
-    "sass": "1.52.1"
+    "sass": "1.52.2"
   },
   "devDependencies": {
-    "@babel/core": "7.18.0",
+    "@babel/core": "7.18.2",
     "@material/mwc-button": "0.26.1",
     "@material/mwc-checkbox": "0.26.1",
     "@material/mwc-dialog": "0.26.1",
@@ -58,21 +58,21 @@
     "@rollup/plugin-commonjs": "22.0.0",
     "@rollup/plugin-node-resolve": "13.3.0",
     "@rollup/plugin-replace": "4.0.0",
-    "@vaadin/grid": "23.0.10",
+    "@vaadin/grid": "23.1.0",
-    "@vaadin/icons": "23.0.10",
+    "@vaadin/icons": "23.1.0",
-    "@vaadin/password-field": "23.0.10",
+    "@vaadin/password-field": "23.1.0",
     "asmcrypto.js": "2.3.2",
     "bcryptjs": "2.4.3",
     "epml": "0.3.3",
     "file-saver": "2.0.5",
-    "lit": "2.2.4",
+    "lit": "2.2.5",
     "lit-translate": "2.0.1",
     "postcss": "8.4.14",
     "pwa-helpers": "0.9.1",
     "random-sentence-generator": "0.0.8",
     "redux": "4.2.0",
     "redux-thunk": "2.4.1",
-    "rollup": "2.74.1",
+    "rollup": "2.75.5",
     "rollup-plugin-node-globals": "1.4.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-progress": "1.1.2",

qortal-ui-plugins/package.json

@@ -22,7 +22,7 @@
     "emoji-picker-js": "https://github.com/Qortal/emoji-picker-js"
   },
   "devDependencies": {
-    "@babel/core": "7.18.0",
+    "@babel/core": "7.18.2",
     "@github/time-elements": "3.1.2",
     "@material/mwc-button": "0.26.1",
     "@material/mwc-checkbox": "0.26.1",
@@ -46,14 +46,14 @@
     "@rollup/plugin-commonjs": "22.0.0",
     "@rollup/plugin-node-resolve": "13.3.0",
     "@rollup/plugin-replace": "4.0.0",
-    "@vaadin/button": "23.0.10",
+    "@vaadin/button": "23.1.0",
-    "@vaadin/grid": "23.0.10",
+    "@vaadin/grid": "23.1.0",
-    "@vaadin/icons": "23.0.10",
+    "@vaadin/icons": "23.1.0",
     "epml": "0.3.3",
     "html-escaper": "3.0.3",
-    "lit": "2.2.4",
+    "lit": "2.2.5",
     "lit-translate": "2.0.1",
-    "rollup": "2.74.1",
+    "rollup": "2.75.5",
     "rollup-plugin-node-globals": "1.4.0",
     "rollup-plugin-progress": "1.1.2",
     "rollup-plugin-terser": "7.0.2"

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

@@ -380,6 +380,7 @@ class ChatPage extends LitElement {
                     <span class="message-data-name">${nameMenu}</span>
                     <span class="message-data-level">${levelFounder}</span>
                     <span class="message-data-time"><message-time timestamp=${messageObj.timestamp}></message-time></span>
+                    <span class="hide float-right"><mwc-icon class="iconsRight padright5">add_reaction</mwc-icon><mwc-icon class="iconsRight padright5">reply</mwc-icon><mwc-icon class="iconsRight">more_horiz</mwc-icon></span>
                 </div>
                 <div class="message-data-avatar" style="width:42px; height:42px; ${messageObj.sender === this.selectedAddress.address ? "float:right;" : "float:left;"} margin:3px;">${avatarImg}</div>
                 <div class="message ${messageObj.sender === this.selectedAddress.address ? "my-message float-right" : "other-message float-left"}">${this.emojiPicker.parse(escape(messageObj.decodedMessage))}</div>

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

@@ -69,9 +69,16 @@ class ChatScroller extends LitElement {
         }
 
         .message-data {
+            width: 90%;
+            background: transparent;
             margin-bottom: 15px;
         }
 
+        .message-data:hover .hide {
+            color: #03a9f4;
+            display: inline;
+        }
+
         .message-data-name {
             color: var(--black);
             cursor: pointer;
@@ -147,6 +154,10 @@ class ChatScroller extends LitElement {
             left: 7%;
         }
 
+        .hide {
+            display: none;
+        }
+
         .align-left {
             text-align: left;
         }
@@ -163,6 +174,10 @@ class ChatScroller extends LitElement {
             float: right;
         }
 
+        .padright5 {
+            padding-right: 5px;
+        }
+
         .clearfix:after {
             visibility: hidden;
             display: block;
@@ -175,6 +190,11 @@ class ChatScroller extends LitElement {
         img {
             border-radius: 25%;
         }
+
+        .iconsRight {
+            color: #a8aab1;
+            --mdc-icon-size: 18px;
+        }
         `
     }
 
@@ -234,6 +254,7 @@ class ChatScroller extends LitElement {
                     <span class="message-data-name">${nameMenu}</span>
                     <span class="message-data-level">${levelFounder}</span>
                     <span class="message-data-time"><message-time timestamp=${messageObj.timestamp}></message-time></span>
+                    <span class="hide float-right"><mwc-icon class="iconsRight padright5">add_reaction</mwc-icon><mwc-icon class="iconsRight padright5">reply</mwc-icon><mwc-icon class="iconsRight">more_horiz</mwc-icon></span>
                 </div>
                 <div class="message-data-avatar" style="width:42px; height:42px; ${messageObj.sender === this.myAddress ? "float:right;" : "float:left;"} margin:3px;">${avatarImg}</div>
                 <div id="messageContent" class="message ${messageObj.sender === this.myAddress ? "my-message float-right" : "other-message float-left"}">${this.emojiPicker.parse(this.escapeHTML(messageObj.decodedMessage))}</div>

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

@@ -22,6 +22,7 @@ class NameMenu extends LitElement {
         return {
             toblockaddress: { type: String, attribute: true },
             nametodialog: { type: String, attribute: true },
+            messagesignatur: { type: String, attribute: true },
             chatBlockedAdresses: { type: Array },
             selectedAddress: { type: Object },
             config: { type: Object },
@@ -117,8 +118,9 @@ class NameMenu extends LitElement {
             .dropdown-content {
                 display: none;
                 position: absolute;
-                bottom: 25px;
+                bottom: -75px;
-                left: 10px;
+                right: 25px;
+                text-align: center;
                 background-color: var(--white);
                 min-width: 200px;
                 overflow: auto;
@@ -172,6 +174,15 @@ class NameMenu extends LitElement {
                 resize: none;
                 background: #eee;
             }
+
+            .iconsRight {
+                color: #a8aab1;
+                --mdc-icon-size: 18px;
+            }
+
+            .padright5 {
+                padding-right: 5px;
+            }
         `
     }
 
@@ -189,7 +200,7 @@ class NameMenu extends LitElement {
     render() {
         return html`
             <div class="dropdown">
-                <a class="block" id="myNameMenu" href="#" @click="${() => this.myMenu()}">${this.nametodialog}</a>
+                <a class="block" id="myNameMenu" href="#" @click="${() => this.myMenu()}"><mwc-icon class="iconsRight">more_horiz</mwc-icon></a>
                 <paper-tooltip class="custom" for="myNameMenu" position="top">${translate("blockpage.bcchange7")}</paper-tooltip>
                 <div id="myDropdown" class="dropdown-content">
                     <span>${this.nametodialog}</span>
@@ -250,9 +261,9 @@ class NameMenu extends LitElement {
         this.changeLanguage()
         this.getChatBlockedAdresses()
 
-	setInterval(() => {
+	  setInterval(() => {
-	    this.getChatBlockedAdresses();
+	      this.getChatBlockedAdresses();
-	}, 60000)
+	  }, 60000)
 
         window.addEventListener('storage', () => {
             const checkLanguage = localStorage.getItem('qortalLanguage')