extras
/
mue
mirror of https://github.com/mue/mue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: rework dropdown backend (wip)

This commit is contained in:
David Ralph 2024-02-13 22:08:45 +00:00
parent b9bb735371
commit da43dbeed0
14 changed files with 473 additions and 356 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/modals/main/marketplace/sections/Added.jsx
View File

@ -261,12 +261,25 @@ export default class Added extends PureComponent {
label={variables.getMessage('modals.main.addons.sort.title')}
name="sortAddons"
onChange={(value) => this.sortAddons(value)}
>
<option value="newest">{variables.getMessage('modals.main.addons.sort.newest')}</option>
<option value="oldest">{variables.getMessage('modals.main.addons.sort.oldest')}</option>
<option value="a-z">{variables.getMessage('modals.main.addons.sort.a_z')}</option>
<option value="z-a">{variables.getMessage('modals.main.addons.sort.z_a')}</option>
</Dropdown>
items={[
{
value: 'newest',
text: variables.getMessage('modals.main.addons.sort.newest'),
},
{
value: 'oldest',
text: variables.getMessage('modals.main.addons.sort.oldest'),
},
{
value: 'a-z',
text: variables.getMessage('modals.main.addons.sort.a_z'),
},
{
value: 'z-a',
text: variables.getMessage('modals.main.addons.sort.z_a'),
},
]}
/>
<Items
items={this.state.installed}
filter=""

15
src/components/modals/main/marketplace/sections/Marketplace.jsx
View File

@ -388,10 +388,17 @@ class Marketplace extends PureComponent {
label={variables.getMessage('modals.main.addons.sort.title')}
name="sortMarketplace"
onChange={(value) => this.sortMarketplace(value)}
>
<option value="a-z">{variables.getMessage('modals.main.addons.sort.a_z')}</option>
<option value="z-a">{variables.getMessage('modals.main.addons.sort.z_a')}</option>
</Dropdown>
items={[
{
value: 'a-z',
text: variables.getMessage('modals.main.addons.sort.a_z'),
},
{
value: 'z-a',
text: variables.getMessage('modals.main.addons.sort.z_a'),
},
]}
/>
</div>
</>
)}

18
src/components/modals/main/settings/Dropdown.jsx
View File

