diff --git a/qortal-ui-core/font/Montserrat.ttf b/qortal-ui-core/font/Montserrat.ttf new file mode 100644 index 00000000..656db666 Binary files /dev/null and b/qortal-ui-core/font/Montserrat.ttf differ diff --git a/qortal-ui-core/font/material-icons.css b/qortal-ui-core/font/material-icons.css index 2270c09d..45799abb 100644 --- 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'; -} +} \ No newline at end of file diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index c2bc9565..9f8241d3 100644 --- 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", diff --git a/qortal-ui-plugins/plugins/core/components/ChatSeachResults.js b/qortal-ui-plugins/plugins/core/components/ChatSeachResults.js index 21f4ce47..86810248 100644 --- 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` -
+
+ this.closeFunc()} + icon="vaadin:close-small" + slot="icon" + class="close-icon" + > + ${this.loading ? ( html` diff --git a/qortal-ui-plugins/plugins/core/components/ChatSearchResults-css.js b/qortal-ui-plugins/plugins/core/components/ChatSearchResults-css.js index 53b0fe14..4cff99f5 100644 --- 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; + } ` \ No newline at end of file diff --git a/qortal-ui-plugins/plugins/core/components/WrapperModal.js b/qortal-ui-plugins/plugins/core/components/WrapperModal.js index 96b22142..416e8a60 100644 --- 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 }, } } 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 index 40820d11..bab60e1d 100644 --- 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; + } ` \ 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 b54bc166..30f58e94 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 @@ -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`
@@ -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"}>
@@ -142,13 +149,26 @@ class Chat extends LitElement { ?disabled=${this.isLoading} id="sendTo" placeholder="${translate("chatpage.cchange7")}" + value=${this.userSelected} + @keypress=${() => this.userSelected = ""} /> - - + ${this.userSelected ? ( + html` +
+

User Verified

+ +
+ ` + ) : ( + html` + + + ` + )}
- ${this.userFound.length > 0 ? ( - html` - console.log('user selected')} - .searchResults=${this.userFound} - ?loading=${this.isLoading}> - - ` - ) : null} + { + this.userSelected = result; + this.userFound = []; + this.userFoundModalOpen = false; + }} + .closeFunc=${() => { + this.userFoundModalOpen = false; + this.userFound = []; + }} + .searchResults=${this.userFound} + ?isOpen=${this.userFoundModalOpen} + ?loading=${this.isLoading}> +
@@ -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}`) } }