mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-04-27 21:37:51 +00:00
100 lines
2.9 KiB
JavaScript
100 lines
2.9 KiB
JavaScript
import { html, LitElement } from 'lit'
|
|
import { searchModalStyles } from '../styles/core-css'
|
|
import snackbar from '../functional-components/snackbar'
|
|
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'
|
|
|
|
// Multi language support
|
|
import { get, translate } from '../../translate'
|
|
|
|
class SearchModal extends LitElement {
|
|
static get properties() {
|
|
return {
|
|
searchContentString: { type: String },
|
|
theme: { type: String, reflect: true }
|
|
}
|
|
}
|
|
|
|
static get styles() {
|
|
return [searchModalStyles]
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
this.searchContentString = ''
|
|
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
|
|
}
|
|
|
|
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 < 1) {
|
|
let snackbar1string = get("publishpage.pchange20")
|
|
let snackbar2string = get("welcomepage.wcchange4")
|
|
|
|
snackbar.add({
|
|
labelText: `${snackbar1string} ${snackbar2string}`,
|
|
dismiss: true
|
|
})
|
|
|
|
this.shadowRoot.getElementById('searchContent').value = this.searchContentString
|
|
} 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) |