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

fix: colour picker

Browse Source
This commit is contained in:
David Ralph
2021-03-24 12:56:03 +00:00
parent 2956dabc8b
commit 17bb8407b8
1 changed files with 8 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,7 +10,7 @@ import { toast } from 'react-toastify';
import 'react-color-gradient-picker/dist/index.css';
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' };
DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': '#ffb032', 'stop': 0 }], 'type': 'linear' };
GradientPickerInitalState = undefined;
constructor() {
@@ -76,9 +76,7 @@ export default class ColourSettings extends React.PureComponent {
}
componentDidUpdate() {
if (document.getElementById('customBackgroundHex').value !== this.language.sections.background.source.disabled) {
localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);
}
localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);
}
onGradientChange = (event, index) => {
@@ -161,10 +159,10 @@ export default class ColourSettings extends React.PureComponent {
} else {
gradientInputs = this.state.gradientSettings.gradient.map((g, i) => {
return (
<div key={i}>
<React.Fragment key={i}>
<input id={'colour_' + i} type='color' name='colour' className='colour' onChange={(event) => this.onGradientChange(event, i)} value={g.colour}></input>
<label htmlFor={'colour_' + i} className='customBackgroundHex'>{g.colour}</label>
</div>
</React.Fragment>
);
});
}
@@ -172,20 +170,16 @@ export default class ColourSettings extends React.PureComponent {
colourSettings = (
<>
{gradientInputs}
{this.state.gradientSettings.gradient[0].colour !== background.source.disabled &&
!gradientHasMoreThanOneColour ? (<button type='button' className='add' onClick={this.addColour}>{background.source.add_colour}</button>) : null
}
{!gradientHasMoreThanOneColour ? (<><br/><br/><button type='button' className='add' onClick={this.addColour}>{background.source.add_colour}</button></>) : null}
</>
);
}
return (
<>
<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()} />
{colourSettings}
</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()} />
{colourSettings}
</>
);
}