mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-14 20:43:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: working accessibility settings ui

Browse Source
This commit is contained in:
David Ralph
2021-03-18 16:16:29 +00:00
parent 4adf45094a
commit b24739cabb
2 changed files with 45 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/modals/settings/sections/Appearance.jsx
View File

@@ -1,15 +1,46 @@
import React from 'react';
import Checkbox from '../Checkbox';
import { toast } from 'react-toastify';
export default class AppearanceSettings extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
zoom: 100,
toast_duration: 2500
zoom: localStorage.getItem('zoom'),
toast_duration: localStorage.getItem('toastDisplayTime')
};
}
resetItem(key) {
switch (key) {
case 'zoom':
localStorage.setItem('zoom', 100);
this.setState({
zoom: 100
});
break;
case 'toast_duration':
localStorage.setItem('toastDisplayTime', 2500);
this.setState({
toast_duration: 2500
});
break;
default:
toast('resetItem requires a key!');
}
toast(this.props.language.toasts.reset);
}
componentDidUpdate() {
localStorage.setItem('zoom', this.state.zoom);
localStorage.setItem('toastDisplayTime', this.state.toast_duration);
}
render() {
const { appearance } = this.props.language.sections;
@@ -21,12 +52,12 @@ export default class AppearanceSettings extends React.PureComponent {
<h3>{appearance.accessibility.title}</h3>
<Checkbox name='animations' text={appearance.animations} betaFeature={true} />
<ul>
<p>{appearance.accessibility.zoom} (100%) <span className='modalLink'>{this.props.language.buttons.reset}</span></p>
<input className='range' type='range' min='50' max='200' value={100} />
<p>{appearance.accessibility.zoom} ({this.state.zoom}%) <span className='modalLink' onClick={() => this.resetItem('zoom')}>{this.props.language.buttons.reset}</span></p>
<input className='range' type='range' min='50' max='200' value={this.state.zoom} onChange={(event) => this.setState({ zoom: event.target.value })} />
</ul>
<ul>
<p>{appearance.accessibility.toast_duration} (2500 {appearance.accessibility.milliseconds}) <span className='modalLink'>{this.props.language.buttons.reset}</span></p>
<input className='range' type='range' min='50' max='200' value={100} />
<p>{appearance.accessibility.toast_duration} ({this.state.toast_duration} {appearance.accessibility.milliseconds}) <span className='modalLink' onClick={() => this.resetItem('toast_duration')}>{this.props.language.buttons.reset}</span></p>
<input className='range' type='range' min='500' max='5000' value={this.state.toast_duration} onChange={(event) => this.setState({ toast_duration: event.target.value })} />
</ul>
</div>
);