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

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}

11
src/translations/de_DE.json
View File

@@ -141,7 +141,16 @@
"effects": {
"title": "Effekte",
"blur": "Unschärfe anpassen",
"brightness": "Helligkeit anpassen"
"brightness": "Helligkeit anpassen",
"filters": {
"title": "Background filter",
"amount": "Filter amount",
"grayscale": "Grayscale",
"sepia": "Sepia",
"invert": "Invert",
"saturate": "Saturate",
"constrast": "Contrast"
}
},
"type": {
"title": "Type",

11
src/translations/en_GB.json
View File

@@ -141,7 +141,16 @@
"effects": {
"title": "Effects",
"blur": "Adjust blur",
"brightness": "Adjust brightness"
"brightness": "Adjust brightness",
"filters": {
"title": "Background filter",
"amount": "Filter amount",
"grayscale": "Grayscale",
"sepia": "Sepia",
"invert": "Invert",
"saturate": "Saturate",
"constrast": "Contrast"
}
},
"type": {
"title": "Type",

11
src/translations/en_US.json
View File

@@ -141,7 +141,16 @@
"effects": {
"title": "Effects",
"blur": "Adjust blur",
"brightness": "Adjust brightness"
"brightness": "Adjust brightness",
"filters": {
"title": "Background filter",
"amount": "Filter amount",
"grayscale": "Grayscale",
"sepia": "Sepia",
"invert": "Invert",
"saturate": "Saturate",
"constrast": "Contrast"
}
},
"type": {
"title": "Type",

11
src/translations/es.json
View File

@@ -141,7 +141,16 @@
"effects": {
"title": "Efectos",
"blur": "Ajustar difuminado",
"brightness": "Ajustar brillo"
"brightness": "Ajustar brillo",
"filters": {
"title": "Background filter",
"amount": "Filter amount",
"grayscale": "Grayscale",
"sepia": "Sepia",
"invert": "Invert",
"saturate": "Saturate",
"constrast": "Contrast"
}
},
"type": {
"title": "Tipo",

11
src/translations/fr.json
View File

@@ -141,7 +141,16 @@
"effects": {
"title": "Effets",
"blur": "Ajuster le flou",
"brightness": "Ajuster la luminosité"
"brightness": "Ajuster la luminosité",
"filters": {
"title": "Background filter",
"amount": "Filter amount",
"grayscale": "Grayscale",
"sepia": "Sepia",
"invert": "Invert",
"saturate": "Saturate",
"constrast": "Contrast"
}
},
"type": {
"title": "Type",

11
src/translations/nl.json
View File

@@ -141,7 +141,16 @@
"effects": {
"title": "Effects",
"blur": "Vervaging instellen",
"brightness": "Adjust brightness"
"brightness": "Adjust brightness",
"filters": {
"title": "Background filter",
"amount": "Filter amount",
"grayscale": "Grayscale",
"sepia": "Sepia",
"invert": "Invert",
"saturate": "Saturate",
"constrast": "Contrast"
}
},
"type": {
"title": "Type",

11
src/translations/no.json
View File

@@ -141,7 +141,16 @@
"effects": {
"title": "Effects",
"blur": "Juster Blur",
"brightness": "Adjust brightness"
"brightness": "Adjust brightness",
"filters": {
"title": "Background filter",
"amount": "Filter amount",
"grayscale": "Grayscale",
"sepia": "Sepia",
"invert": "Invert",
"saturate": "Saturate",
"constrast": "Contrast"
}
},
"type": {
"title": "Type",

11
src/translations/ru.json
View File

@@ -141,7 +141,16 @@
"effects": {
"title": "Effects",
"blur": "Размытие",
"brightness": "Яркость"
"brightness": "Яркость",
"filters": {
"title": "Background filter",
"amount": "Filter amount",
"grayscale": "Grayscale",
"sepia": "Sepia",
"invert": "Invert",
"saturate": "Saturate",
"constrast": "Contrast"
}
},
"type": {
"title": "Type",

11
src/translations/zh_CN.json
View File

@@ -141,7 +141,16 @@
"effects": {
"title": "Effects",
"blur": "调整模糊",
"brightness": "调整亮度"
"brightness": "调整亮度",
"filters": {
"title": "Background filter",
"amount": "Filter amount",
"grayscale": "Grayscale",
"sepia": "Sepia",
"invert": "Invert",
"saturate": "Saturate",
"constrast": "Contrast"
}
},
"type": {
"title": "Type",