diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx index a085064c..dcce204f 100644 --- a/src/components/modals/main/marketplace/sections/Added.jsx +++ b/src/components/modals/main/marketplace/sections/Added.jsx @@ -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)} - > - - - - - + 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'), + }, + ]} + /> this.sortMarketplace(value)} - > - - - + 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'), + }, + ]} + /> )} diff --git a/src/components/modals/main/settings/Dropdown.jsx b/src/components/modals/main/settings/Dropdown.jsx index 09a8d4b1..f2aa81f0 100644 --- a/src/components/modals/main/settings/Dropdown.jsx +++ b/src/components/modals/main/settings/Dropdown.jsx @@ -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 && ( - - {e.props ? e.props.children : ''} - - ) - ); - })} + {this.props.items.map(({ value, text }) => ( + + {text} + + ))} ); diff --git a/src/components/modals/main/settings/sections/Advanced.jsx b/src/components/modals/main/settings/sections/Advanced.jsx index ea4f0666..21f82be7 100644 --- a/src/components/modals/main/settings/sections/Advanced.jsx +++ b/src/components/modals/main/settings/sections/Advanced.jsx @@ -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() { )} /> - - - {variables.getMessage( - 'modals.main.settings.sections.advanced.timezone.automatic', - )} - - {time_zones.map((timezone) => ( - - {timezone} - - ))} - + ({ value: timezone, text: timezone })), + ]} + /> diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx index c51947ac..2ec167a4 100644 --- a/src/components/modals/main/settings/sections/Appearance.jsx +++ b/src/components/modals/main/settings/sections/Appearance.jsx @@ -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 ( + {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */} - {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */} - - - - - - - - - + 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'), + }, + ]} + /> - - - - + 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', + ), + }, + ]} + /> ); @@ -184,25 +197,27 @@ function AppearanceSettings() { )} name="textBorder" category="other" - > - {' '} - {/* default */} - {' '} - {/* old checkbox setting */} - - + 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', + ), + }, + ]} + /> - - - - + items={dateFormats.map((format) => { + return { + value: format, + text: format, + }; + })} + /> - - - - + items={dateFormats.map((format) => { + return { + value: format, + text: format, + }; + })} + /> - - - - - + 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" - > - - - + 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'), + }, + ]} + /> diff --git a/src/components/modals/main/settings/sections/Navbar.jsx b/src/components/modals/main/settings/sections/Navbar.jsx index 680c76e2..75b3390e 100644 --- a/src/components/modals/main/settings/sections/Navbar.jsx +++ b/src/components/modals/main/settings/sections/Navbar.jsx @@ -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() { )} /> - - - - - - + ); diff --git a/src/components/modals/main/settings/sections/QuickLinks.jsx b/src/components/modals/main/settings/sections/QuickLinks.jsx index b7383991..156f500a 100644 --- a/src/components/modals/main/settings/sections/QuickLinks.jsx +++ b/src/components/modals/main/settings/sections/QuickLinks.jsx @@ -165,17 +165,21 @@ export default class QuickLinks extends PureComponent { label={variables.getMessage(`${QUICKLINKS_SECTION}.style`)} name="quickLinksStyle" category="quicklinks" - > - - - - + 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`), + }, + ]} + /> ); diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx index 8273fb81..02e42ffa 100644 --- a/src/components/modals/main/settings/sections/Quote.jsx +++ b/src/components/modals/main/settings/sections/Quote.jsx @@ -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 ( - - ); - } - }; - 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()} - - - + 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`) }, + ]} + /> ); }; diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx index dcd2c043..65701ca6 100644 --- a/src/components/modals/main/settings/sections/Search.jsx +++ b/src/components/modals/main/settings/sections/Search.jsx @@ -119,17 +119,17 @@ export default class SearchSettings extends PureComponent { this.setSearchEngine(value)} - manual={true} - > - {searchEngines.map((engine) => ( - - {engine.name} - - ))} - - {variables.getMessage(`${SEARCH_SECTION}.custom`).split(' ')[0]} - - + items={[ + searchEngines.map((engine) => ({ + value: engine.settingsName, + text: engine.name, + })), + { + value: 'custom', + text: variables.getMessage(`${SEARCH_SECTION}.custom`), + }, + ]} + /> ); diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx index 9a2db823..656ece02 100644 --- a/src/components/modals/main/settings/sections/Time.jsx +++ b/src/components/modals/main/settings/sections/Time.jsx @@ -40,18 +40,23 @@ const TimeSettings = () => { subtitle={variables.getMessage(`${TIME_SECTION}.type_subtitle`)} /> - setTimeType(value)} category="clock"> - - - - - + 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`), + }, + ]} + /> ); diff --git a/src/components/modals/main/settings/sections/Weather.jsx b/src/components/modals/main/settings/sections/Weather.jsx index faf58071..36b89f1c 100644 --- a/src/components/modals/main/settings/sections/Weather.jsx +++ b/src/components/modals/main/settings/sections/Weather.jsx @@ -54,16 +54,19 @@ export default class WeatherSettings extends PureComponent { name="weatherType" category="weather" onChange={() => this.forceUpdate()} - > - - - - - + 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`) }, + ]} + /> ); diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx index 11082c3d..f3cd4345 100644 --- a/src/components/modals/main/settings/sections/background/Background.jsx +++ b/src/components/modals/main/settings/sections/background/Background.jsx @@ -146,14 +146,17 @@ export default class BackgroundSettings extends PureComponent { - - {variables.getMessage('modals.main.loading')} - - - {variables.getMessage('modals.main.loading')} - - + items={[ + { + value: 'loading', + text: variables.getMessage('modals.main.loading'), + }, + { + value: 'loading', + text: variables.getMessage('modals.main.loading'), + }, + ]} + /> ) : ( - - - - - + 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', + ), + }, + ]} + /> this.setState({ backgroundType: value })} category="background" - > - {this.state.marketplaceEnabled && ( - - )} - - - - - - + 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', + ), + }, + ]} + /> {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 && ( - - )} - - - - - - + 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', + ), + }, + ]} + /> {/* // 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" - > - - - - - - - + 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' && (