mirror of
https://github.com/mue/mue.git
synced 2026-07-06 16:04:20 +02:00
refactor: turn backgroundoptions into a functional component
This commit is contained in:
David Ralph
@@ -1,5 +1,5 @@
|
||||
import variables from 'config/variables';
|
||||
import { PureComponent } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { MdSource, MdOutlineKeyboardArrowRight, MdOutlineAutoAwesome } from 'react-icons/md';
|
||||
|
||||
import { Header, PreferencesWrapper } from 'components/Layout/Settings';
|
||||
@@ -15,344 +15,355 @@ import { APIQualityOptions, backgroundImageEffects, getBackgroundOptionItems } f
|
||||
|
||||
import defaults from './default';
|
||||
|
||||
class BackgroundOptions extends PureComponent {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
backgroundType: localStorage.getItem('backgroundType') || defaults.backgroundType,
|
||||
backgroundFilter: localStorage.getItem('backgroundFilter') || 'none',
|
||||
backgroundCategories: [variables.getMessage('modals.main.loading')],
|
||||
backgroundAPI: localStorage.getItem('backgroundAPI') || defaults.backgroundAPI,
|
||||
marketplaceEnabled: localStorage.getItem('photo_packs'),
|
||||
effects: false,
|
||||
backgroundSettingsSection: false,
|
||||
};
|
||||
this.controller = new AbortController();
|
||||
}
|
||||
function BackgroundOptions() {
|
||||
const [backgroundType, setBackgroundType] = useState(
|
||||
localStorage.getItem('backgroundType') || defaults.backgroundType,
|
||||
);
|
||||
const [backgroundFilter, setBackgroundFilter] = useState(
|
||||
localStorage.getItem('backgroundFilter') || 'none',
|
||||
);
|
||||
const [backgroundCategories, setBackgroundCategories] = useState([
|
||||
variables.getMessage('modals.main.loading'),
|
||||
]);
|
||||
const [backgroundAPI, setBackgroundAPI] = useState(
|
||||
localStorage.getItem('backgroundAPI') || defaults.backgroundAPI,
|
||||
);
|
||||
const [marketplaceEnabled, setMarketplaceEnabled] = useState(localStorage.getItem('photo_packs'));
|
||||
const [effects, setEffects] = useState(false);
|
||||
const [backgroundSettingsSection, setBackgroundSettingsSection] = useState(false);
|
||||
|
||||
async getBackgroundCategories() {
|
||||
const controller = new AbortController();
|
||||
|
||||
async function getBackgroundCategories() {
|
||||
const data = await (
|
||||
await fetch(variables.constants.API_URL + '/images/categories', {
|
||||
signal: this.controller.signal,
|
||||
signal: controller.signal,
|
||||
})
|
||||
).json();
|
||||
|
||||
if (this.controller.signal.aborted === true) {
|
||||
if (controller.signal.aborted === true) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.state.backgroundAPI !== 'mue') {
|
||||
if (backgroundAPI !== 'mue') {
|
||||
// remove counts from unsplash categories
|
||||
data.forEach((category) => {
|
||||
delete category.count;
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({
|
||||
backgroundCategories: data,
|
||||
backgroundCategoriesOG: data,
|
||||
});
|
||||
setBackgroundCategories(data);
|
||||
}
|
||||
|
||||
updateAPI(e) {
|
||||
function updateAPI(e) {
|
||||
localStorage.setItem('nextImage', null);
|
||||
if (e === 'mue') {
|
||||
this.setState({
|
||||
backgroundCategories: this.state.backgroundCategoriesOG,
|
||||
backgroundAPI: 'mue',
|
||||
});
|
||||
setBackgroundCategories(backgroundCategories);
|
||||
setBackgroundAPI('mue');
|
||||
} else {
|
||||
const data = this.state.backgroundCategories;
|
||||
const data = backgroundCategories;
|
||||
data.forEach((category) => {
|
||||
delete category.count;
|
||||
});
|
||||
|
||||
this.setState({
|
||||
backgroundAPI: 'unsplash',
|
||||
backgroundCategories: data,
|
||||
});
|
||||
setBackgroundAPI('unsplash');
|
||||
setBackgroundCategories(data);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
useEffect(() => {
|
||||
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
|
||||
return this.setState({
|
||||
backgroundCategories: [variables.getMessage('modals.update.offline.title')],
|
||||
});
|
||||
setBackgroundCategories([variables.getMessage('modals.update.offline.title')]);
|
||||
return;
|
||||
}
|
||||
|
||||
this.getBackgroundCategories();
|
||||
}
|
||||
getBackgroundCategories();
|
||||
|
||||
componentWillUnmount() {
|
||||
// stop making requests
|
||||
this.controller.abort();
|
||||
}
|
||||
return () => {
|
||||
controller.abort();
|
||||
};
|
||||
}, []);
|
||||
|
||||
render() {
|
||||
const APISettings = (
|
||||
<>
|
||||
<Row final={this.state.backgroundAPI === 'mue'}>
|
||||
const APISettings = (
|
||||
<>
|
||||
<Row final={backgroundAPI === 'mue'}>
|
||||
<Content
|
||||
title={variables.getMessage('settings:sections.background.api')}
|
||||
subtitle={variables.getMessage('settings:sections.background.api_subtitle')}
|
||||
/>
|
||||
<Action>
|
||||
{backgroundCategories[0] === variables.getMessage('modals.main.loading') ? (
|
||||
<>
|
||||
<Dropdown
|
||||
label={variables.getMessage('settings:sections.background.category')}
|
||||
name="apiCategories"
|
||||
items={[
|
||||
{
|
||||
value: 'loading',
|
||||
text: variables.getMessage('modals.main.loading'),
|
||||
},
|
||||
{
|
||||
value: 'loading',
|
||||
text: variables.getMessage('modals.main.loading'),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<ChipSelect
|
||||
label={variables.getMessage('settings:sections.background.categories')}
|
||||
options={backgroundCategories}
|
||||
name="apiCategories"
|
||||
/>
|
||||
)}
|
||||
<Dropdown
|
||||
label={variables.getMessage('settings:sections.background.source.quality.title')}
|
||||
name="apiQuality"
|
||||
element=".other"
|
||||
items={APIQualityOptions}
|
||||
/>
|
||||
<Radio
|
||||
title="API"
|
||||
options={[
|
||||
{
|
||||
name: 'Mue',
|
||||
value: 'mue',
|
||||
},
|
||||
{
|
||||
name: 'Unsplash',
|
||||
value: 'unsplash',
|
||||
},
|
||||
]}
|
||||
name="backgroundAPI"
|
||||
category="background"
|
||||
element="#backgroundImage"
|
||||
onChange={(e) => updateAPI(e)}
|
||||
/>
|
||||
</Action>
|
||||
</Row>
|
||||
{backgroundAPI === 'unsplash' && (
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage('settings:sections.background.api')}
|
||||
subtitle={variables.getMessage('settings:sections.background.api_subtitle')}
|
||||
title={variables.getMessage('settings:sections.background.unsplash.title')}
|
||||
subtitle={variables.getMessage('settings:sections.background.unsplash.subtitle')}
|
||||
/>
|
||||
<Action>
|
||||
{this.state.backgroundCategories[0] === variables.getMessage('modals.main.loading') ? (
|
||||
<>
|
||||
<Dropdown
|
||||
label={variables.getMessage('settings:sections.background.category')}
|
||||
name="apiCategories"
|
||||
items={[
|
||||
{
|
||||
value: 'loading',
|
||||
text: variables.getMessage('modals.main.loading'),
|
||||
},
|
||||
{
|
||||
value: 'loading',
|
||||
text: variables.getMessage('modals.main.loading'),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<ChipSelect
|
||||
label={variables.getMessage('settings:sections.background.categories')}
|
||||
options={this.state.backgroundCategories}
|
||||
name="apiCategories"
|
||||
/>
|
||||
)}
|
||||
<Dropdown
|
||||
label={variables.getMessage('settings:sections.background.source.quality.title')}
|
||||
name="apiQuality"
|
||||
element=".other"
|
||||
items={APIQualityOptions}
|
||||
/>
|
||||
<Radio
|
||||
title="API"
|
||||
options={[
|
||||
{
|
||||
name: 'Mue',
|
||||
value: 'mue',
|
||||
},
|
||||
{
|
||||
name: 'Unsplash',
|
||||
value: 'unsplash',
|
||||
},
|
||||
]}
|
||||
name="backgroundAPI"
|
||||
<Text
|
||||
title={variables.getMessage('settings:sections.background.unsplash.id')}
|
||||
subtitle={variables.getMessage('settings:sections.background.unsplash.id_subtitle')}
|
||||
placeholder="e.g. 123456, 654321"
|
||||
name="unsplashCollections"
|
||||
category="background"
|
||||
element="#backgroundImage"
|
||||
onChange={(e) => this.updateAPI(e)}
|
||||
/>
|
||||
</Action>
|
||||
</Row>
|
||||
{this.state.backgroundAPI === 'unsplash' && (
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
let backgroundSettings = APISettings;
|
||||
switch (backgroundType) {
|
||||
case 'custom':
|
||||
backgroundSettings = <CustomSettings />;
|
||||
break;
|
||||
case 'colour':
|
||||
backgroundSettings = <ColourSettings />;
|
||||
break;
|
||||
case 'random_colour':
|
||||
case 'random_gradient':
|
||||
backgroundSettings = <></>;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (
|
||||
localStorage.getItem('photo_packs') &&
|
||||
backgroundType !== 'custom' &&
|
||||
backgroundType !== 'colour' &&
|
||||
backgroundType !== 'api'
|
||||
) {
|
||||
backgroundSettings = null;
|
||||
}
|
||||
|
||||
const usingImage =
|
||||
backgroundType !== 'colour' &&
|
||||
backgroundType !== 'random_colour' &&
|
||||
backgroundType !== 'random_gradient';
|
||||
|
||||
let header;
|
||||
if (effects === true) {
|
||||
header = (
|
||||
<Header
|
||||
title={variables.getMessage('settings:sections.background.title')}
|
||||
secondaryTitle={variables.getMessage('settings:sections.background.effects.title')}
|
||||
goBack={() => setEffects(false)}
|
||||
/>
|
||||
);
|
||||
} else if (backgroundSettingsSection === true) {
|
||||
header = (
|
||||
<Header
|
||||
title={variables.getMessage('settings:sections.background.title')}
|
||||
secondaryTitle={variables.getMessage('settings:sections.background.source.title')}
|
||||
goBack={() => setBackgroundSettingsSection(false)}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
header = (
|
||||
<Header
|
||||
title={variables.getMessage('settings:sections.background.title')}
|
||||
setting="background"
|
||||
category="background"
|
||||
element="#backgroundImage"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{header}
|
||||
{backgroundSettingsSection !== true && effects !== true ? (
|
||||
<>
|
||||
<div className="moreSettings" onClick={() => setBackgroundSettingsSection(true)}>
|
||||
<div className="left">
|
||||
<MdSource />
|
||||
<div className="content">
|
||||
<span className="title">
|
||||
{variables.getMessage('settings:sections.background.source.title')}
|
||||
</span>
|
||||
<span className="subtitle">
|
||||
{variables.getMessage('settings:sections.background.source.subtitle')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="action">
|
||||
<Dropdown
|
||||
label={variables.getMessage('settings:sections.background.type.title')}
|
||||
name="backgroundType"
|
||||
onChange={(value) => this.setState({ backgroundType: value })}
|
||||
category="background"
|
||||
items={getBackgroundOptionItems(marketplaceEnabled)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{backgroundType === 'api' || backgroundType === 'custom' || marketplaceEnabled ? (
|
||||
<>
|
||||
<div className="moreSettings" onClick={() => setEffects(true)}>
|
||||
<div className="left">
|
||||
<MdOutlineAutoAwesome />
|
||||
<div className="content">
|
||||
<span className="title">
|
||||
{variables.getMessage('settings:sections.background.effects.title')}
|
||||
</span>
|
||||
<span className="subtitle">
|
||||
{variables.getMessage('settings:sections.background.effects.subtitle')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="action">
|
||||
{' '}
|
||||
<MdOutlineKeyboardArrowRight />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
{backgroundSettingsSection !== true &&
|
||||
effects !== true &&
|
||||
(backgroundType === 'api' || backgroundType === 'custom' || marketplaceEnabled) ? (
|
||||
<PreferencesWrapper>
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage('settings:sections.background.unsplash.title')}
|
||||
subtitle={variables.getMessage('settings:sections.background.unsplash.subtitle')}
|
||||
title={variables.getMessage('settings:sections.background.display')}
|
||||
subtitle={variables.getMessage('settings:sections.background.display_subtitle')}
|
||||
/>
|
||||
<Action>
|
||||
<Text
|
||||
title={variables.getMessage('settings:sections.background.unsplash.id')}
|
||||
subtitle={variables.getMessage('settings:sections.background.unsplash.id_subtitle')}
|
||||
placeholder="e.g. 123456, 654321"
|
||||
name="unsplashCollections"
|
||||
category="background"
|
||||
element="#backgroundImage"
|
||||
<Checkbox
|
||||
name="bgtransition"
|
||||
text={variables.getMessage('settings:sections.background.transition')}
|
||||
element=".other"
|
||||
disabled={!usingImage}
|
||||
/>
|
||||
<Checkbox
|
||||
name="photoInformation"
|
||||
text={variables.getMessage('settings:sections.background.photo_information')}
|
||||
element=".other"
|
||||
/>
|
||||
<Checkbox
|
||||
name="photoMap"
|
||||
text={variables.getMessage('settings:sections.background.show_map')}
|
||||
element=".other"
|
||||
disabled={!usingImage}
|
||||
/>
|
||||
</Action>
|
||||
</Row>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
let backgroundSettings = APISettings;
|
||||
switch (this.state.backgroundType) {
|
||||
case 'custom':
|
||||
backgroundSettings = <CustomSettings />;
|
||||
break;
|
||||
case 'colour':
|
||||
backgroundSettings = <ColourSettings />;
|
||||
break;
|
||||
case 'random_colour':
|
||||
case 'random_gradient':
|
||||
backgroundSettings = <></>;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (
|
||||
localStorage.getItem('photo_packs') &&
|
||||
this.state.backgroundType !== 'custom' &&
|
||||
this.state.backgroundType !== 'colour' &&
|
||||
this.state.backgroundType !== 'api'
|
||||
) {
|
||||
backgroundSettings = null;
|
||||
}
|
||||
|
||||
const usingImage =
|
||||
this.state.backgroundType !== 'colour' &&
|
||||
this.state.backgroundType !== 'random_colour' &&
|
||||
this.state.backgroundType !== 'random_gradient';
|
||||
|
||||
let header;
|
||||
if (this.state.effects === true) {
|
||||
header = (
|
||||
<Header
|
||||
title={variables.getMessage('settings:sections.background.title')}
|
||||
secondaryTitle={variables.getMessage('settings:sections.background.effects.title')}
|
||||
goBack={() => this.setState({ effects: false })}
|
||||
/>
|
||||
);
|
||||
} else if (this.state.backgroundSettingsSection === true) {
|
||||
header = (
|
||||
<Header
|
||||
title={variables.getMessage('settings:sections.background.title')}
|
||||
secondaryTitle={variables.getMessage('settings:sections.background.source.title')}
|
||||
goBack={() => this.setState({ backgroundSettingsSection: false })}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
header = (
|
||||
<Header
|
||||
title={variables.getMessage('settings:sections.background.title')}
|
||||
setting="background"
|
||||
category="background"
|
||||
element="#backgroundImage"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{header}
|
||||
{this.state.backgroundSettingsSection !== true && this.state.effects !== true ? (
|
||||
<>
|
||||
<div
|
||||
className="moreSettings"
|
||||
onClick={() => this.setState({ backgroundSettingsSection: true })}
|
||||
>
|
||||
<div className="left">
|
||||
<MdSource />
|
||||
<div className="content">
|
||||
<span className="title">
|
||||
{variables.getMessage('settings:sections.background.source.title')}
|
||||
</span>
|
||||
<span className="subtitle">
|
||||
{variables.getMessage('settings:sections.background.source.subtitle')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="action">
|
||||
<Dropdown
|
||||
label={variables.getMessage('settings:sections.background.type.title')}
|
||||
name="backgroundType"
|
||||
onChange={(value) => this.setState({ backgroundType: value })}
|
||||
category="background"
|
||||
items={getBackgroundOptionItems(this.state.marketplaceEnabled)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.backgroundType === 'api' ||
|
||||
this.state.backgroundType === 'custom' ||
|
||||
this.state.marketplaceEnabled ? (
|
||||
<>
|
||||
<div className="moreSettings" onClick={() => this.setState({ effects: true })}>
|
||||
<div className="left">
|
||||
<MdOutlineAutoAwesome />
|
||||
<div className="content">
|
||||
<span className="title">
|
||||
{variables.getMessage('settings:sections.background.effects.title')}
|
||||
</span>
|
||||
<span className="subtitle">
|
||||
{variables.getMessage('settings:sections.background.effects.subtitle')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="action">
|
||||
{' '}
|
||||
<MdOutlineKeyboardArrowRight />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
{this.state.backgroundSettingsSection !== true &&
|
||||
this.state.effects !== true &&
|
||||
(this.state.backgroundType === 'api' ||
|
||||
this.state.backgroundType === 'custom' ||
|
||||
this.state.marketplaceEnabled) ? (
|
||||
<PreferencesWrapper>
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage('settings:sections.background.display')}
|
||||
subtitle={variables.getMessage('settings:sections.background.display_subtitle')}
|
||||
/>
|
||||
<Action>
|
||||
<Checkbox
|
||||
name="bgtransition"
|
||||
text={variables.getMessage('settings:sections.background.transition')}
|
||||
element=".other"
|
||||
disabled={!usingImage}
|
||||
/>
|
||||
<Checkbox
|
||||
name="photoInformation"
|
||||
text={variables.getMessage('settings:sections.background.photo_information')}
|
||||
element=".other"
|
||||
/>
|
||||
<Checkbox
|
||||
name="photoMap"
|
||||
text={variables.getMessage('settings:sections.background.show_map')}
|
||||
element=".other"
|
||||
disabled={!usingImage}
|
||||
/>
|
||||
</Action>
|
||||
</Row>
|
||||
</PreferencesWrapper>
|
||||
) : null}
|
||||
{this.state.backgroundSettingsSection && (
|
||||
<>
|
||||
<Row
|
||||
final={
|
||||
this.state.backgroundType === 'random_colour' ||
|
||||
this.state.backgroundType === 'random_gradient'
|
||||
}
|
||||
>
|
||||
<Content
|
||||
title={variables.getMessage('settings:sections.background.source.title')}
|
||||
subtitle={variables.getMessage('settings:sections.background.source.subtitle')}
|
||||
/>
|
||||
<Action>
|
||||
<Dropdown
|
||||
label={variables.getMessage('settings:sections.background.type.title')}
|
||||
name="backgroundType"
|
||||
onChange={(value) => this.setState({ backgroundType: value })}
|
||||
category="background"
|
||||
items={getBackgroundOptionItems(this.state.marketplaceEnabled)}
|
||||
/>
|
||||
</Action>
|
||||
</Row>
|
||||
{/* todo: ideally refactor all of this file, but we need interval to appear on marketplace too */}
|
||||
{backgroundSettings}
|
||||
</>
|
||||
)}
|
||||
{(this.state.backgroundType === 'api' ||
|
||||
this.state.backgroundType === 'custom' ||
|
||||
this.state.marketplaceEnabled) &&
|
||||
this.state.effects ? (
|
||||
<Row final={true}>
|
||||
</PreferencesWrapper>
|
||||
) : null}
|
||||
{backgroundSettingsSection && (
|
||||
<>
|
||||
<Row final={backgroundType === 'random_colour' || backgroundType === 'random_gradient'}>
|
||||
<Content
|
||||
title={variables.getMessage('settings:sections.background.effects.title')}
|
||||
subtitle={variables.getMessage('settings:sections.background.effects.subtitle')}
|
||||
title={variables.getMessage('settings:sections.background.source.title')}
|
||||
subtitle={variables.getMessage('settings:sections.background.source.subtitle')}
|
||||
/>
|
||||
<Action>
|
||||
<Dropdown
|
||||
label={variables.getMessage('settings:sections.background.type.title')}
|
||||
name="backgroundType"
|
||||
onChange={(value) => setBackgroundType(value)}
|
||||
category="background"
|
||||
items={getBackgroundOptionItems(marketplaceEnabled)}
|
||||
/>
|
||||
</Action>
|
||||
</Row>
|
||||
{/* todo: ideally refactor all of this file, but we need interval to appear on marketplace too */}
|
||||
{backgroundSettings}
|
||||
</>
|
||||
)}
|
||||
{(backgroundType === 'api' || backgroundType === 'custom' || marketplaceEnabled) &&
|
||||
effects ? (
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage('settings:sections.background.effects.title')}
|
||||
subtitle={variables.getMessage('settings:sections.background.effects.subtitle')}
|
||||
/>
|
||||
<Action>
|
||||
<Slider
|
||||
title={variables.getMessage('settings:sections.background.effects.blur')}
|
||||
name="blur"
|
||||
min="0"
|
||||
max="100"
|
||||
default="0"
|
||||
display="%"
|
||||
marks={values.background}
|
||||
category="backgroundeffect"
|
||||
element="#backgroundImage"
|
||||
/>
|
||||
<Slider
|
||||
title={variables.getMessage('settings:sections.background.effects.brightness')}
|
||||
name="brightness"
|
||||
min="0"
|
||||
max="100"
|
||||
default="90"
|
||||
display="%"
|
||||
marks={values.background}
|
||||
category="backgroundeffect"
|
||||
element="#backgroundImage"
|
||||
/>
|
||||
<Dropdown
|
||||
label={variables.getMessage('settings:sections.background.effects.filters.title')}
|
||||
name="backgroundFilter"
|
||||
onChange={(value) => setBackgroundFilter(value)}
|
||||
category="backgroundeffect"
|
||||
element="#backgroundImage"
|
||||
items={backgroundImageEffects}
|
||||
/>
|
||||
{backgroundFilter !== 'none' && (
|
||||
<Slider
|
||||
title={variables.getMessage('settings:sections.background.effects.blur')}
|
||||
name="blur"
|
||||
title={variables.getMessage('settings:sections.background.effects.filters.amount')}
|
||||
name="backgroundFilterAmount"
|
||||
min="0"
|
||||
max="100"
|
||||
default="0"
|
||||
@@ -361,46 +372,12 @@ class BackgroundOptions extends PureComponent {
|
||||
category="backgroundeffect"
|
||||
element="#backgroundImage"
|
||||
/>
|
||||
<Slider
|
||||
title={variables.getMessage('settings:sections.background.effects.brightness')}
|
||||
name="brightness"
|
||||
min="0"
|
||||
max="100"
|
||||
default="90"
|
||||
display="%"
|
||||
marks={values.background}
|
||||
category="backgroundeffect"
|
||||
element="#backgroundImage"
|
||||
/>
|
||||
<Dropdown
|
||||
label={variables.getMessage('settings:sections.background.effects.filters.title')}
|
||||
name="backgroundFilter"
|
||||
onChange={(value) => this.setState({ backgroundFilter: value })}
|
||||
category="backgroundeffect"
|
||||
element="#backgroundImage"
|
||||
items={backgroundImageEffects}
|
||||
/>
|
||||
{this.state.backgroundFilter !== 'none' && (
|
||||
<Slider
|
||||
title={variables.getMessage(
|
||||
'settings:sections.background.effects.filters.amount',
|
||||
)}
|
||||
name="backgroundFilterAmount"
|
||||
min="0"
|
||||
max="100"
|
||||
default="0"
|
||||
display="%"
|
||||
marks={values.background}
|
||||
category="backgroundeffect"
|
||||
element="#backgroundImage"
|
||||
/>
|
||||
)}
|
||||
</Action>
|
||||
</Row>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</Action>
|
||||
</Row>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export { BackgroundOptions as default, BackgroundOptions };
|
||||
|
||||
Reference in New Issue
Block a user