@ -8,7 +8,7 @@ class Dropdown extends PureComponent {
constructor(props) {
super(props);
this.state = {
value: localStorage.getItem(this.props.name) || this.props.children[0].props.value,
value: localStorage.getItem(this.props.name) || this.props.items[0].value,
title: '',
};
this.dropdown = createRef();
@ -62,17 +62,11 @@ class Dropdown extends PureComponent {
ref={this.dropdown}
key={id}
>
{this.props.manual
? this.props.children
: this.props.children.map((e, index) => {
return (
e && (
<MenuItem key={index} value={e.props ? e.props.value : ''}>
{e.props ? e.props.children : ''}
</MenuItem>
)
);
})}
{this.props.items.map(({ value, text }) => (
<MenuItem key={id + value} value={value}>
{text}
</MenuItem>
))}
</Select>
</FormControl>
);

27
src/components/modals/main/settings/sections/Advanced.jsx
View File

@ -1,12 +1,10 @@
import variables from 'modules/variables';
import { useState } from 'react';
import Modal from 'react-modal';
import { MenuItem } from '@mui/material';
import {
MdUpload as ImportIcon,
MdDownload as ExportIcon,
MdRestartAlt as ResetIcon,
MdOutlineKeyboardArrowRight,
MdDataUsage,
} from 'react-icons/md';
@ -111,18 +109,19 @@ export default function AdvancedSettings() {
)}
/>
<Action>
<Dropdown name="timezone" category="timezone" manual={true}>
<MenuItem value="auto">
{variables.getMessage(
'modals.main.settings.sections.advanced.timezone.automatic',
)}
</MenuItem>
{time_zones.map((timezone) => (
<MenuItem value={timezone} key={timezone}>
{timezone}
</MenuItem>
))}
</Dropdown>
<Dropdown
name="timezone"
category="timezone"
items={[
{
value: 'auto',
text: variables.getMessage(
'modals.main.settings.sections.advanced.timezone.automatic',
),
},
...time_zones.map((timezone) => ({ value: timezone, text: timezone })),
]}
/>
</Action>
</Row>
<Row>

145
src/components/modals/main/settings/sections/Appearance.jsx
View File

@ -13,10 +13,9 @@ import { Row, Content, Action } from '../SettingsItem';
import Section from '../Section';
import { MdSource, MdOutlineKeyboardArrowRight, MdAccessibility } from 'react-icons/md';
import { MdAccessibility } from 'react-icons/md';
import { values } from 'modules/helpers/settings/modals';
import Settings from '../../tabs/Settings';
function AppearanceSettings() {
const [accessibility, setAccessibility] = useState(false);
@ -55,6 +54,7 @@ function AppearanceSettings() {
};
const FontOptions = () => {
const fontWeight = 'modals.main.settings.sections.appearance.font.weight';
return (
<Row>
<Content
@ -75,62 +75,75 @@ function AppearanceSettings() {
upperCaseFirst={true}
category="other"
/>
{/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
<Dropdown
label={variables.getMessage(
'modals.main.settings.sections.appearance.font.weight.title',
)}
name="fontweight"
category="other"
>
{/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
<option value="100">
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.thin')}
</option>
<option value="200">
{variables.getMessage(
'modals.main.settings.sections.appearance.font.weight.extra_light',
)}
</option>
<option value="300">
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.light')}
</option>
<option value="400">
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.normal')}
</option>
<option value="500">
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.medium')}
</option>
<option value="600">
{variables.getMessage(
'modals.main.settings.sections.appearance.font.weight.semi_bold',
)}
</option>
<option value="700">
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.bold')}
</option>
<option value="800">
{variables.getMessage(
'modals.main.settings.sections.appearance.font.weight.extra_bold',
)}
</option>
</Dropdown>
items={[
{
value: '100',
text: variables.getMessage(fontWeight + '.thin'),
},
{
value: '200',
text: variables.getMessage(fontWeight + '.extra_light'),
},
{
value: '300',
text: variables.getMessage(fontWeight + '.light'),
},
{
value: '400',
text: variables.getMessage(fontWeight + '.normal'),
},
{
value: '500',
text: variables.getMessage(fontWeight + '.medium'),
},
{
value: '600',
text: variables.getMessage(fontWeight + '.semi_bold'),
},
{
value: '700',
text: variables.getMessage(fontWeight + '.bold'),
},
{
value: '800',
text: variables.getMessage(fontWeight + '.extra_bold'),
},
]}
/>
<Dropdown
label={variables.getMessage(
'modals.main.settings.sections.appearance.font.style.title',
)}
name="fontstyle"
category="other"
>
<option value="normal">
{variables.getMessage('modals.main.settings.sections.appearance.font.style.normal')}
</option>
<option value="italic">
{variables.getMessage('modals.main.settings.sections.appearance.font.style.italic')}
</option>
<option value="oblique">
{variables.getMessage('modals.main.settings.sections.appearance.font.style.oblique')}
</option>
</Dropdown>
items={[
{
value: 'normal',
text: variables.getMessage(
'modals.main.settings.sections.appearance.font.style.normal',
),
},
{
value: 'italic',
text: variables.getMessage(
'modals.main.settings.sections.appearance.font.style.italic',
),
},
{
value: 'oblique',
text: variables.getMessage(
'modals.main.settings.sections.appearance.font.style.oblique',
),
},
]}
/>
</Action>
</Row>
);
@ -184,25 +197,27 @@ function AppearanceSettings() {
)}
name="textBorder"
category="other"
>
<option value="new">
{variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow.new',
)}
</option>{' '}
{/* default */}
<option value="true">
{variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow.old',
)}
</option>{' '}
{/* old checkbox setting */}
<option value="none">
{variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow.none',
)}
</option>
</Dropdown>
items={[
{
value: 'new',
text: variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow.new',
),
},
{
value: 'true',
text: variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow.old',
),
},
{
value: 'none',
text: variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow.none',
),
},
]}
/>
<Checkbox
text={variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.animations',

80
src/components/modals/main/settings/sections/Date.jsx
View File

@ -10,17 +10,21 @@ import PreferencesWrapper from '../PreferencesWrapper';
export default function Date() {
const [dateType, setDateType] = useState(localStorage.getItem('dateType') || 'long');
const dateFormats = ['DMY', 'MDY', 'YMD'];
const longSettings = (
<>
<Dropdown
label={variables.getMessage('modals.main.settings.sections.date.long_format')}
name="longFormat"
category="date"
>
<option value="DMY">DMY</option>
<option value="MDY">MDY</option>
<option value="YMD">YMD</option>
</Dropdown>
items={dateFormats.map((format) => {
return {
value: format,
text: format,
};
})}
/>
<Checkbox
name="dayofweek"
text={variables.getMessage('modals.main.settings.sections.date.day_of_week')}
@ -40,30 +44,39 @@ export default function Date() {
label={variables.getMessage('modals.main.settings.sections.date.short_format')}
name="dateFormat"
category="date"
>
<option value="DMY">DMY</option>
<option value="MDY">MDY</option>
<option value="YMD">YMD</option>
</Dropdown>
items={dateFormats.map((format) => {
return {
value: format,
text: format,
};
})}
/>
<Dropdown
label={variables.getMessage('modals.main.settings.sections.date.short_separator.title')}
name="shortFormat"
category="date"
>
<option value="dash">
{variables.getMessage('modals.main.settings.sections.date.short_separator.dash')}
</option>
<option value="dots">
{variables.getMessage('modals.main.settings.sections.date.short_separator.dots')}
</option>
<option value="gaps">
{variables.getMessage('modals.main.settings.sections.date.short_separator.gaps')}
</option>
<option value="slashes">
{variables.getMessage('modals.main.settings.sections.date.short_separator.slashes')}
</option>
</Dropdown>
items={[
{
value: 'dash',
text: variables.getMessage('modals.main.settings.sections.date.short_separator.dash'),
},
{
value: 'dots',
text: variables.getMessage('modals.main.settings.sections.date.short_separator.dots'),
},
{
value: 'gaps',
text: variables.getMessage('modals.main.settings.sections.date.short_separator.gaps'),
},
{
value: 'slashes',
text: variables.getMessage(
'modals.main.settings.sections.date.short_separator.slashes',
),
},
]}
/>
</>
);
@ -91,14 +104,17 @@ export default function Date() {
localStorage.setItem('dateType', value);
}}
category="date"
>
<option value="long">
{variables.getMessage('modals.main.settings.sections.date.type.long')}
</option>
<option value="short">
{variables.getMessage('modals.main.settings.sections.date.type.short')}
</option>
</Dropdown>
items={[
{
value: 'long',
text: variables.getMessage('modals.main.settings.sections.date.type.long'),
},
{
value: 'short',
text: variables.getMessage('modals.main.settings.sections.date.type.short'),
},
]}
/>
</Action>
</Row>
<Row final={true}>

45
src/components/modals/main/settings/sections/Navbar.jsx
View File

@ -15,7 +15,6 @@ import { Row, Content, Action } from '../SettingsItem';
import Header from '../Header';
import { getTitleFromUrl, isValidUrl } from 'modules/helpers/settings/modals';
import QuickLink from './quicklinks/QuickLink';
import Apps from '../../../../widgets/navbar/Apps';
function Navbar() {
const [showRefreshOptions, setShowRefreshOptions] = useState(
@ -173,23 +172,33 @@ function Navbar() {
)}
/>
<Action>
<Dropdown name="refreshOption" category="navbar">
<option value="page">
{variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_options.page',
)}
</option>
<option value="background">
{variables.getMessage('modals.main.settings.sections.background.title')}
</option>
<option value="quote">
{variables.getMessage('modals.main.settings.sections.quote.title')}
</option>
<option value="quotebackground">
{variables.getMessage('modals.main.settings.sections.quote.title')} +{' '}
{variables.getMessage('modals.main.settings.sections.background.title')}
</option>
</Dropdown>
<Dropdown
name="refreshOption"
category="navbar"
items={[
{
value: 'page',
text: variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_options.page',
),
},
{
value: 'background',
text: variables.getMessage('modals.main.settings.sections.background.title'),
},
{
value: 'quote',
text: variables.getMessage('modals.main.settings.sections.quote.title'),
},
{
value: 'quotebackground',
text:
variables.getMessage('modals.main.settings.sections.quote.title') +
' + ' +
variables.getMessage('modals.main.settings.sections.background.title'),
},
]}
/>
</Action>
</Row>
);

