Merge remote-tracking branch 'main/master' into feature/encrypt-decrypt-data-qapp

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,6 +482,8 @@ 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>
@@ -2165,23 +2150,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()

qortal-ui-core/src/components/check-for-update.js

@@ -1,41 +1,51 @@
 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() {
+	static get properties() {
-    return {
+		return {
-      theme: { type: String, reflect: true }
+			theme: { type: String, reflect: true }
-    }
+		}
-  }
+	}
 
-  constructor() {
+	constructor() {
-    super()
+		super()
-    this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
+		this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
-  }
+	}
 
-  static styles = [
+	static styles = [
-    css`
+		css`
-    `
+		`
-  ]
+	]
 
-  render() {
+	render() {
-    return html`
+		return html`
-        <div style="display: inline;">
+			${this.renderUpdateButton()}
-            <paper-icon-button icon="icons:get-app" @click=${() => this.checkupdate()} title="${translate("appspage.schange38")} UI"></paper-icon-button>
+		`
-        </div>
+	}
-    `
-  }
 
-  firstUpdated() {
+	firstUpdated() {
-  }
+	}
 
+	renderUpdateButton() {
+		if (!isElectron()) {
+			return html``
+		} else {
+			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>
+			`
+		}
+	}
 
-  checkupdate() {
+	checkupdate() {
-      window.electronAPI.checkForUpdate()
+		window.electronAPI.checkForUpdate()
-  }
+	}
 }
 
 window.customElements.define('check-for-update', CheckForUpdate)

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)

qortal-ui-core/src/components/settings-view/notifications-view.js

@@ -3,6 +3,7 @@ import { connect } from 'pwa-helpers'
 import { store } from '../../store.js'
 import { doSetQChatNotificationConfig } from '../../redux/user/user-actions.js'
 import { translate, translateUnsafeHTML } from 'lit-translate'
+import isElectron from 'is-electron'
 
 import '@material/mwc-checkbox'
 
@@ -145,13 +146,23 @@ class NotificationsView extends connect(store)(LitElement) {
                             </div>
                         </div>
                     </div>
-                    <div style="max-width: 500px; display: flex; justify-content: center; margin: auto;">
+                    ${this.renderSetCoreButton()}
-                        <div @click=${() => this.checkCoreSettings()} class="q-button"> ${translate("settings.core")} </div>
-                    </div>
                 </div>
         `
     }
 
+    renderSetCoreButton() {
+        if (!isElectron()) {
+            return html``
+        } else {
+            return html`
+                <div style="max-width: 500px; display: flex; justify-content: center; margin: auto;">
+                    <div @click=${() => this.checkCoreSettings()} class="q-button"> ${translate("settings.core")} </div>
+                </div>
+            `
+        }
+    }
+
     checkCoreSettings() {
         window.electronAPI.setStartCore()
     }