Continued Chat Search Results

qortal-ui-core/font/material-icons.css

@@ -2,19 +2,28 @@
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
-  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: url(MaterialIcons-Regular.eot);
+  /* For IE6-8 */
   src: local('Material Icons'),
-       local('MaterialIcons-Regular'),
-       url(MaterialIcons-Regular.woff2) format('woff2'),
-       url(MaterialIcons-Regular.woff) format('woff'),
-       url(MaterialIcons-Regular.ttf) format('truetype');
+    local('MaterialIcons-Regular'),
+    url(MaterialIcons-Regular.woff2) format('woff2'),
+    url(MaterialIcons-Regular.woff) format('woff'),
+    url(MaterialIcons-Regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: local('Montserrat'),
+    local('Montserrat'),
+    url(Montserrat.ttf) format('truetype');
 }
 
 .material-icons {
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
-  font-size: 24px;  /* Preferred icon size */
+  font-size: 24px;
+  /* Preferred icon size */
   display: inline-block;
   line-height: 1;
   text-transform: none;

qortal-ui-core/language/us.json

@@ -465,7 +465,7 @@
       "cchange3": "Blocked Users",
       "cchange4": "New Message",
       "cchange5": "(Click to scroll down)",
-      "cchange6": "Type the name or address of who you want to chat with to send a private message!",
+      "cchange6": "Type the name or address of who you want to chat with to send a private message! You can validate the person's name by clicking on the book icon.",
       "cchange7": "Name / Address",
       "cchange8": "Message...",
       "cchange9": "Send",
@@ -492,7 +492,10 @@
       "cchange30": "Uploading image. This may take up to one minute.",
       "cchange31": "Deleting image. This may take up to one minute.",
       "cchange33": "Cancel",
-      "cchange34": "This chat message is using an older message version and cannot use this feature."
+      "cchange34": "This chat message is using an older message version and cannot use this feature.",
+      "cchange35": "Error when trying to fetch the user's name. Please try again!",
+      "cchange36": "Search Results",
+      "cchange37": "No Results Found"
    },
    "welcomepage": {
       "wcchange1": "Welcome to Q-Chat",

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

@@ -1,12 +1,14 @@
 import { LitElement, html } from 'lit';
 import { render } from 'lit/html.js';
 import { chatSearchResultsStyles } from './ChatSearchResults-css.js'
-
+import { translate } from 'lit-translate';
 export class ChatSearchResults extends LitElement {
   static get properties() {
 		return {
       onClickFunc: { attribute: false },
+      closeFunc: { attribute: false },
       searchResults: { type: Array },
+      isOpen: { type: Boolean },
       loading: { type: Boolean }
     }
 	}
@@ -14,9 +16,16 @@ export class ChatSearchResults extends LitElement {
   static styles = [chatSearchResultsStyles]
 
   render() {
-    console.log(this.searchResults, "search results here");
+    console.log(10, "search results here");
     return html`
-      <div class="chat-results-card">
+      <div class="chat-results-card" style=${this.isOpen ? "display: block;" : "display: none;"}>
+        <vaadin-icon 
+          @click=${() => this.closeFunc()} 
+          icon="vaadin:close-small" 
+          slot="icon"
+          class="close-icon"
+          >
+      </vaadin-icon>
         ${this.loading ? (
           html`
             <div class="spinner-container">
@@ -25,19 +34,30 @@ export class ChatSearchResults extends LitElement {
           `
         ) : (
           html`
-          ${this.searchResults.map((result) => {
-            return (
+          <p class="chat-result-header">${translate("chatpage.cchange36")}</p>
+          <div class="divider"></div>
+          <div class="chat-result-container">
+            ${this.searchResults.length === 0 ? (
+              html`<p class="no-results">${translate("chatpage.cchange37")}</p>`
+            ) : (
               html`
-              <div class="chat-result-container" @click=${() => {
-                  this.onClickFunc();
-              }}>
-                <p class="chat-result">
-                  ${result}
-                </p>
-              </div>
-              `
-            )}
-          )}
+                ${this.searchResults.map((result) => {
+                  return (
+                    html`
+                      <div class="chat-result-card" @click=${() => {
+                        this.shadowRoot.querySelector(".chat-result-card").classList.add("active");
+                          this.onClickFunc(result);
+                      }}>
+                        <p class="chat-result">
+                          ${result}
+                        </p>
+                      </div>
+                    `
+                  )}
+                )}
+                `
+              )}
+            </div>
           `
         )}
       </div>

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

@@ -2,7 +2,8 @@ import { css } from 'lit'
 
 export const chatSearchResultsStyles = css`
   .chat-results-card {
-    padding: 10px 20px;
+    position: relative;
+    padding: 25px 20px;
     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
     width: 300px;
     min-height: 200px;
@@ -11,28 +12,90 @@ export const chatSearchResultsStyles = css`
     background-color: var(--white);
   }
 
+  .chat-result-header {
+    color: var(--chat-bubble-msg-color);
+    font-size: 18px;
+    font-family: Montserrat, sans-serif;
+    text-align: center;
+    margin: 0 0 10px 0;
+    user-select: none;
+  }
+
+  .divider {
+    height: 1px;
+    background: var(--chat-bubble-msg-color);
+    margin: 0 40px;
+    user-select: none;
+  }
+
+  .no-results {
+    font-family: Roboto, sans-serif;
+    font-weight: 300;
+    letter-spacing: 0.3px;
+    font-size: 16px;
+    color: var(--chat-bubble-msg-color);
+    text-align: center;
+    margin: 20px 0 0 0;
+    user-select: none;
+  }
+
   .chat-result-container {
-    padding: 5px;
-    margin-bottom: 5px;
-    transition: box-shadow 0.1s ease-in-out;
+    height: 200px;
+    overflow-y: auto;
+    padding: 0 10px;
+  }
+
+  .chat-result-container::-webkit-scrollbar-track {
+        background-color: whitesmoke;
+        border-radius: 7px;
+  }
+
+  .chat-result-container::-webkit-scrollbar {
+        width: 6px;
+        border-radius: 7px;
+        background-color: whitesmoke;
+  }
+
+    .chat-result-container::-webkit-scrollbar-thumb {
+        background-color: rgb(180, 176, 176);
+        border-radius: 7px;
+        transition: all 0.3s ease-in-out;
+  }
+
+    .chat-result-container::-webkit-scrollbar-thumb:hover {
+        background-color: rgb(148, 146, 146);
+        cursor: pointer;
+  }      
+
+  .chat-result-card {
+    padding: 12px;
+    margin-bottom: 15px;
+    margin-top: 15px;
+    transition: all 0.2s ease-in-out;
     box-shadow: none;
   }
 
-  .chat-result-container:hover {
+  .chat-result-card:active {
+    background-color: #09b814;
+  }
+
+  .chat-result-card:hover {
     cursor: pointer;
     border: none;
     border-radius: 4px;
     box-sizing: border-box;
-    -webkit-box-shadow: 0px 0px 6px -1px rgba(0, 0, 0, 0.397);
-    box-shadow: 0px 0px 6px -1px rgba(0, 0, 0, 0.397);
+    -webkit-box-shadow: rgba(132, 132, 132, 40%) 0px 0px 6px -1px;
+    box-shadow: rgba(132, 132, 132, 40%) 0px 0px 6px -1px;
   }
 
   .chat-result {
     font-family: Roboto, sans-serif;
     font-weight: 300;
     letter-spacing: 0.3px;
-    font-size: 14px;
+    font-size: 15px;
     color: var(--chat-bubble-msg-color);
+    margin: 0;
+    user-select: none;
   }
 
   .spinner-container {
@@ -40,4 +103,18 @@ export const chatSearchResultsStyles = css`
 		width: 100%;
 		justify-content: center
 	}
+
+  .close-icon {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    color: var(--chat-bubble-msg-color);
+    font-size: 14px;
+    transition: all 0.1s ease-in-out;
+  }
+
+  .close-icon:hover {
+   cursor: pointer;
+   font-size: 15px;
+  }
 `

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

@@ -6,7 +6,6 @@ export class WrapperModal extends LitElement {
   static get properties() {
 		return {
       onClickFunc: { attribute: false },
-      closePrivateMessage: { attribute: false },
     }
 	}
 

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

@@ -341,7 +341,7 @@ export const qchatStyles = css`
     background: none;
     border-radius: 50%;
     padding: 6px 3px;
-    font-size: 19px;
+    font-size: 21px;
   }
 
   .search-icon:hover {
@@ -354,4 +354,15 @@ export const qchatStyles = css`
     top: 25px;
     right: 25px;
   }
+
+  .user-verified {
+    position: absolute;
+    top: 0;
+    right: 5px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: #04aa2e;
+    font-size: 13px;
+  }
 `

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

@@ -44,7 +44,9 @@ class Chat extends LitElement {
             imageFile: { type: Object },
             activeChatHeadUrl: {type: String},
             openPrivateMessage: { type: Boolean },
-            userFound: { type: Array} 
+            userFound: { type: Array},
+            userFoundModalOpen: { type: Boolean },
+            userSelected: { type: String}
         }
     }
 
@@ -81,6 +83,8 @@ class Chat extends LitElement {
         this.activeChatHeadUrl = ''
         this.openPrivateMessage = false
         this.userFound = []
+        this.userFoundModalOpen = false
+        this.userSelected = ''
     }
 
   async setActiveChatHeadUrl(url) {
@@ -90,7 +94,7 @@ class Chat extends LitElement {
     }
 
     render() {
-        console.log(6, "here");
+        console.log(22, "here");
         return html`
             <div class="container clearfix">
                 <div class="people-list" id="people-list">
@@ -126,6 +130,9 @@ class Chat extends LitElement {
                     .onClickFunc=${() => {
                         this.chatEditor.resetValue();
                         this.openPrivateMessage = false;
+                        this.shadowRoot.getElementById('sendTo').value = "";
+                        this.userFoundModalOpen = false;
+                        this.userFound = [];
                     } } 
                     style=${this.openPrivateMessage ? "display: block" : "display: none"}>
                     <div style=${"position: relative"}>
@@ -142,13 +149,26 @@ class Chat extends LitElement {
                                     ?disabled=${this.isLoading} 
                                     id="sendTo" 
                                     placeholder="${translate("chatpage.cchange7")}" 
+                                    value=${this.userSelected}
+                                    @keypress=${() => this.userSelected = ""}
                                 />
-                                <vaadin-icon 
-                                    @click=${this.userSearch}
-                                    slot="icon" 
-                                    icon="vaadin:search"
-                                    class="search-icon">
-                                </vaadin-icon>
+                                ${this.userSelected ? (
+                                    html`
+                                    <div class="user-verified">
+                                        <p >User Verified</p>
+                                        <vaadin-icon icon="vaadin:check-circle-o" slot="icon"></vaadin-icon>
+                                    </div>
+                                    `
+                                ) : (
+                                    html`                                    
+                                    <vaadin-icon 
+                                        @click=${this.userSearch}
+                                        slot="icon" 
+                                        icon="vaadin:open-book"
+                                        class="search-icon">
+                                    </vaadin-icon>
+                                    `
+                                )}
                             </div>
                             
                             <chat-text-editor 
@@ -189,15 +209,20 @@ class Chat extends LitElement {
                             </div>
                         </div>
                         <div class="search-results-div">
-                            ${this.userFound.length > 0 ? (
-                                html`
-                                <chat-search-results 
-                                    .onClickFunc=${() => console.log('user selected')}
-                                    .searchResults=${this.userFound}
-                                    ?loading=${this.isLoading}>
-                                </chat-search-results>
-                                `
-                            ) : null}
+                            <chat-search-results 
+                                .onClickFunc=${(result) => {
+                                    this.userSelected = result;
+                                    this.userFound = [];
+                                    this.userFoundModalOpen = false;
+                                }}
+                                .closeFunc=${() => {
+                                    this.userFoundModalOpen = false;
+                                    this.userFound = [];
+                                }}
+                                .searchResults=${this.userFound}
+                                ?isOpen=${this.userFoundModalOpen}
+                                ?loading=${this.isLoading}>
+                            </chat-search-results>
                         </div>
                     </div>    	
                 </wrapper-modal>
@@ -255,6 +280,7 @@ class Chat extends LitElement {
         const nameInput = this.shadowRoot.getElementById('sendTo');
 
         nameInput.addEventListener('keydown', stopKeyEventPropagation);
+
         this.shadowRoot.getElementById('messageBox').addEventListener('keydown', stopKeyEventPropagation);
 
         // let typingTimer;                
@@ -372,21 +398,36 @@ class Chat extends LitElement {
         if (changedProperties && changedProperties.has('userFound')) {
             console.log(this.userFound, "user found array here");
         }
+        if (changedProperties && changedProperties.has('userSelected')) {
+            console.log(this.userSelected, "user selected here");
+        }
     }
 
    async userSearch() {
+    const nameValue = this.shadowRoot.getElementById('sendTo').value;
+        if(!nameValue) {
+            this.userFound = [];
+            this.userFoundModalOpen = true;
+            return;
+        }
         try {
-            let result = await parentEpml.request('apiCall', {
+            const result = await parentEpml.request('apiCall', {
                 type: 'api',
-                url: `/names/${this.shadowRoot.getElementById('sendTo').value}`
+                url: `/names/${nameValue}`
             })
-            console.log({result});
-            this.userFound = [
-                ...this.userFound, 
-                result.owner,
-              ];
+            if (result.error === 401) {
+                this.userFound = [];
+            } else {
+                this.userFound = [
+                    ...this.userFound, 
+                    result.name,
+                  ];
+            }
+            this.userFoundModalOpen = true;
         } catch (error) {
             console.error(error);
+            let err4string = get("chatpage.cchange35");
+            parentEpml.request('showSnackBar', `${err4string}`)
         }
     }