26
src/components/modals/main/settings/sections/QuickLinks.jsx
View File

@ -165,17 +165,21 @@ export default class QuickLinks extends PureComponent {
label={variables.getMessage(`${QUICKLINKS_SECTION}.style`)}
name="quickLinksStyle"
category="quicklinks"
>
<option value="icon">
{variables.getMessage(`${QUICKLINKS_SECTION}.options.icon`)}
</option>
<option value="text">
{variables.getMessage(`${QUICKLINKS_SECTION}.options.text_only`)}
</option>
<option value="metro">
{variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`)}
</option>
</Dropdown>
items={[
{
value: 'icon',
text: variables.getMessage(`${QUICKLINKS_SECTION}.options.icon`),
},
{
value: 'text',
text: variables.getMessage(`${QUICKLINKS_SECTION}.options.text_only`),
},
{
value: 'metro',
text: variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`),
},
]}
/>
</Action>
</Row>
);

36
src/components/modals/main/settings/sections/Quote.jsx
View File

@ -1,12 +1,6 @@
import variables from 'modules/variables';
import React, { PureComponent } from 'react';
import {
MdCancel,
MdAdd,
MdSource,
MdOutlineKeyboardArrowRight,
MdOutlineFormatQuote,
} from 'react-icons/md';
import { MdCancel, MdAdd, MdSource, MdOutlineFormatQuote } from 'react-icons/md';
import TextareaAutosize from '@mui/material/TextareaAutosize';
import Header from '../Header';
@ -30,14 +24,6 @@ export default class QuoteSettings extends PureComponent {
};
}
marketplaceType = () => {
if (localStorage.getItem('quote_packs')) {
return (
<option value="quote_pack">{variables.getMessage('modals.main.navbar.marketplace')}</option>
);
}
};
resetCustom = () => {
localStorage.setItem('customQuote', '[{"quote": "", "author": ""}]');
this.setState({
@ -132,13 +118,19 @@ export default class QuoteSettings extends PureComponent {
label={variables.getMessage('modals.main.settings.sections.background.type.title')}
onChange={(value) => this.setState({ quoteType: value })}
category="quote"
>
{this.marketplaceType()}
<option value="api">
{variables.getMessage('modals.main.settings.sections.background.type.api')}
</option>
<option value="custom">{variables.getMessage(`${QUOTE_SECTION}.custom`)}</option>
</Dropdown>
items={[
localStorage.getItem('quote_packs') && {
value: 'quote_pack',
text: variables.getMessage('modals.main.navbar.marketplace'),
},
{ value: 'quote_pack', text: variables.getMessage('modals.main.navbar.marketplace') },
{
value: 'api',
text: variables.getMessage('modals.main.settings.sections.background.type.api'),
},
{ value: 'custom', text: variables.getMessage(`${QUOTE_SECTION}.custom`) },
]}
/>
);
};

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

@ -119,17 +119,17 @@ export default class SearchSettings extends PureComponent {
<Dropdown
name="searchEngine"
onChange={(value) => this.setSearchEngine(value)}
manual={true}
>
{searchEngines.map((engine) => (
<MenuItem key={engine.name} value={engine.settingsName}>
{engine.name}
</MenuItem>
))}
<MenuItem value="custom">
{variables.getMessage(`${SEARCH_SECTION}.custom`).split(' ')[0]}
</MenuItem>
</Dropdown>
items={[
searchEngines.map((engine) => ({
value: engine.settingsName,
text: engine.name,
})),
{
value: 'custom',
text: variables.getMessage(`${SEARCH_SECTION}.custom`),
},
]}
/>
</Action>
</Row>
);

29
src/components/modals/main/settings/sections/Time.jsx
View File

@ -40,18 +40,23 @@ const TimeSettings = () => {
subtitle={variables.getMessage(`${TIME_SECTION}.type_subtitle`)}
/>
<Action>
<Dropdown name="timeType" onChange={(value) => setTimeType(value)} category="clock">
<option value="digital">{variables.getMessage(`${TIME_SECTION}.digital.title`)}</option>
<option value="analogue">
{variables.getMessage(`${TIME_SECTION}.analogue.title`)}
</option>
<option value="percentageComplete">
{variables.getMessage(`${TIME_SECTION}.percentage_complete`)}
</option>
<option value="verticalClock">
{variables.getMessage(`${TIME_SECTION}.vertical_clock.title`)}
</option>
</Dropdown>
<Dropdown
name="timeType"
onChange={(value) => setTimeType(value)}
category="clock"
items={[
{ value: 'digital', text: variables.getMessage(`${TIME_SECTION}.digital.title`) },
{ value: 'analogue', text: variables.getMessage(`${TIME_SECTION}.analogue.title`) },
{
value: 'percentageComplete',
text: variables.getMessage(`${TIME_SECTION}.percentage_complete`),
},
{
value: 'verticalClock',
text: variables.getMessage(`${TIME_SECTION}.vertical_clock.title`),
},
]}
/>
</Action>
</Row>
);

23
src/components/modals/main/settings/sections/Weather.jsx
View File

@ -54,16 +54,19 @@ export default class WeatherSettings extends PureComponent {
name="weatherType"
category="weather"
onChange={() => this.forceUpdate()}
>
<option value="1">{variables.getMessage(`${WEATHER_SECTION}.options.basic`)}</option>
<option value="2">
{variables.getMessage(`${WEATHER_SECTION}.options.standard`)}
</option>
<option value="3">
{variables.getMessage(`${WEATHER_SECTION}.options.expanded`)}
</option>
<option value="4">{variables.getMessage(`${WEATHER_SECTION}.options.custom`)}</option>
</Dropdown>
items={[
{ value: '1', text: variables.getMessage(`${WEATHER_SECTION}.options.basic`) },
{
value: '2',
text: variables.getMessage(`${WEATHER_SECTION}.options.standard`),
},
{
value: '3',
text: variables.getMessage(`${WEATHER_SECTION}.options.expanded`),
},
{ value: '4', text: variables.getMessage(`${WEATHER_SECTION}.options.custom`) },
]}
/>
</Action>
</Row>
);

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

@ -146,14 +146,17 @@ export default class BackgroundSettings extends PureComponent {
<Dropdown
label={variables.getMessage('modals.main.settings.sections.background.category')}
name="apiCategories"
>
<MenuItem value="loading" key="loading">
{variables.getMessage('modals.main.loading')}
</MenuItem>
<MenuItem value="loading" key="loading">
{variables.getMessage('modals.main.loading')}
</MenuItem>
</Dropdown>
items={[
{
value: 'loading',
text: variables.getMessage('modals.main.loading'),
},
{
value: 'loading',
text: variables.getMessage('modals.main.loading'),
},
]}
/>
</>
) : (
<ChipSelect
@ -168,28 +171,33 @@ export default class BackgroundSettings extends PureComponent {
)}
name="apiQuality"
element=".other"
>
<option value="original">
{variables.getMessage(
'modals.main.settings.sections.background.source.quality.original',
)}
</option>
<option value="high">
{variables.getMessage(
'modals.main.settings.sections.background.source.quality.high',
)}
</option>
<option value="normal">
{variables.getMessage(
'modals.main.settings.sections.background.source.quality.normal',
)}
</option>
<option value="datasaver">
{variables.getMessage(
'modals.main.settings.sections.background.source.quality.datasaver',
)}
</option>
</Dropdown>
items={[
{
value: 'original',
text: variables.getMessage(
'modals.main.settings.sections.background.source.quality.original',
),
},
{
value: 'high',
text: variables.getMessage(
'modals.main.settings.sections.background.source.quality.high',
),
},
{
value: 'normal',
text: variables.getMessage(
'modals.main.settings.sections.background.source.quality.normal',
),
},
{
value: 'datasaver',
text: variables.getMessage(
'modals.main.settings.sections.background.source.quality.datasaver',
),
},
]}
/>
<Radio
title="API"
options={[
@ -326,36 +334,43 @@ export default class BackgroundSettings extends PureComponent {
name="backgroundType"
onChange={(value) => this.setState({ backgroundType: value })}
category="background"
>
{this.state.marketplaceEnabled && (
<option value="photo_pack">
{variables.getMessage('modals.main.navbar.marketplace')}
</option>
)}
<option value="api">
{variables.getMessage('modals.main.settings.sections.background.type.api')}
</option>
<option value="custom">
{variables.getMessage(
'modals.main.settings.sections.background.type.custom_image',
)}
</option>
<option value="colour">
{variables.getMessage(
'modals.main.settings.sections.background.type.custom_colour',
)}
</option>
<option value="random_colour">
{variables.getMessage(
'modals.main.settings.sections.background.type.random_colour',
)}
</option>
<option value="random_gradient">
{variables.getMessage(
'modals.main.settings.sections.background.type.random_gradient',
)}
</option>
</Dropdown>
items={[
this.state.marketplaceEnabled && {
value: 'photo_pack',
text: variables.getMessage('modals.main.navbar.marketplace'),
},
{
value: 'api',
text: variables.getMessage(
'modals.main.settings.sections.background.type.api',
),
},
{
value: 'custom',
text: variables.getMessage(
'modals.main.settings.sections.background.type.custom_image',
),
},
{
value: 'colour',
text: variables.getMessage(
'modals.main.settings.sections.background.type.custom_colour',
),
},
{
value: 'random_colour',
text: variables.getMessage(
'modals.main.settings.sections.background.type.random_colour',
),
},
{
value: 'random_gradient',
text: variables.getMessage(
'modals.main.settings.sections.background.type.random_gradient',
),
},
]}
/>
</div>
</div>
{this.state.backgroundType === 'api' ||
@ -454,36 +469,43 @@ export default class BackgroundSettings extends PureComponent {
name="backgroundType"
onChange={(value) => this.setState({ backgroundType: value })}
category="background"
>
{this.state.marketplaceEnabled && (
<option value="photo_pack">
{variables.getMessage('modals.main.navbar.marketplace')}
</option>
)}
<option value="api">
{variables.getMessage('modals.main.settings.sections.background.type.api')}
</option>
<option value="custom">
{variables.getMessage(
'modals.main.settings.sections.background.type.custom_image',
)}
</option>
<option value="colour">
{variables.getMessage(
'modals.main.settings.sections.background.type.custom_colour',
)}
</option>
<option value="random_colour">
{variables.getMessage(
'modals.main.settings.sections.background.type.random_colour',
)}
</option>
<option value="random_gradient">
{variables.getMessage(
'modals.main.settings.sections.background.type.random_gradient',
)}
</option>
</Dropdown>
items={[
this.state.marketplaceEnabled && {
value: 'photo_pack',
text: variables.getMessage('modals.main.navbar.marketplace'),
},
{
value: 'api',
text: variables.getMessage(
'modals.main.settings.sections.background.type.api',
),
},
{
value: 'custom',
text: variables.getMessage(
'modals.main.settings.sections.background.type.custom_image',
),
},
{
value: 'colour',
text: variables.getMessage(
'modals.main.settings.sections.background.type.custom_colour',
),
},
{
value: 'random_colour',
text: variables.getMessage(
'modals.main.settings.sections.background.type.random_colour',
),
},
{
value: 'random_gradient',
text: variables.getMessage(
'modals.main.settings.sections.background.type.random_gradient',
),
},
]}
/>
</Action>
</Row>
{/* // todo: ideally refactor all of this file, but we need interval to appear on marketplace too */}
@ -541,38 +563,45 @@ export default class BackgroundSettings extends PureComponent {
onChange={(value) => this.setState({ backgroundFilter: value })}
category="background"
element="#backgroundImage"
>
<option value="none">
{variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_options.none',
)}
</option>
<option value="grayscale">
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.grayscale',
)}
</option>
<option value="sepia">
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.sepia',
)}
</option>
<option value="invert">
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.invert',
)}
</option>
<option value="saturate">
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.saturate',
)}
</option>
<option value="contrast">
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.contrast',
)}
</option>
</Dropdown>
items={[
{
value: 'none',
text: variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_options.none',
),
},
{
value: 'grayscale',
text: variables.getMessage(
'modals.main.settings.sections.background.effects.filters.grayscale',
),
},
{
value: 'sepia',
text: variables.getMessage(
'modals.main.settings.sections.background.effects.filters.sepia',
),
},
{
value: 'invert',
text: variables.getMessage(
'modals.main.settings.sections.background.effects.filters.invert',
),
},
{
value: 'saturate',
text: variables.getMessage(
'modals.main.settings.sections.background.effects.filters.saturate',
),
},
{
value: 'contrast',
text: variables.getMessage(
'modals.main.settings.sections.background.effects.filters.contrast',
),
},
]}
/>
{this.state.backgroundFilter !== 'none' && (
<Slider
title={variables.getMessage(

65
src/modules/translations.js
View File

@ -1,21 +1,19 @@
import I18n from '@eartharoid/i18n';
export const translations = {
de_DE: import('../translations/de_DE.json'),
en_GB: import('../translations/en_GB.json'),
en_US: import('../translations/en_US.json'),
es: import('../translations/es.json'),
es_419: import('../translations/es_419.json'),
fr: import('../translations/fr.json'),
nl: import('../translations/nl.json'),
no: import('../translations/no.json'),
ru: import('../translations/ru.json'),
zh_CN: import('../translations/zh_CN.json'),
id_ID: import('../translations/id_ID.json'),
tr_TR: import('../translations/tr_TR.json'),
pt_BR: import('../translations/pt_BR.json'),
bn: import('../translations/bn.json'),
};
import * as de_DE from '../translations/de_DE.json';
import * as en_GB from '../translations/en_GB.json';
import * as en_US from '../translations/en_US.json';
import * as es from '../translations/es.json';
import * as es_419 from '../translations/es_419.json';
import * as fr from '../translations/fr.json';
import * as nl from '../translations/nl.json';
import * as no from '../translations/no.json';
import * as ru from '../translations/ru.json';
import * as zh_CN from '../translations/zh_CN.json';
import * as id_ID from '../translations/id_ID.json';
import * as tr_TR from '../translations/tr_TR.json';
import * as pt_BR from '../translations/pt_BR.json';
import * as bn from '../translations/bn.json';
/**
* Initialise the i18n object.
@ -24,6 +22,39 @@ export const translations = {
* @returns The i18n object.
*/
export function initTranslations(locale) {
const i18n = new I18n(locale, translations);
const i18n = new I18n(locale, {
de_DE,
en_GB,
en_US,
es,
es_419,
fr,
nl,
no,
ru,
zh_CN,
id_ID,
tr_TR,
pt_BR,
bn,
});
return i18n;
}
export const translations = {
de_DE,
en_GB,
en_US,
es,
es_419,
fr,
nl,
no,
ru,
zh_CN,
id_ID,
tr_TR,
pt_BR,
bn,
};