extras
/
mue
mirror of https://github.com/mue/mue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: new settings components

This commit is contained in:
David Ralph 2021-03-21 13:09:06 +00:00
parent f6564fa758
commit d99cc7869a
10 changed files with 182 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/modals/main/scss/settings/_main.scss
View File

@ -144,8 +144,7 @@ input[type=color]::-moz-color-swatch {
font-size: 12px;
}
#customcss,
#customjs {
.settingsTextarea {
font-family: Consolas !important;
padding: 15px;
border-radius: 15px;
@ -154,7 +153,7 @@ input[type=color]::-moz-color-swatch {
margin-left: 0;
}
.MuiCheckbox-colorPrimary.Mui-checked, .MuiSwitch-colorPrimary.Mui-checked {
.MuiCheckbox-colorPrimary.Mui-checked, .MuiSwitch-colorPrimary.Mui-checked, .MuIconButton-colorPrimary.Mui-checked{
color: map-get($button-colours, 'reset') !important;
}

38
src/components/modals/main/settings/Slider.jsx Normal file
View File

@ -0,0 +1,38 @@
import React from 'react';
import { toast } from 'react-toastify';
export default class Slider extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
value: localStorage.getItem(this.props.name) || ''
};
this.language = window.language.modals.main.settings;
}
handleChange(value) {
localStorage.setItem(this.props.name, value);
this.setState({
value: value
});
}
resetItem() {
localStorage.setItem(this.props.name, this.props.default);
this.setState({
value: this.props.default
});
toast(this.language.toasts.reset);
}
render() {
return (
<React.Fragment>
<p>{this.props.title} ({this.state.value}{this.props.display}) <span className='modalLink' onClick={() => this.resetItem()}>{this.language.buttons.reset}</span></p>
<input className='range' type='range' min={this.props.min} max={this.props.max} value={this.state.value} onChange={(e) => this.handleChange(e.target.value)} />
</React.Fragment>
);
}
}

46
src/components/modals/main/settings/Text.jsx Normal file
View File

@ -0,0 +1,46 @@
import React from 'react';
import { toast } from 'react-toastify';
export default class Text extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
value: localStorage.getItem(this.props.name) || ''
};
this.language = window.language.modals.main.settings;
}
handleChange(value) {
// Alex wanted font to work with montserrat and Montserrat, so I made it work
if (this.props.upperCaseFirst === true) {
value = value.charAt(0).toUpperCase() + value.slice(1);
}
localStorage.setItem(this.props.name, value);
this.setState({
value: value
});
}
resetItem() {
localStorage.setItem(this.props.name, this.props.default || '');
this.setState({
value: this.props.default || ''
});
toast(this.language.toasts.reset);
}
render() {
return (
<React.Fragment>
<p>{this.props.title} <span className='modalLink' onClick={() => this.resetItem()}>{this.language.buttons.reset}</span></p>
{(this.props.textarea === true) ?
<textarea className='settingsTextarea' value={this.state.value} onChange={(e) => this.handleChange(e.target.value)}/>
:<input type='text' value={this.state.value} onChange={(e) => this.handleChange(e.target.value)}/>
}
</React.Fragment>
);
}
}

