added rtl rendering arabic

This commit is contained in:
ojack
2022-05-23 18:50:51 +02:00
parent ef58334926
commit 8ccae1a90b
4 changed files with 10 additions and 4 deletions

View File

@@ -50543,7 +50543,7 @@ module.exports = function store(state, emitter) {
// console.log('setting language to', lang) // console.log('setting language to', lang)
i18next.changeLanguage(lang, (err, t) => { i18next.changeLanguage(lang, (err, t) => {
// console.log(err, t) // console.log(err, t)
selectedLanguage = lang state.translation.selectedLanguage = lang
emitter.emit('render') emitter.emit('render')
}) })
}) })
@@ -51437,9 +51437,11 @@ const toolbar = require('./toolbar.js')
const link = (url) => `href=${url} target=_blank` const link = (url) => `href=${url} target=_blank`
module.exports = function mainView(state, emit) { module.exports = function mainView(state, emit) {
const { t, languages } = state.translation const { t, languages } = state.translation
const textDirection = state.translation.selectedLanguage === 'ar' && state.showInfo === true ? 'rtl': 'ltr'
const langArray = Object.entries(languages) const langArray = Object.entries(languages)
return html` return html`
<div id="info-container" class="${state.showInfo ? "" : "hidden"}"> <div id="info-container" class="${state.showInfo ? "" : "hidden"}" style="direction:${textDirection}">
<div id="modal"> <div id="modal">
<div id="modal-header" style="opacity:${state.showUI === true? 1: 0}"> <div id="modal-header" style="opacity:${state.showUI === true? 1: 0}">
${state.showInfo && langArray.length > 1 ? html`<div style="display:flex">${langArray.map(([key, val]) => html` ${state.showInfo && langArray.length > 1 ? html`<div style="display:flex">${langArray.map(([key, val]) => html`

View File

@@ -108,6 +108,8 @@ transition: width 1s;
.language-select { .language-select {
margin: 8px; margin: 8px;
text-align: center;
width: 3.8em;
font-weight: 200; font-weight: 200;
cursor: pointer; cursor: pointer;
pointer-events: auto; pointer-events: auto;

View File

@@ -47,7 +47,7 @@ module.exports = function store(state, emitter) {
// console.log('setting language to', lang) // console.log('setting language to', lang)
i18next.changeLanguage(lang, (err, t) => { i18next.changeLanguage(lang, (err, t) => {
// console.log(err, t) // console.log(err, t)
selectedLanguage = lang state.translation.selectedLanguage = lang
emitter.emit('render') emitter.emit('render')
}) })
}) })

View File

@@ -5,9 +5,11 @@ const toolbar = require('./toolbar.js')
const link = (url) => `href=${url} target=_blank` const link = (url) => `href=${url} target=_blank`
module.exports = function mainView(state, emit) { module.exports = function mainView(state, emit) {
const { t, languages } = state.translation const { t, languages } = state.translation
const textDirection = state.translation.selectedLanguage === 'ar' && state.showInfo === true ? 'rtl': 'ltr'
const langArray = Object.entries(languages) const langArray = Object.entries(languages)
return html` return html`
<div id="info-container" class="${state.showInfo ? "" : "hidden"}"> <div id="info-container" class="${state.showInfo ? "" : "hidden"}" style="direction:${textDirection}">
<div id="modal"> <div id="modal">
<div id="modal-header" style="opacity:${state.showUI === true? 1: 0}"> <div id="modal-header" style="opacity:${state.showUI === true? 1: 0}">
${state.showInfo && langArray.length > 1 ? html`<div style="display:flex">${langArray.map(([key, val]) => html` ${state.showInfo && langArray.length > 1 ? html`<div style="display:flex">${langArray.map(([key, val]) => html`