mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-04-01 10:05:53 +00:00
133 lines
4.0 KiB
JavaScript
133 lines
4.0 KiB
JavaScript
import {css, html, LitElement} from 'lit'
|
|
import {get, translate} from '../../translate/index.js'
|
|
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)
|