forked from Qortal/qortal-ui
AlphaX-Projects
1 year ago
3 changed files with 178 additions and 68 deletions
@ -1,41 +1,52 @@ |
|||||||
import { LitElement, html, css } from 'lit' |
import { LitElement, html, css } from 'lit' |
||||||
import { get, translate, translateUnsafeHTML } from 'lit-translate' |
import { get, translate, translateUnsafeHTML } from 'lit-translate' |
||||||
|
import isElectron from 'is-electron' |
||||||
|
|
||||||
import '@polymer/paper-icon-button/paper-icon-button.js' |
import '@polymer/paper-icon-button/paper-icon-button.js' |
||||||
import '@polymer/iron-icons/iron-icons.js' |
import '@polymer/iron-icons/iron-icons.js' |
||||||
|
|
||||||
class CheckForUpdate extends LitElement { |
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` |
||||||
checkupdate() { |
<div style="display: inline;"> |
||||||
window.electronAPI.checkForUpdate() |
<paper-icon-button icon="icons:get-app" @click=${() => this.checkupdate()} title="${translate("appspage.schange38")} UI"></paper-icon-button> |
||||||
} |
</div> |
||||||
|
<div> </div> |
||||||
|
` |
||||||
|
} else { |
||||||
|
return html`` |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
checkupdate() { |
||||||
|
window.electronAPI.checkForUpdate() |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
window.customElements.define('check-for-update', CheckForUpdate) |
window.customElements.define('check-for-update', CheckForUpdate) |
||||||
|
|||||||
@ -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) |
||||||
Loading…
Reference in new issue