diff --git a/core/src/components/app-view.js b/core/src/components/app-view.js index f88a34de..452c5588 100644 --- a/core/src/components/app-view.js +++ b/core/src/components/app-view.js @@ -1,12 +1,12 @@ -import {css, html, LitElement} from 'lit' -import {connect} from 'pwa-helpers' -import {store} from '../store.js' -import {Epml} from '../epml.js' -import {addTradeBotRoutes} from '../tradebot/addTradeBotRoutes.js' -import {get, translate} from 'lit-translate' +import { css, html, LitElement } from 'lit' +import { connect } from 'pwa-helpers' +import { store } from '../store.js' +import { Epml } from '../epml.js' +import { addTradeBotRoutes } from '../tradebot/addTradeBotRoutes.js' +import { get, translate } from 'lit-translate' import localForage from 'localforage' -import {decryptData, encryptData} from '../lockScreen.js' -import {setChatLastSeen} from '../redux/app/app-actions.js' +import { decryptData, encryptData } from '../lockScreen.js' +import { setChatLastSeen } from '../redux/app/app-actions.js' import isElectron from 'is-electron' import '@material/mwc-button' import '@material/mwc-icon' @@ -27,7 +27,7 @@ import './wallet-profile.js' import './app-info.js' import './show-plugin.js' import './theme-toggle.js' -import './language-selector.js' +import './new-selector.js' import './settings-view/user-settings.js' import './logout-view/logout-view.js' import './check-for-update.js' @@ -566,22 +566,17 @@ class AppView extends connect(store)(LitElement) {
- - - - - + + + + +
-
- - - -
-
  
- -
    
+
 
+ +
     
-
  
+
   
  
${this.renderLockButton()} @@ -593,7 +588,7 @@ class AppView extends connect(store)(LitElement) {
  
-
  
+
 
this.openLogout()} title="${translate("logout.logout")}">
@@ -712,11 +707,11 @@ class AppView extends connect(store)(LitElement) { var drawerTog = this.shadowRoot.getElementById("mb") var drawerOut = this.shadowRoot.getElementById("appsidebar") - drawerTog.addEventListener('mouseover', function() { + drawerTog.addEventListener('mouseover', function () { drawerTog.click() }) - drawerOut.addEventListener('mouseleave', function() { + drawerOut.addEventListener('mouseleave', function () { drawerTog.click() }) diff --git a/core/src/components/new-selector.js b/core/src/components/new-selector.js new file mode 100644 index 00000000..ebe44c20 --- /dev/null +++ b/core/src/components/new-selector.js @@ -0,0 +1,139 @@ +import {css, html, LitElement} from 'lit' +import {registerTranslateConfig, translate, use} from 'lit-translate' + +registerTranslateConfig({ + loader: lang => fetch(`/language/${lang}.json`).then(res => res.json()) +}) + +const checkLanguage = localStorage.getItem('qortalLanguage') + +if (checkLanguage === null || checkLanguage.length === 0) { + localStorage.setItem('qortalLanguage', 'us') + use('us') +} else { + use(checkLanguage) +} + +class NewSelector extends LitElement { + static get properties() { + return { + theme: { type: String, reflect: true } + } + } + + static get styles() { + return [ + css` + select { + width: auto; + height: auto; + position: absolute; + top: 50px; + padding: 5px 5px 5px 5px; + font-size: 16px; + border: 1px solid var(--black); + border-radius: 3px; + color: var(--black); + background: var(--white); + overflow: hidden; + } + + *:focus { + outline: none; + } + + select option { + color: var(--black); + background: var(--white); + line-height: 34px; + } + + select option:hover { + color: var(--white); + background: var(--black); + line-height: 34px; + cursor: pointer; + } + ` + ] + } + + constructor() { + super() + this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' + } + + render() { + return html` +
+ + this.toggleMenu()}> + + +
+ + ` + } + + firstUpdated() { + const myElement = this.shadowRoot.getElementById('languageNew') + + myElement.addEventListener("change", () => { + this.selectElement() + }) + + myElement.addEventListener("click", () => { + const element1 = localStorage.getItem('qortalLanguage') + const element2 = this.shadowRoot.getElementById('languageNew').value + if (element1 === element2) { + myElement.style.display = "none" + } + }) + + this.selectElement() + } + + selectElement() { + const selectedLanguage = localStorage.getItem('qortalLanguage') + let element = this.shadowRoot.getElementById('languageNew') + element.value = selectedLanguage + element.style.display = "none" + } + + changeLanguage(event) { + use(event.target.value) + localStorage.setItem('qortalLanguage', event.target.value) + } + + toggleMenu() { + let mySwitchDisplay = this.shadowRoot.getElementById('languageNew') + if(mySwitchDisplay.style.display == "none") { + mySwitchDisplay.style.display = "block" + } else { + mySwitchDisplay.style.display = "none" + } + } +} + +window.customElements.define('new-selector', NewSelector) diff --git a/core/src/components/settings-view/account-view.js b/core/src/components/settings-view/account-view.js index 191fc0b4..6f4758d6 100644 --- a/core/src/components/settings-view/account-view.js +++ b/core/src/components/settings-view/account-view.js @@ -1,7 +1,7 @@ -import {css, html, LitElement} from 'lit' -import {connect} from 'pwa-helpers' -import {store} from '../../store.js' -import {translate} from 'lit-translate' +import { LitElement, html, css } from 'lit' +import { connect } from 'pwa-helpers' +import { store } from '../../store.js' +import { get, translate } from 'lit-translate' class AccountView extends connect(store)(LitElement) { static get properties() { @@ -65,7 +65,7 @@ class AccountView extends connect(store)(LitElement) { constructor() { super() - this.accountInfo = { names: [], addressInfo: {} } + this.accountInfo = store.getState().app.accountInfo this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' this.switchAvatar = '' } @@ -76,7 +76,7 @@ class AccountView extends connect(store)(LitElement) {
${this.getAvatar()}
- ${this.accountInfo.names.length !== 0 ? this.accountInfo.names[0].name : 'No Registered Name'} + ${this.accountInfo.names.length !== 0 ? this.accountInfo.names[0].name : get("chatpage.cchange15")}
${translate("settings.address")}: @@ -98,21 +98,24 @@ class AccountView extends connect(store)(LitElement) { } getAvatar() { - const avatarNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node] - const avatarUrl = avatarNode.protocol + '://' + avatarNode.domain + ':' + avatarNode.port - const url = `${avatarUrl}/arbitrary/THUMBNAIL/${this.accountInfo.names[0].name}/qortal_avatar?async=true&apiKey=${this.getApiKey()}` - const numberBlocks = (this.accountInfo.addressInfo.blocksMinted + this.accountInfo.addressInfo.blocksMintedAdjustment) - if (this.switchAvatar === 'light') { - if (Number.isNaN(numberBlocks) || numberBlocks == "" || numberBlocks === null) { + if (this.accountInfo.names.length === 0) { return html`` } else { + const avatarName = this.accountInfo.names[0].name + const avatarNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node] + const avatarUrl = avatarNode.protocol + '://' + avatarNode.domain + ':' + avatarNode.port + const url = `${avatarUrl}/arbitrary/THUMBNAIL/${avatarName}/qortal_avatar?async=true&apiKey=${this.getApiKey()}` return html`` } } else if (this.switchAvatar === 'dark') { - if (Number.isNaN(numberBlocks) || numberBlocks == "" || numberBlocks === null) { + if (this.accountInfo.names.length === 0) { return html`` } else { + const avatarName = this.accountInfo.names[0].name + const avatarNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node] + const avatarUrl = avatarNode.protocol + '://' + avatarNode.domain + ':' + avatarNode.port + const url = `${avatarUrl}/arbitrary/THUMBNAIL/${avatarName}/qortal_avatar?async=true&apiKey=${this.getApiKey()}` return html`` } } @@ -133,4 +136,4 @@ class AccountView extends connect(store)(LitElement) { } } -window.customElements.define('account-view', AccountView) +window.customElements.define('account-view', AccountView) \ No newline at end of file