mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-11 17:55:51 +00:00
New language selector
This commit is contained in:
AlphaX-Projects
parent
0e5574452f
commit
4ba3239025
@ -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">
|
||||
<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 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;">
|
||||
<span>
|
||||
<img src="/img/${translate("selectmenu.languageflag")}-flag-round-icon-32.png" style="width: 32px; height: 32px; padding-top: 4px;">
|
||||
</span>
|
||||
</div>
|
||||
<div> </div>
|
||||
<language-selector></language-selector>
|
||||
<div> </div>
|
||||
<div> </div>
|
||||
<new-selector></new-selector>
|
||||
<div> </div>
|
||||
<core-sync-status></core-sync-status>
|
||||
<div> </div>
|
||||
<div> </div>
|
||||
<theme-toggle></theme-toggle>
|
||||
<div> </div>
|
||||
${this.renderLockButton()}
|
||||
@ -591,7 +586,7 @@ class AppView extends connect(store)(LitElement) {
|
||||
</div>
|
||||
<div> </div>
|
||||
<check-for-update></check-for-update>
|
||||
<div> </div>
|
||||
<div> </div>
|
||||
<div style="display: inline;">
|
||||
<paper-icon-button icon="icons:exit-to-app" @click=${() => this.openLogout()} title="${translate("logout.logout")}"></paper-icon-button>
|
||||
</div>
|
||||
|
||||
139
core/src/components/new-selector.js
Normal file
139
core/src/components/new-selector.js
Normal file
@ -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)
|
||||
Loading…
x
Reference in New Issue
Block a user