27
src/components/modals/main/settings/sections/Advanced.jsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import Checkbox from '../Checkbox';
import FileUpload from '../FileUpload';
import Text from '../Text';
import ResetModal from '../ResetModal';
import SettingsFunctions from '../../../../../modules/helpers/settings';
@ -18,11 +19,6 @@ export default class AdvancedSettings extends React.PureComponent {
this.language = window.language.modals.main.settings;
}
resetItem(type) {
document.getElementById(type).value = '';
toast(this.language.toasts.reset);
}
settingsImport(e) {
const content = JSON.parse(e.target.result);
@ -33,16 +29,6 @@ export default class AdvancedSettings extends React.PureComponent {
toast(this.language.toasts.imported);
}
componentDidMount() {
document.getElementById('customcss').value = localStorage.getItem('customcss');
document.getElementById('customjs').value = localStorage.getItem('customjs');
}
componentDidUpdate() {
localStorage.setItem('customcss', document.getElementById('customcss').value);
localStorage.setItem('customjs', document.getElementById('customjs').value);
}
render() {
const { advanced } = this.language.sections;
@ -58,14 +44,9 @@ export default class AdvancedSettings extends React.PureComponent {
<FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)} />
<h3>{advanced.customisation}</h3>
<ul>
<p>{advanced.custom_css} <span className='modalLink' onClick={() => this.resetItem('customcss')}>{this.language.buttons.reset}</span></p>
<textarea id='customcss'></textarea>
</ul>
<ul>
<p>{advanced.custom_js} <span className='modalLink' onClick={() => this.resetItem('customjs')}>{this.language.buttons.reset}</span></p>
<textarea id='customjs'></textarea>
</ul>
<Text title={advanced.custom_js} name='customjs' textarea={true}/>
<Text title={advanced.custom_css} name='customcss' textarea={true}/>
<Text title='Tab Name' name='tabName'/>
<h3>{this.language.sections.experimental.title}</h3>
<p>{advanced.experimental_warning}</p>

175
src/components/modals/main/settings/sections/Appearance.jsx
View File

@ -3,127 +3,70 @@ import React from 'react';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import Radio from '../Radio';
import Slider from '../Slider';
import Text from '../Text';
import { toast } from 'react-toastify';
export default function AppearanceSettings(props) {
const { appearance } = window.language.modals.main.settings.sections;
export default class AppearanceSettings extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
zoom: localStorage.getItem('zoom'),
toast_duration: localStorage.getItem('toastDisplayTime'),
font: localStorage.getItem('font') || ''
};
this.language = window.language.modals.main.settings;
}
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;
case 'font':
localStorage.setItem('font', '');
this.setState({
font: ''
});
break;
default:
toast('resetItem requires a key!');
let themeOptions = [
{
'name': 'Auto',
'value': 'auto'
},
{
'name': 'Light',
'value': 'light'
}, {
'name': 'Dark',
'value': 'dark'
}
]
toast(this.language.toasts.reset);
}
return (
<div>
<h2>{appearance.title}</h2>
<Radio name='theme' title='Theme' options={themeOptions} />
componentDidUpdate() {
localStorage.setItem('zoom', this.state.zoom);
localStorage.setItem('toastDisplayTime', this.state.toast_duration);
localStorage.setItem('font', this.state.font.charAt(0).toUpperCase() + this.state.font.slice(1));
}
<h3>{appearance.navbar.title}</h3>
<Checkbox name='notesEnabled' text={appearance.navbar.notes} />
<Checkbox name='refresh' text={appearance.navbar.refresh} />
render() {
const { appearance } = this.language.sections;
<h3>{appearance.font.title}</h3>
<Text title={appearance.font.custom} name='font' upperCaseFirst={true} />
<br/>
<Dropdown
label='Font Weight'
name='fontweight'
id='fontWeight'
onChange={() => localStorage.setItem('fontWeight', document.getElementById('fontWeight').value)}>
{/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
<option className='choices' value='100'>Thin</option>
<option className='choices' value='200'>Extra-Light</option>
<option className='choices' value='300'>Light</option>
<option className='choices' value='400'>Normal</option>
<option className='choices' value='500'>Medium</option>
<option className='choices' value='600'>Semi-Bold</option>
<option className='choices' value='700'>Bold</option>
<option className='choices' value='800'>Extra-Bold</option>
</Dropdown>
<br /><br />
<Dropdown
label='Font Style'
name='fontstyle'
id='fontStyle'
onChange={() => localStorage.setItem('fontStyle', document.getElementById('fontStyle').value)}>
<option className='choices' value='normal'>Normal</option>
<option className='choices' value='italic'>Italic</option>
<option className='choices' value='oblique'>Oblique</option>
</Dropdown>
<br /><br />
<Checkbox name='fontGoogle' text={appearance.font.google} />
let themeOptions = [
{
'name': 'Auto',
'value': 'auto'
},
{
'name': 'Light',
'value': 'light'
}, {
'name': 'Dark',
'value': 'dark'
}
]
return (
<div>
<h2>{appearance.title}</h2>
<Radio name='theme' title='Theme' options={themeOptions} />
<h3>{appearance.navbar.title}</h3>
<Checkbox name='notesEnabled' text={appearance.navbar.notes} />
<Checkbox name='refresh' text={appearance.navbar.refresh} />
<h3>{appearance.font.title}</h3>
<ul>
<p>{appearance.font.custom} <span className='modalLink' onClick={() => this.resetItem('font')}>{this.language.buttons.reset}</span></p>
<input type='text' value={this.state.font} onChange={(e) => this.setState({ font: e.target.value })}></input>
</ul>
<br/>
<Dropdown
label='Font Weight'
name='fontweight'
id='fontWeight'
onChange={() => localStorage.setItem('fontWeight', document.getElementById('fontWeight').value)}>
{/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
<option className='choices' value='100'>Thin</option>
<option className='choices' value='200'>Extra-Light</option>
<option className='choices' value='300'>Light</option>
<option className='choices' value='400'>Normal</option>
<option className='choices' value='500'>Medium</option>
<option className='choices' value='600'>Semi-Bold</option>
<option className='choices' value='700'>Bold</option>
<option className='choices' value='800'>Extra-Bold</option>
</Dropdown>
<br /><br />
<Dropdown
label='Font Style'
name='fontstyle'
id='fontStyle'
onChange={() => localStorage.setItem('fontStyle', document.getElementById('fontStyle').value)}>
<option className='choices' value='normal'>Normal</option>
<option className='choices' value='italic'>Italic</option>
<option className='choices' value='oblique'>Oblique</option>
</Dropdown>
<br /><br />
<Checkbox name='fontGoogle' text={appearance.font.google} />
<h3>{appearance.accessibility.title}</h3>
<Checkbox name='animations' text={appearance.animations} betaFeature={true} />
<ul>
<p>{appearance.accessibility.zoom} ({this.state.zoom}%) <span className='modalLink' onClick={() => this.resetItem('zoom')}>{this.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} ({this.state.toast_duration} {appearance.accessibility.milliseconds}) <span className='modalLink' onClick={() => this.resetItem('toast_duration')}>{this.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>
);
}
<h3>{appearance.accessibility.title}</h3>
<Checkbox name='animations' text={appearance.animations} betaFeature={true} />
<Slider title={appearance.accessibility.zoom} name='zoom' default='100' min='50' max='200' display='%'/>
<Slider title={appearance.accessibility.toast_duration} name='toastDisplayTime' default='2500' min='500' max='5000' display={' ' + appearance.accessibility.milliseconds} />
</div>
);
}

35
src/components/modals/main/settings/sections/Background.jsx
View File

@ -3,6 +3,8 @@ import React from 'react';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import FileUpload from '../FileUpload';
import Slider from '../Slider';
import Text from '../Text';
import { ColorPicker } from 'react-color-gradient-picker';
import hexToRgb from '../../../../../modules/helpers/background/hexToRgb';
@ -20,8 +22,6 @@ export default class BackgroundSettings extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
blur: localStorage.getItem('blur'),
brightness: localStorage.getItem('brightness'),
customBackground: localStorage.getItem('customBackground') || '',
gradientSettings: this.DefaultGradientSettings
};
@ -44,20 +44,6 @@ export default class BackgroundSettings extends React.PureComponent {
});
break;
case 'blur':
localStorage.setItem('blur', 0);
this.setState({
blur: 0
});
break;
case 'brightness':
localStorage.setItem('brightness', 100);
this.setState({
brightness: 100
});
break;
default:
toast('resetItem requires a key!');
}
@ -167,10 +153,6 @@ export default class BackgroundSettings extends React.PureComponent {
}
componentDidUpdate() {
localStorage.setItem('blur', this.state.blur);
localStorage.setItem('brightness', this.state.brightness);
localStorage.setItem('customBackground', this.state.customBackground);
if (document.getElementById('customBackgroundHex').value !== this.language.sections.background.source.disabled) {
localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);
}
@ -227,20 +209,15 @@ export default class BackgroundSettings extends React.PureComponent {
<Checkbox name='favouriteEnabled' text={background.buttons.favourite} />
<h3>{background.effects.title}</h3>
<ul>
<p>{background.effects.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.language.buttons.reset}</span></p>
<input className='range' type='range' min='0' max='100' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
</ul>
<ul>
<p>{background.effects.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.language.buttons.reset}</span></p>
<input className='range' type='range' min='0' max='100' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
</ul>
<Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' />
<Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='100' display='%' />
<h3>{background.source.title}</h3>
<Dropdown label={background.source.api} name='backgroundAPI'>
<option className='choices' value='mue'>Mue</option>
<option className='choices' value='unsplash'>Unsplash</option>
</Dropdown>
{/* <Text title={background.source.custom_url} name='customBackground' /> */ }
<ul>
<p>{background.source.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.language.buttons.reset}</span></p>
<input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>

22
src/components/modals/main/settings/sections/Greeting.jsx
View File

@ -2,28 +2,19 @@ import React from 'react';
import Checkbox from '../Checkbox';
import Switch from '../Switch';
import Text from '../Text';
import DatePicker from 'react-date-picker';
import { toast } from 'react-toastify';
export default class GreetingSettings extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
birthday: new Date(localStorage.getItem('birthday')) || new Date(),
greetingName: localStorage.getItem('greetingName') || ''
birthday: new Date(localStorage.getItem('birthday')) || new Date()
};
this.language = window.language.modals.main.settings;
}
resetItem() {
this.setState({
greetingName: ''
});
toast(this.language.toasts.reset);
}
changeDate(data) {
//soon
if (data === 'reset') {
@ -37,10 +28,6 @@ export default class GreetingSettings extends React.PureComponent {
});
}
componentDidUpdate() {
localStorage.setItem('greetingName', this.state.greetingName);
}
render() {
const { greeting } = this.language.sections;
@ -50,10 +37,7 @@ export default class GreetingSettings extends React.PureComponent {
<Switch name='greeting' text={this.language.enabled} />
<Checkbox name='events' text={greeting.events} />
<Checkbox name='defaultGreetingMessage' text={greeting.default} />
<ul>
<p>{greeting.name} <span className='modalLink' onClick={() => this.resetItem()}>{this.language.buttons.reset}</span></p>
<input type='text' value={this.state.greetingName} onChange={(e) => this.setState({ greetingName: e.target.value })}></input>
</ul>
<Text title={greeting.name} name='greetingName'/>
<h3>{greeting.birthday}</h3>
<Checkbox name='birthdayenabled' text={this.language.enabled} />

80
src/components/modals/main/settings/sections/Quote.jsx
View File

@ -1,69 +1,23 @@
import React from 'react';
import Checkbox from '../Checkbox';
import Text from '../Text';
import { toast } from 'react-toastify';
export default function QuoteSettings(props) {
const { quote } = window.language.modals.main.settings.sections;
export default class QuoteSettings extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
customQuote: localStorage.getItem('customQuote') || '',
customQuoteAuthor: localStorage.getItem('customQuoteAuthor') || 'Unknown'
};
this.language = window.language.modals.main.settings;
}
return (
<div>
<h2>{quote.title}</h2>
<Checkbox name='quote' text={window.language.modals.main.settings.enabled}/>
<Checkbox name='authorLink' text={quote.author_link}/>
<Text title={quote.custom} name='customQuote'/>
<Text title={quote.custom_author} name='customQuoteAuthor'/>
resetItem(key) {
switch (key) {
case 'customQuote':
localStorage.setItem('customQuote', '');
this.setState({
customQuote: ''
});
break;
case 'customQuoteAuthor':
localStorage.setItem('customQuoteAuthor', '');
this.setState({
customQuoteAuthor: 'Unknown'
});
break;
default:
toast('resetItem requires a key!');
}
toast(this.language.toasts.reset);
}
componentDidUpdate() {
localStorage.setItem('customQuote', this.state.customQuote);
localStorage.setItem('customQuoteAuthor', this.state.customQuoteAuthor);
}
render() {
const { quote } = this.language.sections;
return (
<div>
<h2>{quote.title}</h2>
<Checkbox name='quote' text={this.language.enabled}/>
<Checkbox name='authorLink' text={quote.author_link}/>
<ul>
<p>{quote.custom} <span className='modalLink' onClick={() => this.resetItem('customQuote')}>{this.language.buttons.reset}</span></p>
<input type='text' value={this.state.customQuote} onChange={(e) => this.setState({ customQuote: e.target.value })}></input>
</ul>
<ul>
<p>{quote.custom_author} <span className='modalLink' onClick={() => this.resetItem('customQuoteAuthor')}>{this.language.buttons.reset}</span></p>
<input type='text' value={this.state.customQuoteAuthor} onChange={(e) => this.setState({ customQuoteAuthor: e.target.value })}></input>
</ul>
<h3>{quote.buttons.title}</h3>
<Checkbox name='copyButton' text={quote.buttons.copy}/>
<Checkbox name='tweetButton' text={quote.buttons.tweet}/>
<Checkbox name='favouriteQuoteEnabled' text={quote.buttons.favourite}/>
</div>
);
}
}
<h3>{quote.buttons.title}</h3>
<Checkbox name='copyButton' text={quote.buttons.copy}/>
<Checkbox name='tweetButton' text={quote.buttons.tweet}/>
<Checkbox name='favouriteQuoteEnabled' text={quote.buttons.favourite}/>
</div>
);
}

2
src/components/widgets/background/PhotoInformation.jsx
View File

@ -9,6 +9,8 @@ import Photographer from '@material-ui/icons/Person';
export default function PhotoInformation(props) {
const language = window.language.widgets.background;
if (props.info.hidden === true) return null;
return (
<div className='photoInformation'>
<h1>{language.credit} {props.info.credit}</h1>

5
src/modules/helpers/settings.js
View File

@ -128,6 +128,11 @@ export default class SettingsFunctions {
document.body.classList.add('dark');
}
const tabName = localStorage.getItem('tabName');
if (tabName) {
document.title = tabName;
}
// easter egg
console.log(`
█████████████████████████████████████████████████████████████