Merge remote-tracking branch 'origin/master' into feature/profile

core/src/components/app-view.js

@@ -1,12 +1,12 @@
-import {css, html, LitElement} from 'lit'
+import { css, html, LitElement } from 'lit'
-import {connect} from 'pwa-helpers'
+import { connect } from 'pwa-helpers'
-import {store} from '../store.js'
+import { store } from '../store.js'
-import {Epml} from '../epml.js'
+import { Epml } from '../epml.js'
-import {addTradeBotRoutes} from '../tradebot/addTradeBotRoutes.js'
+import { addTradeBotRoutes } from '../tradebot/addTradeBotRoutes.js'
-import {get, translate} from 'lit-translate'
+import { get, translate } from 'lit-translate'
 import localForage from 'localforage'
-import {decryptData, encryptData} from '../lockScreen.js'
+import { decryptData, encryptData } from '../lockScreen.js'
-import {setChatLastSeen} from '../redux/app/app-actions.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) {
                                 </span>
                             </div>
                             <div style="display:flex;align-items:center;gap:20px">
-                            <profile-qdn></profile-qdn>
+                                <profile-qdn></profile-qdn>
-                            <friends-side-panel-parent></friends-side-panel-parent>
+                                <friends-side-panel-parent></friends-side-panel-parent>
-                            <notification-bell></notification-bell>
+                                <notification-bell></notification-bell>
-                            <notification-bell-general></notification-bell-general>
+                                <notification-bell-general></notification-bell-general>
-                            <save-settings-qdn></save-settings-qdn>
+                                <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()}
@@ -593,7 +588,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>
@@ -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()
         })
 

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)

core/src/components/settings-view/account-view.js

@@ -1,7 +1,7 @@
-import {css, html, LitElement} from 'lit'
+import { LitElement, html, css } from 'lit'
-import {connect} from 'pwa-helpers'
+import { connect } from 'pwa-helpers'
-import {store} from '../../store.js'
+import { store } from '../../store.js'
-import {translate} from 'lit-translate'
+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) {
                 <div class="center-box">
                     <div class="img-icon">${this.getAvatar()}</div>
                     <span id="accountName">
-                        ${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")}
                     </span>
                     <div class="content-box">
                         <span class="title">${translate("settings.address")}: </span>
@@ -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`<img src="/img/noavatar_light.png" style="width:150px; height:150px; border-radius: 25%;">`
             } 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`<img src="${url}" style="width:150px; height:150px; border-radius: 25%;" onerror="this.src='/img/noavatar_light.png';">`
             }
         } else if (this.switchAvatar === 'dark') {
-            if (Number.isNaN(numberBlocks) || numberBlocks == "" || numberBlocks === null) {
+            if (this.accountInfo.names.length === 0) {
                return html`<img src="/img/noavatar_dark.png" style="width:150px; height:150px; border-radius: 25%;">`
             } 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`<img src="${url}" style="width:150px; height:150px; border-radius: 25%;" onerror="this.src='/img/noavatar_dark.png';">`
             }
         }
@@ -133,4 +136,4 @@ class AccountView extends connect(store)(LitElement) {
     }
 }
 
-window.customElements.define('account-view', AccountView)
+window.customElements.define('account-view', AccountView)