forked from Qortal/qortal-ui
Phillip
1 year ago
4 changed files with 191 additions and 70 deletions
@ -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() { |
||||
return { |
||||
theme: { type: String, reflect: true } |
||||
} |
||||
} |
||||
|
||||
constructor() { |
||||
super() |
||||
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' |
||||
} |
||||
|
||||
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> |
||||
` |
||||
} |
||||
|
||||
firstUpdated() { |
||||
} |
||||
|
||||
|
||||
checkupdate() { |
||||
window.electronAPI.checkForUpdate() |
||||
} |
||||
static get properties() { |
||||
return { |
||||
theme: { type: String, reflect: true } |
||||
} |
||||
} |
||||
|
||||
constructor() { |
||||
super() |
||||
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' |
||||
} |
||||
|
||||
static styles = [ |
||||
css` |
||||
` |
||||
] |
||||
|
||||
render() { |
||||
return html` |
||||
${this.renderUpdateButton()} |
||||
` |
||||
} |
||||
|
||||
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() { |
||||
window.electronAPI.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