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

fixes

Browse Source
This commit is contained in:
David Ralph
2020-09-22 15:43:09 +01:00
parent 2dd0e9150b
commit 66414461c4
6 changed files with 68 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/modals/settings/sections/BackgroundSettings.jsx
View File

@@ -2,6 +2,28 @@ import React from 'react';
import { toast } from 'react-toastify';
export default class BackgroundSettings extends React.PureComponent {
resetItem(key) {
switch (key) {
case 'customBackgroundColour':
localStorage.setItem('customBackgroundColour', '');
document.getElementById('customBackgroundHex').textContent = 'Disabled';
break;
case 'customBackground': document.getElementById('customBackground').value = ''; break;
case 'blur':
localStorage.setItem('blur', 0);
document.getElementById('blurRange').value = 0;
document.getElementById('blurAmount').innerText = '0';
break;
case 'brightness':
localStorage.setItem('brightness', 100);
document.getElementById('brightnessRange').value = 100;
document.getElementById('brightnessAmount').innerText = '100';
break;
default: toast('resetItem requires a key!');
}
toast(this.props.toastLanguage.reset);
}
componentDidMount() {
document.getElementById('bg-input').onchange = (e) => {
const reader = new FileReader();
@@ -50,24 +72,24 @@ export default class BackgroundSettings extends React.PureComponent {
</label>
</ul>
<ul>
<p>{this.props.language.background.blur} (<span id='blurAmount'></span>%) <span className='modalLink' onClick={() => this.props.resetItem('blur')}>{this.props.language.reset}</span></p>
<p>{this.props.language.background.blur} (<span id='blurAmount'></span>%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
<input className='range' type='range' min='0' max='100' id='blurRange' onInput={() => document.getElementById('blurAmount').innerText = document.getElementById('blurRange').value} />
</ul>
<ul>
<p>{this.props.language.background.brightness} (<span id='brightnessAmount'></span>%) <span className='modalLink' onClick={() => this.props.resetItem('brightness')}>{this.props.language.reset}</span></p>
<p>{this.props.language.background.brightness} (<span id='brightnessAmount'></span>%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
<input className='range' type='range' min='0' max='100' id='brightnessRange' onInput={() => document.getElementById('brightnessAmount').innerText = document.getElementById('brightnessRange').value} />
</ul>
<ul>
<p>{this.props.language.background.customURL} <span className='modalLink' onClick={() => this.props.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<p>{this.props.language.background.customURL} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<input type='text' id='customBackground'></input>
</ul>
<ul>
<p>{this.props.language.background.custombackground} <span className='modalLink' onClick={() => this.props.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<p>{this.props.language.background.custombackground} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.background.upload}</button>
<input id='bg-input' type='file' name='name' className='hidden' accept='image/svg+xml, image/jpeg, image/png, image/webp, image/webm, image/gif' />
</ul>
<ul>
<p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.props.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
<p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
<input name='colour' type='color' id='customBackgroundColour' onChange={() => document.getElementById('customBackgroundHex').innerText = document.getElementById('customBackgroundColour').value}></input>
<label htmlFor='colour' id='customBackgroundHex'>#00000</label>
</ul>