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')} label={variables.getMessage('modals.main.addons.sort.title')}
name="sortAddons" name="sortAddons"
onChange={(value) => this.sortAddons(value)} onChange={(value) => this.sortAddons(value)}
> items={[
<option value="newest">{variables.getMessage('modals.main.addons.sort.newest')}</option> {
<option value="oldest">{variables.getMessage('modals.main.addons.sort.oldest')}</option> value: 'newest',
<option value="a-z">{variables.getMessage('modals.main.addons.sort.a_z')}</option> text: variables.getMessage('modals.main.addons.sort.newest'),
<option value="z-a">{variables.getMessage('modals.main.addons.sort.z_a')}</option> },
</Dropdown> {
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
items={this.state.installed} items={this.state.installed}
filter="" 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')} label={variables.getMessage('modals.main.addons.sort.title')}
name="sortMarketplace" name="sortMarketplace"
onChange={(value) => this.sortMarketplace(value)} onChange={(value) => this.sortMarketplace(value)}
> items={[
<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> value: 'a-z',
</Dropdown> text: variables.getMessage('modals.main.addons.sort.a_z'),
},
{
value: 'z-a',
text: variables.getMessage('modals.main.addons.sort.z_a'),
},
]}
/>
</div> </div>
</> </>
)} )}

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

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

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

