mirror of
https://github.com/mue/mue.git
synced 2026-07-25 09:47:26 +02:00
refactor: clean translation system and more widget stuff
This commit is contained in:
David Ralph
@@ -16,14 +16,12 @@ import CustomSettings from './Custom';
|
||||
import { values } from 'modules/helpers/settings/modals';
|
||||
|
||||
export default class BackgroundSettings extends PureComponent {
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
backgroundType: localStorage.getItem('backgroundType') || 'api',
|
||||
backgroundFilter: localStorage.getItem('backgroundFilter') || 'none',
|
||||
backgroundCategories: [this.getMessage('modals.main.loading')],
|
||||
backgroundCategories: [variables.getMessage('modals.main.loading')],
|
||||
backgroundAPI: localStorage.getItem('backgroundAPI') || 'mue',
|
||||
marketplaceEnabled: localStorage.getItem('photo_packs'),
|
||||
effects: false,
|
||||
@@ -51,7 +49,7 @@ export default class BackgroundSettings extends PureComponent {
|
||||
componentDidMount() {
|
||||
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
|
||||
return this.setState({
|
||||
backgroundCategories: [this.getMessage('modals.update.offline.title')],
|
||||
backgroundCategories: [variables.getMessage('modals.update.offline.title')],
|
||||
});
|
||||
}
|
||||
|
||||
@@ -68,29 +66,31 @@ export default class BackgroundSettings extends PureComponent {
|
||||
|
||||
const interval = (
|
||||
<SettingsItem
|
||||
title={getMessage('modals.main.settings.sections.background.interval.title')}
|
||||
subtitle={getMessage('modals.mani.settings.sections.background.intervanl.subtitle')}
|
||||
title={variables.getMessage('modals.main.settings.sections.background.interval.title')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.mani.settings.sections.background.intervanl.subtitle',
|
||||
)}
|
||||
>
|
||||
<Dropdown
|
||||
label={getMessage('modals.main.settings.sections.background.interval.title')}
|
||||
label={variables.getMessage('modals.main.settings.sections.background.interval.title')}
|
||||
name="backgroundchange"
|
||||
>
|
||||
<option value="refresh">{getMessage('tabname')}</option>
|
||||
<option value="refresh">{variables.getMessage('tabname')}</option>
|
||||
<option value="60000">
|
||||
{getMessage('modals.main.settings.sections.background.interval.minute')}
|
||||
{variables.getMessage('modals.main.settings.sections.background.interval.minute')}
|
||||
</option>
|
||||
<option value="1800000">
|
||||
{getMessage('modals.main.settings.sections.background.interval.half_hour')}
|
||||
{variables.getMessage('modals.main.settings.sections.background.interval.half_hour')}
|
||||
</option>
|
||||
<option value="3600000">
|
||||
{getMessage('modals.main.settings.sections.background.interval.hour')}
|
||||
{variables.getMessage('modals.main.settings.sections.background.interval.hour')}
|
||||
</option>
|
||||
<option value="86400000">
|
||||
{getMessage('modals.main.settings.sections.background.interval.day')}
|
||||
{variables.getMessage('modals.main.settings.sections.background.interval.day')}
|
||||
</option>
|
||||
<option value="604800000">{getMessage('widgets.date.week')}</option>
|
||||
<option value="604800000">{variables.getMessage('widgets.date.week')}</option>
|
||||
<option value="2628000000">
|
||||
{getMessage('modals.main.settings.sections.background.interval.month')}
|
||||
{variables.getMessage('modals.main.settings.sections.background.interval.month')}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
@@ -100,27 +100,27 @@ export default class BackgroundSettings extends PureComponent {
|
||||
<>
|
||||
{interval}
|
||||
<SettingsItem
|
||||
title={getMessage('modals.main.settings.sections.background.api')}
|
||||
subtitle={getMessage('modals.main.settings.sections.background.api_subtitle')}
|
||||
title={variables.getMessage('modals.main.settings.sections.background.api')}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.background.api_subtitle')}
|
||||
final={true}
|
||||
>
|
||||
{this.state.backgroundCategories[0] === getMessage('modals.main.loading') ? (
|
||||
{this.state.backgroundCategories[0] === variables.getMessage('modals.main.loading') ? (
|
||||
<>
|
||||
<Dropdown
|
||||
label={getMessage('modals.main.settings.sections.background.category')}
|
||||
label={variables.getMessage('modals.main.settings.sections.background.category')}
|
||||
name="apiCategory"
|
||||
>
|
||||
<MenuItem value="loading" key="loading">
|
||||
{getMessage('modals.main.loading')}
|
||||
{variables.getMessage('modals.main.loading')}
|
||||
</MenuItem>
|
||||
<MenuItem value="loading" key="loading">
|
||||
{getMessage('modals.main.loading')}
|
||||
{variables.getMessage('modals.main.loading')}
|
||||
</MenuItem>
|
||||
</Dropdown>
|
||||
</>
|
||||
) : (
|
||||
<Dropdown
|
||||
label={getMessage('modals.main.settings.sections.background.category')}
|
||||
label={variables.getMessage('modals.main.settings.sections.background.category')}
|
||||
name="apiCategory"
|
||||
>
|
||||
{this.state.backgroundCategories.map((category) => (
|
||||
@@ -131,21 +131,29 @@ export default class BackgroundSettings extends PureComponent {
|
||||
</Dropdown>
|
||||
)}
|
||||
<Dropdown
|
||||
label={getMessage('modals.main.settings.sections.background.source.quality.title')}
|
||||
label={variables.getMessage(
|
||||
'modals.main.settings.sections.background.source.quality.title',
|
||||
)}
|
||||
name="apiQuality"
|
||||
element=".other"
|
||||
>
|
||||
<option value="original">
|
||||
{getMessage('modals.main.settings.sections.background.source.quality.original')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.source.quality.original',
|
||||
)}
|
||||
</option>
|
||||
<option value="high">
|
||||
{getMessage('modals.main.settings.sections.background.source.quality.high')}
|
||||
{variables.getMessage('modals.main.settings.sections.background.source.quality.high')}
|
||||
</option>
|
||||
<option value="normal">
|
||||
{getMessage('modals.main.settings.sections.background.source.quality.normal')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.source.quality.normal',
|
||||
)}
|
||||
</option>
|
||||
<option value="datasaver">
|
||||
{getMessage('modals.main.settings.sections.background.source.quality.datasaver')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.source.quality.datasaver',
|
||||
)}
|
||||
</option>
|
||||
</Dropdown>
|
||||
<Radio
|
||||
@@ -208,10 +216,10 @@ export default class BackgroundSettings extends PureComponent {
|
||||
header = (
|
||||
<span className="mainTitle" onClick={() => this.setState({ effects: false })}>
|
||||
<span className="backTitle">
|
||||
{getMessage('modals.main.settings.sections.background.title')}
|
||||
{variables.getMessage('modals.main.settings.sections.background.title')}
|
||||
</span>
|
||||
<MdOutlineKeyboardArrowRight />{' '}
|
||||
{getMessage('modals.main.settings.sections.background.effects.title')}
|
||||
{variables.getMessage('modals.main.settings.sections.background.effects.title')}
|
||||
</span>
|
||||
);
|
||||
} else if (this.state.backgroundSettingsSection === true) {
|
||||
@@ -221,16 +229,16 @@ export default class BackgroundSettings extends PureComponent {
|
||||
onClick={() => this.setState({ backgroundSettingsSection: false })}
|
||||
>
|
||||
<span className="backTitle">
|
||||
{getMessage('modals.main.settings.sections.background.title')}{' '}
|
||||
{variables.getMessage('modals.main.settings.sections.background.title')}{' '}
|
||||
</span>
|
||||
<MdOutlineKeyboardArrowRight />{' '}
|
||||
{getMessage('modals.main.settings.sections.background.source.title')}
|
||||
{variables.getMessage('modals.main.settings.sections.background.source.title')}
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
header = (
|
||||
<Header
|
||||
title={getMessage('modals.main.settings.sections.background.title')}
|
||||
title={variables.getMessage('modals.main.settings.sections.background.title')}
|
||||
setting="background"
|
||||
category="background"
|
||||
element="#backgroundImage"
|
||||
@@ -251,39 +259,51 @@ export default class BackgroundSettings extends PureComponent {
|
||||
<MdSource />
|
||||
<div className="content">
|
||||
<span className="title">
|
||||
{getMessage('modals.main.settings.sections.background.source.title')}
|
||||
{variables.getMessage('modals.main.settings.sections.background.source.title')}
|
||||
</span>
|
||||
<span className="subtitle">
|
||||
{getMessage('modals.main.settings.sections.background.source.subtitle')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.source.subtitle',
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="action">
|
||||
<Dropdown
|
||||
label={getMessage('modals.main.settings.sections.background.type.title')}
|
||||
label={variables.getMessage(
|
||||
'modals.main.settings.sections.background.type.title',
|
||||
)}
|
||||
name="backgroundType"
|
||||
onChange={(value) => this.setState({ backgroundType: value })}
|
||||
category="background"
|
||||
>
|
||||
{this.state.marketplaceEnabled ? (
|
||||
<option value="photo_pack">
|
||||
{this.getMessage('modals.main.navbar.marketplace')}
|
||||
{variables.getMessage('modals.main.navbar.marketplace')}
|
||||
</option>
|
||||
) : null}
|
||||
<option value="api">
|
||||
{getMessage('modals.main.settings.sections.background.type.api')}
|
||||
{variables.getMessage('modals.main.settings.sections.background.type.api')}
|
||||
</option>
|
||||
<option value="custom">
|
||||
{getMessage('modals.main.settings.sections.background.type.custom_image')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.type.custom_image',
|
||||
)}
|
||||
</option>
|
||||
<option value="colour">
|
||||
{getMessage('modals.main.settings.sections.background.type.custom_colour')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.type.custom_colour',
|
||||
)}
|
||||
</option>
|
||||
<option value="random_colour">
|
||||
{getMessage('modals.main.settings.sections.background.type.random_colour')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.type.random_colour',
|
||||
)}
|
||||
</option>
|
||||
<option value="random_gradient">
|
||||
{getMessage('modals.main.settings.sections.background.type.random_gradient')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.type.random_gradient',
|
||||
)}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</div>
|
||||
@@ -297,10 +317,14 @@ export default class BackgroundSettings extends PureComponent {
|
||||
<MdOutlineAutoAwesome />
|
||||
<div className="content">
|
||||
<span className="title">
|
||||
{getMessage('modals.main.settings.sections.background.effects.title')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.effects.title',
|
||||
)}
|
||||
</span>
|
||||
<span className="subtitle">
|
||||
{getMessage('modals.main.settings.sections.background.effects.subtitle')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.effects.subtitle',
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -319,25 +343,31 @@ export default class BackgroundSettings extends PureComponent {
|
||||
this.state.backgroundType === 'custom' ||
|
||||
this.state.marketplaceEnabled) ? (
|
||||
<SettingsItem
|
||||
title={getMessage('modals.main.settings.sections.background.display')}
|
||||
subtitle={getMessage('modals.main.settings.sections.background.display_subtitle')}
|
||||
title={variables.getMessage('modals.main.settings.sections.background.display')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.background.display_subtitle',
|
||||
)}
|
||||
final={true}
|
||||
>
|
||||
<Checkbox
|
||||
name="ddgProxy"
|
||||
text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')}
|
||||
text={variables.getMessage(
|
||||
'modals.main.settings.sections.background.ddg_image_proxy',
|
||||
)}
|
||||
element=".other"
|
||||
disabled={!usingImage}
|
||||
/>
|
||||
<Checkbox
|
||||
name="bgtransition"
|
||||
text={getMessage('modals.main.settings.sections.background.transition')}
|
||||
text={variables.getMessage('modals.main.settings.sections.background.transition')}
|
||||
element=".other"
|
||||
disabled={!usingImage}
|
||||
/>
|
||||
<Checkbox
|
||||
name="photoInformation"
|
||||
text={getMessage('modals.main.settings.sections.background.photo_information')}
|
||||
text={variables.getMessage(
|
||||
'modals.main.settings.sections.background.photo_information',
|
||||
)}
|
||||
element=".other"
|
||||
disabled={
|
||||
this.state.backgroundType !== 'api' && this.state.backgroundType !== 'marketplace'
|
||||
@@ -345,7 +375,7 @@ export default class BackgroundSettings extends PureComponent {
|
||||
/>
|
||||
<Checkbox
|
||||
name="photoMap"
|
||||
text={getMessage('modals.main.settings.sections.background.show_map')}
|
||||
text={variables.getMessage('modals.main.settings.sections.background.show_map')}
|
||||
element=".other"
|
||||
disabled={this.state.backgroundAPI !== 'unsplash'}
|
||||
/>
|
||||
@@ -354,38 +384,48 @@ export default class BackgroundSettings extends PureComponent {
|
||||
{this.state.backgroundSettingsSection ? (
|
||||
<>
|
||||
<SettingsItem
|
||||
title={getMessage('modals.main.settings.sections.background.source.title')}
|
||||
subtitle={getMessage('modals.main.settings.sections.background.source.subtitle')}
|
||||
title={variables.getMessage('modals.main.settings.sections.background.source.title')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.background.source.subtitle',
|
||||
)}
|
||||
final={
|
||||
this.state.backgroundType === 'random_colour' ||
|
||||
this.state.backgroundType === 'random_gradient'
|
||||
}
|
||||
>
|
||||
<Dropdown
|
||||
label={getMessage('modals.main.settings.sections.background.type.title')}
|
||||
label={variables.getMessage('modals.main.settings.sections.background.type.title')}
|
||||
name="backgroundType"
|
||||
onChange={(value) => this.setState({ backgroundType: value })}
|
||||
category="background"
|
||||
>
|
||||
{this.state.marketplaceEnabled ? (
|
||||
<option value="photo_pack">
|
||||
{this.getMessage('modals.main.navbar.marketplace')}
|
||||
{variables.getMessage('modals.main.navbar.marketplace')}
|
||||
</option>
|
||||
) : null}
|
||||
<option value="api">
|
||||
{getMessage('modals.main.settings.sections.background.type.api')}
|
||||
{variables.getMessage('modals.main.settings.sections.background.type.api')}
|
||||
</option>
|
||||
<option value="custom">
|
||||
{getMessage('modals.main.settings.sections.background.type.custom_image')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.type.custom_image',
|
||||
)}
|
||||
</option>
|
||||
<option value="colour">
|
||||
{getMessage('modals.main.settings.sections.background.type.custom_colour')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.type.custom_colour',
|
||||
)}
|
||||
</option>
|
||||
<option value="random_colour">
|
||||
{getMessage('modals.main.settings.sections.background.type.random_colour')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.type.random_colour',
|
||||
)}
|
||||
</option>
|
||||
<option value="random_gradient">
|
||||
{getMessage('modals.main.settings.sections.background.type.random_gradient')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.type.random_gradient',
|
||||
)}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
@@ -397,12 +437,14 @@ export default class BackgroundSettings extends PureComponent {
|
||||
this.state.marketplaceEnabled) &&
|
||||
this.state.effects ? (
|
||||
<SettingsItem
|
||||
title={getMessage('modals.main.settings.sections.background.effects.title')}
|
||||
subtitle={getMessage('modals.main.settings.sections.background.effects.subtitle')}
|
||||
title={variables.getMessage('modals.main.settings.sections.background.effects.title')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.background.effects.subtitle',
|
||||
)}
|
||||
final={true}
|
||||
>
|
||||
<Slider
|
||||
title={getMessage('modals.main.settings.sections.background.effects.blur')}
|
||||
title={variables.getMessage('modals.main.settings.sections.background.effects.blur')}
|
||||
name="blur"
|
||||
min="0"
|
||||
max="100"
|
||||
@@ -413,7 +455,9 @@ export default class BackgroundSettings extends PureComponent {
|
||||
element="#backgroundImage"
|
||||
/>
|
||||
<Slider
|
||||
title={getMessage('modals.main.settings.sections.background.effects.brightness')}
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.background.effects.brightness',
|
||||
)}
|
||||
name="brightness"
|
||||
min="0"
|
||||
max="100"
|
||||
@@ -424,34 +468,48 @@ export default class BackgroundSettings extends PureComponent {
|
||||
element="#backgroundImage"
|
||||
/>
|
||||
<Dropdown
|
||||
label={getMessage('modals.main.settings.sections.background.effects.filters.title')}
|
||||
label={variables.getMessage(
|
||||
'modals.main.settings.sections.background.effects.filters.title',
|
||||
)}
|
||||
name="backgroundFilter"
|
||||
onChange={(value) => this.setState({ backgroundFilter: value })}
|
||||
category="background"
|
||||
element="#backgroundImage"
|
||||
>
|
||||
<option value="none">
|
||||
{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.none')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.navbar.refresh_options.none',
|
||||
)}
|
||||
</option>
|
||||
<option value="grayscale">
|
||||
{getMessage('modals.main.settings.sections.background.effects.filters.grayscale')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.effects.filters.grayscale',
|
||||
)}
|
||||
</option>
|
||||
<option value="sepia">
|
||||
{getMessage('modals.main.settings.sections.background.effects.filters.sepia')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.effects.filters.sepia',
|
||||
)}
|
||||
</option>
|
||||
<option value="invert">
|
||||
{getMessage('modals.main.settings.sections.background.effects.filters.invert')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.effects.filters.invert',
|
||||
)}
|
||||
</option>
|
||||
<option value="saturate">
|
||||
{getMessage('modals.main.settings.sections.background.effects.filters.saturate')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.effects.filters.saturate',
|
||||
)}
|
||||
</option>
|
||||
<option value="contrast">
|
||||
{getMessage('modals.main.settings.sections.background.effects.filters.contrast')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.effects.filters.contrast',
|
||||
)}
|
||||
</option>
|
||||
</Dropdown>
|
||||
{this.state.backgroundFilter !== 'none' ? (
|
||||
<Slider
|
||||
title={getMessage(
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.background.effects.filters.amount',
|
||||
)}
|
||||
name="backgroundFilterAmount"
|
||||
|
||||
Reference in New Issue
Block a user