fix and enable custom background colour

This commit is contained in:
David Ralph
2020-09-18 12:12:44 +01:00
parent d3ce835956
commit e8c5f546cd
3 changed files with 18 additions and 15 deletions

View File

@@ -16,7 +16,7 @@ export default class Settings extends React.PureComponent {
case 'greetingName': document.getElementById('greetingName').value = ''; break;
case 'customBackgroundColour':
localStorage.setItem('customBackgroundColour', '');
document.getElementById('customBackgroundColour').enabled = 'false';
document.getElementById('customBackgroundHex').textContent = 'Disabled';
break;
case 'customBackground': document.getElementById('customBackground').value = ''; break;
case 'blur':
@@ -90,12 +90,6 @@ export default class Settings extends React.PureComponent {
};
};
/*const hex = localStorage.getItem('customBackgroundColour');
if (!hex === '') {
document.getElementById('customBackgroundColour').value = hex;
document.getElementById('customBackgroundHex').innerText = hex;
}*/
document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
document.getElementById('center').classList.toggle('backgroundEffects');
}
@@ -112,10 +106,10 @@ export default class Settings extends React.PureComponent {
return <div className='content'>
<span className='closeModal' onClick={this.props.modalClose}>&times;</span>
<h1>{this.props.modalLanguage.title}</h1>
<div className="tab">
<button className="tablinks" onClick={this.props.openMarketplace}>{this.props.modalLanguage.marketplace}</button>
<button className="tablinks" onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
<button className="tablinks" id="active">{this.props.modalLanguage.settings}</button>
<div className='tab'>
<button className='tablinks' onClick={this.props.openMarketplace}>{this.props.modalLanguage.marketplace}</button>
<button className='tablinks' onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
<button className='tablinks' id='active'>{this.props.modalLanguage.settings}</button>
</div>
<br/>

View File

@@ -19,6 +19,12 @@ export default class BackgroundSettings extends React.PureComponent {
reader.readAsDataURL(file);
};
const hex = localStorage.getItem('customBackgroundColour');
if (hex !== '') {
document.getElementById('customBackgroundColour').value = hex;
document.getElementById('customBackgroundHex').innerText = hex;
} else document.getElementById('customBackgroundHex').innerText = 'Disabled';
}
render() {
@@ -50,11 +56,11 @@ export default class BackgroundSettings extends React.PureComponent {
<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.resetItem('customBackgroundColour')}>Reset</span></p>
<ul>
<p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.props.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> */ }
</ul>
</div>
);
}