mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-15 13:03:55 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve background settings

Browse Source
This commit is contained in:
David Ralph
2021-03-24 12:02:30 +00:00
parent 214d06927e
commit 2956dabc8b
5 changed files with 232 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -95,17 +95,17 @@ export default class TimeSettings extends React.PureComponent {
<h2>{time.title}</h2>
<Switch name='time' text={this.language.enabled} />
<Dropdown label='Type' name='timeType' onChange={(value) => this.setState({ timeType: value })}>
<option value='digital'>{time.digital.title}</option>
<option value='analogue'>{time.analogue.title}</option>
<option value='percentageComplete'>{time.percentage_complete}</option>
<option value='digital'>{time.digital.title}</option>
<option value='analogue'>{time.analogue.title}</option>
<option 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 value='long'>Long</option>
<option value='short'>Short</option>
<option value='long'>Long</option>
<option value='short'>Short</option>
</Dropdown>
<br/>
{dateSettings}

109
src/components/modals/main/settings/sections/background/Background.jsx Normal file
View File

@@ -0,0 +1,109 @@
import React from 'react';
import Checkbox from '../../Checkbox';
import Dropdown from '../../Dropdown';
import FileUpload from '../../FileUpload';
import Slider from '../../Slider';
import Switch from '../../Switch';
import ColourSettings from './Colour';
import { toast } from 'react-toastify';
export default class BackgroundSettings extends React.PureComponent {
constructor() {
super();
this.state = {
customBackground: localStorage.getItem('customBackground') || '',
backgroundType: localStorage.getItem('backgroundType') || 'api'
};
this.language = window.language.modals.main.settings;
}
resetItem(key) {
switch (key) {
case 'customBackground':
localStorage.setItem('customBackground', '');
this.setState({
customBackground: ''
});
break;
default:
toast('resetItem requires a key!');
}
toast(this.language.toasts.reset);
}
fileUpload(e) {
localStorage.setItem('customBackground', e.target.result);
this.setState({
customBackground: e.target.result
});
}
render() {
const { background } = this.language.sections;
let backgroundSettings;
const APISettings = (
<>
<br/>
<Dropdown label={background.source.api} name='backgroundAPI'>
<option value='mue'>Mue</option>
<option value='unsplash'>Unsplash</option>
</Dropdown>
</>
);
const customSettings = (
<>
<h3>{background.source.title}</h3>
<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>
</ul>
<ul>
<p>{background.source.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.language.buttons.reset}</span></p>
<button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{background.source.upload}</button>
<FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' loadFunction={(e) => this.fileUpload(e)} />
</ul>
</>
);
const colourSettings = <ColourSettings/>;
switch (this.state.backgroundType) {
case 'custom': backgroundSettings = customSettings; break;
case 'colour': backgroundSettings = colourSettings; break;
// API
default: backgroundSettings = APISettings; break;
}
return (
<>
<h2>{background.title}</h2>
<Switch name='background' text={this.language.enabled} />
<h3>{background.buttons.title}</h3>
<Checkbox name='view' text={background.buttons.view} />
<Checkbox name='favouriteEnabled' text={background.buttons.favourite} />
<h3>{background.effects.title}</h3>
<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='%' />
<br/><br/>
<Dropdown label='Type' name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })}>
<option value='api'>API</option>
<option value='custom'>Custom Image</option>
<option value='colour'>Custom Colour/Gradient</option>
</Dropdown>
<br/>
{backgroundSettings}
</>
);
}
}

69
src/components/modals/main/settings/sections/Background.jsx → src/components/modals/main/settings/sections/background/Colour.jsx
View File

@@ -1,27 +1,21 @@
import React from 'react';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import FileUpload from '../FileUpload';
import Slider from '../Slider';
import Switch from '../Switch';
import { ColorPicker } from 'react-color-gradient-picker';
import hexToRgb from '../../../../../modules/helpers/background/hexToRgb';
import rgbToHex from '../../../../../modules/helpers/background/rgbToHex';
import hexToRgb from '../../../../../../modules/helpers/background/hexToRgb';
import rgbToHex from '../../../../../../modules/helpers/background/rgbToHex';
import { toast } from 'react-toastify';
import 'react-color-gradient-picker/dist/index.css';
export default class BackgroundSettings extends React.PureComponent {
export default class ColourSettings extends React.PureComponent {
DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': window.language.modals.main.settings.sections.background.source.disabled, 'stop': 0 }], 'type': 'linear' };
GradientPickerInitalState = undefined;
constructor() {
super();
this.state = {
customBackground: localStorage.getItem('customBackground') || '',
gradientSettings: this.DefaultGradientSettings
};
this.language = window.language.modals.main.settings;
@@ -36,13 +30,6 @@ export default class BackgroundSettings extends React.PureComponent {
});
break;
case 'customBackground':
localStorage.setItem('customBackground', '');
this.setState({
customBackground: ''
});
break;
default:
toast('resetItem requires a key!');
}
@@ -88,6 +75,12 @@ export default class BackgroundSettings extends React.PureComponent {
});
}
componentDidUpdate() {
if (document.getElementById('customBackgroundHex').value !== this.language.sections.background.source.disabled) {
localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);
}
}
onGradientChange = (event, index) => {
const newValue = event.target.value;
const name = event.target.name;
@@ -144,19 +137,6 @@ export default class BackgroundSettings extends React.PureComponent {
});
};
fileUpload(e) {
localStorage.setItem('customBackground', e.target.result);
this.setState({
customBackground: e.target.result
});
}
componentDidUpdate() {
if (document.getElementById('customBackgroundHex').value !== this.language.sections.background.source.disabled) {
localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);
}
}
render() {
const { background } = this.language.sections;
@@ -201,31 +181,6 @@ export default class BackgroundSettings extends React.PureComponent {
return (
<>
<h2>{background.title}</h2>
<Switch name='background' text={this.language.enabled} />
<h3>{background.buttons.title}</h3>
<Checkbox name='view' text={background.buttons.view} />
<Checkbox name='favouriteEnabled' text={background.buttons.favourite} />
<h3>{background.effects.title}</h3>
<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 value='mue'>Mue</option>
<option 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>
</ul>
<ul>
<p>{background.source.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.language.buttons.reset}</span></p>
<button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{background.source.upload}</button>
<FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' loadFunction={(e) => this.fileUpload(e)} />
</ul>
<ul>
<p>{background.source.custom_colour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.language.buttons.reset}</span></p>
<input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
@@ -234,4 +189,4 @@ export default class BackgroundSettings extends React.PureComponent {
</>
);
}
}
}

2
src/components/modals/main/tabs/Settings.jsx
View File

@@ -7,7 +7,7 @@ import Greeting from '../settings/sections/Greeting';
import Time from '../settings/sections/Time';
import Quote from '../settings/sections/Quote';
import Appearance from '../settings/sections/Appearance';
import Background from '../settings/sections/Background';
import Background from '../settings/sections/background/Background';
import Advanced from '../settings/sections/Advanced';
import Changelog from '../settings/sections/Changelog';
import Order from '../settings/sections/Order';