From 8a044c37b6ec461cd966cd0c0c6fd38bcc5fcc78 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Fri, 16 Dec 2022 22:52:43 -0500 Subject: [PATCH] Started User Search Logic --- .../core/components/ChatSeachResults.js | 47 +++ .../core/components/ChatSearchResults-css.js | 43 ++ .../plugins/core/components/ChatTextEditor.js | 5 +- .../core/messaging/q-chat/q-chat-css.src.js | 357 ++++++++++++++++ .../core/messaging/q-chat/q-chat.src.js | 395 ++++-------------- 5 files changed, 522 insertions(+), 325 deletions(-) create mode 100644 qortal-ui-plugins/plugins/core/components/ChatSeachResults.js create mode 100644 qortal-ui-plugins/plugins/core/components/ChatSearchResults-css.js create mode 100644 qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat-css.src.js diff --git a/qortal-ui-plugins/plugins/core/components/ChatSeachResults.js b/qortal-ui-plugins/plugins/core/components/ChatSeachResults.js new file mode 100644 index 00000000..21f4ce47 --- /dev/null +++ b/qortal-ui-plugins/plugins/core/components/ChatSeachResults.js @@ -0,0 +1,47 @@ +import { LitElement, html } from 'lit'; +import { render } from 'lit/html.js'; +import { chatSearchResultsStyles } from './ChatSearchResults-css.js' + +export class ChatSearchResults extends LitElement { + static get properties() { + return { + onClickFunc: { attribute: false }, + searchResults: { type: Array }, + loading: { type: Boolean } + } + } + + static styles = [chatSearchResultsStyles] + + render() { + console.log(this.searchResults, "search results here"); + return html` +
+ ${this.loading ? ( + html` + + ` + ) : ( + html` + ${this.searchResults.map((result) => { + return ( + html` +
{ + this.onClickFunc(); + }}> +

+ ${result} +

+
+ ` + )} + )} + ` + )} +
+ `; + } +} +customElements.define('chat-search-results', ChatSearchResults); diff --git a/qortal-ui-plugins/plugins/core/components/ChatSearchResults-css.js b/qortal-ui-plugins/plugins/core/components/ChatSearchResults-css.js new file mode 100644 index 00000000..53b0fe14 --- /dev/null +++ b/qortal-ui-plugins/plugins/core/components/ChatSearchResults-css.js @@ -0,0 +1,43 @@ +import { css } from 'lit' + +export const chatSearchResultsStyles = css` + .chat-results-card { + padding: 10px 20px; + box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; + width: 300px; + min-height: 200px; + height: auto; + border-radius: 5px; + background-color: var(--white); + } + + .chat-result-container { + padding: 5px; + margin-bottom: 5px; + transition: box-shadow 0.1s ease-in-out; + box-shadow: none; + } + + .chat-result-container: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); + } + + .chat-result { + font-family: Roboto, sans-serif; + font-weight: 300; + letter-spacing: 0.3px; + font-size: 14px; + color: var(--chat-bubble-msg-color); + } + + .spinner-container { + display: flex; + width: 100%; + justify-content: center + } +` \ No newline at end of file diff --git a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js index 7db0986c..41f82e7f 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js +++ b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js @@ -331,10 +331,7 @@ class ChatTextEditor extends LitElement { }); - this.emojiPickerHandler.addEventListener('click', () => { - console.log("yo what's up?") - this.emojiPicker.togglePicker(this.emojiPickerHandler) - }); + this.emojiPickerHandler.addEventListener('click', () => this.emojiPicker.togglePicker(this.emojiPickerHandler)); await this.updateComplete; this.initChatEditor(); diff --git 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 new file mode 100644 index 00000000..40820d11 --- /dev/null +++ b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat-css.src.js @@ -0,0 +1,357 @@ +import { css } from 'lit' + +export const qchatStyles = css` + * { + --mdc-theme-primary: rgb(3, 169, 244); + --mdc-theme-secondary: var(--mdc-theme-primary); + --paper-input-container-focus-color: var(--mdc-theme-primary); + --mdc-theme-surface: var(--white); + --mdc-dialog-content-ink-color: var(--black); + --lumo-primary-text-color: rgb(0, 167, 245); + --lumo-primary-color-50pct: rgba(0, 167, 245, 0.5); + --lumo-primary-color-10pct: rgba(0, 167, 245, 0.1); + --lumo-primary-color: hsl(199, 100%, 48%); + --lumo-base-color: var(--white); + --lumo-body-text-color: var(--black); + --_lumo-grid-border-color: var(--border); + --_lumo-grid-secondary-border-color: var(--border2); + --mdc-dialog-min-width: 750px; + } + + paper-spinner-lite { + height: 24px; + width: 24px; + --paper-spinner-color: var(--mdc-theme-primary); + --paper-spinner-stroke-width: 2px; + } + + *, + *:before, + *:after { + box-sizing: border-box; + } + + ul { + list-style: none; + padding: 0; + } + + .container { + margin: 0 auto; + width: 100%; + background: var(--white); + } + + .people-list { + width: 20vw; + float: left; + height: 100vh; + overflow-y: hidden; + border-right: 3px #ddd solid; + } + + .people-list .blockedusers { + position: absolute; + bottom: 0; + width: 20vw; + height: 60px; + background: var(--white); + border-top: 1px solid var(--border); + border-right: 3px #ddd solid; + } + + .people-list .search { + padding-top: 20px; + padding-left: 20px; + padding-right: 20px; + } + + .center { + margin: 0; + position: absolute; + padding-top: 12px; + left: 50%; + -ms-transform: translateX(-50%); + transform: translateX(-50%); + } + + .people-list .create-chat { + border-radius: 5px; + border: none; + display: inline-block; + padding: 14px; + color: #fff; + background: var(--tradehead); + width: 100%; + font-size: 15px; + text-align: center; + cursor: pointer; + } + + .people-list .create-chat:hover { + opacity: .8; + box-shadow: 0 3px 5px rgba(0, 0, 0, .2); + } + + .people-list ul { + padding: 0; + height: 85vh; + overflow-y: auto; + overflow-x: hidden; + } + + .chat { + width: 80vw; + height: 100vh; + float: left; + background: var(--white); + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + color: #434651; + box-sizing: border-box; + } + + .chat .new-message-bar { + display: flex; + flex: 0 1 auto; + align-items: center; + justify-content: space-between; + padding: 0px 25px; + font-size: 14px; + font-weight: 500; + top: 0; + position: absolute; + left: 20vw; + right: 0; + z-index: 5; + background: var(--tradehead); + color: var(--white); + border-radius: 0 0 8px 8px; + min-height: 25px; + transition: opacity .15s; + text-transform: capitalize; + opacity: .85; + cursor: pointer; + } + + .chat .new-message-bar:hover { + opacity: .75; + transform: translateY(-1px); + box-shadow: 0 3px 7px rgba(0, 0, 0, .2); + } + + .hide-new-message-bar { + display: none !important; + } + + .chat .chat-history { + position: absolute; + top: 0; + right: 0; + bottom: 100%; + left: 20vw; + border-bottom: 2px solid var(--white); + overflow-y: hidden; + height: 100vh; + box-sizing: border-box; + } + + .chat .chat-message { + padding: 10px; + height: 10%; + display: inline-block; + width: 100%; + background-color: #eee; + } + + .chat .chat-message textarea { + width: 90%; + border: none; + font-size: 16px; + padding: 10px 20px; + border-radius: 5px; + resize: none; + } + + .chat .chat-message button { + float: right; + color: #94c2ed; + font-size: 16px; + text-transform: uppercase; + border: none; + cursor: pointer; + font-weight: bold; + background: #f2f5f8; + padding: 10px; + margin-top: 4px; + margin-right: 4px; + } + + .chat .chat-message button:hover { + color: #75b1e8; + } + + .online, + .offline, + .me { + margin-right: 3px; + font-size: 10px; + } + + .clearfix:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; + } + + .red { + --mdc-theme-primary: red; + } + + h2 { + margin:0; + } + + h2, h3, h4, h5 { + color: var(--black); + font-weight: 400; + } + + [hidden] { + display: hidden !important; + visibility: none !important; + } + + .details { + display: flex; + font-size: 18px; + } + + .title { + font-weight:600; + font-size:12px; + line-height: 32px; + opacity: 0.66; + } + + .textarea { + width: 100%; + border: none; + display: inline-block; + font-size: 16px; + padding: 10px 20px; + border-radius: 5px; + height: 120px; + resize: none; + background: #eee; + } + + .dialog-container { + position: relative; + display: flex; + align-items: center; + flex-direction: column; + padding: 0 10px; + gap: 10px; + height: 100%; + } + + .dialog-header { + color: var(--chat-bubble-msg-color); + } + + .dialog-subheader { + color: var(--chat-bubble-msg-color); + } + + .modal-button-row { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + } + + .modal-button { + font-family: Roboto, sans-serif; + font-size: 16px; + color: var(--mdc-theme-primary); + background-color: transparent; + padding: 8px 10px; + border-radius: 5px; + border: none; + transition: all 0.3s ease-in-out; + } + + .modal-button-red { + font-family: Roboto, sans-serif; + font-size: 16px; + color: #F44336; + background-color: transparent; + padding: 8px 10px; + border-radius: 5px; + border: none; + transition: all 0.3s ease-in-out; + } + + .modal-button-red:hover { + cursor: pointer; + background-color: #f4433663; + } + + .modal-button:hover { + cursor: pointer; + background-color: #03a8f475; + } + + .name-input { + width: 100%; + 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); + } + + .name-input::selection { + background-color: var(--mdc-theme-primary); + color: white; + } + + .name-input::placeholder { + opacity: 0.9; + color: var(--black); + } + + .search-field { + width: 100%; + position: relative; + } + + .search-icon { + position: absolute; + right: 3px; + color: var(--chat-bubble-msg-color); + transition: all 0.3s ease-in-out; + background: none; + border-radius: 50%; + padding: 6px 3px; + font-size: 19px; + } + + .search-icon:hover { + cursor: pointer; + background: #d7d7d75c; + } + + .search-results-div { + position: absolute; + top: 25px; + right: 25px; + } +` \ No newline at end of file diff --git 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 index c44919c5..b54bc166 100644 --- 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 @@ -2,6 +2,7 @@ import { LitElement, html, css } from 'lit'; import { render } from 'lit/html.js'; import { Epml } from '../../../../epml.js'; import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'; +import { qchatStyles } from './q-chat-css.src.js' import WebWorker from 'web-worker:./computePowWorker.src.js'; registerTranslateConfig({ @@ -12,6 +13,7 @@ import '../../components/ChatWelcomePage.js'; import '../../components/ChatHead.js'; import '../../components/ChatPage.js'; import '../../components/WrapperModal.js'; +import '../../components/ChatSeachResults.js'; import snackbar from '../../components/snackbar.js'; import '@polymer/paper-spinner/paper-spinner-lite.js'; import '@material/mwc-button'; @@ -41,320 +43,13 @@ class Chat extends LitElement { chatEditor: { type: Object }, imageFile: { type: Object }, activeChatHeadUrl: {type: String}, - openPrivateMessage: { type: Boolean } + openPrivateMessage: { type: Boolean }, + userFound: { type: Array} } } - static get styles() { - return css` - * { - --mdc-theme-primary: rgb(3, 169, 244); - --mdc-theme-secondary: var(--mdc-theme-primary); - --paper-input-container-focus-color: var(--mdc-theme-primary); - --mdc-theme-surface: var(--white); - --mdc-dialog-content-ink-color: var(--black); - --lumo-primary-text-color: rgb(0, 167, 245); - --lumo-primary-color-50pct: rgba(0, 167, 245, 0.5); - --lumo-primary-color-10pct: rgba(0, 167, 245, 0.1); - --lumo-primary-color: hsl(199, 100%, 48%); - --lumo-base-color: var(--white); - --lumo-body-text-color: var(--black); - --_lumo-grid-border-color: var(--border); - --_lumo-grid-secondary-border-color: var(--border2); - --mdc-dialog-min-width: 750px; - } - - paper-spinner-lite { - height: 24px; - width: 24px; - --paper-spinner-color: var(--mdc-theme-primary); - --paper-spinner-stroke-width: 2px; - } - - *, - *:before, - *:after { - box-sizing: border-box; - } - - ul { - list-style: none; - padding: 0; - } - - .container { - margin: 0 auto; - width: 100%; - background: var(--white); - } - - .people-list { - width: 20vw; - float: left; - height: 100vh; - overflow-y: hidden; - border-right: 3px #ddd solid; - } + static styles = [qchatStyles] - .people-list .blockedusers { - position: absolute; - bottom: 0; - width: 20vw; - height: 60px; - background: var(--white); - border-top: 1px solid var(--border); - border-right: 3px #ddd solid; - } - - .people-list .search { - padding-top: 20px; - padding-left: 20px; - padding-right: 20px; - } - - .center { - margin: 0; - position: absolute; - padding-top: 12px; - left: 50%; - -ms-transform: translateX(-50%); - transform: translateX(-50%); - } - - .people-list .create-chat { - border-radius: 5px; - border: none; - display: inline-block; - padding: 14px; - color: #fff; - background: var(--tradehead); - width: 100%; - font-size: 15px; - text-align: center; - cursor: pointer; - } - - .people-list .create-chat:hover { - opacity: .8; - box-shadow: 0 3px 5px rgba(0, 0, 0, .2); - } - - .people-list ul { - padding: 0; - height: 85vh; - overflow-y: auto; - overflow-x: hidden; - } - - .chat { - width: 80vw; - height: 100vh; - float: left; - background: var(--white); - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; - color: #434651; - box-sizing: border-box; - } - - .chat .new-message-bar { - display: flex; - flex: 0 1 auto; - align-items: center; - justify-content: space-between; - padding: 0px 25px; - font-size: 14px; - font-weight: 500; - top: 0; - position: absolute; - left: 20vw; - right: 0; - z-index: 5; - background: var(--tradehead); - color: var(--white); - border-radius: 0 0 8px 8px; - min-height: 25px; - transition: opacity .15s; - text-transform: capitalize; - opacity: .85; - cursor: pointer; - } - - .chat .new-message-bar:hover { - opacity: .75; - transform: translateY(-1px); - box-shadow: 0 3px 7px rgba(0, 0, 0, .2); - } - - .hide-new-message-bar { - display: none !important; - } - - .chat .chat-history { - position: absolute; - top: 0; - right: 0; - bottom: 100%; - left: 20vw; - border-bottom: 2px solid var(--white); - overflow-y: hidden; - height: 100vh; - box-sizing: border-box; - } - - .chat .chat-message { - padding: 10px; - height: 10%; - display: inline-block; - width: 100%; - background-color: #eee; - } - - .chat .chat-message textarea { - width: 90%; - border: none; - font-size: 16px; - padding: 10px 20px; - border-radius: 5px; - resize: none; - } - - .chat .chat-message button { - float: right; - color: #94c2ed; - font-size: 16px; - text-transform: uppercase; - border: none; - cursor: pointer; - font-weight: bold; - background: #f2f5f8; - padding: 10px; - margin-top: 4px; - margin-right: 4px; - } - - .chat .chat-message button:hover { - color: #75b1e8; - } - - .online, - .offline, - .me { - margin-right: 3px; - font-size: 10px; - } - - .clearfix:after { - visibility: hidden; - display: block; - font-size: 0; - content: " "; - clear: both; - height: 0; - } - - .red { - --mdc-theme-primary: red; - } - - h2 { - margin:0; - } - - h2, h3, h4, h5 { - color: var(--black); - font-weight: 400; - } - - [hidden] { - display: hidden !important; - visibility: none !important; - } - - .details { - display: flex; - font-size: 18px; - } - - .title { - font-weight:600; - font-size:12px; - line-height: 32px; - opacity: 0.66; - } - - .input { - width: 100%; - border: none; - display: inline-block; - font-size: 16px; - padding: 10px 20px; - border-radius: 5px; - resize: none; - background: #eee; - } - - .textarea { - width: 100%; - border: none; - display: inline-block; - font-size: 16px; - padding: 10px 20px; - border-radius: 5px; - height: 120px; - resize: none; - background: #eee; - } - - .dialog-container { - position: relative; - display: flex; - align-items: center; - flex-direction: column; - padding: 0 10px; - gap: 10px; - height: 100%; - } - .modal-button-row { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - } - - .modal-button { - font-family: Roboto, sans-serif; - font-size: 16px; - color: var(--mdc-theme-primary); - background-color: transparent; - padding: 8px 10px; - border-radius: 5px; - border: none; - transition: all 0.3s ease-in-out; - } - - .modal-button-red { - font-family: Roboto, sans-serif; - font-size: 16px; - color: #F44336; - background-color: transparent; - padding: 8px 10px; - border-radius: 5px; - border: none; - transition: all 0.3s ease-in-out; - } - - .modal-button-red:hover { - cursor: pointer; - background-color: #f4433663; - } - - .modal-button:hover { - cursor: pointer; - background-color: #03a8f475; - } - ` - } constructor() { super() @@ -385,6 +80,7 @@ class Chat extends LitElement { this.imageFile = null this.activeChatHeadUrl = '' this.openPrivateMessage = false + this.userFound = [] } async setActiveChatHeadUrl(url) { @@ -394,6 +90,7 @@ class Chat extends LitElement { } render() { + console.log(6, "here"); return html`
@@ -431,20 +128,29 @@ class Chat extends LitElement { this.openPrivateMessage = false; } } style=${this.openPrivateMessage ? "display: block" : "display: none"}> -
+
-
+

