mirror of https://github.com/mue/mue.git
215 lines
7.4 KiB
JavaScript
215 lines
7.4 KiB
JavaScript
import { memo } from 'react';
|
|
|
|
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 SettingsItem from '../SettingsItem';
|
|
|
|
import { values } from 'modules/helpers/settings/modals';
|
|
|
|
function AppearanceSettings() {
|
|
return (
|
|
<>
|
|
<span className="mainTitle">
|
|
{variables.getMessage('modals.main.settings.sections.appearance.title')}
|
|
</span>
|
|
<div className="settingsRow">
|
|
<div className="content">
|
|
<span className="title">
|
|
{variables.getMessage('modals.main.settings.sections.appearance.theme.title')}
|
|
</span>
|
|
<span className="subtitle">
|
|
{' '}
|
|
{variables.getMessage('modals.main.settings.sections.appearance.theme.description')}
|
|
</span>
|
|
</div>
|
|
<div className="action">
|
|
<Radio
|
|
name="theme"
|
|
options={[
|
|
{
|
|
name: variables.getMessage('modals.main.settings.sections.appearance.theme.auto'),
|
|
value: 'auto',
|
|
},
|
|
{
|
|
name: variables.getMessage('modals.main.settings.sections.appearance.theme.light'),
|
|
value: 'light',
|
|
},
|
|
{
|
|
name: variables.getMessage('modals.main.settings.sections.appearance.theme.dark'),
|
|
value: 'dark',
|
|
},
|
|
]}
|
|
category="other"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="settingsRow">
|
|
<div className="content">
|
|
<span className="title">
|
|
{variables.getMessage('modals.main.settings.sections.appearance.font.title')}
|
|
</span>
|
|
<span className="subtitle">
|
|
{variables.getMessage('modals.main.settings.sections.appearance.font.description')}
|
|
</span>
|
|
</div>
|
|
<div className="action">
|
|
<Checkbox
|
|
name="fontGoogle"
|
|
text={variables.getMessage('modals.main.settings.sections.appearance.font.google')}
|
|
category="other"
|
|
/>
|
|
<Text
|
|
title={variables.getMessage('modals.main.settings.sections.appearance.font.custom')}
|
|
name="font"
|
|
upperCaseFirst={true}
|
|
category="other"
|
|
/>
|
|
<Dropdown
|
|
label={variables.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">
|
|
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.thin')}
|
|
</option>
|
|
<option value="200">
|
|
{variables.getMessage(
|
|
'modals.main.settings.sections.appearance.font.weight.extra_light',
|
|
)}
|
|
</option>
|
|
<option value="300">
|
|
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.light')}
|
|
</option>
|
|
<option value="400">
|
|
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.normal')}
|
|
</option>
|
|
<option value="500">
|
|
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.medium')}
|
|
</option>
|
|
<option value="600">
|
|
{variables.getMessage(
|
|
'modals.main.settings.sections.appearance.font.weight.semi_bold',
|
|
)}
|
|
</option>
|
|
<option value="700">
|
|
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.bold')}
|
|
</option>
|
|
<option value="800">
|
|
{variables.getMessage(
|
|
'modals.main.settings.sections.appearance.font.weight.extra_bold',
|
|
)}
|
|
</option>
|
|
</Dropdown>
|
|
<Dropdown
|
|
label={variables.getMessage(
|
|
'modals.main.settings.sections.appearance.font.style.title',
|
|
)}
|
|
name="fontstyle"
|
|
category="other"
|
|
>
|
|
<option value="normal">
|
|
{variables.getMessage('modals.main.settings.sections.appearance.font.style.normal')}
|
|
</option>
|
|
<option value="italic">
|
|
{variables.getMessage('modals.main.settings.sections.appearance.font.style.italic')}
|
|
</option>
|
|
<option value="oblique">
|
|
{variables.getMessage('modals.main.settings.sections.appearance.font.style.oblique')}
|
|
</option>
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
<SettingsItem
|
|
title={variables.getMessage('modals.main.settings.sections.appearance.style.title')}
|
|
subtitle={variables.getMessage(
|
|
'modals.main.settings.sections.appearance.style.description',
|
|
)}
|
|
>
|
|
<Radio
|
|
name="widgetStyle"
|
|
element=".other"
|
|
options={[
|
|
{
|
|
name: variables.getMessage('modals.main.settings.sections.appearance.style.legacy'),
|
|
value: 'legacy',
|
|
},
|
|
{
|
|
name: variables.getMessage('modals.main.settings.sections.appearance.style.new'),
|
|
value: 'new',
|
|
},
|
|
]}
|
|
category="widgets"
|
|
/>
|
|
</SettingsItem>
|
|
|
|
<SettingsItem
|
|
title={variables.getMessage('modals.main.settings.sections.appearance.accessibility.title')}
|
|
subtitle={variables.getMessage(
|
|
'modals.main.settings.sections.appearance.accessibility.description',
|
|
)}
|
|
final={true}
|
|
>
|
|
<Dropdown
|
|
label={variables.getMessage(
|
|
'modals.main.settings.sections.appearance.accessibility.text_shadow.title',
|
|
)}
|
|
name="textBorder"
|
|
category="other"
|
|
>
|
|
<option value="new">
|
|
{variables.getMessage(
|
|
'modals.main.settings.sections.appearance.accessibility.text_shadow.new',
|
|
)}
|
|
</option>{' '}
|
|
{/* default */}
|
|
<option value="true">
|
|
{variables.getMessage(
|
|
'modals.main.settings.sections.appearance.accessibility.text_shadow.old',
|
|
)}
|
|
</option>{' '}
|
|
{/* old checkbox setting */}
|
|
<option value="none">
|
|
{variables.getMessage(
|
|
'modals.main.settings.sections.appearance.accessibility.text_shadow.none',
|
|
)}
|
|
</option>
|
|
</Dropdown>
|
|
<Checkbox
|
|
text={variables.getMessage(
|
|
'modals.main.settings.sections.appearance.accessibility.animations',
|
|
)}
|
|
name="animations"
|
|
category="other"
|
|
/>
|
|
<Slider
|
|
title={variables.getMessage(
|
|
'modals.main.settings.sections.appearance.accessibility.toast_duration',
|
|
)}
|
|
name="toastDisplayTime"
|
|
default="2500"
|
|
step="100"
|
|
min="500"
|
|
max="5000"
|
|
marks={values('toast')}
|
|
display={
|
|
' ' +
|
|
variables.getMessage(
|
|
'modals.main.settings.sections.appearance.accessibility.milliseconds',
|
|
)
|
|
}
|
|
/>
|
|
</SettingsItem>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default memo(AppearanceSettings);
|