New language selector

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) {
                                     <img src="${this.config.coin.logo}" style="height:32px; padding-left:12px;">
                                 </span>
                             </div>
-                            <div style="display:flex;align-items:center;gap:20px">
+                            <div style="display: flex; align-items: center; gap: 20px">
                                 <friends-side-panel-parent></friends-side-panel-parent>
                                 <notification-bell></notification-bell>
                                 <notification-bell-general></notification-bell-general>
                                 <save-settings-qdn></save-settings-qdn>
                             </div>
-                            <div style="display: inline;">
+                            <div>&nbsp;</div>
-                                <span>
+                            <new-selector></new-selector>
-                                    <img src="/img/${translate("selectmenu.languageflag")}-flag-round-icon-32.png" style="width: 32px; height: 32px; padding-top: 4px;">
+                            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
-                                </span>
-                            </div>
-                            <div>&nbsp;&nbsp;</div>
-                            <language-selector></language-selector>
-                            <div>&nbsp;&nbsp;&nbsp;&nbsp;</div>
                             <core-sync-status></core-sync-status>
-                            <div>&nbsp;&nbsp;</div>
+                            <div>&nbsp;&nbsp;&nbsp;</div>
                             <theme-toggle></theme-toggle>
                             <div>&nbsp;&nbsp;</div>
                             ${this.renderLockButton()}
@@ -591,7 +586,7 @@ class AppView extends connect(store)(LitElement) {
                             </div>
                             <div>&nbsp;&nbsp;</div>
                             <check-for-update></check-for-update>
-                            <div>&nbsp;&nbsp;</div>
+                            <div>&nbsp;</div>
                             <div style="display: inline;">
                                 <paper-icon-button icon="icons:exit-to-app" @click=${() => this.openLogout()} title="${translate("logout.logout")}"></paper-icon-button>
                             </div>

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`
+            <div style="display: inline;">
+                <span>
+                    <img src="/img/${translate("selectmenu.languageflag")}-flag-round-icon-32.png" style="width: 24px; height: 24px; padding-top: 4px;" @click=${() => this.toggleMenu()}>
+                </span>
+                <select id="languageNew" style="display: none;" size="20" tabindex="0" @change="${this.changeLanguage}">
+                    <option value="us">US - ${translate("selectmenu.english")}</option>
+                    <option value="de">DE - ${translate("selectmenu.german")}</option>
+                    <option value="es">ES - ${translate("selectmenu.spanish")}</option>
+                    <option value="et">ET - ${translate("selectmenu.estonian")}</option>
+                    <option value="fr">FR - ${translate("selectmenu.french")}</option>
+                    <option value="hr">HR - ${translate("selectmenu.croatian")}</option>
+                    <option value="hu">HU - ${translate("selectmenu.hungarian")}</option>
+                    <option value="hindi">IN - ${translate("selectmenu.hindi")}</option>
+                    <option value="it">IT - ${translate("selectmenu.italian")}</option>
+                    <option value="jp">JP - ${translate("selectmenu.japanese")}</option>
+                    <option value="ko">KO - ${translate("selectmenu.korean")}</option>
+                    <option value="nl">NL - ${translate("selectmenu.dutch")}</option>
+                    <option value="no">NO - ${translate("selectmenu.norwegian")}</option>
+                    <option value="pl">PL - ${translate("selectmenu.polish")}</option>
+                    <option value="pt">PT - ${translate("selectmenu.portuguese")}</option>
+                    <option value="rs">RS - ${translate("selectmenu.serbian")}</option>
+                    <option value="ro">RO - ${translate("selectmenu.romanian")}</option>
+                    <option value="ru">RU - ${translate("selectmenu.russian")}</option>
+                    <option value="zht">ZHT - ${translate("selectmenu.chinese2")}</option>
+                    <option value="zhc">ZHC - ${translate("selectmenu.chinese1")}</option>
+                </select>
+            </div>
+
+        `
+    }
+
+    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)