mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-28 03:01:10 +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

72
src/components/modals/main/settings/sections/Appearance.jsx
View File

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import Radio from '../Radio';
@@ -5,67 +6,68 @@ import Slider from '../Slider';
import Text from '../Text';
export default function AppearanceSettings() {
const { appearance, background, quote } = window.language.modals.main.settings.sections;
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
const languagecode = variables.languagecode;
const themeOptions = [
{
name: appearance.theme.auto,
name: getMessage(languagecode, 'modals.main.settings.sections.appearance.theme.auto'),
value: 'auto'
},
{
name: appearance.theme.light,
name: getMessage(languagecode, 'modals.main.settings.sections.appearance.theme.light'),
value: 'light'
},
{
name: appearance.theme.dark,
name: getMessage(languagecode, 'modals.main.settings.sections.appearance.theme.dark'),
value: 'dark'
}
];
return (
<>
<h2>{appearance.title}</h2>
<Radio name='theme' title={appearance.theme.title} options={themeOptions} category='other' />
<h2>{getMessage(languagecode, 'modals.main.settings.sections.appearance.title')}</h2>
<Radio name='theme' title={getMessage(languagecode, 'modals.main.settings.sections.appearance.theme.title')} options={themeOptions} category='other' />
<h3>{appearance.navbar.title}</h3>
<Checkbox name='notesEnabled' text={appearance.navbar.notes} category='navbar' />
<Dropdown label={appearance.navbar.refresh} name='refresh' category='navbar'>
<option value='false'>{appearance.navbar.refresh_options.none}</option>
<option value='background'>{background.title}</option>
<option value='quote'>{quote.title}</option>
<option value='quotebackground'>{quote.title} + {background.title}</option>
<h3>{getMessage(languagecode, 'modals.main.settings.sections.appearance.navbar.title')}</h3>
<Checkbox name='notesEnabled' text={getMessage(languagecode, 'modals.main.settings.sections.appearance.navbar.notes')} category='navbar' />
<Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.appearance.navbar.refresh')} name='refresh' category='navbar'>
<option value='false'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.navbar.refresh_options.none')}</option>
<option value='background'>{getMessage(languagecode, 'modals.main.settings.sections.background.title')}</option>
<option value='quote'>{getMessage(languagecode, 'modals.main.settings.sections.quote.title')}</option>
<option value='quotebackground'>{getMessage(languagecode, 'modals.main.settings.sections.quote.title')} + {getMessage(languagecode, 'modals.main.settings.sections.background.title')}</option>
{/* before it was just a checkbox */}
<option value='true'>{appearance.navbar.refresh_options.page}</option>
<option value='true'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.navbar.refresh_options.page')}</option>
</Dropdown>
<br/>
<Slider title={appearance.accessibility.widget_zoom} name='zoomNavbar' min='10' max='400' default='100' display='%' category='navbar' />
<Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomNavbar' min='10' max='400' default='100' display='%' category='navbar' />
<h3>{appearance.font.title}</h3>
<Text title={appearance.font.custom} name='font' upperCaseFirst={true} category='other' />
<h3>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.title')}</h3>
<Text title={getMessage(languagecode, 'modals.main.settings.sections.appearance.font.custom')} name='font' upperCaseFirst={true} category='other' />
<br/>
<Checkbox name='fontGoogle' text={appearance.font.google} category='other' />
<Dropdown label={appearance.font.weight.title} name='fontweight' category='other'>
<Checkbox name='fontGoogle' text={getMessage(languagecode, 'modals.main.settings.sections.appearance.font.google')} category='other' />
<Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.title')} name='fontweight' category='other'>
{/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
<option value='100'>{appearance.font.weight.thin}</option>
<option value='200'>{appearance.font.weight.extra_light}</option>
<option value='300'>{appearance.font.weight.light}</option>
<option value='400'>{appearance.font.weight.normal}</option>
<option value='500'>{appearance.font.weight.medium}</option>
<option value='600'>{appearance.font.weight.semi_bold}</option>
<option value='700'>{appearance.font.weight.bold}</option>
<option value='800'>{appearance.font.weight.extra_bold}</option>
<option value='100'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.thin')}</option>
<option value='200'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.extra_light')}</option>
<option value='300'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.light')}</option>
<option value='400'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.normal')}</option>
<option value='500'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.medium')}</option>
<option value='600'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.semi_bold')}</option>
<option value='700'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.bold')}</option>
<option value='800'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.extra_bold')}</option>
</Dropdown>
<br/><br/>
<Dropdown label={appearance.font.style.title} name='fontstyle' category='other'>
<option value='normal'>{appearance.font.style.normal}</option>
<option value='italic'>{appearance.font.style.italic}</option>
<option value='oblique'>{appearance.font.style.oblique}</option>
<Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.appearance.font.style.title')} name='fontstyle' category='other'>
<option value='normal'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.style.normal')}</option>
<option value='italic'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.style.italic')}</option>
<option value='oblique'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.style.oblique')}</option>
</Dropdown>
<h3>{appearance.accessibility.title}</h3>
<Checkbox text={appearance.accessibility.text_shadow} name='textBorder' category='other'/>
<Checkbox text={appearance.accessibility.animations} name='animations' category='other'/>
<Slider title={appearance.accessibility.toast_duration} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' toast={true} display={' ' + appearance.accessibility.milliseconds} />
<h3>{getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.title')}</h3>
<Checkbox text={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.text_shadow')} name='textBorder' category='other'/>
<Checkbox text={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.animations')} name='animations' category='other'/>
<Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.toast_duration')} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' toast={true} display={' ' + getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.miliseconds')} />
</>
);
}