Added new search field

2025-02-11 17:55:51 +00:00 · 2023-05-07 17:38:01 +02:00 · 2023-05-07 17:38:01 +02:00 · 8cbf12bec4
commit 8cbf12bec4
parent 203d38e3a6
3 changed files with 172 additions and 62 deletions
--- a/qortal-ui-core/src/components/app-view.js
+++ b/qortal-ui-core/src/components/app-view.js
@ -8,7 +8,7 @@ import localForage from "localforage";

 const chatLastSeen = localForage.createInstance({
    name: "chat-last-seen",
-});
+})

 import '@polymer/paper-icon-button/paper-icon-button.js'
 import '@polymer/paper-progress/paper-progress.js'
@ -29,6 +29,7 @@ import './language-selector.js'
 import './settings-view/user-settings.js'
 import './logout-view/logout-view.js'
 import './check-for-update.js'
+import './search-modal.js'
 import './user-info-view/user-info-view.js'
 import '../functional-components/side-menu.js'
 import '../functional-components/side-menu-item.js'
@ -45,7 +46,6 @@ class AppView extends connect(store)(LitElement) {
            nodeType: { type: String, reflect: true },
            theme: { type: String, reflect: true },
            addressInfo: { type: Object },
-            searchContentString: { type: String },
            getAllBalancesLoading: { type: Boolean },
            botQortWallet: { type: String },
            botBtcWallet: { type: String },
@ -353,7 +353,6 @@ class AppView extends connect(store)(LitElement) {
    constructor() {
        super()
        this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
-        this.searchContentString = ''
        this.urls = [];
        this.nodeType = ''
        this.addressInfo = {}
@ -473,22 +472,6 @@ class AppView extends connect(store)(LitElement) {
                                    <img src="${this.config.coin.logo}" style="height:32px; padding-left:12px;">
                                </span>
                            </div>
-                            <div style="display: inline;">
-	                          <div class="search">
-	                              <vaadin-text-field
-                                        style="width: 350px"
-                                        theme="medium"
-                                        id="searchContent"
-                                        placeholder="${translate("explorerpage.exp1")}"
-                                        value="${this.searchContentString}"
-                                        @keydown="${this.searchKeyListener}"
-                                        clear-button-visible
-                                    >
-                                    </vaadin-text-field>
-	                              <paper-icon-button icon="icons:search" @click="${() => this.openUserInfo()}"></paper-icon-button>
-	                          </div>
-	                      </div>
-                            <div>&nbsp;&nbsp;&nbsp;</div>
                            <div style="display: inline;">
                                <span>
                                    <img src="/img/${translate("selectmenu.languageflag")}-flag-round-icon-32.png" style="width: 32px; height: 32px; padding-top: 4px;">
@ -499,12 +482,13 @@ class AppView extends connect(store)(LitElement) {
                            <div>&nbsp;&nbsp;&nbsp;&nbsp;</div>
                            <qort-theme-toggle></qort-theme-toggle>
                            <div>&nbsp;&nbsp;&nbsp;&nbsp;</div>
+                            <search-modal></search-modal>
+                            <div>&nbsp;&nbsp;</div>
                            <div style="display: inline;">
                                <paper-icon-button icon="icons:settings" @click=${() => this.openSettings()} title="${translate("settings.settings")}"></paper-icon-button>
                            </div>
                            <div>&nbsp;&nbsp;</div>
                            <check-for-update></check-for-update>
-                            <div>&nbsp;&nbsp;</div>
                            <div style="display: inline;">
                                <paper-icon-button icon="icons:exit-to-app" @click=${() => this.openLogout()} title="${translate("logout.logout")}"></paper-icon-button>
                            </div>
@ -2165,23 +2149,6 @@ class AppView extends connect(store)(LitElement) {
        this.addressInfo = state.app.accountInfo.addressInfo
    }

-    searchKeyListener(e) {
-        if (e.key === 'Enter') {
-            this.openUserInfo()
-        }
-    }
-
-    clearSearchField() {
-        this.shadowRoot.getElementById('searchContent').value = this.searchContentString
-    }
-
-    openUserInfo() {
-        let sendInfoAddress = this.shadowRoot.getElementById('searchContent').value
-        const infoDialog = document.getElementById('main-app').shadowRoot.querySelector('app-view').shadowRoot.querySelector('user-info-view')
-        infoDialog.openUserInfo(sendInfoAddress)
-        this.clearSearchField()
-    }
-
    openSettings() {
        const settingsDialog = document.getElementById('main-app').shadowRoot.querySelector('app-view').shadowRoot.querySelector('user-settings')
        settingsDialog.openSettings()
--- a/qortal-ui-core/src/components/check-for-update.js
+++ b/qortal-ui-core/src/components/check-for-update.js
@ -1,41 +1,52 @@
 import { LitElement, html, css } from 'lit'
 import { get, translate, translateUnsafeHTML } from 'lit-translate'
+import isElectron from 'is-electron'

 import '@polymer/paper-icon-button/paper-icon-button.js'
 import '@polymer/iron-icons/iron-icons.js'

 class CheckForUpdate extends LitElement {
-  static get properties() {
-    return {
-      theme: { type: String, reflect: true }
-    }
-  }
+	static get properties() {
+		return {
+			theme: { type: String, reflect: true }
+		}
+	}

-  constructor() {
-    super()
-    this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
-  }
+	constructor() {
+		super()
+		this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
+	}

-  static styles = [
-    css`
-    `
-  ]
+	static styles = [
+		css`
+		`
+	]

-  render() {
-    return html`
-        <div style="display: inline;">
-            <paper-icon-button icon="icons:get-app" @click=${() => this.checkupdate()} title="${translate("appspage.schange38")} UI"></paper-icon-button>
-        </div>
-    `
-  }
+	render() {
+		return html`
+			${this.renderUpdateButton()}
+		`
+	}

-  firstUpdated() {
-  }
+	firstUpdated() {
+	}

+	renderUpdateButton() {
+		if (!isElectron) {
+			return html`
+				<div style="display: inline;">
+					<paper-icon-button icon="icons:get-app" @click=${() => this.checkupdate()} title="${translate("appspage.schange38")} UI"></paper-icon-button>
+				</div>
+				<div>&nbsp;&nbsp;</div>
+			`
+		} else {
+			return html``
+		}
+	}

-  checkupdate() {
-      window.electronAPI.checkForUpdate()
-  }
+	checkupdate() {
+		window.electronAPI.checkForUpdate()
+	}
 }

 window.customElements.define('check-for-update', CheckForUpdate)
--- a/qortal-ui-core/src/components/search-modal.js
+++ b/qortal-ui-core/src/components/search-modal.js
@ -0,0 +1,132 @@
+import { LitElement, html, css } from 'lit'
+import { get, translate, translateUnsafeHTML } from 'lit-translate'
+import snackbar from '../functional-components/snackbar.js'
+
+import '@polymer/paper-icon-button/paper-icon-button.js'
+import '@polymer/iron-icons/iron-icons.js'
+import '@polymer/paper-dialog/paper-dialog.js'
+import '@vaadin/text-field'
+
+class SearchModal extends LitElement {
+	static get properties() {
+		return {
+			searchContentString: { type: String },
+			theme: { type: String, reflect: true }
+		}
+	}
+
+	constructor() {
+		super()
+		this.searchContentString = ''
+		this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
+	}
+
+	static get styles() {
+		return css`
+			* {
+				--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-secondary-text-color: var(--sectxt);
+				--lumo-contrast-60pct: var(--vdicon);
+				--item-selected-color: var(--nav-selected-color);
+				--item-selected-color-text: var(--nav-selected-color-text);
+				--item-color-active: var(--nav-color-active);
+				--item-color-hover: var(--nav-color-hover);
+				--item-text-color: var(--nav-text-color);
+				--item-icon-color: var(--nav-icon-color);
+				--item-border-color: var(--nav-border-color);
+				--item-border-selected-color: var(--nav-border-selected-color);
+			}
+
+			paper-dialog.searchSettings {
+				min-width: 525px;
+				max-width: 525px;
+				min-height: auto;
+				max-height: 150px;
+				background-color: var(--white);
+				color: var(--black);
+				line-height: 1.6;
+				overflow: hidden;
+				border: 1px solid var(--black);
+				border-radius: 10px;
+				padding: 15px;
+				box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
+			}
+
+			.search {
+				display: inline;
+				width: 50%;
+				align-items: center;
+			}
+		`
+	}
+
+	render() {
+		return html`
+			<div style="display: inline;">
+				<paper-icon-button icon="icons:search" @click=${() => this.openSearch()} title="${translate("websitespage.schange35")}"></paper-icon-button></a>
+			</div>
+
+			<paper-dialog id="searchSettingsDialog" class="searchSettings">
+				<div style="display: inline;">
+					<div class="search">
+						<vaadin-text-field
+							style="width: 350px"
+							id="searchContent"
+							placeholder="${translate("explorerpage.exp1")}"
+							value="${this.searchContentString}"
+							@keydown="${this.searchKeyListener}"
+							clear-button-visible
+						>
+						</vaadin-text-field>
+						<paper-icon-button icon="icons:search" @click="${() => this.openUserInfo()}" title="${translate("websitespage.schange35")}"></paper-icon-button>
+						<paper-icon-button icon="icons:close" @click="${() => this.closeSearch()}" title="${translate("general.close")}"></paper-icon-button>
+					</div>
+				</div>
+			</paper-dialog>
+		`
+	}
+
+	firstUpdated() {
+	}
+
+	openSearch() {
+		this.shadowRoot.getElementById('searchSettingsDialog').open()
+	}
+
+	closeSearch() {
+		this.shadowRoot.getElementById('searchSettingsDialog').close()
+	}
+
+	searchKeyListener(e) {
+		if (e.key === 'Enter') {
+			this.openUserInfo()
+		}
+	}
+
+	openUserInfo() {
+		const checkvalue = this.shadowRoot.getElementById('searchContent').value
+		if (checkvalue.length < 3) {
+			let snackbar1string = get("publishpage.pchange20")
+			let snackbar2string = get("welcomepage.wcchange4")
+			snackbar.add({
+				labelText: `${snackbar1string} ${snackbar2string}`,
+				dismiss: true
+			})
+			this.shadowRoot.getElementById('searchContent').value = this.searchContentString
+			return
+		} else {
+			let sendInfoAddress = this.shadowRoot.getElementById('searchContent').value
+			const infoDialog = document.getElementById('main-app').shadowRoot.querySelector('app-view').shadowRoot.querySelector('user-info-view')
+			infoDialog.openUserInfo(sendInfoAddress)
+			this.shadowRoot.getElementById('searchContent').value = this.searchContentString
+			this.shadowRoot.getElementById('searchSettingsDialog').close()
+		}
+	}
+}
+
+window.customElements.define('search-modal', SearchModal)