mirror of
https://github.com/mue/mue.git
synced 2026-07-07 14:17:09 +02:00
63 lines
3.7 KiB
JavaScript
63 lines
3.7 KiB
JavaScript
import variables from 'modules/variables';
|
|
|
|
import Checkbox from '../Checkbox';
|
|
import Dropdown from '../Dropdown';
|
|
import Radio from '../Radio';
|
|
import Slider from '../Slider';
|
|
import Text from '../Text';
|
|
|
|
import { values } from 'modules/helpers/settings/modals';
|
|
|
|
export default function AppearanceSettings() {
|
|
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
|
|
|
const themeOptions = [
|
|
{
|
|
name: getMessage('modals.main.settings.sections.appearance.theme.auto'),
|
|
value: 'auto'
|
|
},
|
|
{
|
|
name: getMessage('modals.main.settings.sections.appearance.theme.light'),
|
|
value: 'light'
|
|
},
|
|
{
|
|
name: getMessage('modals.main.settings.sections.appearance.theme.dark'),
|
|
value: 'dark'
|
|
}
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<h2>{getMessage('modals.main.settings.sections.appearance.title')}</h2>
|
|
<Radio name='theme' title={getMessage('modals.main.settings.sections.appearance.theme.title')} options={themeOptions} category='other' />
|
|
|
|
<h3>{getMessage('modals.main.settings.sections.appearance.font.title')}</h3>
|
|
<Text title={getMessage('modals.main.settings.sections.appearance.font.custom')} name='font' upperCaseFirst={true} category='other' />
|
|
<br/>
|
|
<Checkbox name='fontGoogle' text={getMessage('modals.main.settings.sections.appearance.font.google')} category='other' />
|
|
<Dropdown label={getMessage('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'>{getMessage('modals.main.settings.sections.appearance.font.weight.thin')}</option>
|
|
<option value='200'>{getMessage('modals.main.settings.sections.appearance.font.weight.extra_light')}</option>
|
|
<option value='300'>{getMessage('modals.main.settings.sections.appearance.font.weight.light')}</option>
|
|
<option value='400'>{getMessage('modals.main.settings.sections.appearance.font.weight.normal')}</option>
|
|
<option value='500'>{getMessage('modals.main.settings.sections.appearance.font.weight.medium')}</option>
|
|
<option value='600'>{getMessage('modals.main.settings.sections.appearance.font.weight.semi_bold')}</option>
|
|
<option value='700'>{getMessage('modals.main.settings.sections.appearance.font.weight.bold')}</option>
|
|
<option value='800'>{getMessage('modals.main.settings.sections.appearance.font.weight.extra_bold')}</option>
|
|
</Dropdown>
|
|
<Dropdown label={getMessage('modals.main.settings.sections.appearance.font.style.title')} name='fontstyle' category='other'>
|
|
<option value='normal'>{getMessage('modals.main.settings.sections.appearance.font.style.normal')}</option>
|
|
<option value='italic'>{getMessage('modals.main.settings.sections.appearance.font.style.italic')}</option>
|
|
<option value='oblique'>{getMessage('modals.main.settings.sections.appearance.font.style.oblique')}</option>
|
|
</Dropdown>
|
|
|
|
<h3>{getMessage('modals.main.settings.sections.appearance.accessibility.title')}</h3>
|
|
<Checkbox text={getMessage('modals.main.settings.sections.appearance.accessibility.text_shadow')} name='textBorder' category='other'/>
|
|
<Checkbox text={getMessage('modals.main.settings.sections.appearance.accessibility.animations')} name='animations' category='other'/>
|
|
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.toast_duration')} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' marks={values('toast')} toast={true}
|
|
display={' ' + getMessage('modals.main.settings.sections.appearance.accessibility.milliseconds')} />
|
|
</>
|
|
);
|
|
}
|