Continued Chat Search Results

2022-12-17 22:24:28 -05:00 · 2022-12-17 22:24:28 -05:00 · 87f4ebff96
commit 87f4ebff96
parent 8a044c37b6
8 changed files with 218 additions and 58 deletions
--- a/qortal-ui-core/font/Montserrat.ttf
+++ b/qortal-ui-core/font/Montserrat.ttf
--- a/qortal-ui-core/font/material-icons.css
+++ b/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;
@ -33,4 +42,4 @@

  /* Support for IE. */
  font-feature-settings: 'liga';
-}
+}
--- a/qortal-ui-core/language/us.json
+++ b/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",
--- a/qortal-ui-plugins/plugins/core/components/ChatSeachResults.js
+++ b/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>
--- a/qortal-ui-plugins/plugins/core/components/ChatSearchResults-css.js
+++ b/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;
+  }
 `
--- a/qortal-ui-plugins/plugins/core/components/WrapperModal.js
+++ b/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 },
    }
 	}

--- a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat-css.src.js
+++ b/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;
+  }
 `
--- a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js
+++ b/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}`)
        }
    }