mirror of https://github.com/mue/mue.git
refactor: rework dropdown backend (wip)
This commit is contained in:
parent
b9bb735371
commit
da43dbeed0
|
@ -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=""
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
)}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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`) },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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,
|
||||
};
|
Loading…
Reference in New Issue