@ -1,12 +1,10 @@
import variables from 'modules/variables'; import variables from 'modules/variables';
import { useState } from 'react'; import { useState } from 'react';
import Modal from 'react-modal'; import Modal from 'react-modal';
import { MenuItem } from '@mui/material';
import { import {
MdUpload as ImportIcon, MdUpload as ImportIcon,
MdDownload as ExportIcon, MdDownload as ExportIcon,
MdRestartAlt as ResetIcon, MdRestartAlt as ResetIcon,
MdOutlineKeyboardArrowRight,
MdDataUsage, MdDataUsage,
} from 'react-icons/md'; } from 'react-icons/md';
@ -111,18 +109,19 @@ export default function AdvancedSettings() {
)} )}
/> />
<Action> <Action>
<Dropdown name="timezone" category="timezone" manual={true}> <Dropdown
<MenuItem value="auto"> name="timezone"
{variables.getMessage( category="timezone"
'modals.main.settings.sections.advanced.timezone.automatic', items={[
)} {
</MenuItem> value: 'auto',
{time_zones.map((timezone) => ( text: variables.getMessage(
<MenuItem value={timezone} key={timezone}> 'modals.main.settings.sections.advanced.timezone.automatic',
{timezone} ),
</MenuItem> },
))} ...time_zones.map((timezone) => ({ value: timezone, text: timezone })),
</Dropdown> ]}
/>
</Action> </Action>
</Row> </Row>
<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 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 { values } from 'modules/helpers/settings/modals';
import Settings from '../../tabs/Settings';
function AppearanceSettings() { function AppearanceSettings() {
const [accessibility, setAccessibility] = useState(false); const [accessibility, setAccessibility] = useState(false);
@ -55,6 +54,7 @@ function AppearanceSettings() {
}; };
const FontOptions = () => { const FontOptions = () => {
const fontWeight = 'modals.main.settings.sections.appearance.font.weight';
return ( return (
<Row> <Row>
<Content <Content
@ -75,62 +75,75 @@ function AppearanceSettings() {
upperCaseFirst={true} upperCaseFirst={true}
category="other" category="other"
/> />
{/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
<Dropdown <Dropdown
label={variables.getMessage( label={variables.getMessage(
'modals.main.settings.sections.appearance.font.weight.title', 'modals.main.settings.sections.appearance.font.weight.title',
)} )}
name="fontweight" name="fontweight"
category="other" category="other"
> items={[
{/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */} {
<option value="100"> value: '100',
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.thin')} text: variables.getMessage(fontWeight + '.thin'),
</option> },
<option value="200"> {
{variables.getMessage( value: '200',
'modals.main.settings.sections.appearance.font.weight.extra_light', text: variables.getMessage(fontWeight + '.extra_light'),
)} },
</option> {
<option value="300"> value: '300',
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.light')} text: variables.getMessage(fontWeight + '.light'),
</option> },
<option value="400"> {
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.normal')} value: '400',
</option> text: variables.getMessage(fontWeight + '.normal'),
<option value="500"> },
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.medium')} {
</option> value: '500',
<option value="600"> text: variables.getMessage(fontWeight + '.medium'),
{variables.getMessage( },
'modals.main.settings.sections.appearance.font.weight.semi_bold', {
)} value: '600',
</option> text: variables.getMessage(fontWeight + '.semi_bold'),
<option value="700"> },
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.bold')} {
</option> value: '700',
<option value="800"> text: variables.getMessage(fontWeight + '.bold'),
{variables.getMessage( },
'modals.main.settings.sections.appearance.font.weight.extra_bold', {
)} value: '800',
</option> text: variables.getMessage(fontWeight + '.extra_bold'),
</Dropdown> },
]}
/>
<Dropdown <Dropdown
label={variables.getMessage( label={variables.getMessage(
'modals.main.settings.sections.appearance.font.style.title', 'modals.main.settings.sections.appearance.font.style.title',
)} )}
name="fontstyle" name="fontstyle"
category="other" category="other"
> items={[
<option value="normal"> {
{variables.getMessage('modals.main.settings.sections.appearance.font.style.normal')} value: 'normal',
</option> text: variables.getMessage(
<option value="italic"> 'modals.main.settings.sections.appearance.font.style.normal',
{variables.getMessage('modals.main.settings.sections.appearance.font.style.italic')} ),
</option> },
<option value="oblique"> {
{variables.getMessage('modals.main.settings.sections.appearance.font.style.oblique')} value: 'italic',
</option> text: variables.getMessage(
</Dropdown> 'modals.main.settings.sections.appearance.font.style.italic',
),
},
{
value: 'oblique',
text: variables.getMessage(
'modals.main.settings.sections.appearance.font.style.oblique',
),
},
]}
/>
</Action> </Action>
</Row> </Row>
); );
@ -184,25 +197,27 @@ function AppearanceSettings() {
)} )}
name="textBorder" name="textBorder"
category="other" category="other"
> items={[
<option value="new"> {
{variables.getMessage( value: 'new',
'modals.main.settings.sections.appearance.accessibility.text_shadow.new', text: variables.getMessage(
)} 'modals.main.settings.sections.appearance.accessibility.text_shadow.new',
</option>{' '} ),
{/* default */} },
<option value="true"> {
{variables.getMessage( value: 'true',
'modals.main.settings.sections.appearance.accessibility.text_shadow.old', text: variables.getMessage(
)} 'modals.main.settings.sections.appearance.accessibility.text_shadow.old',
</option>{' '} ),
{/* old checkbox setting */} },
<option value="none"> {
{variables.getMessage( value: 'none',
'modals.main.settings.sections.appearance.accessibility.text_shadow.none', text: variables.getMessage(
)} 'modals.main.settings.sections.appearance.accessibility.text_shadow.none',
</option> ),
</Dropdown> },
]}
/>
<Checkbox <Checkbox
text={variables.getMessage( text={variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.animations', '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() { export default function Date() {
const [dateType, setDateType] = useState(localStorage.getItem('dateType') || 'long'); const [dateType, setDateType] = useState(localStorage.getItem('dateType') || 'long');
const dateFormats = ['DMY', 'MDY', 'YMD'];
const longSettings = ( const longSettings = (
<> <>
<Dropdown <Dropdown
label={variables.getMessage('modals.main.settings.sections.date.long_format')} label={variables.getMessage('modals.main.settings.sections.date.long_format')}
name="longFormat" name="longFormat"
category="date" category="date"
> items={dateFormats.map((format) => {
<option value="DMY">DMY</option> return {
<option value="MDY">MDY</option> value: format,
<option value="YMD">YMD</option> text: format,
</Dropdown> };
})}
/>
<Checkbox <Checkbox
name="dayofweek" name="dayofweek"
text={variables.getMessage('modals.main.settings.sections.date.day_of_week')} 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')} label={variables.getMessage('modals.main.settings.sections.date.short_format')}
name="dateFormat" name="dateFormat"
category="date" category="date"
> items={dateFormats.map((format) => {
<option value="DMY">DMY</option> return {
<option value="MDY">MDY</option> value: format,
<option value="YMD">YMD</option> text: format,
</Dropdown> };
})}
/>
<Dropdown <Dropdown
label={variables.getMessage('modals.main.settings.sections.date.short_separator.title')} label={variables.getMessage('modals.main.settings.sections.date.short_separator.title')}
name="shortFormat" name="shortFormat"
category="date" category="date"
> items={[
<option value="dash"> {
{variables.getMessage('modals.main.settings.sections.date.short_separator.dash')} value: 'dash',
</option> text: variables.getMessage('modals.main.settings.sections.date.short_separator.dash'),
<option value="dots"> },
{variables.getMessage('modals.main.settings.sections.date.short_separator.dots')} {
</option> value: 'dots',
<option value="gaps"> text: variables.getMessage('modals.main.settings.sections.date.short_separator.dots'),
{variables.getMessage('modals.main.settings.sections.date.short_separator.gaps')} },
</option> {
<option value="slashes"> value: 'gaps',
{variables.getMessage('modals.main.settings.sections.date.short_separator.slashes')} text: variables.getMessage('modals.main.settings.sections.date.short_separator.gaps'),
</option> },
</Dropdown> {
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); localStorage.setItem('dateType', value);
}} }}
category="date" category="date"
> items={[
<option value="long"> {
{variables.getMessage('modals.main.settings.sections.date.type.long')} value: 'long',
</option> text: variables.getMessage('modals.main.settings.sections.date.type.long'),
<option value="short"> },
{variables.getMessage('modals.main.settings.sections.date.type.short')} {
</option> value: 'short',
</Dropdown> text: variables.getMessage('modals.main.settings.sections.date.type.short'),
},
]}
/>
</Action> </Action>
</Row> </Row>
<Row final={true}> <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 Header from '../Header';
import { getTitleFromUrl, isValidUrl } from 'modules/helpers/settings/modals'; import { getTitleFromUrl, isValidUrl } from 'modules/helpers/settings/modals';
import QuickLink from './quicklinks/QuickLink'; import QuickLink from './quicklinks/QuickLink';
import Apps from '../../../../widgets/navbar/Apps';
function Navbar() { function Navbar() {
const [showRefreshOptions, setShowRefreshOptions] = useState( const [showRefreshOptions, setShowRefreshOptions] = useState(
@ -173,23 +172,33 @@ function Navbar() {
)} )}
/> />
<Action> <Action>
<Dropdown name="refreshOption" category="navbar"> <Dropdown
<option value="page"> name="refreshOption"
{variables.getMessage( category="navbar"
'modals.main.settings.sections.appearance.navbar.refresh_options.page', items={[
)} {
</option> value: 'page',
<option value="background"> text: variables.getMessage(
{variables.getMessage('modals.main.settings.sections.background.title')} 'modals.main.settings.sections.appearance.navbar.refresh_options.page',
</option> ),
<option value="quote"> },
{variables.getMessage('modals.main.settings.sections.quote.title')} {
</option> value: 'background',
<option value="quotebackground"> text: variables.getMessage('modals.main.settings.sections.background.title'),
{variables.getMessage('modals.main.settings.sections.quote.title')} +{' '} },
{variables.getMessage('modals.main.settings.sections.background.title')} {
</option> value: 'quote',
</Dropdown> 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> </Action>
</Row> </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`)} label={variables.getMessage(`${QUICKLINKS_SECTION}.style`)}
name="quickLinksStyle" name="quickLinksStyle"
category="quicklinks" category="quicklinks"
> items={[
<option value="icon"> {
{variables.getMessage(`${QUICKLINKS_SECTION}.options.icon`)} value: 'icon',
</option> text: variables.getMessage(`${QUICKLINKS_SECTION}.options.icon`),
<option value="text"> },
{variables.getMessage(`${QUICKLINKS_SECTION}.options.text_only`)} {
</option> value: 'text',
<option value="metro"> text: variables.getMessage(`${QUICKLINKS_SECTION}.options.text_only`),
{variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`)} },
</option> {
</Dropdown> value: 'metro',
text: variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`),
},
]}
/>
</Action> </Action>
</Row> </Row>
); );

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

@ -1,12 +1,6 @@
import variables from 'modules/variables'; import variables from 'modules/variables';
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { import { MdCancel, MdAdd, MdSource, MdOutlineFormatQuote } from 'react-icons/md';
MdCancel,
MdAdd,
MdSource,
MdOutlineKeyboardArrowRight,
MdOutlineFormatQuote,
} from 'react-icons/md';
import TextareaAutosize from '@mui/material/TextareaAutosize'; import TextareaAutosize from '@mui/material/TextareaAutosize';
import Header from '../Header'; 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 = () => { resetCustom = () => {
localStorage.setItem('customQuote', '[{"quote": "", "author": ""}]'); localStorage.setItem('customQuote', '[{"quote": "", "author": ""}]');
this.setState({ this.setState({
@ -132,13 +118,19 @@ export default class QuoteSettings extends PureComponent {
label={variables.getMessage('modals.main.settings.sections.background.type.title')} label={variables.getMessage('modals.main.settings.sections.background.type.title')}
onChange={(value) => this.setState({ quoteType: value })} onChange={(value) => this.setState({ quoteType: value })}
category="quote" category="quote"
> items={[
{this.marketplaceType()} localStorage.getItem('quote_packs') && {
<option value="api"> value: 'quote_pack',
{variables.getMessage('modals.main.settings.sections.background.type.api')} text: variables.getMessage('modals.main.navbar.marketplace'),
</option> },
<option value="custom">{variables.getMessage(`${QUOTE_SECTION}.custom`)}</option> { value: 'quote_pack', text: variables.getMessage('modals.main.navbar.marketplace') },
</Dropdown> {
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 <Dropdown
name="searchEngine" name="searchEngine"
onChange={(value) => this.setSearchEngine(value)} onChange={(value) => this.setSearchEngine(value)}
manual={true} items={[
> searchEngines.map((engine) => ({
{searchEngines.map((engine) => ( value: engine.settingsName,
<MenuItem key={engine.name} value={engine.settingsName}> text: engine.name,
{engine.name} })),
</MenuItem> {
))} value: 'custom',
<MenuItem value="custom"> text: variables.getMessage(`${SEARCH_SECTION}.custom`),
{variables.getMessage(`${SEARCH_SECTION}.custom`).split(' ')[0]} },
</MenuItem> ]}
</Dropdown> />
</Action> </Action>
</Row> </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`)} subtitle={variables.getMessage(`${TIME_SECTION}.type_subtitle`)}
/> />
<Action> <Action>
<Dropdown name="timeType" onChange={(value) => setTimeType(value)} category="clock"> <Dropdown
<option value="digital">{variables.getMessage(`${TIME_SECTION}.digital.title`)}</option> name="timeType"
<option value="analogue"> onChange={(value) => setTimeType(value)}
{variables.getMessage(`${TIME_SECTION}.analogue.title`)} category="clock"
</option> items={[
<option value="percentageComplete"> { value: 'digital', text: variables.getMessage(`${TIME_SECTION}.digital.title`) },
{variables.getMessage(`${TIME_SECTION}.percentage_complete`)} { value: 'analogue', text: variables.getMessage(`${TIME_SECTION}.analogue.title`) },
</option> {
<option value="verticalClock"> value: 'percentageComplete',
{variables.getMessage(`${TIME_SECTION}.vertical_clock.title`)} text: variables.getMessage(`${TIME_SECTION}.percentage_complete`),
</option> },
</Dropdown> {
value: 'verticalClock',
text: variables.getMessage(`${TIME_SECTION}.vertical_clock.title`),
},
]}
/>
</Action> </Action>
</Row> </Row>
); );

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

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

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

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

65
src/modules/translations.js
View File

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