mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-18 22:44:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: better settings for time, implement auto theme feature, add dark theme css for date picker etc

Browse Source
This commit is contained in:
David Ralph
2021-03-21 22:21:37 +00:00
parent 1b40f112af
commit 177e4fdcdc
12 changed files with 87 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/modals/main/settings/sections/Time.jsx
View File

@@ -8,17 +8,12 @@ export default class TimeSettings extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
timeType: localStorage.getItem('timeType') || 'digital'
timeType: localStorage.getItem('timeType') || 'digital',
dateType: localStorage.getItem('dateType') || 'long'
};
this.language = window.language.modals.main.settings;
}
changeType(value) {
this.setState({
timeType: value
});
}
render() {
const { time } = this.language.sections;
@@ -51,36 +46,57 @@ export default class TimeSettings extends React.PureComponent {
default: timeSettings = null; break;
}
return (
<div>
<h2>{time.title}</h2>
<Switch name='time' text={this.language.enabled} />
<Dropdown label='Type' name='timeType' onChange={(value) => this.changeType(value)}>
<option className='choices' value='digital'>{time.digital.title}</option>
<option className='choices' value='analogue'>{time.analogue.title}</option>
<option className='choices' value='percentageComplete'>{time.percentage_complete}</option>
</Dropdown>
{timeSettings}
<h3>{time.date.title}</h3>
<Switch name='date' text={this.language.enabled} />
let dateSettings;
const longSettings = (
<React.Fragment>
<Checkbox name='dayofweek' text={time.date.day_of_week} />
<Checkbox name='datenth' text={time.date.datenth} />
<Checkbox name='short' text={time.date.short_date} betaFeature={true} />
</React.Fragment>
);
const shortSettings = (
<React.Fragment>
<br/>
<Dropdown label={time.date.short_format} name='dateFormat'>
<option className='choices' value='DMY'>DMY</option>
<option className='choices' value='MDY'>MDY</option>
<option className='choices' value='YMD'>YMD</option>
</Dropdown>
<br/>
<br/>
<br/><br/>
<Dropdown label={time.date.short_separator.title} name='shortFormat'>
<option className='choices' value='dots'>{time.date.short_separator.dots}</option>
<option className='choices' value='dash'>{time.date.short_separator.dash}</option>
<option className='choices' value='gaps'>{time.date.short_separator.gaps}</option>
<option className='choices' value='slashes'>{time.date.short_separator.slashes}</option>
</Dropdown>
</Dropdown>
</React.Fragment>
);
switch (this.state.dateType) {
case 'short': dateSettings = shortSettings; break;
case 'long': dateSettings = longSettings; break;
}
return (
<div>
<h2>{time.title}</h2>
<Switch name='time' text={this.language.enabled} />
<Dropdown label='Type' name='timeType' onChange={(value) => this.setState({ timeType: value })}>
<option className='choices' value='digital'>{time.digital.title}</option>
<option className='choices' value='analogue'>{time.analogue.title}</option>
<option className='choices' value='percentageComplete'>{time.percentage_complete}</option>
</Dropdown>
{timeSettings}
<h3>{time.date.title}</h3>
<Switch name='date' text={this.language.enabled} />
<Dropdown label='Type' name='dateType' onChange={(value) => this.setState({ dateType: value })}>
<option className='choices' value='long'>Long</option>
<option className='choices' value='short'>Short</option>
</Dropdown>
<br/>
{dateSettings}
</div>
);
}