diff --git a/core/src/components/app-view.js b/core/src/components/app-view.js index dd356819..dba95054 100644 --- a/core/src/components/app-view.js +++ b/core/src/components/app-view.js @@ -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' @@ -564,22 +564,17 @@ class AppView extends connect(store)(LitElement) { -
- - - - +
+ + + +
-
- - - -
-
  
- -
    
+
 
+ +
     
-
  
+
   
  
${this.renderLockButton()} @@ -591,7 +586,7 @@ class AppView extends connect(store)(LitElement) {
  
-
  
+
 
this.openLogout()} title="${translate("logout.logout")}">
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)