mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-23 16:57:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(translations): new translation system

Browse Source
This commit is contained in:
David Ralph
2021-09-10 16:38:53 +01:00
parent 941c168486
commit b0eeff1bf8
63 changed files with 651 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/modals/welcome/Welcome.jsx
View File

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import EventBus from 'modules/helpers/eventbus';
@@ -8,15 +9,17 @@ import ProgressBar from './ProgressBar';
import './welcome.scss';
export default class WelcomeModal extends PureComponent {
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
languagecode = variables.languagecode;
constructor() {
super();
this.state = {
image: './././icons/undraw_celebration.svg',
currentTab: 0,
finalTab: 4,
buttonText: window.language.modals.welcome.buttons.next
buttonText: this.getMessage(this.languagecode, 'modals.welcome.buttons.next')
};
this.language = window.language.modals.welcome;
this.images = [
'./././icons/undraw_celebration.svg',
'./././icons/undraw_around_the_world_modified.svg',
@@ -35,18 +38,18 @@ export default class WelcomeModal extends PureComponent {
return this.setState({
currentTab: this.state.currentTab - 1,
image: this.images[this.state.currentTab - 1],
buttonText: this.language.buttons.next
buttonText: this.getMessage(this.languagecode, 'modals.welcome.buttons.next')
});
}
if (this.state.buttonText === this.language.buttons.close) {
if (this.state.buttonText === this.getMessage(this.languagecode, 'modals.welcome.buttons.close')) {
return this.props.modalClose();
}
this.setState({
currentTab: this.state.currentTab + 1,
image: this.images[this.state.currentTab + 1],
buttonText: (this.state.currentTab !== this.state.finalTab) ? this.language.buttons.next : this.language.buttons.close
buttonText: (this.state.currentTab !== this.state.finalTab) ? this.getMessage(this.languagecode, 'modals.welcome.buttons.next') : this.getMessage(this.languagecode, 'modals.welcome.buttons.close')
});
}
@@ -55,7 +58,7 @@ export default class WelcomeModal extends PureComponent {
this.setState({
currentTab: tab,
image: this.images[tab],
buttonText: (tab !== this.state.finalTab + 1) ? this.language.buttons.next : this.language.buttons.close
buttonText: (tab !== this.state.finalTab + 1) ? this.getMessage(this.languagecode, 'modals.welcome.buttons.next') : this.getMessage(this.languagecode, 'modals.welcome.buttons.close')
});
localStorage.setItem('bgtransition', true);
@@ -68,7 +71,7 @@ export default class WelcomeModal extends PureComponent {
this.setState({
currentTab: Number(welcomeTab),
image: this.images[Number(welcomeTab)],
buttonText: (Number(welcomeTab) !== this.state.finalTab + 1) ? this.language.buttons.next : this.language.buttons.close
buttonText: (Number(welcomeTab) !== this.state.finalTab + 1) ? this.getMessage(this.languagecode, 'modals.welcome.buttons.next') : this.getMessage(this.languagecode, 'modals.welcome.buttons.close')
});
}
@@ -97,7 +100,7 @@ export default class WelcomeModal extends PureComponent {
<WelcomeSections currentTab={this.state.currentTab} switchTab={(tab) => this.switchTab(tab)}/>
</div>
<div className='buttons'>
{(this.state.currentTab !== 0) ? <button className='close' style={{ marginRight: '20px' }} onClick={() => this.changeTab(true)}>{this.language.buttons.previous}</button> : null}
{(this.state.currentTab !== 0) ? <button className='close' style={{ marginRight: '20px' }} onClick={() => this.changeTab(true)}>{this.getMessage(this.languagecode, 'modals.welcome.buttons.previous')}</button> : null}
<button className='close' onClick={() => this.changeTab()}>{this.state.buttonText}</button>
</div>
</section>

73
src/components/modals/welcome/WelcomeSections.jsx
View File

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { CloudUpload, AutoAwesome, LightMode, DarkMode } from '@material-ui/icons';
@@ -12,6 +13,9 @@ const languages = require('modules/languages.json');
const default_settings = require('modules/default_settings.json');
export default class WelcomeSections extends PureComponent {
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
languagecode = variables.languagecode;
constructor() {
super();
this.state = {
@@ -109,8 +113,8 @@ export default class WelcomeSections extends PureComponent {
const intro = (
<>
<h1>{language.sections.intro.title}</h1>
<p>{language.sections.intro.description}</p>
<h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.intro.title')}</h1>
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.intro.description')}</p>
<h3 className='quicktip'>#shareyourmue</h3>
<div className='examples'>
<img src={this.welcomeImages[this.state.welcomeImage]} alt='Example Mue setup' draggable={false}/>
@@ -120,81 +124,78 @@ export default class WelcomeSections extends PureComponent {
const chooseLanguage = (
<>
<h1>{language.sections.language.title}</h1>
<p>{language.sections.language.description} <a href={window.constants.TRANSLATIONS_URL} className='resetLink' target='_blank' rel='noopener noreferrer'>GitHub</a>!</p>
<h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.language.title')}</h1>
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.language.description')} <a href={window.constants.TRANSLATIONS_URL} className='resetLink' target='_blank' rel='noopener noreferrer'>GitHub</a>!</p>
<Radio name='language' options={languages} category='welcomeLanguage'/>
</>
);
const { appearance, advanced, background, quicklinks } = window.language.modals.main.settings.sections;
const languageSettings = window.language.modals.main.settings.sections.language;
const theme = (
<>
<h1>{language.sections.theme.title}</h1>
<p>{language.sections.theme.description}</p>
<h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.theme.title')}</h1>
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.theme.description')}</p>
<div className='themesToggleArea'>
<div className={this.state.autoClass} onClick={() => this.changeTheme('auto')}>
<AutoAwesome/>
<span>{appearance.theme.auto}</span>
<span>{this.getMessage(this.languagecode, 'modals.main.settings.sections.appearance.theme.auto')}</span>
</div>
<div className='options'>
<div className={this.state.lightClass} onClick={() => this.changeTheme('light')}>
<LightMode/>
<span>{appearance.theme.light}</span>
<span>{this.getMessage(this.languagecode, 'modals.main.settings.sections.appearance.theme.light')}</span>
</div>
<div className={this.state.darkClass} onClick={() => this.changeTheme('dark')}>
<DarkMode/>
<span>{appearance.theme.dark}</span>
<span>{this.getMessage(this.languagecode, 'modals.main.settings.sections.appearance.theme.dark')}</span>
</div>
</div>
<h3 className='quicktip'>{language.tip}</h3>
<p>{language.sections.theme.tip}</p>
<h3 className='quicktip'>{this.getMessage(this.languagecode, 'modals.welcome.tip')}</h3>
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.theme.tip')}</p>
</div>
</>
);
const settings = (
<>
<h1>{language.sections.settings.title}</h1>
<p>{language.sections.settings.description}</p>
<h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.settings.title')}</h1>
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.settings.description')}</p>
<button className='upload' onClick={() => document.getElementById('file-input').click()}>
<CloudUpload/>
<br/>
<span>{window.language.modals.main.settings.buttons.import}</span>
<span>{this.getMessage(this.languagecode, 'modals.main.settings.buttons.import')}</span>
</button>
<FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.importSettings(e)}/>
<h3 className='quicktip'>{language.tip}</h3>
<p>{language.sections.settings.tip}</p>
<h3 className='quicktip'>{this.getMessage(this.languagecode, 'modals.welcome.tip')}</h3>
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.settings.tip')}</p>
</>
);
const privacy = (
<>
<h1>{language.sections.privacy.title}</h1>
<p>{language.sections.privacy.description}</p>
<Checkbox name='offlineMode' text={advanced.offline_mode} element='.other' />
<p>{language.sections.privacy.offline_mode_description}</p>
<Checkbox name='quicklinksddgProxy' text={background.ddg_image_proxy + ' (' + quicklinks.title + ')'}/>
<Checkbox name='ddgProxy' text={background.ddg_image_proxy + ' (' + background.title + ')'}/>
<p>{language.sections.privacy.ddg_proxy_description}</p>
<h3 className='quicktip'>{language.sections.privacy.links.title}</h3>
<a className='privacy' href={window.constants.PRIVACY_URL} target='_blank' rel='noopener noreferrer'>{language.sections.privacy.links.privacy_policy}</a>
<h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.title')}</h1>
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.description')}</p>
<Checkbox name='offlineMode' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.advanced.offline_mode')} element='.other' />
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.offline_mode_description')}</p>
<Checkbox name='quicklinksddgProxy' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.ddg_image_proxy') + ' (' + this.getMessage(this.languagecode, 'modals.main.settings.sections.quicklinks.title') + ')'}/>
<Checkbox name='ddgProxy' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.ddg_image_proxy') + ' (' +this.getMessage(this.languagecode, 'modals.main.settings.sections.background.title') + ')'}/>
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.ddg_proxy_description')}</p>
<h3 className='quicktip'>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.links.title')}</h3>
<a className='privacy' href={window.constants.PRIVACY_URL} target='_blank' rel='noopener noreferrer'>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.links.privacy_policy')}</a>
<br/><br/>
<a className='privacy' href={'https://github.com/' + window.constants.ORG_NAME} target='_blank' rel='noopener noreferrer'>{language.sections.privacy.links.source_code}</a>
<a className='privacy' href={'https://github.com/' + window.constants.ORG_NAME} target='_blank' rel='noopener noreferrer'>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.links.source_code')}</a>
</>
);
const final = (
<>
<h1>{language.sections.final.title}</h1>
<p>{language.sections.final.description}</p>
<h3 className='quicktip'>{language.sections.final.changes}</h3>
<p>{language.sections.final.changes_description}</p>
<h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.final.title')}</h1>
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.final.description')}</p>
<h3 className='quicktip'>{this.getMessage(this.languagecode, 'modals.welcome.sections.final.changes')}</h3>
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.final.changes_description')}</p>
<div className='themesToggleArea'>
<div className='toggle' onClick={() => this.props.switchTab(1)}><span>{languageSettings.title}: {languages.find((i) => i.value === localStorage.getItem('language')).name}</span></div>
<div className='toggle' onClick={() => this.props.switchTab(3)}><span>{appearance.theme.title}: {this.getSetting('theme')}</span></div>
{(this.state.importedSettings.length !== 0) ? <div className='toggle' onClick={() => this.props.switchTab(2)}>{language.sections.final.imported} {this.state.importedSettings.length} {language.sections.final.settings}</div> : null}
<div className='toggle' onClick={() => this.props.switchTab(1)}><span>{this.getMessage(this.languagecode, 'modals.main.settings.sections.language.title')}: {languages.find((i) => i.value === localStorage.getItem('language')).name}</span></div>
<div className='toggle' onClick={() => this.props.switchTab(3)}><span>{this.getMessage(this.languagecode, 'modals.main.settings.sections.appearance.theme.title')}: {this.getSetting('theme')}</span></div>
{(this.state.importedSettings.length !== 0) ? <div className='toggle' onClick={() => this.props.switchTab(2)}>{language.sections.final.imported} {this.state.importedSettings.length} {this.getMessage(this.languagecode, 'modals.welcome.sections.final.settings')}</div> : null}
</div>
</>
);