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

feat: background filters

Browse Source
This commit is contained in:
David Ralph
2021-05-02 13:40:11 +01:00
parent 31a666fe22
commit 9b5946038a
11 changed files with 105 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -170,6 +170,14 @@ export default class BackgroundSettings extends React.PureComponent {
<Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' category='background' />
<Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='90' display='%' category='background' />
<br/><br/>
<Dropdown label={background.effects.filters.title} name='backgroundFilter' category='background'>
<option value='grayscale'>{background.effects.filters.grayscale}</option>
<option value='sepia'>{background.effects.filters.sepia}</option>
<option value='invert'>{background.effects.filters.invert}</option>
<option value='saturate'>{background.effects.filters.saturate}</option>
<option value='contrast'>{background.effects.filters.contrast}</option>
</Dropdown>
<Slider title={background.effects.filters.amount} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' />
</>
);
}

10
src/components/widgets/background/Background.jsx
View File

@@ -301,10 +301,12 @@ export default class Background extends React.PureComponent {
}
// background effects so we don't get another image again
const backgroundFilter = localStorage.getItem('backgroundFilter');
if (this.state.video === true) {
document.getElementById('backgroundVideo').style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)`;
document.getElementById('backgroundVideo').style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}`;
} else {
element.style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)`;
element.style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}`;
}
}
@@ -339,9 +341,11 @@ export default class Background extends React.PureComponent {
);
}
const backgroundFilter = localStorage.getItem('backgroundFilter');
return (
<>
<div style={{ 'WebkitFilter': `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)` }} id='backgroundImage'/>
<div style={{ 'WebkitFilter': `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}` }} id='backgroundImage'/>
{(this.state.photoInfo.credit !== '') ?
<PhotoInformation className={this.props.photoInformationClass} info={this.state.photoInfo}/>
: null}