mirror of https://github.com/mue/mue.git
feat(settings): New preferences wrapper
Co-authored-by: David Ralph <me@davidcralph.co.uk>
This commit is contained in:
parent
21184c6c03
commit
85b0e9826c
|
@ -1,7 +1,7 @@
|
||||||
import variables from 'modules/variables';
|
import variables from 'modules/variables';
|
||||||
import { PureComponent } from 'react';
|
import { PureComponent } from 'react';
|
||||||
|
|
||||||
import { MdErrorOutline } from 'react-icons/md';
|
import { MdErrorOutline, MdRefresh } from 'react-icons/md';
|
||||||
import { captureException } from '@sentry/react';
|
import { captureException } from '@sentry/react';
|
||||||
|
|
||||||
class ErrorBoundary extends PureComponent {
|
class ErrorBoundary extends PureComponent {
|
||||||
|
@ -49,16 +49,18 @@ class ErrorBoundary extends PureComponent {
|
||||||
</span>
|
</span>
|
||||||
<div className="buttonsRow">
|
<div className="buttonsRow">
|
||||||
{this.state.showReport ? (
|
{this.state.showReport ? (
|
||||||
<button onClick={() => this.reportError()}>
|
<button className="sideload" onClick={() => this.reportError()}>
|
||||||
{variables.getMessage('modals.main.error_boundary.report_error')}
|
{variables.getMessage('modals.main.error_boundary.report_error')}
|
||||||
|
<MdErrorOutline />
|
||||||
</button>
|
</button>
|
||||||
) : (
|
) : (
|
||||||
<span className="subtitle">
|
<span className="subtitle">
|
||||||
{variables.getMessage('modals.main.error_boundary.sent')}
|
{variables.getMessage('modals.main.error_boundary.sent')}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
<button className="refresh" onClick={() => window.location.reload()}>
|
<button className="sideload" onClick={() => window.location.reload()}>
|
||||||
{variables.getMessage('modals.main.error_boundary.refresh')}
|
{variables.getMessage('modals.main.error_boundary.refresh')}
|
||||||
|
<MdRefresh />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -27,9 +27,11 @@ class Header extends PureComponent {
|
||||||
if (localStorage.getItem(this.props.setting) === 'true') {
|
if (localStorage.getItem(this.props.setting) === 'true') {
|
||||||
localStorage.setItem(this.props.setting, false);
|
localStorage.setItem(this.props.setting, false);
|
||||||
this.setState({ [this.props.setting]: false });
|
this.setState({ [this.props.setting]: false });
|
||||||
|
EventBus.emit('toggle', this.props.setting);
|
||||||
} else {
|
} else {
|
||||||
localStorage.setItem(this.props.setting, true);
|
localStorage.setItem(this.props.setting, true);
|
||||||
this.setState({ [this.props.setting]: true });
|
this.setState({ [this.props.setting]: true });
|
||||||
|
EventBus.emit('toggle', this.props.setting);
|
||||||
}
|
}
|
||||||
|
|
||||||
variables.stats.postEvent(
|
variables.stats.postEvent(
|
||||||
|
@ -91,24 +93,6 @@ class Header extends PureComponent {
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{this.props.zoomSetting && (
|
|
||||||
<SettingsItem
|
|
||||||
title={variables.getMessage(
|
|
||||||
'modals.main.settings.sections.appearance.accessibility.widget_zoom',
|
|
||||||
)}
|
|
||||||
subtitle={variables.getMessage('modals.main.settings.sections.header.size')}
|
|
||||||
>
|
|
||||||
<Slider
|
|
||||||
name={this.props.zoomSetting}
|
|
||||||
min="10"
|
|
||||||
max="400"
|
|
||||||
default="100"
|
|
||||||
display="%"
|
|
||||||
marks={values('zoom')}
|
|
||||||
category={this.props.zoomCategory || this.props.category}
|
|
||||||
/>
|
|
||||||
</SettingsItem>
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,43 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import SettingsItem from './SettingsItem';
|
||||||
|
import variables from 'modules/variables';
|
||||||
|
import Slider from './Slider';
|
||||||
|
|
||||||
|
import { values } from 'modules/helpers/settings/modals';
|
||||||
|
import EventBus from 'modules/helpers/eventbus';
|
||||||
|
|
||||||
|
const PreferencesWrapper = ({ children, ...props }) => {
|
||||||
|
const [shown, setShown] = useState(localStorage.getItem(props.setting) === 'true');
|
||||||
|
|
||||||
|
EventBus.on('toggle', (setting) => {
|
||||||
|
if (setting === props.setting) {
|
||||||
|
setShown(!shown);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={shown ? '' : 'inactiveSetting'}>
|
||||||
|
{props.zoomSetting && (
|
||||||
|
<SettingsItem
|
||||||
|
title={variables.getMessage(
|
||||||
|
'modals.main.settings.sections.appearance.accessibility.widget_zoom',
|
||||||
|
)}
|
||||||
|
subtitle={variables.getMessage('modals.main.settings.sections.header.size')}
|
||||||
|
>
|
||||||
|
<Slider
|
||||||
|
name={props.zoomSetting}
|
||||||
|
min="10"
|
||||||
|
max="400"
|
||||||
|
default="100"
|
||||||
|
display="%"
|
||||||
|
marks={values('zoom')}
|
||||||
|
category={props.zoomCategory || props.category}
|
||||||
|
/>
|
||||||
|
</SettingsItem>
|
||||||
|
)}
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PreferencesWrapper;
|
|
@ -1,5 +1,5 @@
|
||||||
import variables from 'modules/variables';
|
import variables from 'modules/variables';
|
||||||
import { PureComponent } from 'react';
|
import { useState } from 'react';
|
||||||
import Modal from 'react-modal';
|
import Modal from 'react-modal';
|
||||||
import { MenuItem } from '@mui/material';
|
import { MenuItem } from '@mui/material';
|
||||||
import {
|
import {
|
||||||
|
@ -19,115 +19,103 @@ import SettingsItem from '../SettingsItem';
|
||||||
|
|
||||||
import time_zones from 'components/widgets/time/timezones.json';
|
import time_zones from 'components/widgets/time/timezones.json';
|
||||||
|
|
||||||
export default class AdvancedSettings extends PureComponent {
|
export default function AdvancedSettings() {
|
||||||
constructor() {
|
const [resetModal, setResetModal] = useState(false);
|
||||||
super();
|
const ADVANCED_SECTION = 'modals.main.settings.sections.advanced';
|
||||||
this.state = {
|
|
||||||
resetModal: false,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
return (
|
||||||
return (
|
<>
|
||||||
<>
|
<span className="mainTitle">{variables.getMessage(`${ADVANCED_SECTION}.title`)}</span>
|
||||||
<span className="mainTitle">
|
<SettingsItem
|
||||||
{variables.getMessage('modals.main.settings.sections.advanced.title')}
|
title={variables.getMessage('modals.main.settings.sections.advanced.offline_mode')}
|
||||||
</span>
|
subtitle={variables.getMessage('modals.main.settings.sections.advanced.offline_subtitle')}
|
||||||
<SettingsItem
|
>
|
||||||
title={variables.getMessage('modals.main.settings.sections.advanced.offline_mode')}
|
<Switch name="offlineMode" element=".other" />
|
||||||
subtitle={variables.getMessage('modals.main.settings.sections.advanced.offline_subtitle')}
|
</SettingsItem>
|
||||||
>
|
{localStorage.getItem('welcomePreview') !== 'true' && (
|
||||||
<Switch name="offlineMode" element=".other" />
|
<div className="settingsRow">
|
||||||
</SettingsItem>
|
<div className="content">
|
||||||
{localStorage.getItem('welcomePreview') !== 'true' && (
|
<span className="title">
|
||||||
<div className="settingsRow">
|
{variables.getMessage('modals.main.settings.sections.advanced.data')}
|
||||||
<div className="content">
|
</span>
|
||||||
<span className="title">
|
<span className="subtitle">
|
||||||
{variables.getMessage('modals.main.settings.sections.advanced.data')}
|
{variables.getMessage('modals.main.settings.sections.advanced.data_subtitle')}
|
||||||
</span>
|
</span>
|
||||||
<span className="subtitle">
|
|
||||||
{variables.getMessage('modals.main.settings.sections.advanced.data_subtitle')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="action activityButtons">
|
|
||||||
<button onClick={() => this.setState({ resetModal: true })}>
|
|
||||||
{variables.getMessage('modals.main.settings.buttons.reset')}
|
|
||||||
<ResetIcon />
|
|
||||||
</button>
|
|
||||||
<button onClick={() => exportSettings()}>
|
|
||||||
{variables.getMessage('modals.main.settings.buttons.export')}
|
|
||||||
<ExportIcon />
|
|
||||||
</button>
|
|
||||||
<button onClick={() => document.getElementById('file-input').click()}>
|
|
||||||
{variables.getMessage('modals.main.settings.buttons.import')}
|
|
||||||
<ImportIcon />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
<div className="action activityButtons">
|
||||||
<SettingsItem
|
<button onClick={() => setResetModal(true)}>
|
||||||
title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')}
|
{variables.getMessage('modals.main.settings.buttons.reset')}
|
||||||
subtitle={variables.getMessage(
|
<ResetIcon />
|
||||||
'modals.main.settings.sections.advanced.timezone.subtitle',
|
</button>
|
||||||
)}
|
<button onClick={() => exportSettings()}>
|
||||||
>
|
{variables.getMessage('modals.main.settings.buttons.export')}
|
||||||
<Dropdown name="timezone" category="timezone" manual={true}>
|
<ExportIcon />
|
||||||
<MenuItem value="auto">
|
</button>
|
||||||
{variables.getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
|
<button onClick={() => document.getElementById('file-input').click()}>
|
||||||
|
{variables.getMessage('modals.main.settings.buttons.import')}
|
||||||
|
<ImportIcon />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<SettingsItem
|
||||||
|
title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')}
|
||||||
|
subtitle={variables.getMessage('modals.main.settings.sections.advanced.timezone.subtitle')}
|
||||||
|
>
|
||||||
|
<Dropdown name="timezone" category="timezone" manual={true}>
|
||||||
|
<MenuItem value="auto">
|
||||||
|
{variables.getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
|
||||||
|
</MenuItem>
|
||||||
|
{time_zones.map((timezone) => (
|
||||||
|
<MenuItem value={timezone} key={timezone}>
|
||||||
|
{timezone}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
{time_zones.map((timezone) => (
|
))}
|
||||||
<MenuItem value={timezone} key={timezone}>
|
</Dropdown>
|
||||||
{timezone}
|
</SettingsItem>
|
||||||
</MenuItem>
|
<SettingsItem
|
||||||
))}
|
title={variables.getMessage('modals.main.settings.sections.advanced.tab_name')}
|
||||||
</Dropdown>
|
subtitle={variables.getMessage('modals.main.settings.sections.advanced.tab_name_subtitle')}
|
||||||
</SettingsItem>
|
>
|
||||||
<SettingsItem
|
<Text name="tabName" default={variables.getMessage('tabname')} category="other" />
|
||||||
title={variables.getMessage('modals.main.settings.sections.advanced.tab_name')}
|
</SettingsItem>
|
||||||
subtitle={variables.getMessage(
|
<FileUpload
|
||||||
'modals.main.settings.sections.advanced.tab_name_subtitle',
|
id="file-input"
|
||||||
)}
|
accept="application/json"
|
||||||
>
|
type="settings"
|
||||||
<Text name="tabName" default={variables.getMessage('tabname')} category="other" />
|
loadFunction={(e) => importSettings(e)}
|
||||||
</SettingsItem>
|
/>
|
||||||
<FileUpload
|
<SettingsItem
|
||||||
id="file-input"
|
title={variables.getMessage('modals.main.settings.sections.advanced.custom_css')}
|
||||||
accept="application/json"
|
subtitle={variables.getMessage(
|
||||||
type="settings"
|
'modals.main.settings.sections.advanced.custom_css_subtitle',
|
||||||
loadFunction={(e) => importSettings(e)}
|
)}
|
||||||
|
>
|
||||||
|
<Text name="customcss" textarea={true} category="other" customcss={true} />
|
||||||
|
</SettingsItem>
|
||||||
|
<SettingsItem
|
||||||
|
title={variables.getMessage('modals.main.settings.sections.experimental.title')}
|
||||||
|
subtitle={variables.getMessage(
|
||||||
|
'modals.main.settings.sections.advanced.experimental_warning',
|
||||||
|
)}
|
||||||
|
final={true}
|
||||||
|
>
|
||||||
|
<Switch
|
||||||
|
name="experimental"
|
||||||
|
text={variables.getMessage('modals.main.settings.enabled')}
|
||||||
|
element=".other"
|
||||||
/>
|
/>
|
||||||
<SettingsItem
|
</SettingsItem>
|
||||||
title={variables.getMessage('modals.main.settings.sections.advanced.custom_css')}
|
<Modal
|
||||||
subtitle={variables.getMessage(
|
closeTimeoutMS={100}
|
||||||
'modals.main.settings.sections.advanced.custom_css_subtitle',
|
onRequestClose={() => setResetModal(false)}
|
||||||
)}
|
isOpen={resetModal}
|
||||||
>
|
className="Modal resetmodal mainModal"
|
||||||
<Text name="customcss" textarea={true} category="other" customcss={true} />
|
overlayClassName="Overlay resetoverlay"
|
||||||
</SettingsItem>
|
ariaHideApp={false}
|
||||||
<SettingsItem
|
>
|
||||||
title={variables.getMessage('modals.main.settings.sections.experimental.title')}
|
<ResetModal modalClose={() => setResetModal(false)} />
|
||||||
subtitle={variables.getMessage(
|
</Modal>
|
||||||
'modals.main.settings.sections.advanced.experimental_warning',
|
</>
|
||||||
)}
|
);
|
||||||
final={true}
|
|
||||||
>
|
|
||||||
<Switch
|
|
||||||
name="experimental"
|
|
||||||
text={variables.getMessage('modals.main.settings.enabled')}
|
|
||||||
element=".other"
|
|
||||||
/>
|
|
||||||
</SettingsItem>
|
|
||||||
<Modal
|
|
||||||
closeTimeoutMS={100}
|
|
||||||
onRequestClose={() => this.setState({ resetModal: false })}
|
|
||||||
isOpen={this.state.resetModal}
|
|
||||||
className="Modal resetmodal mainModal"
|
|
||||||
overlayClassName="Overlay resetoverlay"
|
|
||||||
ariaHideApp={false}
|
|
||||||
>
|
|
||||||
<ResetModal modalClose={() => this.setState({ resetModal: false })} />
|
|
||||||
</Modal>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,126 +1,121 @@
|
||||||
import variables from 'modules/variables';
|
import variables from 'modules/variables';
|
||||||
import { PureComponent } from 'react';
|
import { useState } from 'react';
|
||||||
|
|
||||||
import Header from '../Header';
|
import Header from '../Header';
|
||||||
import Checkbox from '../Checkbox';
|
import Checkbox from '../Checkbox';
|
||||||
import Dropdown from '../Dropdown';
|
import Dropdown from '../Dropdown';
|
||||||
import SettingsItem from '../SettingsItem';
|
import SettingsItem from '../SettingsItem';
|
||||||
|
|
||||||
export default class DateSettings extends PureComponent {
|
export default function Date() {
|
||||||
constructor() {
|
const [dateType, setDateType] = useState(localStorage.getItem('dateType') || 'long');
|
||||||
super();
|
const longSettings = (
|
||||||
this.state = {
|
<>
|
||||||
dateType: localStorage.getItem('dateType') || 'long',
|
<Dropdown
|
||||||
};
|
label={variables.getMessage('modals.main.settings.sections.date.long_format')}
|
||||||
}
|
name="longFormat"
|
||||||
|
category="date"
|
||||||
|
>
|
||||||
|
<option value="DMY">DMY</option>
|
||||||
|
<option value="MDY">MDY</option>
|
||||||
|
<option value="YMD">YMD</option>
|
||||||
|
</Dropdown>
|
||||||
|
<Checkbox
|
||||||
|
name="dayofweek"
|
||||||
|
text={variables.getMessage('modals.main.settings.sections.date.day_of_week')}
|
||||||
|
category="date"
|
||||||
|
/>
|
||||||
|
<Checkbox
|
||||||
|
name="datenth"
|
||||||
|
text={variables.getMessage('modals.main.settings.sections.date.datenth')}
|
||||||
|
category="date"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
render() {
|
const shortSettings = (
|
||||||
const longSettings = (
|
<>
|
||||||
<>
|
<Dropdown
|
||||||
|
label={variables.getMessage('modals.main.settings.sections.date.short_format')}
|
||||||
|
name="dateFormat"
|
||||||
|
category="date"
|
||||||
|
>
|
||||||
|
<option value="DMY">DMY</option>
|
||||||
|
<option value="MDY">MDY</option>
|
||||||
|
<option value="YMD">YMD</option>
|
||||||
|
</Dropdown>
|
||||||
|
|
||||||
|
<Dropdown
|
||||||
|
label={variables.getMessage('modals.main.settings.sections.date.short_separator.title')}
|
||||||
|
name="shortFormat"
|
||||||
|
category="date"
|
||||||
|
>
|
||||||
|
<option value="dash">
|
||||||
|
{variables.getMessage('modals.main.settings.sections.date.short_separator.dash')}
|
||||||
|
</option>
|
||||||
|
<option value="dots">
|
||||||
|
{variables.getMessage('modals.main.settings.sections.date.short_separator.dots')}
|
||||||
|
</option>
|
||||||
|
<option value="gaps">
|
||||||
|
{variables.getMessage('modals.main.settings.sections.date.short_separator.gaps')}
|
||||||
|
</option>
|
||||||
|
<option value="slashes">
|
||||||
|
{variables.getMessage('modals.main.settings.sections.date.short_separator.slashes')}
|
||||||
|
</option>
|
||||||
|
</Dropdown>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header
|
||||||
|
title={variables.getMessage('modals.main.settings.sections.date.title')}
|
||||||
|
setting="date"
|
||||||
|
category="date"
|
||||||
|
element=".date"
|
||||||
|
zoomSetting="zoomDate"
|
||||||
|
switch={true}
|
||||||
|
/>
|
||||||
|
<SettingsItem
|
||||||
|
title={variables.getMessage('modals.main.settings.sections.time.type')}
|
||||||
|
subtitle={variables.getMessage('modals.main.settings.sections.date.type.subtitle')}
|
||||||
|
>
|
||||||
<Dropdown
|
<Dropdown
|
||||||
label={variables.getMessage('modals.main.settings.sections.date.long_format')}
|
name="dateType"
|
||||||
name="longFormat"
|
onChange={(value) => {
|
||||||
|
setDateType(value);
|
||||||
|
localStorage.setItem('dateType', value);
|
||||||
|
}}
|
||||||
category="date"
|
category="date"
|
||||||
>
|
>
|
||||||
<option value="DMY">DMY</option>
|
<option value="long">
|
||||||
<option value="MDY">MDY</option>
|
{variables.getMessage('modals.main.settings.sections.date.type.long')}
|
||||||
<option value="YMD">YMD</option>
|
</option>
|
||||||
|
<option value="short">
|
||||||
|
{variables.getMessage('modals.main.settings.sections.date.type.short')}
|
||||||
|
</option>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
|
</SettingsItem>
|
||||||
|
<SettingsItem
|
||||||
|
title={
|
||||||
|
dateType === 'long'
|
||||||
|
? variables.getMessage('modals.main.settings.sections.date.type.long')
|
||||||
|
: variables.getMessage('modals.main.settings.sections.date.type.short')
|
||||||
|
}
|
||||||
|
subtitle={variables.getMessage('modals.main.settings.sections.date.type_settings')}
|
||||||
|
final={true}
|
||||||
|
>
|
||||||
|
{dateType === 'long' ? longSettings : shortSettings}
|
||||||
<Checkbox
|
<Checkbox
|
||||||
name="dayofweek"
|
name="weeknumber"
|
||||||
text={variables.getMessage('modals.main.settings.sections.date.day_of_week')}
|
text={variables.getMessage('modals.main.settings.sections.date.week_number')}
|
||||||
category="date"
|
category="date"
|
||||||
/>
|
/>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
name="datenth"
|
name="datezero"
|
||||||
text={variables.getMessage('modals.main.settings.sections.date.datenth')}
|
text={variables.getMessage('modals.main.settings.sections.time.digital.zero')}
|
||||||
category="date"
|
category="date"
|
||||||
/>
|
/>
|
||||||
</>
|
</SettingsItem>
|
||||||
);
|
</>
|
||||||
|
);
|
||||||
const shortSettings = (
|
|
||||||
<>
|
|
||||||
<Dropdown
|
|
||||||
label={variables.getMessage('modals.main.settings.sections.date.short_format')}
|
|
||||||
name="dateFormat"
|
|
||||||
category="date"
|
|
||||||
>
|
|
||||||
<option value="DMY">DMY</option>
|
|
||||||
<option value="MDY">MDY</option>
|
|
||||||
<option value="YMD">YMD</option>
|
|
||||||
</Dropdown>
|
|
||||||
|
|
||||||
<Dropdown
|
|
||||||
label={variables.getMessage('modals.main.settings.sections.date.short_separator.title')}
|
|
||||||
name="shortFormat"
|
|
||||||
category="date"
|
|
||||||
>
|
|
||||||
<option value="dash">
|
|
||||||
{variables.getMessage('modals.main.settings.sections.date.short_separator.dash')}
|
|
||||||
</option>
|
|
||||||
<option value="dots">
|
|
||||||
{variables.getMessage('modals.main.settings.sections.date.short_separator.dots')}
|
|
||||||
</option>
|
|
||||||
<option value="gaps">
|
|
||||||
{variables.getMessage('modals.main.settings.sections.date.short_separator.gaps')}
|
|
||||||
</option>
|
|
||||||
<option value="slashes">
|
|
||||||
{variables.getMessage('modals.main.settings.sections.date.short_separator.slashes')}
|
|
||||||
</option>
|
|
||||||
</Dropdown>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Header
|
|
||||||
title={variables.getMessage('modals.main.settings.sections.date.title')}
|
|
||||||
setting="date"
|
|
||||||
category="date"
|
|
||||||
element=".date"
|
|
||||||
zoomSetting="zoomDate"
|
|
||||||
switch={true}
|
|
||||||
/>
|
|
||||||
<SettingsItem
|
|
||||||
title={variables.getMessage('modals.main.settings.sections.time.type')}
|
|
||||||
subtitle={variables.getMessage('modals.main.settings.sections.date.type.subtitle')}
|
|
||||||
>
|
|
||||||
<Dropdown
|
|
||||||
name="dateType"
|
|
||||||
onChange={(value) => this.setState({ dateType: value })}
|
|
||||||
category="date"
|
|
||||||
>
|
|
||||||
<option value="long">
|
|
||||||
{variables.getMessage('modals.main.settings.sections.date.type.long')}
|
|
||||||
</option>
|
|
||||||
<option value="short">
|
|
||||||
{variables.getMessage('modals.main.settings.sections.date.type.short')}
|
|
||||||
</option>
|
|
||||||
</Dropdown>
|
|
||||||
</SettingsItem>
|
|
||||||
<SettingsItem
|
|
||||||
title={
|
|
||||||
this.state.dateType === 'long'
|
|
||||||
? variables.getMessage('modals.main.settings.sections.date.type.long')
|
|
||||||
: variables.getMessage('modals.main.settings.sections.date.type.short')
|
|
||||||
}
|
|
||||||
subtitle={variables.getMessage('modals.main.settings.sections.date.type_settings')}
|
|
||||||
final={true}
|
|
||||||
>
|
|
||||||
{this.state.dateType === 'long' ? longSettings : shortSettings}
|
|
||||||
<Checkbox
|
|
||||||
name="weeknumber"
|
|
||||||
text={variables.getMessage('modals.main.settings.sections.date.week_number')}
|
|
||||||
category="date"
|
|
||||||
/>
|
|
||||||
<Checkbox
|
|
||||||
name="datezero"
|
|
||||||
text={variables.getMessage('modals.main.settings.sections.time.digital.zero')}
|
|
||||||
category="date"
|
|
||||||
/>
|
|
||||||
</SettingsItem>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -28,6 +28,33 @@ export default class TimeSettings extends PureComponent {
|
||||||
|
|
||||||
const TIME_SECTION = 'modals.main.settings.sections.time';
|
const TIME_SECTION = 'modals.main.settings.sections.time';
|
||||||
|
|
||||||
|
const WidgetType = () => {
|
||||||
|
return (
|
||||||
|
<SettingsItem
|
||||||
|
title={variables.getMessage(`${TIME_SECTION}.type`)}
|
||||||
|
subtitle={variables.getMessage(`${TIME_SECTION}.type_subtitle`)}
|
||||||
|
final={this.state.timeType === 'percentageComplete'}
|
||||||
|
>
|
||||||
|
<Dropdown
|
||||||
|
name="timeType"
|
||||||
|
onChange={(value) => this.setState({ timeType: value })}
|
||||||
|
category="clock"
|
||||||
|
>
|
||||||
|
<option value="digital">{variables.getMessage(`${TIME_SECTION}.digital.title`)}</option>
|
||||||
|
<option value="analogue">
|
||||||
|
{variables.getMessage(`${TIME_SECTION}.analogue.title`)}
|
||||||
|
</option>
|
||||||
|
<option value="percentageComplete">
|
||||||
|
{variables.getMessage(`${TIME_SECTION}.percentage_complete`)}
|
||||||
|
</option>
|
||||||
|
<option value="verticalClock">
|
||||||
|
{variables.getMessage(`${TIME_SECTION}.vertical_clock.title`)}
|
||||||
|
</option>
|
||||||
|
</Dropdown>
|
||||||
|
</SettingsItem>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const digitalSettings = (
|
const digitalSettings = (
|
||||||
<SettingsItem
|
<SettingsItem
|
||||||
title={variables.getMessage(`${TIME_SECTION}.digital.title`)}
|
title={variables.getMessage(`${TIME_SECTION}.digital.title`)}
|
||||||
|
@ -173,28 +200,7 @@ export default class TimeSettings extends PureComponent {
|
||||||
zoomSetting="zoomClock"
|
zoomSetting="zoomClock"
|
||||||
switch={true}
|
switch={true}
|
||||||
/>
|
/>
|
||||||
<SettingsItem
|
<WidgetType />
|
||||||
title={variables.getMessage(`${TIME_SECTION}.type`)}
|
|
||||||
subtitle={variables.getMessage(`${TIME_SECTION}.type_subtitle`)}
|
|
||||||
final={this.state.timeType === 'percentageComplete'}
|
|
||||||
>
|
|
||||||
<Dropdown
|
|
||||||
name="timeType"
|
|
||||||
onChange={(value) => this.setState({ timeType: value })}
|
|
||||||
category="clock"
|
|
||||||
>
|
|
||||||
<option value="digital">{variables.getMessage(`${TIME_SECTION}.digital.title`)}</option>
|
|
||||||
<option value="analogue">
|
|
||||||
{variables.getMessage(`${TIME_SECTION}.analogue.title`)}
|
|
||||||
</option>
|
|
||||||
<option value="percentageComplete">
|
|
||||||
{variables.getMessage(`${TIME_SECTION}.percentage_complete`)}
|
|
||||||
</option>
|
|
||||||
<option value="verticalClock">
|
|
||||||
{variables.getMessage(`${TIME_SECTION}.vertical_clock.title`)}
|
|
||||||
</option>
|
|
||||||
</Dropdown>
|
|
||||||
</SettingsItem>
|
|
||||||
{timeSettings}
|
{timeSettings}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -9,6 +9,7 @@ import Dropdown from '../Dropdown';
|
||||||
import Checkbox from '../Checkbox';
|
import Checkbox from '../Checkbox';
|
||||||
import { TextField } from '@mui/material';
|
import { TextField } from '@mui/material';
|
||||||
import SettingsItem from '../SettingsItem';
|
import SettingsItem from '../SettingsItem';
|
||||||
|
import PreferencesWrapper from '../PreferencesWrapper';
|
||||||
|
|
||||||
export default class TimeSettings extends PureComponent {
|
export default class TimeSettings extends PureComponent {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
@ -194,11 +195,18 @@ export default class TimeSettings extends PureComponent {
|
||||||
zoomCategory="weather"
|
zoomCategory="weather"
|
||||||
switch={true}
|
switch={true}
|
||||||
/>
|
/>
|
||||||
<WidgetType />
|
<PreferencesWrapper
|
||||||
{/* https://stackoverflow.com/a/65328486 when using inputs it may defocus so we do the {} instead of <> */}
|
setting="weatherEnabled"
|
||||||
{LocationSetting()}
|
zoomSetting="zoomWeather"
|
||||||
<TemperatureFormat />
|
zoomCategory="weather"
|
||||||
{weatherType === '4' && <CustomOptions />}
|
switch={true}
|
||||||
|
>
|
||||||
|
<WidgetType />
|
||||||
|
{/* https://stackoverflow.com/a/65328486 when using inputs it may defocus so we do the {} instead of <> */}
|
||||||
|
{LocationSetting()}
|
||||||
|
<TemperatureFormat />
|
||||||
|
{weatherType === '4' && <CustomOptions />}
|
||||||
|
</PreferencesWrapper>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue