mirror of
https://github.com/mue/mue.git
synced 2026-07-09 21:45:26 +02:00
64 lines
2.7 KiB
JavaScript
64 lines
2.7 KiB
JavaScript
import Checkbox from '../Checkbox';
|
|
import Dropdown from '../Dropdown';
|
|
import Radio from '../Radio';
|
|
import Slider from '../Slider';
|
|
import Text from '../Text';
|
|
|
|
export default function AppearanceSettings() {
|
|
const { appearance } = window.language.modals.main.settings.sections;
|
|
|
|
const themeOptions = [
|
|
{
|
|
name: appearance.theme.auto,
|
|
value: 'auto'
|
|
},
|
|
{
|
|
name: appearance.theme.light,
|
|
value: 'light'
|
|
},
|
|
{
|
|
name: appearance.theme.dark,
|
|
value: 'dark'
|
|
}
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<h2>{appearance.title}</h2>
|
|
<Radio name='theme' title={appearance.theme.title} options={themeOptions} category='other' />
|
|
|
|
<h3>{appearance.navbar.title}</h3>
|
|
<Checkbox name='notesEnabled' text={appearance.navbar.notes} element='.other' />
|
|
<Checkbox name='refresh' text={appearance.navbar.refresh} element='.other' />
|
|
|
|
<h3>{appearance.font.title}</h3>
|
|
<Text title={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'>
|
|
{/* 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>
|
|
</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>
|
|
|
|
<h3>{appearance.accessibility.title}</h3>
|
|
{(navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined') ?
|
|
<Slider title={appearance.accessibility.widget_zoom} name='widgetzoom' default='100' step='10' min='50' max='200' display='%' category='other'/>
|
|
: null}
|
|
<Slider title={appearance.accessibility.toast_duration} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' toast={true} display={' ' + appearance.accessibility.milliseconds} />
|
|
</>
|
|
);
|
|
}
|