mirror of https://github.com/mue/mue.git
style: Variables for translation to improve clarity and reduce line length
This commit is contained in:
alexsparkes
parent
c7f21c295c
commit
959a928366
|
|
@ -110,10 +110,12 @@ function Navbar() {
|
|||
variables.stats.postEvent('feature', 'App link delete');
|
||||
};
|
||||
|
||||
const NAVBAR_SECTION = 'modals.main.settings.sections.appearance.navbar';
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
title={variables.getMessage('modals.main.settings.sections.appearance.navbar.title')}
|
||||
title={variables.getMessage(`${NAVBAR_SECTION}.title`)}
|
||||
setting="navbar"
|
||||
category="widgets"
|
||||
zoomSetting="zoomNavbar"
|
||||
|
|
@ -128,12 +130,12 @@ function Navbar() {
|
|||
>
|
||||
<Checkbox
|
||||
name="navbarHover"
|
||||
text={variables.getMessage('modals.main.settings.sections.appearance.navbar.hover')}
|
||||
text={variables.getMessage(`${NAVBAR_SECTION}.hover`)}
|
||||
category="navbar"
|
||||
/>
|
||||
<Checkbox
|
||||
name="notesEnabled"
|
||||
text={variables.getMessage('modals.main.settings.sections.appearance.navbar.notes')}
|
||||
text={variables.getMessage(`${NAVBAR_SECTION}.notes`)}
|
||||
category="navbar"
|
||||
/>
|
||||
<Checkbox
|
||||
|
|
@ -143,7 +145,7 @@ function Navbar() {
|
|||
/>
|
||||
<Checkbox
|
||||
name="refresh"
|
||||
text={variables.getMessage('modals.main.settings.sections.appearance.navbar.refresh')}
|
||||
text={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
|
||||
category="navbar"
|
||||
onChange={setShowRefreshOptions}
|
||||
/>
|
||||
|
|
@ -161,7 +163,7 @@ function Navbar() {
|
|||
</SettingsItem>
|
||||
{showRefreshOptions && (
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.appearance.navbar.refresh')}
|
||||
title={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.navbar.refresh_subtitle',
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import variables from 'modules/variables';
|
||||
import { PureComponent, createRef } from 'react';
|
||||
import { MdAddLink, MdLinkOff, MdCancel, MdEdit } from 'react-icons/md';
|
||||
import { MdAddLink, MdLinkOff } from 'react-icons/md';
|
||||
import Header from '../Header';
|
||||
import Checkbox from '../Checkbox';
|
||||
import Dropdown from '../Dropdown';
|
||||
|
|
@ -124,10 +124,12 @@ export default class QuickLinks extends PureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const QUICKLINKS_SECTION = 'modals.main.settings.sections.quicklinks';
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
title={variables.getMessage('modals.main.settings.sections.quicklinks.title')}
|
||||
title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)}
|
||||
setting="quicklinksenabled"
|
||||
category="quicklinks"
|
||||
element=".quicklinks-container"
|
||||
|
|
@ -136,49 +138,45 @@ export default class QuickLinks extends PureComponent {
|
|||
/>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.quicklinks.additional')}
|
||||
subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.additional`)}
|
||||
>
|
||||
<Checkbox
|
||||
name="quicklinksnewtab"
|
||||
text={variables.getMessage('modals.main.settings.sections.quicklinks.open_new')}
|
||||
text={variables.getMessage(`${QUICKLINKS_SECTION}.open_new`)}
|
||||
category="quicklinks"
|
||||
/>
|
||||
<Checkbox
|
||||
name="quicklinkstooltip"
|
||||
text={variables.getMessage('modals.main.settings.sections.quicklinks.tooltip')}
|
||||
text={variables.getMessage(`${QUICKLINKS_SECTION}.tooltip`)}
|
||||
category="quicklinks"
|
||||
/>
|
||||
</SettingsItem>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.quicklinks.styling')}
|
||||
title={variables.getMessage(`${QUICKLINKS_SECTION}.styling`)}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.quicklinks.styling_description',
|
||||
)}
|
||||
>
|
||||
<Dropdown
|
||||
label={variables.getMessage('modals.main.settings.sections.quicklinks.style')}
|
||||
label={variables.getMessage(`${QUICKLINKS_SECTION}.style`)}
|
||||
name="quickLinksStyle"
|
||||
category="quicklinks"
|
||||
>
|
||||
<option value="icon">
|
||||
{variables.getMessage('modals.main.settings.sections.quicklinks.options.icon')}
|
||||
{variables.getMessage(`${QUICKLINKS_SECTION}.options.icon`)}
|
||||
</option>
|
||||
<option value="text">
|
||||
{variables.getMessage('modals.main.settings.sections.quicklinks.options.text_only')}
|
||||
{variables.getMessage(`${QUICKLINKS_SECTION}.options.text_only`)}
|
||||
</option>
|
||||
<option value="metro">
|
||||
{variables.getMessage('modals.main.settings.sections.quicklinks.options.metro')}
|
||||
{variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`)}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.quicklinks.title')}
|
||||
final={true}
|
||||
>
|
||||
<SettingsItem title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)} final={true}>
|
||||
<button onClick={() => this.setState({ showAddModal: true })}>
|
||||
{variables.getMessage('modals.main.settings.sections.quicklinks.add_link')}{' '}
|
||||
<MdAddLink />
|
||||
{variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)} <MdAddLink />
|
||||
</button>
|
||||
</SettingsItem>
|
||||
|
||||
|
|
@ -187,13 +185,13 @@ export default class QuickLinks extends PureComponent {
|
|||
<div className="emptyNewMessage">
|
||||
<MdLinkOff />
|
||||
<span className="title">
|
||||
{variables.getMessage('modals.main.settings.sections.quicklinks.no_quicklinks')}
|
||||
{variables.getMessage(`${QUICKLINKS_SECTION}.no_quicklinks`)}
|
||||
</span>
|
||||
<span className="subtitle">
|
||||
{variables.getMessage('modals.main.settings.sections.message.add_some')}
|
||||
</span>
|
||||
<button onClick={() => this.setState({ showAddModal: true })}>
|
||||
{variables.getMessage('modals.main.settings.sections.quicklinks.add_link')}
|
||||
{variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)}
|
||||
<MdAddLink />
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -92,17 +92,19 @@ export default class QuoteSettings extends PureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const QUOTE_SECTION = 'modals.main.settings.sections.quote';
|
||||
|
||||
let customSettings;
|
||||
if (this.state.quoteType === 'custom' && this.state.sourceSection === true) {
|
||||
customSettings = (
|
||||
<>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.quote.custom')}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.quote.custom_subtitle')}
|
||||
title={variables.getMessage(`${QUOTE_SECTION}.custom`)}
|
||||
subtitle={variables.getMessage(`${QUOTE_SECTION}.custom_subtitle`)}
|
||||
final={true}
|
||||
>
|
||||
<button onClick={() => this.modifyCustomQuote('add')}>
|
||||
{variables.getMessage('modals.main.settings.sections.quote.add')} <MdAdd />
|
||||
{variables.getMessage(`${QUOTE_SECTION}.add`)} <MdAdd />
|
||||
</button>
|
||||
</SettingsItem>
|
||||
|
||||
|
|
@ -152,14 +154,12 @@ export default class QuoteSettings extends PureComponent {
|
|||
<div className="photosEmpty">
|
||||
<div className="emptyNewMessage">
|
||||
<MdOutlineFormatQuote />
|
||||
<span className="title">
|
||||
{variables.getMessage('modals.main.settings.sections.quote.no_quotes')}
|
||||
</span>
|
||||
<span className="title">{variables.getMessage(`${QUOTE_SECTION}.no_quotes`)}</span>
|
||||
<span className="subtitle">
|
||||
{variables.getMessage('modals.main.settings.sections.message.add_some')}
|
||||
</span>
|
||||
<button onClick={() => this.modifyCustomQuote('add')}>
|
||||
{variables.getMessage('modals.main.settings.sections.quote.add')} <MdAdd />
|
||||
{variables.getMessage(`${QUOTE_SECTION}.add`)} <MdAdd />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -175,15 +175,13 @@ export default class QuoteSettings extends PureComponent {
|
|||
<>
|
||||
{this.state.sourceSection ? (
|
||||
<span className="mainTitle" onClick={() => this.setState({ sourceSection: false })}>
|
||||
<span className="backTitle">
|
||||
{variables.getMessage('modals.main.settings.sections.quote.title')}
|
||||
</span>
|
||||
<span className="backTitle">{variables.getMessage(`${QUOTE_SECTION}.title`)}</span>
|
||||
<MdOutlineKeyboardArrowRight />{' '}
|
||||
{variables.getMessage('modals.main.settings.sections.background.source.title')}
|
||||
</span>
|
||||
) : (
|
||||
<Header
|
||||
title={variables.getMessage('modals.main.settings.sections.quote.title')}
|
||||
title={variables.getMessage(`${QUOTE_SECTION}.title`)}
|
||||
setting="quote"
|
||||
category="quote"
|
||||
element=".quotediv"
|
||||
|
|
@ -199,7 +197,7 @@ export default class QuoteSettings extends PureComponent {
|
|||
{variables.getMessage('modals.main.settings.sections.background.source.title')}
|
||||
</span>
|
||||
<span className="subtitle">
|
||||
{variables.getMessage('modals.main.settings.sections.quote.source_subtitle')}
|
||||
{variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -214,23 +212,21 @@ export default class QuoteSettings extends PureComponent {
|
|||
<option value="api">
|
||||
{variables.getMessage('modals.main.settings.sections.background.type.api')}
|
||||
</option>
|
||||
<option value="custom">
|
||||
{variables.getMessage('modals.main.settings.sections.quote.custom')}
|
||||
</option>
|
||||
<option value="custom">{variables.getMessage(`${QUOTE_SECTION}.custom`)}</option>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
{!this.state.sourceSection && (
|
||||
<>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.quote.buttons.title')}
|
||||
title={variables.getMessage(`${QUOTE_SECTION}.buttons.title`)}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.quote.buttons.subtitle',
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
name="copyButton"
|
||||
text={variables.getMessage('modals.main.settings.sections.quote.buttons.copy')}
|
||||
text={variables.getMessage(`${QUOTE_SECTION}.buttons.copy`)}
|
||||
category="quote"
|
||||
/>
|
||||
<Checkbox
|
||||
|
|
@ -240,14 +236,14 @@ export default class QuoteSettings extends PureComponent {
|
|||
/>
|
||||
<Checkbox
|
||||
name="favouriteQuoteEnabled"
|
||||
text={variables.getMessage('modals.main.settings.sections.quote.buttons.favourite')}
|
||||
text={variables.getMessage(`${QUOTE_SECTION}.buttons.favourite`)}
|
||||
category="quote"
|
||||
/>
|
||||
</SettingsItem>
|
||||
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.quote.additional')}
|
||||
subtitle={variables.getMessage(`${QUOTE_SECTION}.additional`)}
|
||||
final={true}
|
||||
>
|
||||
{/*<Dropdown
|
||||
|
|
@ -281,12 +277,12 @@ export default class QuoteSettings extends PureComponent {
|
|||
</Dropdown>*/}
|
||||
<Checkbox
|
||||
name="authorLink"
|
||||
text={variables.getMessage('modals.main.settings.sections.quote.author_link')}
|
||||
text={variables.getMessage(`${QUOTE_SECTION}.author_link`)}
|
||||
element=".other"
|
||||
/>
|
||||
<Checkbox
|
||||
name="authorImg"
|
||||
text={variables.getMessage('modals.main.settings.sections.quote.author_img')}
|
||||
text={variables.getMessage(`${QUOTE_SECTION}.author_img`)}
|
||||
element=".other"
|
||||
/>
|
||||
</SettingsItem>
|
||||
|
|
|
|||
|
|
@ -68,46 +68,48 @@ export default class SearchSettings extends PureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const SEARCH_SECTION = 'modals.main.settings.sections.search';
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
title={variables.getMessage('modals.main.settings.sections.search.title')}
|
||||
title={variables.getMessage(`${SEARCH_SECTION}.title`)}
|
||||
setting="searchBar"
|
||||
category="widgets"
|
||||
switch={true}
|
||||
/>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.search.additional')}
|
||||
subtitle={variables.getMessage(`${SEARCH_SECTION}.additional`)}
|
||||
>
|
||||
{/* not supported on firefox */}
|
||||
{navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
|
||||
<Checkbox
|
||||
name="voiceSearch"
|
||||
text={variables.getMessage('modals.main.settings.sections.search.voice_search')}
|
||||
text={variables.getMessage(`${SEARCH_SECTION}.voice_search`)}
|
||||
category="search"
|
||||
/>
|
||||
) : null}
|
||||
<Checkbox
|
||||
name="searchDropdown"
|
||||
text={variables.getMessage('modals.main.settings.sections.search.dropdown')}
|
||||
text={variables.getMessage(`${SEARCH_SECTION}.dropdown`)}
|
||||
category="search"
|
||||
element=".other"
|
||||
/>
|
||||
<Checkbox
|
||||
name="searchFocus"
|
||||
text={variables.getMessage('modals.main.settings.sections.search.focus')}
|
||||
text={variables.getMessage(`${SEARCH_SECTION}.focus`)}
|
||||
category="search"
|
||||
element=".other"
|
||||
/>
|
||||
<Checkbox
|
||||
name="autocomplete"
|
||||
text={variables.getMessage('modals.main.settings.sections.search.autocomplete')}
|
||||
text={variables.getMessage(`${SEARCH_SECTION}.autocomplete`)}
|
||||
category="search"
|
||||
/>
|
||||
</SettingsItem>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.search.search_engine')}
|
||||
title={variables.getMessage(`${SEARCH_SECTION}.search_engine`)}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.search.search_engine_subtitle',
|
||||
)}
|
||||
|
|
@ -124,17 +126,14 @@ export default class SearchSettings extends PureComponent {
|
|||
</MenuItem>
|
||||
))}
|
||||
<MenuItem value="custom">
|
||||
{variables.getMessage('modals.main.settings.sections.search.custom').split(' ')[0]}
|
||||
{variables.getMessage(`${SEARCH_SECTION}.custom`).split(' ')[0]}
|
||||
</MenuItem>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
<div style={{ display: this.state.customDisplay }}>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.search.custom')}
|
||||
final={true}
|
||||
>
|
||||
<SettingsItem title={variables.getMessage(`${SEARCH_SECTION}.custom`)} final={true}>
|
||||
<TextField
|
||||
label={variables.getMessage('modals.main.settings.sections.search.custom')}
|
||||
label={variables.getMessage(`${SEARCH_SECTION}.custom`)}
|
||||
value={this.state.customValue}
|
||||
onInput={(e) => this.setState({ customValue: e.target.value })}
|
||||
varient="outlined"
|
||||
|
|
|
|||
|
|
@ -26,23 +26,23 @@ export default class TimeSettings extends PureComponent {
|
|||
render() {
|
||||
let timeSettings = null;
|
||||
|
||||
const TIME_SECTION = 'modals.main.settings.sections.time';
|
||||
|
||||
const digitalSettings = (
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.time.digital.title')}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.time.digital.subtitle')}
|
||||
title={variables.getMessage(`${TIME_SECTION}.digital.title`)}
|
||||
subtitle={variables.getMessage(`${TIME_SECTION}.digital.subtitle`)}
|
||||
final={true}
|
||||
>
|
||||
<Radio
|
||||
name="timeformat"
|
||||
options={[
|
||||
{
|
||||
name: variables.getMessage(
|
||||
'modals.main.settings.sections.time.digital.twentyfourhour',
|
||||
),
|
||||
name: variables.getMessage(`${TIME_SECTION}.digital.twentyfourhour`),
|
||||
value: 'twentyfourhour',
|
||||
},
|
||||
{
|
||||
name: variables.getMessage('modals.main.settings.sections.time.digital.twelvehour'),
|
||||
name: variables.getMessage(`${TIME_SECTION}.digital.twelvehour`),
|
||||
value: 'twelvehour',
|
||||
},
|
||||
]}
|
||||
|
|
@ -51,12 +51,12 @@ export default class TimeSettings extends PureComponent {
|
|||
/>
|
||||
<Checkbox
|
||||
name="seconds"
|
||||
text={variables.getMessage('modals.main.settings.sections.time.digital.seconds')}
|
||||
text={variables.getMessage(`${TIME_SECTION}.digital.seconds`)}
|
||||
category="clock"
|
||||
/>
|
||||
<Checkbox
|
||||
name="zero"
|
||||
text={variables.getMessage('modals.main.settings.sections.time.digital.zero')}
|
||||
text={variables.getMessage(`${TIME_SECTION}.digital.zero`)}
|
||||
category="clock"
|
||||
/>
|
||||
</SettingsItem>
|
||||
|
|
@ -64,38 +64,38 @@ export default class TimeSettings extends PureComponent {
|
|||
|
||||
const analogSettings = (
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.time.analogue.title')}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.time.analogue.subtitle')}
|
||||
title={variables.getMessage(`${TIME_SECTION}.analogue.title`)}
|
||||
subtitle={variables.getMessage(`${TIME_SECTION}.analogue.subtitle`)}
|
||||
final={true}
|
||||
>
|
||||
<Checkbox
|
||||
name="secondHand"
|
||||
text={variables.getMessage('modals.main.settings.sections.time.analogue.second_hand')}
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.second_hand`)}
|
||||
category="clock"
|
||||
/>
|
||||
<Checkbox
|
||||
name="minuteHand"
|
||||
text={variables.getMessage('modals.main.settings.sections.time.analogue.minute_hand')}
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.minute_hand`)}
|
||||
category="clock"
|
||||
/>
|
||||
<Checkbox
|
||||
name="hourHand"
|
||||
text={variables.getMessage('modals.main.settings.sections.time.analogue.hour_hand')}
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.hour_hand`)}
|
||||
category="clock"
|
||||
/>
|
||||
<Checkbox
|
||||
name="hourMarks"
|
||||
text={variables.getMessage('modals.main.settings.sections.time.analogue.hour_marks')}
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.hour_marks`)}
|
||||
category="clock"
|
||||
/>
|
||||
<Checkbox
|
||||
name="minuteMarks"
|
||||
text={variables.getMessage('modals.main.settings.sections.time.analogue.minute_marks')}
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.minute_marks`)}
|
||||
category="clock"
|
||||
/>
|
||||
<Checkbox
|
||||
name="roundClock"
|
||||
text={variables.getMessage('modals.main.settings.sections.time.analogue.round_clock')}
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.round_clock`)}
|
||||
category="clock"
|
||||
/>
|
||||
</SettingsItem>
|
||||
|
|
@ -160,7 +160,7 @@ export default class TimeSettings extends PureComponent {
|
|||
return (
|
||||
<>
|
||||
<Header
|
||||
title={variables.getMessage('modals.main.settings.sections.time.title')}
|
||||
title={variables.getMessage(`${TIME_SECTION}.title`)}
|
||||
setting="time"
|
||||
category="clock"
|
||||
element=".clock-container"
|
||||
|
|
@ -168,8 +168,8 @@ export default class TimeSettings extends PureComponent {
|
|||
switch={true}
|
||||
/>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.time.type')}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.time.type_subtitle')}
|
||||
title={variables.getMessage(`${TIME_SECTION}.type`)}
|
||||
subtitle={variables.getMessage(`${TIME_SECTION}.type_subtitle`)}
|
||||
final={this.state.timeType === 'percentageComplete'}
|
||||
>
|
||||
<Dropdown
|
||||
|
|
@ -177,17 +177,15 @@ export default class TimeSettings extends PureComponent {
|
|||
onChange={(value) => this.setState({ timeType: value })}
|
||||
category="clock"
|
||||
>
|
||||
<option value="digital">
|
||||
{variables.getMessage('modals.main.settings.sections.time.digital.title')}
|
||||
</option>
|
||||
<option value="digital">{variables.getMessage(`${TIME_SECTION}.digital.title`)}</option>
|
||||
<option value="analogue">
|
||||
{variables.getMessage('modals.main.settings.sections.time.analogue.title')}
|
||||
{variables.getMessage(`${TIME_SECTION}.analogue.title`)}
|
||||
</option>
|
||||
<option value="percentageComplete">
|
||||
{variables.getMessage('modals.main.settings.sections.time.percentage_complete')}
|
||||
{variables.getMessage(`${TIME_SECTION}.percentage_complete`)}
|
||||
</option>
|
||||
<option value="verticalClock">
|
||||
{variables.getMessage('modals.main.settings.sections.time.vertical_clock.title')}
|
||||
{variables.getMessage(`${TIME_SECTION}.vertical_clock.title`)}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
|
|
|
|||
|
|
@ -63,44 +63,64 @@ export default class TimeSettings extends PureComponent {
|
|||
render() {
|
||||
const weatherType = localStorage.getItem('weatherType');
|
||||
|
||||
const WEATHER_SECTION = 'modals.main.settings.sections.weather';
|
||||
|
||||
const weatherOptions = [
|
||||
{
|
||||
name: 'weatherdescription',
|
||||
textKey: `${WEATHER_SECTION}.extra_info.show_description`,
|
||||
},
|
||||
{
|
||||
name: 'cloudiness',
|
||||
textKey: `${WEATHER_SECTION}.extra_info.cloudiness`,
|
||||
},
|
||||
{ name: 'humidity', textKey: `${WEATHER_SECTION}.extra_info.humidity` },
|
||||
{
|
||||
name: 'visibility',
|
||||
textKey: `${WEATHER_SECTION}.extra_info.visibility`,
|
||||
},
|
||||
{
|
||||
name: 'windspeed',
|
||||
textKey: `${WEATHER_SECTION}.extra_info.wind_speed`,
|
||||
onChange: () => this.setState({ windSpeed: localStorage.getItem('windspeed') !== 'true' }),
|
||||
},
|
||||
{
|
||||
name: 'windDirection',
|
||||
textKey: `${WEATHER_SECTION}.extra_info.wind_direction`,
|
||||
disabled: this.state.windSpeed,
|
||||
},
|
||||
{
|
||||
name: 'atmosphericpressure',
|
||||
textKey: `${WEATHER_SECTION}.extra_info.atmospheric_pressure`,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
title={variables.getMessage('modals.main.settings.sections.weather.title')}
|
||||
title={variables.getMessage(`${WEATHER_SECTION}.title`)}
|
||||
setting="weatherEnabled"
|
||||
category="widgets"
|
||||
zoomSetting="zoomWeather"
|
||||
zoomCategory="weather"
|
||||
switch={true}
|
||||
/>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.weather.widget_type')}
|
||||
>
|
||||
<SettingsItem title={variables.getMessage(`${WEATHER_SECTION}.widget_type`)}>
|
||||
<Dropdown
|
||||
label={variables.getMessage('modals.main.settings.sections.time.type')}
|
||||
name="weatherType"
|
||||
category="weather"
|
||||
onChange={() => this.forceUpdate()}
|
||||
>
|
||||
<option value="1">
|
||||
{variables.getMessage('modals.main.settings.sections.weather.options.basic')}
|
||||
</option>
|
||||
<option value="2">
|
||||
{variables.getMessage('modals.main.settings.sections.weather.options.standard')}
|
||||
</option>
|
||||
<option value="3">
|
||||
{variables.getMessage('modals.main.settings.sections.weather.options.expanded')}
|
||||
</option>
|
||||
<option value="4">
|
||||
{variables.getMessage('modals.main.settings.sections.weather.options.custom')}
|
||||
</option>
|
||||
<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>
|
||||
</SettingsItem>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.weather.location')}
|
||||
>
|
||||
<SettingsItem title={variables.getMessage(`${WEATHER_SECTION}.location`)}>
|
||||
<TextField
|
||||
label={variables.getMessage('modals.main.settings.sections.weather.location')}
|
||||
label={variables.getMessage(`${WEATHER_SECTION}.location`)}
|
||||
value={this.state.location}
|
||||
onChange={(e) => this.changeLocation(e)}
|
||||
placeholder="London"
|
||||
|
|
@ -109,34 +129,26 @@ export default class TimeSettings extends PureComponent {
|
|||
/>
|
||||
<span className="link" onClick={() => this.getAuto()}>
|
||||
<MdAutoAwesome />
|
||||
{variables.getMessage('modals.main.settings.sections.weather.auto')}
|
||||
{variables.getMessage(`${WEATHER_SECTION}.auto`)}
|
||||
</span>
|
||||
</SettingsItem>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.weather.temp_format.title')}
|
||||
title={variables.getMessage(`${WEATHER_SECTION}.temp_format.title`)}
|
||||
final={weatherType !== '4'}
|
||||
>
|
||||
<Radio
|
||||
name="tempformat"
|
||||
options={[
|
||||
{
|
||||
name:
|
||||
variables.getMessage(
|
||||
'modals.main.settings.sections.weather.temp_format.celsius',
|
||||
) + ' (°C)',
|
||||
name: variables.getMessage(`${WEATHER_SECTION}.temp_format.celsius`) + ' (°C)',
|
||||
value: 'celsius',
|
||||
},
|
||||
{
|
||||
name:
|
||||
variables.getMessage(
|
||||
'modals.main.settings.sections.weather.temp_format.fahrenheit',
|
||||
) + ' (°F)',
|
||||
name: variables.getMessage(`${WEATHER_SECTION}.temp_format.fahrenheit`) + ' (°F)',
|
||||
value: 'fahrenheit',
|
||||
},
|
||||
{
|
||||
name:
|
||||
variables.getMessage('modals.main.settings.sections.weather.temp_format.kelvin') +
|
||||
' (K)',
|
||||
name: variables.getMessage(`${WEATHER_SECTION}.temp_format.kelvin`) + ' (K)',
|
||||
value: 'kelvin',
|
||||
},
|
||||
]}
|
||||
|
|
@ -145,64 +157,19 @@ export default class TimeSettings extends PureComponent {
|
|||
</SettingsItem>
|
||||
{weatherType === '4' && (
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.weather.custom_settings')}
|
||||
title={variables.getMessage(`${WEATHER_SECTION}.custom_settings`)}
|
||||
final={true}
|
||||
>
|
||||
<Checkbox
|
||||
name="weatherdescription"
|
||||
text={variables.getMessage(
|
||||
'modals.main.settings.sections.weather.extra_info.show_description',
|
||||
)}
|
||||
category="weather"
|
||||
/>
|
||||
<Checkbox
|
||||
name="cloudiness"
|
||||
text={variables.getMessage(
|
||||
'modals.main.settings.sections.weather.extra_info.cloudiness',
|
||||
)}
|
||||
category="weather"
|
||||
/>
|
||||
<Checkbox
|
||||
name="humidity"
|
||||
text={variables.getMessage(
|
||||
'modals.main.settings.sections.weather.extra_info.humidity',
|
||||
)}
|
||||
category="weather"
|
||||
/>
|
||||
<Checkbox
|
||||
name="visibility"
|
||||
text={variables.getMessage(
|
||||
'modals.main.settings.sections.weather.extra_info.visibility',
|
||||
)}
|
||||
category="weather"
|
||||
/>
|
||||
<Checkbox
|
||||
name="windspeed"
|
||||
text={variables.getMessage(
|
||||
'modals.main.settings.sections.weather.extra_info.wind_speed',
|
||||
)}
|
||||
category="weather"
|
||||
onChange={() =>
|
||||
this.setState({
|
||||
windSpeed: localStorage.getItem('windspeed') !== 'true',
|
||||
})
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
name="windDirection"
|
||||
text={variables.getMessage(
|
||||
'modals.main.settings.sections.weather.extra_info.wind_direction',
|
||||
)}
|
||||
category="weather"
|
||||
disabled={this.state.windSpeed}
|
||||
/>
|
||||
<Checkbox
|
||||
name="atmosphericpressure"
|
||||
text={variables.getMessage(
|
||||
'modals.main.settings.sections.weather.extra_info.atmospheric_pressure',
|
||||
)}
|
||||
category="weather"
|
||||
/>
|
||||
{weatherOptions.map((item) => (
|
||||
<Checkbox
|
||||
key={item.name}
|
||||
name={item.name}
|
||||
text={variables.getMessage(item.textKey)}
|
||||
category="weather"
|
||||
onChange={item.onChange}
|
||||
disabled={item.disabled}
|
||||
/>
|
||||
))}
|
||||
</SettingsItem>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in New Issue