${translate("chatpage.cchange1")}

-

${translate("chatpage.cchange6")}

- +

${translate("chatpage.cchange6")}

+
+ + + +
+
+
+ ${this.userFound.length > 0 ? ( + html` + console.log('user selected')} + .searchResults=${this.userFound} + ?loading=${this.isLoading}> + + ` + ) : null} +
@@ -535,9 +252,23 @@ class Chat extends LitElement { return false; } - this.shadowRoot.getElementById('sendTo').addEventListener('keydown', stopKeyEventPropagation); + const nameInput = this.shadowRoot.getElementById('sendTo'); + + nameInput.addEventListener('keydown', stopKeyEventPropagation); this.shadowRoot.getElementById('messageBox').addEventListener('keydown', stopKeyEventPropagation); + // let typingTimer; + // let doneTypingInterval = 3000; + + // //on keyup, start the countdown + // nameInput.addEventListener('keyup', () => { + // clearTimeout(typingTimer); + // if (nameInput.value) { + // console.log("typing started!"); + // typingTimer = setTimeout(this.userSearch, doneTypingInterval); + // } + // }); + const getDataFromURL = () => { let tempUrl = document.location.href let splitedUrl = decodeURI(tempUrl).split('?') @@ -637,6 +368,28 @@ class Chat extends LitElement { parentEpml.imReady() } + async updated(changedProperties) { + if (changedProperties && changedProperties.has('userFound')) { + console.log(this.userFound, "user found array here"); + } + } + + async userSearch() { + try { + let result = await parentEpml.request('apiCall', { + type: 'api', + url: `/names/${this.shadowRoot.getElementById('sendTo').value}` + }) + console.log({result}); + this.userFound = [ + ...this.userFound, + result.owner, + ]; + } catch (error) { + console.error(error); + } + } + setChatEditor(editor) { this.chatEditor = editor; }