mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-19 23:14:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: clean translation system and more widget stuff

Browse Source
This commit is contained in:
David Ralph
2022-08-26 10:45:32 +01:00
parent cd311e0fa1
commit 2c2acbba46
71 changed files with 1028 additions and 999 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/modals/main/settings/sections/About.jsx
View File

@@ -10,8 +10,6 @@ import Tooltip from 'components/helpers/tooltip/Tooltip';
import other_contributors from 'modules/other_contributors.json';
export default class About extends PureComponent {
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
constructor() {
super();
this.state = {
@@ -19,8 +17,8 @@ export default class About extends PureComponent {
sponsors: [],
other_contributors: [],
photographers: [],
update: this.getMessage('modals.main.settings.sections.about.version.checking_update'),
loading: this.getMessage('modals.main.loading'),
update: variables.getMessage('modals.main.settings.sections.about.version.checking_update'),
loading: variables.getMessage('modals.main.loading'),
image: document.body.classList.contains('dark')
? 'icons/mue_dark.png'
: 'icons/mue_light.png',
@@ -72,8 +70,10 @@ export default class About extends PureComponent {
}
return this.setState({
update: this.getMessage('modals.main.settings.sections.about.version.error.title'),
loading: this.getMessage('modals.main.settings.sections.about.version.error.description'),
update: variables.getMessage('modals.main.settings.sections.about.version.error.title'),
loading: variables.getMessage(
'modals.main.settings.sections.about.version.error.description',
),
});
}
@@ -87,12 +87,12 @@ export default class About extends PureComponent {
const newVersion = versionData[0].tag_name;
let update = this.getMessage('modals.main.settings.sections.about.version.no_update');
let update = variables.getMessage('modals.main.settings.sections.about.version.no_update');
if (
Number(variables.constants.VERSION.replaceAll('.', '')) <
Number(newVersion.replaceAll('.', ''))
) {
update = `${this.getMessage(
update = `${variables.getMessage(
'modals.main.settings.sections.about.version.update_available',
)}: ${newVersion}`;
}
@@ -111,8 +111,8 @@ export default class About extends PureComponent {
componentDidMount() {
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
this.setState({
update: this.getMessage('modals.main.settings.sections.about.version.checking_update'),
loading: this.getMessage('modals.main.marketplace.offline.description'),
update: variables.getMessage('modals.main.settings.sections.about.version.checking_update'),
loading: variables.getMessage('modals.main.marketplace.offline.description'),
});
return;
}
@@ -129,18 +129,18 @@ export default class About extends PureComponent {
return (
<>
<span className="mainTitle">
{this.getMessage('modals.main.settings.sections.about.title')}
{variables.getMessage('modals.main.settings.sections.about.title')}
</span>
<div className="settingsRow" style={{ justifyContent: 'center' }}>
<div style={{ display: 'flex', flexFlow: 'column', gap: '5px' }}>
<img draggable="false" className="aboutLogo" src={this.state.image} alt="Logo" />
<span className="title">
{this.getMessage('modals.main.settings.sections.about.version.title')}{' '}
{variables.getMessage('modals.main.settings.sections.about.version.title')}{' '}
{variables.constants.VERSION}
</span>
<span className="subtitle">({this.state.update})</span>
<span className="subtitle">
{this.getMessage('modals.main.settings.sections.about.copyright')}{' '}
{variables.getMessage('modals.main.settings.sections.about.copyright')}{' '}
{variables.constants.COPYRIGHT_YEAR}-{new Date().getFullYear()}{' '}
<a
className="link"
@@ -165,7 +165,7 @@ export default class About extends PureComponent {
target="_blank"
rel="noopener noreferrer"
>
{this.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}
{variables.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}
</a>
</span>
</div>
@@ -173,7 +173,7 @@ export default class About extends PureComponent {
<div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
<span className="title">
{this.getMessage('modals.main.settings.sections.about.contact_us')}
{variables.getMessage('modals.main.settings.sections.about.contact_us')}
</span>
<div className="aboutContact">
<a
@@ -217,13 +217,13 @@ export default class About extends PureComponent {
<div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
<span className="title">
{this.getMessage('modals.main.settings.sections.about.support_mue')}
{variables.getMessage('modals.main.settings.sections.about.support_mue')}
</span>
<p>{this.getMessage('modals.main.settings.sections.about.support_subtitle')}</p>
<p>{variables.getMessage('modals.main.settings.sections.about.support_subtitle')}</p>
<div className="aboutContact">
<a className="donateButton" href={variables.constants.DONATE_LINK}>
<BiDonateHeart />
{this.getMessage('modals.main.settings.sections.about.support_donate')}
{variables.getMessage('modals.main.settings.sections.about.support_donate')}
</a>
<Tooltip title={'GitHub Sponsors'}>
<a
@@ -269,7 +269,7 @@ export default class About extends PureComponent {
style={{ flexFlow: 'column', alignItems: 'flex-start', minHeight: '70px' }}
>
<span className="title">
{this.getMessage('modals.main.settings.sections.about.resources_used.title')}
{variables.getMessage('modals.main.settings.sections.about.resources_used.title')}
</span>
<span className="subtitle">
<a
@@ -289,13 +289,13 @@ export default class About extends PureComponent {
>
Unsplash
</a>{' '}
({this.getMessage('modals.main.settings.sections.about.resources_used.bg_images')})
({variables.getMessage('modals.main.settings.sections.about.resources_used.bg_images')})
</span>
</div>
<div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
<span className="title">
{this.getMessage('modals.main.settings.sections.about.contributors')}
{variables.getMessage('modals.main.settings.sections.about.contributors')}
</span>
<p>{this.state.loading}</p>
<div className="contributorImages">
@@ -325,14 +325,14 @@ export default class About extends PureComponent {
<div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
<span className="title">
{this.getMessage('modals.main.settings.sections.about.supporters')}
{variables.getMessage('modals.main.settings.sections.about.supporters')}
</span>
<p>{this.state.loading}</p>
<div className="contributorImages">
{this.state.sponsors.map(({ handle, avatar }) => {
if (handle === 'empty') {
return (
<p>{this.getMessage('modals.main.settings.sections.about.no_supporters')}</p>
<p>{variables.getMessage('modals.main.settings.sections.about.no_supporters')}</p>
);
}
@@ -360,7 +360,7 @@ export default class About extends PureComponent {
}}
>
<span className="title">
{this.getMessage('modals.main.settings.sections.about.photographers')}
{variables.getMessage('modals.main.settings.sections.about.photographers')}
</span>
<p>{this.state.loading}</p>
<span className="subtitle">{this.state.photographers}</span>

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

@@ -28,16 +28,14 @@ export default class AdvancedSettings extends PureComponent {
}
render() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<>
<span className="mainTitle">
{getMessage('modals.main.settings.sections.advanced.title')}
{variables.getMessage('modals.main.settings.sections.advanced.title')}
</span>
<SettingsItem
title={getMessage('modals.main.settings.sections.advanced.offline_mode')}
subtitle={getMessage('modals.main.settings.sections.advanced.offline_subtitle')}
title={variables.getMessage('modals.main.settings.sections.advanced.offline_mode')}
subtitle={variables.getMessage('modals.main.settings.sections.advanced.offline_subtitle')}
>
<Switch name="offlineMode" element=".other" />
</SettingsItem>
@@ -45,35 +43,37 @@ export default class AdvancedSettings extends PureComponent {
<div className="settingsRow">
<div className="content">
<span className="title">
{getMessage('modals.main.settings.sections.advanced.data')}
{variables.getMessage('modals.main.settings.sections.advanced.data')}
</span>
<span className="subtitle">
{getMessage('modals.main.settings.sections.advanced.data_subtitle')}
{variables.getMessage('modals.main.settings.sections.advanced.data_subtitle')}
</span>
</div>
<div className="action activityButtons">
<button onClick={() => this.setState({ resetModal: true })}>
{getMessage('modals.main.settings.buttons.reset')}
{variables.getMessage('modals.main.settings.buttons.reset')}
<ResetIcon />
</button>
<button onClick={() => exportSettings()}>
{getMessage('modals.main.settings.buttons.export')}
{variables.getMessage('modals.main.settings.buttons.export')}
<ExportIcon />
</button>
<button onClick={() => document.getElementById('file-input').click()}>
{getMessage('modals.main.settings.buttons.import')}
{variables.getMessage('modals.main.settings.buttons.import')}
<ImportIcon />
</button>
</div>
</div>
) : null}
<SettingsItem
title={getMessage('modals.main.settings.sections.advanced.timezone.title')}
subtitle={getMessage('modals.main.settings.sections.advanced.timezone.subtitle')}
title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')}
subtitle={variables.getMessage(
'modals.main.settings.sections.advanced.timezone.subtitle',
)}
>
<Dropdown name="timezone" category="timezone" manual={true}>
<MenuItem value="auto">
{getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
{variables.getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
</MenuItem>
{time_zones.map((timezone) => (
<MenuItem value={timezone} key={timezone}>
@@ -83,10 +83,12 @@ export default class AdvancedSettings extends PureComponent {
</Dropdown>
</SettingsItem>
<SettingsItem
title={getMessage('modals.main.settings.sections.advanced.tab_name')}
subtitle={getMessage('modals.main.settings.sections.advanced.tab_name_subtitle')}
title={variables.getMessage('modals.main.settings.sections.advanced.tab_name')}
subtitle={variables.getMessage(
'modals.main.settings.sections.advanced.tab_name_subtitle',
)}
>
<Text name="tabName" default={getMessage('tabname')} category="other" />
<Text name="tabName" default={variables.getMessage('tabname')} category="other" />
</SettingsItem>
<FileUpload
id="file-input"
@@ -95,19 +97,23 @@ export default class AdvancedSettings extends PureComponent {
loadFunction={(e) => importSettings(e)}
/>
<SettingsItem
title={getMessage('modals.main.settings.sections.advanced.custom_css')}
subtitle={getMessage('modals.main.settings.sections.advanced.custom_css_subtitle')}
title={variables.getMessage('modals.main.settings.sections.advanced.custom_css')}
subtitle={variables.getMessage(
'modals.main.settings.sections.advanced.custom_css_subtitle',
)}
>
<Text name="customcss" textarea={true} category="other" />
</SettingsItem>
<SettingsItem
title={getMessage('modals.main.settings.sections.experimental.title')}
subtitle={getMessage('modals.main.settings.sections.advanced.experimental_warning')}
title={variables.getMessage('modals.main.settings.sections.experimental.title')}
subtitle={variables.getMessage(
'modals.main.settings.sections.advanced.experimental_warning',
)}
final={true}
>
<Switch
name="experimental"
text={getMessage('modals.main.settings.enabled')}
text={variables.getMessage('modals.main.settings.enabled')}
element=".other"
/>
</SettingsItem>

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

@@ -10,17 +10,15 @@ import SettingsItem from '../SettingsItem';
import { values } from 'modules/helpers/settings/modals';
export default function AppearanceSettings() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<>
<span className="mainTitle">
{getMessage('modals.main.settings.sections.appearance.title')}
{variables.getMessage('modals.main.settings.sections.appearance.title')}
</span>
<div className="settingsRow">
<div className="content">
<span className="title">
{getMessage('modals.main.settings.sections.appearance.theme.title')}
{variables.getMessage('modals.main.settings.sections.appearance.theme.title')}
</span>
<span className="subtitle">Change the theme of the Mue widgets and modals</span>
</div>
@@ -29,15 +27,15 @@ export default function AppearanceSettings() {
name="theme"
options={[
{
name: getMessage('modals.main.settings.sections.appearance.theme.auto'),
name: variables.getMessage('modals.main.settings.sections.appearance.theme.auto'),
value: 'auto',
},
{
name: getMessage('modals.main.settings.sections.appearance.theme.light'),
name: variables.getMessage('modals.main.settings.sections.appearance.theme.light'),
value: 'light',
},
{
name: getMessage('modals.main.settings.sections.appearance.theme.dark'),
name: variables.getMessage('modals.main.settings.sections.appearance.theme.dark'),
value: 'dark',
},
]}
@@ -48,66 +46,76 @@ export default function AppearanceSettings() {
<div className="settingsRow">
<div className="content">
<span className="title">
{getMessage('modals.main.settings.sections.appearance.font.title')}
{variables.getMessage('modals.main.settings.sections.appearance.font.title')}
</span>
<span className="subtitle">Change the font used in Mue</span>
</div>
<div className="action">
<Checkbox
name="fontGoogle"
text={getMessage('modals.main.settings.sections.appearance.font.google')}
text={variables.getMessage('modals.main.settings.sections.appearance.font.google')}
category="other"
/>
<Text
title={getMessage('modals.main.settings.sections.appearance.font.custom')}
title={variables.getMessage('modals.main.settings.sections.appearance.font.custom')}
name="font"
upperCaseFirst={true}
category="other"
/>
<Dropdown
label={getMessage('modals.main.settings.sections.appearance.font.weight.title')}
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">
{getMessage('modals.main.settings.sections.appearance.font.weight.thin')}
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.thin')}
</option>
<option value="200">
{getMessage('modals.main.settings.sections.appearance.font.weight.extra_light')}
{variables.getMessage(
'modals.main.settings.sections.appearance.font.weight.extra_light',
)}
</option>
<option value="300">
{getMessage('modals.main.settings.sections.appearance.font.weight.light')}
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.light')}
</option>
<option value="400">
{getMessage('modals.main.settings.sections.appearance.font.weight.normal')}
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.normal')}
</option>
<option value="500">
{getMessage('modals.main.settings.sections.appearance.font.weight.medium')}
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.medium')}
</option>
<option value="600">
{getMessage('modals.main.settings.sections.appearance.font.weight.semi_bold')}
{variables.getMessage(
'modals.main.settings.sections.appearance.font.weight.semi_bold',
)}
</option>
<option value="700">
{getMessage('modals.main.settings.sections.appearance.font.weight.bold')}
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.bold')}
</option>
<option value="800">
{getMessage('modals.main.settings.sections.appearance.font.weight.extra_bold')}
{variables.getMessage(
'modals.main.settings.sections.appearance.font.weight.extra_bold',
)}
</option>
</Dropdown>
<Dropdown
label={getMessage('modals.main.settings.sections.appearance.font.style.title')}
label={variables.getMessage(
'modals.main.settings.sections.appearance.font.style.title',
)}
name="fontstyle"
category="other"
>
<option value="normal">
{getMessage('modals.main.settings.sections.appearance.font.style.normal')}
{variables.getMessage('modals.main.settings.sections.appearance.font.style.normal')}
</option>
<option value="italic">
{getMessage('modals.main.settings.sections.appearance.font.style.italic')}
{variables.getMessage('modals.main.settings.sections.appearance.font.style.italic')}
</option>
<option value="oblique">
{getMessage('modals.main.settings.sections.appearance.font.style.oblique')}
{variables.getMessage('modals.main.settings.sections.appearance.font.style.oblique')}
</option>
</Dropdown>
</div>
@@ -134,12 +142,14 @@ export default function AppearanceSettings() {
</SettingsItem>
<SettingsItem
title={getMessage('modals.main.settings.sections.appearance.accessibility.title')}
title={variables.getMessage('modals.main.settings.sections.appearance.accessibility.title')}
subtitle="Accessibility settings for Mue"
final={true}
>
<Dropdown
label={getMessage('modals.main.settings.sections.appearance.accessibility.text_shadow')}
label={variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow',
)}
name="textBorder"
category="other"
>
@@ -148,12 +158,14 @@ export default function AppearanceSettings() {
<option value="none">None</option>
</Dropdown>
<Checkbox
text={getMessage('modals.main.settings.sections.appearance.accessibility.animations')}
text={variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.animations',
)}
name="animations"
category="other"
/>
<Slider
title={getMessage(
title={variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.toast_duration',
)}
name="toastDisplayTime"
@@ -163,7 +175,10 @@ export default function AppearanceSettings() {
max="5000"
marks={values('toast')}
display={
' ' + getMessage('modals.main.settings.sections.appearance.accessibility.milliseconds')
' ' +
variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.milliseconds',
)
}
/>
</SettingsItem>

12
src/components/modals/main/settings/sections/Changelog.jsx
View File

@@ -44,7 +44,7 @@ export default class Changelog extends PureComponent {
title: data.title,
date,
image: data.featured_image || null,
author: variables.language.getMessage(
author: variables.getMessage(
variables.languagecode,
'modals.main.settings.sections.changelog.by',
{
@@ -89,8 +89,6 @@ export default class Changelog extends PureComponent {
}
render() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
const errorMessage = (msg) => {
return (
<div className="emptyItems">
@@ -103,8 +101,10 @@ export default class Changelog extends PureComponent {
return errorMessage(
<>
<MdOutlineWifiOff />
<h1>{getMessage('modals.main.marketplace.offline.title')}</h1>
<p className="description">{getMessage('modals.main.marketplace.offline.description')}</p>
<h1>{variables.getMessage('modals.main.marketplace.offline.title')}</h1>
<p className="description">
{variables.getMessage('modals.main.marketplace.offline.description')}
</p>
</>,
);
}
@@ -123,7 +123,7 @@ export default class Changelog extends PureComponent {
return errorMessage(
<div className="loaderHolder">
<div id="loader"></div>
<span className="subtitle">{getMessage('modals.main.loading')}</span>
<span className="subtitle">{variables.getMessage('modals.main.loading')}</span>
</div>,
);
}

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

@@ -15,8 +15,6 @@ export default class DateSettings extends PureComponent {
}
render() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
const longSettings = (
<>
<Dropdown label="Long Format" name="longFormat" category="date">
@@ -26,12 +24,12 @@ export default class DateSettings extends PureComponent {
</Dropdown>
<Checkbox
name="dayofweek"
text={getMessage('modals.main.settings.sections.date.day_of_week')}
text={variables.getMessage('modals.main.settings.sections.date.day_of_week')}
category="date"
/>
<Checkbox
name="datenth"
text={getMessage('modals.main.settings.sections.date.datenth')}
text={variables.getMessage('modals.main.settings.sections.date.datenth')}
category="date"
/>
</>
@@ -40,7 +38,7 @@ export default class DateSettings extends PureComponent {
const shortSettings = (
<>
<Dropdown
label={getMessage('modals.main.settings.sections.date.short_format')}
label={variables.getMessage('modals.main.settings.sections.date.short_format')}
name="dateFormat"
category="date"
>
@@ -50,21 +48,21 @@ export default class DateSettings extends PureComponent {
</Dropdown>
<Dropdown
label={getMessage('modals.main.settings.sections.date.short_separator.title')}
label={variables.getMessage('modals.main.settings.sections.date.short_separator.title')}
name="shortFormat"
category="date"
>
<option value="dash">
{getMessage('modals.main.settings.sections.date.short_separator.dash')}
{variables.getMessage('modals.main.settings.sections.date.short_separator.dash')}
</option>
<option value="dots">
{getMessage('modals.main.settings.sections.date.short_separator.dots')}
{variables.getMessage('modals.main.settings.sections.date.short_separator.dots')}
</option>
<option value="gaps">
{getMessage('modals.main.settings.sections.date.short_separator.gaps')}
{variables.getMessage('modals.main.settings.sections.date.short_separator.gaps')}
</option>
<option value="slashes">
{getMessage('modals.main.settings.sections.date.short_separator.slashes')}
{variables.getMessage('modals.main.settings.sections.date.short_separator.slashes')}
</option>
</Dropdown>
</>
@@ -73,7 +71,7 @@ export default class DateSettings extends PureComponent {
return (
<>
<Header
title={getMessage('modals.main.settings.sections.date.title')}
title={variables.getMessage('modals.main.settings.sections.date.title')}
setting="date"
category="date"
element=".date"
@@ -81,8 +79,8 @@ export default class DateSettings extends PureComponent {
switch={true}
/>
<SettingsItem
title={getMessage('modals.main.settings.sections.time.type')}
subtitle={getMessage('modals.main.settings.sections.date.type.subtitle')}
title={variables.getMessage('modals.main.settings.sections.time.type')}
subtitle={variables.getMessage('modals.main.settings.sections.date.type.subtitle')}
>
<Dropdown
name="dateType"
@@ -90,31 +88,31 @@ export default class DateSettings extends PureComponent {
category="date"
>
<option value="long">
{getMessage('modals.main.settings.sections.date.type.long')}
{variables.getMessage('modals.main.settings.sections.date.type.long')}
</option>
<option value="short">
{getMessage('modals.main.settings.sections.date.type.short')}
{variables.getMessage('modals.main.settings.sections.date.type.short')}
</option>
</Dropdown>
</SettingsItem>
<SettingsItem
title={
this.state.dateType === 'long'
? getMessage('modals.main.settings.sections.date.type.long')
: getMessage('modals.main.settings.sections.date.type.short')
? variables.getMessage('modals.main.settings.sections.date.type.long')
: variables.getMessage('modals.main.settings.sections.date.type.short')
}
subtitle={getMessage('modals.main.settings.sections.date.type_settings')}
subtitle={variables.getMessage('modals.main.settings.sections.date.type_settings')}
final={true}
>
{this.state.dateType === 'long' ? longSettings : shortSettings}
<Checkbox
name="weeknumber"
text={getMessage('modals.main.settings.sections.date.week_number')}
text={variables.getMessage('modals.main.settings.sections.date.week_number')}
category="date"
/>
<Checkbox
name="datezero"
text={getMessage('modals.main.settings.sections.time.digital.zero')}
text={variables.getMessage('modals.main.settings.sections.time.digital.zero')}
category="date"
/>
</SettingsItem>

11
src/components/modals/main/settings/sections/Experimental.jsx
View File

@@ -9,19 +9,20 @@ import { values } from 'modules/helpers/settings/modals';
import SettingsItem from '../SettingsItem';
export default function ExperimentalSettings() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
const [eventType, setEventType] = useState();
const [eventName, setEventName] = useState();
return (
<>
<span className="mainTitle">
{getMessage('modals.main.settings.sections.experimental.title')}
{variables.getMessage('modals.main.settings.sections.experimental.title')}
</span>
<span className="subtitle">
{getMessage('modals.main.settings.sections.experimental.warning')}
{variables.getMessage('modals.main.settings.sections.experimental.warning')}
</span>
<SettingsItem title={getMessage('modals.main.settings.sections.experimental.developer')}>
<SettingsItem
title={variables.getMessage('modals.main.settings.sections.experimental.developer')}
>
<Checkbox name="debug" text="Debug hotkey (Ctrl + #)" element=".other" />
<Slider
title="Debug timeout"
@@ -52,7 +53,7 @@ export default function ExperimentalSettings() {
/>
</SettingsItem>
<SettingsItem
title={getMessage('modals.main.settings.sections.experimental.developer')}
title={variables.getMessage('modals.main.settings.sections.experimental.developer')}
final={true}
>
<button className="uploadbg" onClick={() => EventBus.dispatch(eventType, eventName)}>

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

@@ -24,12 +24,10 @@ export default class GreetingSettings extends PureComponent {
};
render() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<>
<Header
title={getMessage('modals.main.settings.sections.greeting.title')}
title={variables.getMessage('modals.main.settings.sections.greeting.title')}
setting="greeting"
category="greeting"
element=".greeting"
@@ -37,42 +35,44 @@ export default class GreetingSettings extends PureComponent {
switch={true}
/>
<SettingsItem
title={getMessage('modals.main.settings.additional_settings')}
subtitle={getMessage('modals.main.settings.sections.greeting.additional')}
title={variables.getMessage('modals.main.settings.additional_settings')}
subtitle={variables.getMessage('modals.main.settings.sections.greeting.additional')}
>
<Checkbox
name="events"
text={getMessage('modals.main.settings.sections.greeting.events')}
text={variables.getMessage('modals.main.settings.sections.greeting.events')}
category="greeting"
/>
<Checkbox
name="defaultGreetingMessage"
text={getMessage('modals.main.settings.sections.greeting.default')}
text={variables.getMessage('modals.main.settings.sections.greeting.default')}
category="greeting"
/>
<Text
title={getMessage('modals.main.settings.sections.greeting.name')}
title={variables.getMessage('modals.main.settings.sections.greeting.name')}
name="greetingName"
category="greeting"
/>
</SettingsItem>
<SettingsItem
title={getMessage('modals.main.settings.sections.greeting.birthday')}
subtitle={getMessage('modals.main.settings.sections.greeting.birthday_subtitle')}
title={variables.getMessage('modals.main.settings.sections.greeting.birthday')}
subtitle={variables.getMessage(
'modals.main.settings.sections.greeting.birthday_subtitle',
)}
final={true}
>
<Switch
name="birthdayenabled"
text={getMessage('modals.main.settings.enabled')}
text={variables.getMessage('modals.main.settings.enabled')}
category="greeting"
/>
<Checkbox
name="birthdayage"
text={getMessage('modals.main.settings.sections.greeting.birthday_age')}
text={variables.getMessage('modals.main.settings.sections.greeting.birthday_age')}
category="greeting"
/>
<p style={{ marginRight: 'auto' }}>
{getMessage('modals.main.settings.sections.greeting.birthday_date')}
{variables.getMessage('modals.main.settings.sections.greeting.birthday_date')}
</p>
<input
type="date"

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

@@ -5,8 +5,6 @@ import Header from '../Header';
import KeybindInput from '../KeybindInput';
export default class KeybindSettings extends PureComponent {
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
constructor() {
super();
this.state = {
@@ -22,7 +20,9 @@ export default class KeybindSettings extends PureComponent {
listen(type) {
const currentKeybinds = this.state.keybinds;
currentKeybinds[type] = this.getMessage('modals.main.settings.sections.keybinds.recording');
currentKeybinds[type] = variables.getMessage(
'modals.main.settings.sections.keybinds.recording',
);
this.setState({
keybinds: currentKeybinds,
cancelled: false,
@@ -111,7 +111,7 @@ export default class KeybindSettings extends PureComponent {
return (
<>
<Header
title={this.getMessage('modals.main.settings.sections.keybinds.title')}
title={variables.getMessage('modals.main.settings.sections.keybinds.title')}
setting="keybindsEnabled"
element=".other"
/>
@@ -120,7 +120,7 @@ export default class KeybindSettings extends PureComponent {
<tr>
<th>
<KeybindInput
name={this.getMessage(
name={variables.getMessage(
'modals.main.settings.sections.keybinds.background.favourite',
)}
state={this.state.keybinds}
@@ -130,7 +130,7 @@ export default class KeybindSettings extends PureComponent {
</th>
<th>
<KeybindInput
name={this.getMessage(
name={variables.getMessage(
'modals.main.settings.sections.keybinds.background.maximise',
)}
state={this.state.keybinds}
@@ -142,7 +142,7 @@ export default class KeybindSettings extends PureComponent {
<tr>
<th>
<KeybindInput
name={this.getMessage(
name={variables.getMessage(
'modals.main.settings.sections.keybinds.background.download',
)}
state={this.state.keybinds}
@@ -152,7 +152,7 @@ export default class KeybindSettings extends PureComponent {
</th>
<th>
<KeybindInput
name={this.getMessage(
name={variables.getMessage(
'modals.main.settings.sections.keybinds.background.show_info',
)}
state={this.state.keybinds}
@@ -164,7 +164,7 @@ export default class KeybindSettings extends PureComponent {
<tr>
<th>
<KeybindInput
name={this.getMessage(
name={variables.getMessage(
'modals.main.settings.sections.keybinds.background.show_info',
)}
state={this.state.keybinds}
@@ -174,7 +174,9 @@ export default class KeybindSettings extends PureComponent {
</th>
<th>
<KeybindInput
name={this.getMessage('modals.main.settings.sections.keybinds.quote.favourite')}
name={variables.getMessage(
'modals.main.settings.sections.keybinds.quote.favourite',
)}
state={this.state.keybinds}
setting="favouriteQuote"
action={(type, e) => this.action(type, e)}
@@ -184,7 +186,7 @@ export default class KeybindSettings extends PureComponent {
<tr>
<th>
<KeybindInput
name={this.getMessage('modals.main.settings.sections.keybinds.quote.copy')}
name={variables.getMessage('modals.main.settings.sections.keybinds.quote.copy')}
state={this.state.keybinds}
setting="copyQuote"
action={(type, e) => this.action(type, e)}
@@ -192,7 +194,7 @@ export default class KeybindSettings extends PureComponent {
</th>
<th>
<KeybindInput
name={this.getMessage('modals.main.settings.sections.keybinds.quote.tweet')}
name={variables.getMessage('modals.main.settings.sections.keybinds.quote.tweet')}
state={this.state.keybinds}
setting="tweetQuote"
action={(type, e) => this.action(type, e)}
@@ -202,7 +204,7 @@ export default class KeybindSettings extends PureComponent {
<tr>
<th>
<KeybindInput
name={this.getMessage('modals.main.settings.sections.keybinds.notes.pin')}
name={variables.getMessage('modals.main.settings.sections.keybinds.notes.pin')}
state={this.state.keybinds}
setting="pinNotes"
action={(type, e) => this.action(type, e)}
@@ -210,7 +212,7 @@ export default class KeybindSettings extends PureComponent {
</th>
<th>
<KeybindInput
name={this.getMessage('modals.main.settings.sections.keybinds.notes.copy')}
name={variables.getMessage('modals.main.settings.sections.keybinds.notes.copy')}
state={this.state.keybinds}
setting="copyNotes"
action={(type, e) => this.action(type, e)}
@@ -220,7 +222,7 @@ export default class KeybindSettings extends PureComponent {
<tr>
<th>
<KeybindInput
name={this.getMessage('modals.main.settings.sections.keybinds.search')}
name={variables.getMessage('modals.main.settings.sections.keybinds.search')}
state={this.state.keybinds}
setting="focusSearch"
action={(type, e) => this.action(type, e)}
@@ -228,7 +230,7 @@ export default class KeybindSettings extends PureComponent {
</th>
<th>
<KeybindInput
name={this.getMessage('modals.main.settings.sections.keybinds.quicklinks')}
name={variables.getMessage('modals.main.settings.sections.keybinds.quicklinks')}
state={this.state.keybinds}
setting="toggleQuicklinks"
action={(type, e) => this.action(type, e)}
@@ -238,7 +240,7 @@ export default class KeybindSettings extends PureComponent {
<tr>
<th>
<KeybindInput
name={this.getMessage('modals.main.settings.sections.keybinds.modal')}
name={variables.getMessage('modals.main.settings.sections.keybinds.modal')}
state={this.state.keybinds}
setting="toggleModal"
action={(type, e) => this.action(type, e)}

10
src/components/modals/main/settings/sections/Language.jsx
View File

@@ -6,14 +6,12 @@ import Radio from '../Radio';
import languages from 'modules/languages.json';
export default class LanguageSettings extends PureComponent {
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
constructor() {
super();
this.state = {
quoteLanguages: [
{
name: this.getMessage('modals.main.loading'),
name: variables.getMessage('modals.main.loading'),
value: 'loading',
},
],
@@ -50,7 +48,7 @@ export default class LanguageSettings extends PureComponent {
return this.setState({
quoteLanguages: [
{
name: this.getMessage('modals.main.marketplace.offline.description'),
name: variables.getMessage('modals.main.marketplace.offline.description'),
value: 'loading',
},
],
@@ -69,13 +67,13 @@ export default class LanguageSettings extends PureComponent {
return (
<>
<span className="mainTitle">
{this.getMessage('modals.main.settings.sections.language.title')}
{variables.getMessage('modals.main.settings.sections.language.title')}
</span>
<div className="languageSettings">
<Radio name="language" options={languages} element=".other" />
</div>
<span className="mainTitle">
{this.getMessage('modals.main.settings.sections.language.quote')}
{variables.getMessage('modals.main.settings.sections.language.quote')}
</span>
<div className="languageSettings">
<Radio name="quotelanguage" options={this.state.quoteLanguages} category="quote" />

18
src/components/modals/main/settings/sections/Message.jsx
View File

@@ -10,8 +10,6 @@ import Header from '../Header';
import EventBus from 'modules/helpers/eventbus';
export default class Message extends PureComponent {
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
constructor() {
super();
this.state = {
@@ -24,7 +22,7 @@ export default class Message extends PureComponent {
this.setState({
messages: [],
});
toast(this.getMessage(this.languagecode, 'toasts.reset'));
toast(variables.getMessage(this.languagecode, 'toasts.reset'));
EventBus.dispatch('refresh', 'message');
};
@@ -63,7 +61,7 @@ export default class Message extends PureComponent {
return (
<>
<Header
title={this.getMessage('modals.main.settings.sections.message.title')}
title={variables.getMessage('modals.main.settings.sections.message.title')}
setting="message"
category="message"
element=".message"
@@ -71,12 +69,12 @@ export default class Message extends PureComponent {
switch={true}
/>
<SettingsItem
title={this.getMessage('modals.main.settings.sections.message.text')}
title={variables.getMessage('modals.main.settings.sections.message.text')}
subtitle=""
final={true}
>
<button onClick={() => this.modifyMessage('add')}>
{this.getMessage('modals.main.settings.sections.message.add')} <MdAdd />
{variables.getMessage('modals.main.settings.sections.message.add')} <MdAdd />
</button>
</SettingsItem>
<div className="messagesContainer">
@@ -88,11 +86,13 @@ export default class Message extends PureComponent {
</div>
<div className="messageText">
<span className="subtitle">
{this.getMessage('modals.main.settings.sections.message.title')}
{variables.getMessage('modals.main.settings.sections.message.title')}
</span>
<TextareaAutosize
value={this.state.messages[index]}
placeholder={this.getMessage('modals.main.settings.sections.message.title')}
placeholder={variables.getMessage(
'modals.main.settings.sections.message.title',
)}
onChange={(e) => this.message(e, true, index)}
varient="outlined"
/>
@@ -118,7 +118,7 @@ export default class Message extends PureComponent {
<span className="title">No messages</span>
<span className="subtitle">Go ahead and add some.</span>
<button onClick={() => this.modifyMessage('add')}>
{this.getMessage('modals.main.settings.sections.message.add')}
{variables.getMessage('modals.main.settings.sections.message.add')}
<MdAdd />
</button>
</div>

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

@@ -9,7 +9,6 @@ import SettingsItem from '../SettingsItem';
import Header from '../Header';
export default function Navbar() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
const [showRefreshOptions, setShowRefreshOptions] = useState(
localStorage.getItem('refresh') === 'true',
);
@@ -17,57 +16,69 @@ export default function Navbar() {
return (
<>
<Header
title={getMessage('modals.main.settings.sections.appearance.navbar.title')}
title={variables.getMessage('modals.main.settings.sections.appearance.navbar.title')}
setting="navbar"
category="widgets"
zoomSetting="zoomNavbar"
zoomCategory="navbar"
/>
<SettingsItem
title={getMessage('modals.main.settings.additional_settings')}
subtitle={getMessage('modals.main.settings.sections.appearance.navbar.additional')}
title={variables.getMessage('modals.main.settings.additional_settings')}
subtitle={variables.getMessage(
'modals.main.settings.sections.appearance.navbar.additional',
)}
final={!showRefreshOptions}
>
<Checkbox
name="navbarHover"
text={getMessage('modals.main.settings.sections.appearance.navbar.hover')}
text={variables.getMessage('modals.main.settings.sections.appearance.navbar.hover')}
category="navbar"
/>
<Checkbox
name="notesEnabled"
text={getMessage('modals.main.settings.sections.appearance.navbar.notes')}
text={variables.getMessage('modals.main.settings.sections.appearance.navbar.notes')}
category="navbar"
/>
<Checkbox
name="view"
text={getMessage('modals.main.settings.sections.background.buttons.view')}
text={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
category="navbar"
/>
<Checkbox
name="refresh"
text={getMessage('modals.main.settings.sections.appearance.navbar.refresh')}
text={variables.getMessage('modals.main.settings.sections.appearance.navbar.refresh')}
category="navbar"
onChange={setShowRefreshOptions}
/>
<Checkbox name="todo" text={getMessage('widgets.navbar.todo.title')} category="navbar" />
<Checkbox
name="todo"
text={variables.getMessage('widgets.navbar.todo.title')}
category="navbar"
/>
</SettingsItem>
{showRefreshOptions ? (
<SettingsItem
title={getMessage('modals.main.settings.sections.appearance.navbar.refresh')}
subtitle={getMessage('modals.main.settings.sections.appearance.navbar.refresh_subtitle')}
title={variables.getMessage('modals.main.settings.sections.appearance.navbar.refresh')}
subtitle={variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_subtitle',
)}
final={true}
>
<Dropdown name="refreshOption" category="navbar">
<option value="page">
{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.page')}
{variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_options.page',
)}
</option>
<option value="background">
{getMessage('modals.main.settings.sections.background.title')}
{variables.getMessage('modals.main.settings.sections.background.title')}
</option>
<option value="quote">
{variables.getMessage('modals.main.settings.sections.quote.title')}
</option>
<option value="quote">{getMessage('modals.main.settings.sections.quote.title')}</option>
<option value="quotebackground">
{getMessage('modals.main.settings.sections.quote.title')} +{' '}
{getMessage('modals.main.settings.sections.background.title')}
{variables.getMessage('modals.main.settings.sections.quote.title')} +{' '}
{variables.getMessage('modals.main.settings.sections.background.title')}
</option>
</Dropdown>
</SettingsItem>

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

@@ -13,14 +13,13 @@ import Message from './overview_skeletons/Message';
import EventBus from 'modules/helpers/eventbus';
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
const widget_name = {
greeting: getMessage('modals.main.settings.sections.greeting.title'),
time: getMessage('modals.main.settings.sections.time.title'),
quicklinks: getMessage('modals.main.settings.sections.quicklinks.title'),
quote: getMessage('modals.main.settings.sections.quote.title'),
date: getMessage('modals.main.settings.sections.date.title'),
message: getMessage('modals.main.settings.sections.message.title'),
greeting: variables.getMessage('modals.main.settings.sections.greeting.title'),
time: variables.getMessage('modals.main.settings.sections.time.title'),
quicklinks: variables.getMessage('modals.main.settings.sections.quicklinks.title'),
quote: variables.getMessage('modals.main.settings.sections.quote.title'),
date: variables.getMessage('modals.main.settings.sections.date.title'),
message: variables.getMessage('modals.main.settings.sections.message.title'),
};
const SortableItem = sortableElement(({ value }) => (
@@ -66,7 +65,7 @@ export default class OrderSettings extends PureComponent {
items: JSON.parse(localStorage.getItem('order')),
});
toast(getMessage('toasts.reset'));
toast(variables.getMessage('toasts.reset'));
};
enabled = (setting) => {
@@ -106,10 +105,12 @@ export default class OrderSettings extends PureComponent {
render() {
return (
<>
<span className="mainTitle">{getMessage('modals.main.marketplace.product.overview')}</span>
{/*<span className="title">{getMessage('modals.main.marketplace.product.overview')}</span>
<span className="mainTitle">
{variables.getMessage('modals.main.marketplace.product.overview')}
</span>
{/*<span className="title">{variables.getMessage('modals.main.marketplace.product.overview')}</span>
<span className="link" onClick={this.reset}>
{getMessage('modals.main.settings.buttons.reset')}
{variables.getMessage('modals.main.settings.buttons.reset')}
</span>*/}
<div className="overviewGrid">
<div>
@@ -132,7 +133,9 @@ export default class OrderSettings extends PureComponent {
</div>
</div>
<div>
<span className="title">{getMessage('modals.main.settings.sections.order.title')}</span>
<span className="title">
{variables.getMessage('modals.main.settings.sections.order.title')}
</span>
<SortableContainer
onSortEnd={this.onSortEnd}
lockAxis="y"

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

@@ -7,13 +7,12 @@ import Checkbox from '../Checkbox';
import SettingsItem from '../SettingsItem';
export default function QuickLinks() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
const [textOnly, setTextOnly] = useState(localStorage.getItem('quicklinksText') === 'true');
return (
<>
<Header
title={getMessage('modals.main.settings.sections.quicklinks.title')}
title={variables.getMessage('modals.main.settings.sections.quicklinks.title')}
setting="quicklinksenabled"
category="quicklinks"
element=".quicklinks-container"
@@ -21,30 +20,30 @@ export default function QuickLinks() {
switch={true}
/>
<SettingsItem
title={getMessage('modals.main.settings.additional_settings')}
subtitle={getMessage('modals.main.settings.sections.quicklinks.additional')}
title={variables.getMessage('modals.main.settings.additional_settings')}
subtitle={variables.getMessage('modals.main.settings.sections.quicklinks.additional')}
final={true}
>
<Checkbox
name="quicklinksText"
text={getMessage('modals.main.settings.sections.quicklinks.text_only')}
text={variables.getMessage('modals.main.settings.sections.quicklinks.text_only')}
category="quicklinks"
onChange={(value) => setTextOnly(value)}
/>
<Checkbox
name="quicklinksddgProxy"
text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')}
text={variables.getMessage('modals.main.settings.sections.background.ddg_image_proxy')}
category="quicklinks"
disabled={textOnly}
/>
<Checkbox
name="quicklinksnewtab"
text={getMessage('modals.main.settings.sections.quicklinks.open_new')}
text={variables.getMessage('modals.main.settings.sections.quicklinks.open_new')}
category="quicklinks"
/>
<Checkbox
name="quicklinkstooltip"
text={getMessage('modals.main.settings.sections.quicklinks.tooltip')}
text={variables.getMessage('modals.main.settings.sections.quicklinks.tooltip')}
category="quicklinks"
disabled={textOnly}
/>

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

@@ -12,8 +12,6 @@ import { toast } from 'react-toastify';
import EventBus from 'modules/helpers/eventbus';
export default class QuoteSettings extends PureComponent {
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
constructor() {
super();
this.state = {
@@ -26,7 +24,7 @@ export default class QuoteSettings extends PureComponent {
marketplaceType = () => {
if (localStorage.getItem('quote_packs')) {
return (
<option value="quote_pack">{this.getMessage('modals.main.navbar.marketplace')}</option>
<option value="quote_pack">{variables.getMessage('modals.main.navbar.marketplace')}</option>
);
}
};
@@ -41,7 +39,7 @@ export default class QuoteSettings extends PureComponent {
},
],
});
toast(this.getMessage('toasts.reset'));
toast(variables.getMessage('toasts.reset'));
EventBus.dispatch('refresh', 'background');
};
@@ -98,26 +96,26 @@ export default class QuoteSettings extends PureComponent {
customSettings = (
<>
<SettingsItem
title={this.getMessage('modals.main.settings.sections.quote.custom')}
subtitle={this.getMessage('modals.main.settings.sections.quote.custom_subtitle')}
title={variables.getMessage('modals.main.settings.sections.quote.custom')}
subtitle={variables.getMessage('modals.main.settings.sections.quote.custom_subtitle')}
final={true}
>
<button onClick={() => this.modifyCustomQuote('add')}>
{this.getMessage('modals.main.settings.sections.quote.add')} <MdAdd />
{variables.getMessage('modals.main.settings.sections.quote.add')} <MdAdd />
</button>
</SettingsItem>
<table style={{ width: '100%' }}>
<tr>
<th>{this.getMessage('modals.main.settings.sections.quote.title')}</th>
<th>{this.getMessage('modals.main.settings.sections.quote.author')}</th>
<th>{this.getMessage('modals.main.settings.sections.quote.custom_buttons')}</th>
<th>{variables.getMessage('modals.main.settings.sections.quote.title')}</th>
<th>{variables.getMessage('modals.main.settings.sections.quote.author')}</th>
<th>{variables.getMessage('modals.main.settings.sections.quote.custom_buttons')}</th>
</tr>
{this.state.customQuote.map((_url, index) => (
<tr key={index}>
<th>
<TextareaAutosize
value={this.state.customQuote[index].quote}
placeholder={this.getMessage('modals.main.settings.sections.quote.title')}
placeholder={variables.getMessage('modals.main.settings.sections.quote.title')}
onChange={(e) => this.customQuote(e, true, index, 'quote')}
varient="outlined"
style={{ marginRight: '10px' }}
@@ -126,7 +124,7 @@ export default class QuoteSettings extends PureComponent {
<th>
<TextareaAutosize
value={this.state.customQuote[index].author}
placeholder={this.getMessage('modals.main.settings.sections.quote.author')}
placeholder={variables.getMessage('modals.main.settings.sections.quote.author')}
onChange={(e) => this.customQuote(e, true, index, 'author')}
varient="outlined"
/>
@@ -157,14 +155,14 @@ export default class QuoteSettings extends PureComponent {
{this.state.sourceSection ? (
<span className="mainTitle" onClick={() => this.setState({ sourceSection: false })}>
<span className="backTitle">
{this.getMessage('modals.main.settings.sections.quote.title')}
{variables.getMessage('modals.main.settings.sections.quote.title')}
</span>
<MdOutlineKeyboardArrowRight />{' '}
{this.getMessage('modals.main.settings.sections.background.source.title')}
{variables.getMessage('modals.main.settings.sections.background.source.title')}
</span>
) : (
<Header
title={this.getMessage('modals.main.settings.sections.quote.title')}
title={variables.getMessage('modals.main.settings.sections.quote.title')}
setting="quote"
category="quote"
element=".quotediv"
@@ -177,26 +175,26 @@ export default class QuoteSettings extends PureComponent {
<MdSource />
<div className="content">
<span className="title">
{this.getMessage('modals.main.settings.sections.background.source.title')}
{variables.getMessage('modals.main.settings.sections.background.source.title')}
</span>
<span className="subtitle">
{this.getMessage('modals.main.settings.sections.quote.source_subtitle')}
{variables.getMessage('modals.main.settings.sections.quote.source_subtitle')}
</span>
</div>
</div>
<div className="action">
<Dropdown
name="quoteType"
label={this.getMessage('modals.main.settings.sections.background.type.title')}
label={variables.getMessage('modals.main.settings.sections.background.type.title')}
onChange={(value) => this.setState({ quoteType: value })}
category="quote"
>
{this.marketplaceType()}
<option value="api">
{this.getMessage('modals.main.settings.sections.background.type.api')}
{variables.getMessage('modals.main.settings.sections.background.type.api')}
</option>
<option value="custom">
{this.getMessage('modals.main.settings.sections.quote.custom')}
{variables.getMessage('modals.main.settings.sections.quote.custom')}
</option>
</Dropdown>
</div>
@@ -204,60 +202,66 @@ export default class QuoteSettings extends PureComponent {
{!this.state.sourceSection ? (
<>
<SettingsItem
title={this.getMessage('modals.main.settings.sections.quote.buttons.title')}
subtitle={this.getMessage('modals.main.settings.sections.quote.buttons.subtitle')}
title={variables.getMessage('modals.main.settings.sections.quote.buttons.title')}
subtitle={variables.getMessage(
'modals.main.settings.sections.quote.buttons.subtitle',
)}
>
<Checkbox
name="copyButton"
text={this.getMessage('modals.main.settings.sections.quote.buttons.copy')}
text={variables.getMessage('modals.main.settings.sections.quote.buttons.copy')}
category="quote"
/>
<Checkbox
name="quoteShareButton"
text={this.getMessage('widgets.quote.share')}
text={variables.getMessage('widgets.quote.share')}
category="quote"
/>
<Checkbox
name="favouriteQuoteEnabled"
text={this.getMessage('modals.main.settings.sections.quote.buttons.favourite')}
text={variables.getMessage('modals.main.settings.sections.quote.buttons.favourite')}
category="quote"
/>
</SettingsItem>
<SettingsItem
title={this.getMessage('modals.main.settings.additional_settings')}
subtitle={this.getMessage('modals.main.settings.sections.quote.additional')}
title={variables.getMessage('modals.main.settings.additional_settings')}
subtitle={variables.getMessage('modals.main.settings.sections.quote.additional')}
>
<Dropdown
label={this.getMessage('modals.main.settings.sections.background.interval.title')}
label={variables.getMessage(
'modals.main.settings.sections.background.interval.title',
)}
name="quotechange"
>
<option value="refresh">{this.getMessage('tabname')}</option>
<option value="refresh">{variables.getMessage('tabname')}</option>
<option value="60000">
{this.getMessage('modals.main.settings.sections.background.interval.minute')}
{variables.getMessage('modals.main.settings.sections.background.interval.minute')}
</option>
<option value="1800000">
{this.getMessage('modals.main.settings.sections.background.interval.half_hour')}
{variables.getMessage(
'modals.main.settings.sections.background.interval.half_hour',
)}
</option>
<option value="3600000">
{this.getMessage('modals.main.settings.sections.background.interval.hour')}
{variables.getMessage('modals.main.settings.sections.background.interval.hour')}
</option>
<option value="86400000">
{this.getMessage('modals.main.settings.sections.background.interval.day')}
{variables.getMessage('modals.main.settings.sections.background.interval.day')}
</option>
<option value="604800000">{this.getMessage('widgets.date.week')}</option>
<option value="604800000">{variables.getMessage('widgets.date.week')}</option>
<option value="2628000000">
{this.getMessage('modals.main.settings.sections.background.interval.month')}
{variables.getMessage('modals.main.settings.sections.background.interval.month')}
</option>
</Dropdown>
<Checkbox
name="authorLink"
text={this.getMessage('modals.main.settings.sections.quote.author_link')}
text={variables.getMessage('modals.main.settings.sections.quote.author_link')}
element=".other"
/>
<Checkbox
name="authorImg"
text={this.getMessage('modals.main.settings.sections.quote.author_img')}
text={variables.getMessage('modals.main.settings.sections.quote.author_img')}
element=".other"
/>
</SettingsItem>

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

@@ -15,8 +15,6 @@ import searchEngines from 'components/widgets/search/search_engines.json';
import autocompleteProviders from 'components/widgets/search/autocomplete_providers.json';
export default class SearchSettings extends PureComponent {
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
constructor() {
super();
this.state = {
@@ -32,7 +30,7 @@ export default class SearchSettings extends PureComponent {
customValue: '',
});
toast(this.getMessage('toasts.reset'));
toast(variables.getMessage('toasts.reset'));
}
componentDidMount() {
@@ -75,44 +73,46 @@ export default class SearchSettings extends PureComponent {
return (
<>
<Header
title={this.getMessage('modals.main.settings.sections.search.title')}
title={variables.getMessage('modals.main.settings.sections.search.title')}
setting="searchBar"
category="widgets"
switch={true}
/>
<SettingsItem
title={this.getMessage('modals.main.settings.additional_settings')}
subtitle={this.getMessage('modals.main.settings.sections.search.additional')}
title={variables.getMessage('modals.main.settings.additional_settings')}
subtitle={variables.getMessage('modals.main.settings.sections.search.additional')}
>
{/* not supported on firefox */}
{navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
<Checkbox
name="voiceSearch"
text={this.getMessage('modals.main.settings.sections.search.voice_search')}
text={variables.getMessage('modals.main.settings.sections.search.voice_search')}
category="search"
/>
) : null}
<Checkbox
name="searchDropdown"
text={this.getMessage('modals.main.settings.sections.search.dropdown')}
text={variables.getMessage('modals.main.settings.sections.search.dropdown')}
category="search"
element=".other"
/>
<Checkbox
name="searchFocus"
text={this.getMessage('modals.main.settings.sections.search.focus')}
text={variables.getMessage('modals.main.settings.sections.search.focus')}
category="search"
element=".other"
/>
<Checkbox
name="autocomplete"
text={this.getMessage('modals.main.settings.sections.search.autocomplete')}
text={variables.getMessage('modals.main.settings.sections.search.autocomplete')}
category="search"
/>
</SettingsItem>
<SettingsItem
title={this.getMessage('modals.main.settings.sections.search.search_engine')}
subtitle={this.getMessage('modals.main.settings.sections.search.search_engine_subtitle')}
title={variables.getMessage('modals.main.settings.sections.search.search_engine')}
subtitle={variables.getMessage(
'modals.main.settings.sections.search.search_engine_subtitle',
)}
>
<Dropdown
name="searchEngine"
@@ -125,14 +125,14 @@ export default class SearchSettings extends PureComponent {
</MenuItem>
))}
<MenuItem value="custom">
{this.getMessage('modals.main.settings.sections.search.custom').split(' ')[0]}
{variables.getMessage('modals.main.settings.sections.search.custom').split(' ')[0]}
</MenuItem>
</Dropdown>
</SettingsItem>
<div style={{ display: this.state.customDisplay }}>
<SettingsItem title={this.getMessage('modals.main.settings.sections.search.custom')}>
<SettingsItem title={variables.getMessage('modals.main.settings.sections.search.custom')}>
<TextField
label={this.getMessage('modals.main.settings.sections.search.custom')}
label={variables.getMessage('modals.main.settings.sections.search.custom')}
value={this.state.customValue}
onInput={(e) => this.setState({ customValue: e.target.value })}
varient="outlined"
@@ -140,14 +140,14 @@ export default class SearchSettings extends PureComponent {
/>
<p style={{ marginTop: '0px' }}>
<span className="link" onClick={() => this.resetSearch()}>
{this.getMessage('modals.main.settings.buttons.reset')}
{variables.getMessage('modals.main.settings.buttons.reset')}
</span>
</p>
</SettingsItem>
</div>
<SettingsItem
title={this.getMessage('modals.main.settings.sections.search.autocomplete_provider')}
subtitle={this.getMessage(
title={variables.getMessage('modals.main.settings.sections.search.autocomplete_provider')}
subtitle={variables.getMessage(
'modals.main.settings.sections.search.autocomplete_provider_subtitle',
)}
final={true}

52
src/components/modals/main/settings/sections/Stats.jsx
View File

@@ -25,8 +25,6 @@ const achievementLanguage = {
tr_TR: translations.tr_TR,
};
console.log(achievementLanguage.en_GB);
export default class Stats extends PureComponent {
constructor() {
super();
@@ -94,22 +92,20 @@ export default class Stats extends PureComponent {
}
render() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
if (localStorage.getItem('stats') === 'false') {
return (
<>
<span className="mainTitle">
{getMessage('modals.main.settings.sections.stats.title')}
{variables.getMessage('modals.main.settings.sections.stats.title')}
</span>
<SettingsItem
title={getMessage('modals.main.settings.reminder.title')}
subtitle={getMessage('modals.main.settings.sections.stats.warning')}
title={variables.getMessage('modals.main.settings.reminder.title')}
subtitle={variables.getMessage('modals.main.settings.sections.stats.warning')}
final={true}
>
<Switch
name="stats"
text={getMessage('modals.main.settings.sections.stats.usage')}
text={variables.getMessage('modals.main.settings.sections.stats.usage')}
category="stats"
/>
</SettingsItem>
@@ -131,25 +127,27 @@ export default class Stats extends PureComponent {
return (
<>
<span className="mainTitle">{getMessage('modals.main.settings.sections.stats.title')}</span>
<span className="mainTitle">
{variables.getMessage('modals.main.settings.sections.stats.title')}
</span>
<SettingsItem
title={getMessage('modals.main.settings.reminder.title')}
subtitle={getMessage('modals.main.settings.sections.stats.warning')}
title={variables.getMessage('modals.main.settings.reminder.title')}
subtitle={variables.getMessage('modals.main.settings.sections.stats.warning')}
>
<Switch
name="stats"
text={getMessage('modals.main.settings.sections.stats.usage')}
text={variables.getMessage('modals.main.settings.sections.stats.usage')}
category="stats"
/>
</SettingsItem>
<div className="statsGrid">
<div className="statSection leftPanel">
<span className="title">
{getMessage('modals.main.settings.sections.stats.achievements')}
{variables.getMessage('modals.main.settings.sections.stats.achievements')}
</span>
<br />
<span className="subtitle">
{variables.language.getMessage(
{variables.getMessage(
variables.languagecode,
'modals.main.settings.sections.stats.unlocked',
{
@@ -168,41 +166,53 @@ export default class Stats extends PureComponent {
<div className="statSection rightPanel">
<MdShowChart />
<span className="subtitle">
{getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}{' '}
{variables.getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}{' '}
</span>
<span>{this.state.stats['tabs-opened'] || 0}</span>
<span className="subtitle">
{getMessage('modals.main.settings.sections.stats.sections.backgrounds_favourited')}{' '}
{variables.getMessage(
'modals.main.settings.sections.stats.sections.backgrounds_favourited',
)}{' '}
</span>
<span>
{this.state.stats.feature ? this.state.stats.feature['background-favourite'] || 0 : 0}
</span>
<span className="subtitle">
{getMessage('modals.main.settings.sections.stats.sections.backgrounds_downloaded')}{' '}
{variables.getMessage(
'modals.main.settings.sections.stats.sections.backgrounds_downloaded',
)}{' '}
</span>
<span>
{this.state.stats.feature ? this.state.stats.feature['background-download'] || 0 : 0}
</span>
<span className="subtitle">
{getMessage('modals.main.settings.sections.stats.sections.quotes_favourited')}{' '}
{variables.getMessage(
'modals.main.settings.sections.stats.sections.quotes_favourited',
)}{' '}
</span>
<span>
{this.state.stats.feature ? this.state.stats.feature['quoted-favourite'] || 0 : 0}
</span>
<span className="subtitle">
{getMessage('modals.main.settings.sections.stats.sections.quicklinks_added')}{' '}
{variables.getMessage(
'modals.main.settings.sections.stats.sections.quicklinks_added',
)}{' '}
</span>
<span>
{this.state.stats.feature ? this.state.stats.feature['quicklink-add'] || 0 : 0}
</span>
<span className="subtitle">
{getMessage('modals.main.settings.sections.stats.sections.settings_changed')}{' '}
{variables.getMessage(
'modals.main.settings.sections.stats.sections.settings_changed',
)}{' '}
</span>
<span>
{this.state.stats.setting ? Object.keys(this.state.stats.setting).length : 0}
</span>
<span className="subtitle">
{getMessage('modals.main.settings.sections.stats.sections.addons_installed')}{' '}
{variables.getMessage(
'modals.main.settings.sections.stats.sections.addons_installed',
)}{' '}
</span>
<span>
{this.state.stats.marketplace ? this.state.stats.marketplace['install'] : 0}

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

@@ -24,25 +24,25 @@ export default class TimeSettings extends PureComponent {
}
render() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
let timeSettings = null;
const digitalSettings = (
<SettingsItem
title={getMessage('modals.main.settings.sections.time.digital.title')}
subtitle={getMessage('modals.main.settings.sections.time.digital.subtitle')}
title={variables.getMessage('modals.main.settings.sections.time.digital.title')}
subtitle={variables.getMessage('modals.main.settings.sections.time.digital.subtitle')}
final={true}
>
<Radio
name="timeformat"
options={[
{
name: getMessage('modals.main.settings.sections.time.digital.twentyfourhour'),
name: variables.getMessage(
'modals.main.settings.sections.time.digital.twentyfourhour',
),
value: 'twentyfourhour',
},
{
name: getMessage('modals.main.settings.sections.time.digital.twelvehour'),
name: variables.getMessage('modals.main.settings.sections.time.digital.twelvehour'),
value: 'twelvehour',
},
]}
@@ -51,12 +51,12 @@ export default class TimeSettings extends PureComponent {
/>
<Checkbox
name="seconds"
text={getMessage('modals.main.settings.sections.time.digital.seconds')}
text={variables.getMessage('modals.main.settings.sections.time.digital.seconds')}
category="clock"
/>
<Checkbox
name="zero"
text={getMessage('modals.main.settings.sections.time.digital.zero')}
text={variables.getMessage('modals.main.settings.sections.time.digital.zero')}
category="clock"
/>
</SettingsItem>
@@ -64,33 +64,33 @@ export default class TimeSettings extends PureComponent {
const analogSettings = (
<SettingsItem
title={getMessage('modals.main.settings.sections.time.analogue.title')}
subtitle={getMessage('modals.main.settings.sections.time.analogue.subtitle')}
title={variables.getMessage('modals.main.settings.sections.time.analogue.title')}
subtitle={variables.getMessage('modals.main.settings.sections.time.analogue.subtitle')}
final={true}
>
<Checkbox
name="secondHand"
text={getMessage('modals.main.settings.sections.time.analogue.second_hand')}
text={variables.getMessage('modals.main.settings.sections.time.analogue.second_hand')}
category="clock"
/>
<Checkbox
name="minuteHand"
text={getMessage('modals.main.settings.sections.time.analogue.minute_hand')}
text={variables.getMessage('modals.main.settings.sections.time.analogue.minute_hand')}
category="clock"
/>
<Checkbox
name="hourHand"
text={getMessage('modals.main.settings.sections.time.analogue.hour_hand')}
text={variables.getMessage('modals.main.settings.sections.time.analogue.hour_hand')}
category="clock"
/>
<Checkbox
name="hourMarks"
text={getMessage('modals.main.settings.sections.time.analogue.hour_marks')}
text={variables.getMessage('modals.main.settings.sections.time.analogue.hour_marks')}
category="clock"
/>
<Checkbox
name="minuteMarks"
text={getMessage('modals.main.settings.sections.time.analogue.minute_marks')}
text={variables.getMessage('modals.main.settings.sections.time.analogue.minute_marks')}
category="clock"
/>
</SettingsItem>
@@ -99,7 +99,9 @@ export default class TimeSettings extends PureComponent {
const verticalClock = (
<>
<SettingsItem
title={getMessage('modals.main.settings.sections.time.vertical_clock.change_hour_colour')}
title={variables.getMessage(
'modals.main.settings.sections.time.vertical_clock.change_hour_colour',
)}
subtitle=""
>
<div className="colourInput">
@@ -115,11 +117,11 @@ export default class TimeSettings extends PureComponent {
</label>
</div>
<span className="link" onClick={() => localStorage.setItem('hourColour', '#ffffff')}>
{getMessage('modals.main.settings.buttons.reset')}
{variables.getMessage('modals.main.settings.buttons.reset')}
</span>
</SettingsItem>
<SettingsItem
title={getMessage(
title={variables.getMessage(
'modals.main.settings.sections.time.vertical_clock.change_minute_colour',
)}
subtitle=""
@@ -137,7 +139,7 @@ export default class TimeSettings extends PureComponent {
</label>
</div>
<span className="link" onClick={() => localStorage.setItem('minuteColour', '#ffffff')}>
{getMessage('modals.main.settings.buttons.reset')}
{variables.getMessage('modals.main.settings.buttons.reset')}
</span>
</SettingsItem>
{digitalSettings}
@@ -155,7 +157,7 @@ export default class TimeSettings extends PureComponent {
return (
<>
<Header
title={getMessage('modals.main.settings.sections.time.title')}
title={variables.getMessage('modals.main.settings.sections.time.title')}
setting="time"
category="clock"
element=".clock-container"
@@ -163,8 +165,8 @@ export default class TimeSettings extends PureComponent {
switch={true}
/>
<SettingsItem
title={getMessage('modals.main.settings.sections.time.type')}
subtitle={getMessage('modals.main.settings.sections.time.type_subtitle')}
title={variables.getMessage('modals.main.settings.sections.time.type')}
subtitle={variables.getMessage('modals.main.settings.sections.time.type_subtitle')}
final={this.state.timeType === 'percentageComplete'}
>
<Dropdown
@@ -173,16 +175,16 @@ export default class TimeSettings extends PureComponent {
category="clock"
>
<option value="digital">
{getMessage('modals.main.settings.sections.time.digital.title')}
{variables.getMessage('modals.main.settings.sections.time.digital.title')}
</option>
<option value="analogue">
{getMessage('modals.main.settings.sections.time.analogue.title')}
{variables.getMessage('modals.main.settings.sections.time.analogue.title')}
</option>
<option value="percentageComplete">
{getMessage('modals.main.settings.sections.time.percentage_complete')}
{variables.getMessage('modals.main.settings.sections.time.percentage_complete')}
</option>
<option value="verticalClock">
{getMessage('modals.main.settings.sections.time.vertical_clock.title')}
{variables.getMessage('modals.main.settings.sections.time.vertical_clock.title')}
</option>
</Dropdown>
</SettingsItem>

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

@@ -59,12 +59,10 @@ export default class TimeSettings extends PureComponent {
}
render() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<>
<Header
title={getMessage('modals.main.settings.sections.weather.title')}
title={variables.getMessage('modals.main.settings.sections.weather.title')}
setting="weatherEnabled"
category="widgets"
zoomSetting="zoomWeather"
@@ -79,9 +77,11 @@ export default class TimeSettings extends PureComponent {
<option value="4">Custom</option>
</Dropdown>
</SettingsItem>
<SettingsItem title={getMessage('modals.main.settings.sections.weather.location')}>
<SettingsItem
title={variables.getMessage('modals.main.settings.sections.weather.location')}
>
<TextField
label={getMessage('modals.main.settings.sections.weather.location')}
label={variables.getMessage('modals.main.settings.sections.weather.location')}
value={this.state.location}
onChange={(e) => this.changeLocation(e)}
placeholder="London"
@@ -89,27 +89,33 @@ export default class TimeSettings extends PureComponent {
InputLabelProps={{ shrink: true }}
/>
<span className="link" onClick={() => this.getAuto()}>
{getMessage('modals.main.settings.sections.weather.auto')}
{variables.getMessage('modals.main.settings.sections.weather.auto')}
</span>
</SettingsItem>
<SettingsItem title={getMessage('modals.main.settings.sections.weather.temp_format.title')}>
<SettingsItem
title={variables.getMessage('modals.main.settings.sections.weather.temp_format.title')}
>
<Radio
name="tempformat"
options={[
{
name:
getMessage('modals.main.settings.sections.weather.temp_format.celsius') + ' (°C)',
variables.getMessage(
'modals.main.settings.sections.weather.temp_format.celsius',
) + ' (°C)',
value: 'celsius',
},
{
name:
getMessage('modals.main.settings.sections.weather.temp_format.fahrenheit') +
' (°F)',
variables.getMessage(
'modals.main.settings.sections.weather.temp_format.fahrenheit',
) + ' (°F)',
value: 'fahrenheit',
},
{
name:
getMessage('modals.main.settings.sections.weather.temp_format.kelvin') + ' (K)',
variables.getMessage('modals.main.settings.sections.weather.temp_format.kelvin') +
' (K)',
value: 'kelvin',
},
]}
@@ -120,32 +126,44 @@ export default class TimeSettings extends PureComponent {
<SettingsItem title="Custom Settings">
<Checkbox
name="showlocation"
text={getMessage('modals.main.settings.sections.weather.extra_info.show_location')}
text={variables.getMessage(
'modals.main.settings.sections.weather.extra_info.show_location',
)}
category="weather"
/>
<Checkbox
name="weatherdescription"
text={getMessage('modals.main.settings.sections.weather.extra_info.show_description')}
text={variables.getMessage(
'modals.main.settings.sections.weather.extra_info.show_description',
)}
category="weather"
/>
<Checkbox
name="cloudiness"
text={getMessage('modals.main.settings.sections.weather.extra_info.cloudiness')}
text={variables.getMessage(
'modals.main.settings.sections.weather.extra_info.cloudiness',
)}
category="weather"
/>
<Checkbox
name="humidity"
text={getMessage('modals.main.settings.sections.weather.extra_info.humidity')}
text={variables.getMessage(
'modals.main.settings.sections.weather.extra_info.humidity',
)}
category="weather"
/>
<Checkbox
name="visibility"
text={getMessage('modals.main.settings.sections.weather.extra_info.visibility')}
text={variables.getMessage(
'modals.main.settings.sections.weather.extra_info.visibility',
)}
category="weather"
/>
<Checkbox
name="windspeed"
text={getMessage('modals.main.settings.sections.weather.extra_info.wind_speed')}
text={variables.getMessage(
'modals.main.settings.sections.weather.extra_info.wind_speed',
)}
category="weather"
onChange={() =>
this.setState({
@@ -155,24 +173,30 @@ export default class TimeSettings extends PureComponent {
/>
<Checkbox
name="windDirection"
text={getMessage('modals.main.settings.sections.weather.extra_info.wind_direction')}
text={variables.getMessage(
'modals.main.settings.sections.weather.extra_info.wind_direction',
)}
category="weather"
disabled={this.state.windSpeed}
/>
<Checkbox
name="mintemp"
text={getMessage('modals.main.settings.sections.weather.extra_info.min_temp')}
text={variables.getMessage(
'modals.main.settings.sections.weather.extra_info.min_temp',
)}
category="weather"
/>
<Checkbox
name="maxtemp"
text={getMessage('modals.main.settings.sections.weather.extra_info.max_temp')}
text={variables.getMessage(
'modals.main.settings.sections.weather.extra_info.max_temp',
)}
category="weather"
/>
<Checkbox name="feelsliketemp" text={'Feels like temperature'} category="weather" />
<Checkbox
name="atmosphericpressure"
text={getMessage(
text={variables.getMessage(
'modals.main.settings.sections.weather.extra_info.atmospheric_pressure',
)}
category="weather"

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

@@ -33,8 +33,6 @@ export default class AdvancedSettings extends PureComponent {
}
render() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
/*if (this.state.showData) {
return <Data goBack={() => this.setState({ showData: false })} />;
}*/
@@ -42,7 +40,7 @@ export default class AdvancedSettings extends PureComponent {
return (
<>
<span className="mainTitle">
{getMessage('modals.main.settings.sections.advanced.title')}
{variables.getMessage('modals.main.settings.sections.advanced.title')}
</span>
{/* {localStorage.getItem('welcomePreview') !== 'true' ? (
<div className="moreSettings" onClick={() => this.setState({ showData: true })}>
@@ -50,7 +48,7 @@ export default class AdvancedSettings extends PureComponent {
<MdDataUsage />
<div className="content">
<span className="title">
{getMessage('modals.main.settings.sections.advanced.data')}
{variables.getMessage('modals.main.settings.sections.advanced.data')}
</span>
<span className="subtitle">
Sync, export, import etc your data. You have control, this is Mue.
@@ -64,8 +62,8 @@ export default class AdvancedSettings extends PureComponent {
</div>
) : null} */}
<SettingsItem
title={getMessage('modals.main.settings.sections.advanced.offline_mode')}
subtitle={getMessage('modals.main.settings.sections.advanced.offline_subtitle')}
title={variables.getMessage('modals.main.settings.sections.advanced.offline_mode')}
subtitle={variables.getMessage('modals.main.settings.sections.advanced.offline_subtitle')}
>
<Switch name="offlineMode" element=".other" />
</SettingsItem>
@@ -73,35 +71,37 @@ export default class AdvancedSettings extends PureComponent {
<div className="settingsRow">
<div className="content">
<span className="title">
{getMessage('modals.main.settings.sections.advanced.data')}
{variables.getMessage('modals.main.settings.sections.advanced.data')}
</span>
<span className="subtitle">
{getMessage('modals.main.settings.sections.advanced.data_subtitle')}
{variables.getMessage('modals.main.settings.sections.advanced.data_subtitle')}
</span>
</div>
<div className="action activityButtons">
<button onClick={() => this.setState({ resetModal: true })}>
{getMessage('modals.main.settings.buttons.reset')}
{variables.getMessage('modals.main.settings.buttons.reset')}
<ResetIcon />
</button>
<button onClick={() => exportSettings()}>
{getMessage('modals.main.settings.buttons.export')}
{variables.getMessage('modals.main.settings.buttons.export')}
<ExportIcon />
</button>
<button onClick={() => document.getElementById('file-input').click()}>
{getMessage('modals.main.settings.buttons.import')}
{variables.getMessage('modals.main.settings.buttons.import')}
<ImportIcon />
</button>
</div>
</div>
) : null}
<SettingsItem
title={getMessage('modals.main.settings.sections.advanced.timezone.title')}
subtitle={getMessage('modals.main.settings.sections.advanced.timezone.subtitle')}
title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')}
subtitle={variables.getMessage(
'modals.main.settings.sections.advanced.timezone.subtitle',
)}
>
<Dropdown name="timezone" category="timezone" manual={true}>
<MenuItem value="auto">
{getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
{variables.getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
</MenuItem>
{time_zones.map((timezone) => (
<MenuItem value={timezone} key={timezone}>
@@ -111,10 +111,12 @@ export default class AdvancedSettings extends PureComponent {
</Dropdown>
</SettingsItem>
<SettingsItem
title={getMessage('modals.main.settings.sections.advanced.tab_name')}
subtitle={getMessage('modals.main.settings.sections.advanced.tab_name_subtitle')}
title={variables.getMessage('modals.main.settings.sections.advanced.tab_name')}
subtitle={variables.getMessage(
'modals.main.settings.sections.advanced.tab_name_subtitle',
)}
>
<Text name="tabName" default={getMessage('tabname')} category="other" />
<Text name="tabName" default={variables.getMessage('tabname')} category="other" />
</SettingsItem>
<FileUpload
id="file-input"
@@ -123,19 +125,23 @@ export default class AdvancedSettings extends PureComponent {
loadFunction={(e) => importSettings(e)}
/>
<SettingsItem
title={getMessage('modals.main.settings.sections.advanced.custom_css')}
subtitle={getMessage('modals.main.settings.sections.advanced.custom_css_subtitle')}
title={variables.getMessage('modals.main.settings.sections.advanced.custom_css')}
subtitle={variables.getMessage(
'modals.main.settings.sections.advanced.custom_css_subtitle',
)}
>
<Text name="customcss" textarea={true} category="other" />
</SettingsItem>
<SettingsItem
title={getMessage('modals.main.settings.sections.experimental.title')}
subtitle={getMessage('modals.main.settings.sections.advanced.experimental_warning')}
title={variables.getMessage('modals.main.settings.sections.experimental.title')}
subtitle={variables.getMessage(
'modals.main.settings.sections.advanced.experimental_warning',
)}
final={true}
>
<Switch
name="experimental"
text={getMessage('modals.main.settings.enabled')}
text={variables.getMessage('modals.main.settings.enabled')}
element=".other"
/>
</SettingsItem>

12
src/components/modals/main/settings/sections/advanced/Data.jsx
View File

@@ -11,12 +11,10 @@ import {
export default class Data extends PureComponent {
render() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<>
<span className="mainTitle" onClick={() => this.props.goBack()}>
{getMessage('modals.main.settings.sections.advanced.title')}
{variables.getMessage('modals.main.settings.sections.advanced.title')}
<MdOutlineKeyboardArrowRight /> Data
</span>
<div
@@ -37,7 +35,7 @@ export default class Data extends PureComponent {
<div className="settingsRow">
<div className="content">
<span className="title">
{getMessage('modals.main.settings.sections.advanced.data')}
{variables.getMessage('modals.main.settings.sections.advanced.data')}
</span>
<span className="subtitle">
Choose whether to export your Mue settings to your computer, import an existing
@@ -46,15 +44,15 @@ export default class Data extends PureComponent {
</div>
<div className="action activityButtons">
<button>
{getMessage('modals.main.settings.buttons.reset')}
{variables.getMessage('modals.main.settings.buttons.reset')}
<ResetIcon />
</button>
<button>
{getMessage('modals.main.settings.buttons.export')}
{variables.getMessage('modals.main.settings.buttons.export')}
<ExportIcon />
</button>
<button>
{getMessage('modals.main.settings.buttons.import')}
{variables.getMessage('modals.main.settings.buttons.import')}
<ImportIcon />
</button>
</div>

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

@@ -16,14 +16,12 @@ import CustomSettings from './Custom';
import { values } from 'modules/helpers/settings/modals';
export default class BackgroundSettings extends PureComponent {
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
constructor() {
super();
this.state = {
backgroundType: localStorage.getItem('backgroundType') || 'api',
backgroundFilter: localStorage.getItem('backgroundFilter') || 'none',
backgroundCategories: [this.getMessage('modals.main.loading')],
backgroundCategories: [variables.getMessage('modals.main.loading')],
backgroundAPI: localStorage.getItem('backgroundAPI') || 'mue',
marketplaceEnabled: localStorage.getItem('photo_packs'),
effects: false,
@@ -51,7 +49,7 @@ export default class BackgroundSettings extends PureComponent {
componentDidMount() {
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
return this.setState({
backgroundCategories: [this.getMessage('modals.update.offline.title')],
backgroundCategories: [variables.getMessage('modals.update.offline.title')],
});
}
@@ -68,29 +66,31 @@ export default class BackgroundSettings extends PureComponent {
const interval = (
<SettingsItem
title={getMessage('modals.main.settings.sections.background.interval.title')}
subtitle={getMessage('modals.mani.settings.sections.background.intervanl.subtitle')}
title={variables.getMessage('modals.main.settings.sections.background.interval.title')}
subtitle={variables.getMessage(
'modals.mani.settings.sections.background.intervanl.subtitle',
)}
>
<Dropdown
label={getMessage('modals.main.settings.sections.background.interval.title')}
label={variables.getMessage('modals.main.settings.sections.background.interval.title')}
name="backgroundchange"
>
<option value="refresh">{getMessage('tabname')}</option>
<option value="refresh">{variables.getMessage('tabname')}</option>
<option value="60000">
{getMessage('modals.main.settings.sections.background.interval.minute')}
{variables.getMessage('modals.main.settings.sections.background.interval.minute')}
</option>
<option value="1800000">
{getMessage('modals.main.settings.sections.background.interval.half_hour')}
{variables.getMessage('modals.main.settings.sections.background.interval.half_hour')}
</option>
<option value="3600000">
{getMessage('modals.main.settings.sections.background.interval.hour')}
{variables.getMessage('modals.main.settings.sections.background.interval.hour')}
</option>
<option value="86400000">
{getMessage('modals.main.settings.sections.background.interval.day')}
{variables.getMessage('modals.main.settings.sections.background.interval.day')}
</option>
<option value="604800000">{getMessage('widgets.date.week')}</option>
<option value="604800000">{variables.getMessage('widgets.date.week')}</option>
<option value="2628000000">
{getMessage('modals.main.settings.sections.background.interval.month')}
{variables.getMessage('modals.main.settings.sections.background.interval.month')}
</option>
</Dropdown>
</SettingsItem>
@@ -100,27 +100,27 @@ export default class BackgroundSettings extends PureComponent {
<>
{interval}
<SettingsItem
title={getMessage('modals.main.settings.sections.background.api')}
subtitle={getMessage('modals.main.settings.sections.background.api_subtitle')}
title={variables.getMessage('modals.main.settings.sections.background.api')}
subtitle={variables.getMessage('modals.main.settings.sections.background.api_subtitle')}
final={true}
>
{this.state.backgroundCategories[0] === getMessage('modals.main.loading') ? (
{this.state.backgroundCategories[0] === variables.getMessage('modals.main.loading') ? (
<>
<Dropdown
label={getMessage('modals.main.settings.sections.background.category')}
label={variables.getMessage('modals.main.settings.sections.background.category')}
name="apiCategory"
>
<MenuItem value="loading" key="loading">
{getMessage('modals.main.loading')}
{variables.getMessage('modals.main.loading')}
</MenuItem>
<MenuItem value="loading" key="loading">
{getMessage('modals.main.loading')}
{variables.getMessage('modals.main.loading')}
</MenuItem>
</Dropdown>
</>
) : (
<Dropdown
label={getMessage('modals.main.settings.sections.background.category')}
label={variables.getMessage('modals.main.settings.sections.background.category')}
name="apiCategory"
>
{this.state.backgroundCategories.map((category) => (
@@ -131,21 +131,29 @@ export default class BackgroundSettings extends PureComponent {
</Dropdown>
)}
<Dropdown
label={getMessage('modals.main.settings.sections.background.source.quality.title')}
label={variables.getMessage(
'modals.main.settings.sections.background.source.quality.title',
)}
name="apiQuality"
element=".other"
>
<option value="original">
{getMessage('modals.main.settings.sections.background.source.quality.original')}
{variables.getMessage(
'modals.main.settings.sections.background.source.quality.original',
)}
</option>
<option value="high">
{getMessage('modals.main.settings.sections.background.source.quality.high')}
{variables.getMessage('modals.main.settings.sections.background.source.quality.high')}
</option>
<option value="normal">
{getMessage('modals.main.settings.sections.background.source.quality.normal')}
{variables.getMessage(
'modals.main.settings.sections.background.source.quality.normal',
)}
</option>
<option value="datasaver">
{getMessage('modals.main.settings.sections.background.source.quality.datasaver')}
{variables.getMessage(
'modals.main.settings.sections.background.source.quality.datasaver',
)}
</option>
</Dropdown>
<Radio
@@ -208,10 +216,10 @@ export default class BackgroundSettings extends PureComponent {
header = (
<span className="mainTitle" onClick={() => this.setState({ effects: false })}>
<span className="backTitle">
{getMessage('modals.main.settings.sections.background.title')}
{variables.getMessage('modals.main.settings.sections.background.title')}
</span>
<MdOutlineKeyboardArrowRight />{' '}
{getMessage('modals.main.settings.sections.background.effects.title')}
{variables.getMessage('modals.main.settings.sections.background.effects.title')}
</span>
);
} else if (this.state.backgroundSettingsSection === true) {
@@ -221,16 +229,16 @@ export default class BackgroundSettings extends PureComponent {
onClick={() => this.setState({ backgroundSettingsSection: false })}
>
<span className="backTitle">
{getMessage('modals.main.settings.sections.background.title')}{' '}
{variables.getMessage('modals.main.settings.sections.background.title')}{' '}
</span>
<MdOutlineKeyboardArrowRight />{' '}
{getMessage('modals.main.settings.sections.background.source.title')}
{variables.getMessage('modals.main.settings.sections.background.source.title')}
</span>
);
} else {
header = (
<Header
title={getMessage('modals.main.settings.sections.background.title')}
title={variables.getMessage('modals.main.settings.sections.background.title')}
setting="background"
category="background"
element="#backgroundImage"
@@ -251,39 +259,51 @@ export default class BackgroundSettings extends PureComponent {
<MdSource />
<div className="content">
<span className="title">
{getMessage('modals.main.settings.sections.background.source.title')}
{variables.getMessage('modals.main.settings.sections.background.source.title')}
</span>
<span className="subtitle">
{getMessage('modals.main.settings.sections.background.source.subtitle')}
{variables.getMessage(
'modals.main.settings.sections.background.source.subtitle',
)}
</span>
</div>
</div>
<div className="action">
<Dropdown
label={getMessage('modals.main.settings.sections.background.type.title')}
label={variables.getMessage(
'modals.main.settings.sections.background.type.title',
)}
name="backgroundType"
onChange={(value) => this.setState({ backgroundType: value })}
category="background"
>
{this.state.marketplaceEnabled ? (
<option value="photo_pack">
{this.getMessage('modals.main.navbar.marketplace')}
{variables.getMessage('modals.main.navbar.marketplace')}
</option>
) : null}
<option value="api">
{getMessage('modals.main.settings.sections.background.type.api')}
{variables.getMessage('modals.main.settings.sections.background.type.api')}
</option>
<option value="custom">
{getMessage('modals.main.settings.sections.background.type.custom_image')}
{variables.getMessage(
'modals.main.settings.sections.background.type.custom_image',
)}
</option>
<option value="colour">
{getMessage('modals.main.settings.sections.background.type.custom_colour')}
{variables.getMessage(
'modals.main.settings.sections.background.type.custom_colour',
)}
</option>
<option value="random_colour">
{getMessage('modals.main.settings.sections.background.type.random_colour')}
{variables.getMessage(
'modals.main.settings.sections.background.type.random_colour',
)}
</option>
<option value="random_gradient">
{getMessage('modals.main.settings.sections.background.type.random_gradient')}
{variables.getMessage(
'modals.main.settings.sections.background.type.random_gradient',
)}
</option>
</Dropdown>
</div>
@@ -297,10 +317,14 @@ export default class BackgroundSettings extends PureComponent {
<MdOutlineAutoAwesome />
<div className="content">
<span className="title">
{getMessage('modals.main.settings.sections.background.effects.title')}
{variables.getMessage(
'modals.main.settings.sections.background.effects.title',
)}
</span>
<span className="subtitle">
{getMessage('modals.main.settings.sections.background.effects.subtitle')}
{variables.getMessage(
'modals.main.settings.sections.background.effects.subtitle',
)}
</span>
</div>
</div>
@@ -319,25 +343,31 @@ export default class BackgroundSettings extends PureComponent {
this.state.backgroundType === 'custom' ||
this.state.marketplaceEnabled) ? (
<SettingsItem
title={getMessage('modals.main.settings.sections.background.display')}
subtitle={getMessage('modals.main.settings.sections.background.display_subtitle')}
title={variables.getMessage('modals.main.settings.sections.background.display')}
subtitle={variables.getMessage(
'modals.main.settings.sections.background.display_subtitle',
)}
final={true}
>
<Checkbox
name="ddgProxy"
text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')}
text={variables.getMessage(
'modals.main.settings.sections.background.ddg_image_proxy',
)}
element=".other"
disabled={!usingImage}
/>
<Checkbox
name="bgtransition"
text={getMessage('modals.main.settings.sections.background.transition')}
text={variables.getMessage('modals.main.settings.sections.background.transition')}
element=".other"
disabled={!usingImage}
/>
<Checkbox
name="photoInformation"
text={getMessage('modals.main.settings.sections.background.photo_information')}
text={variables.getMessage(
'modals.main.settings.sections.background.photo_information',
)}
element=".other"
disabled={
this.state.backgroundType !== 'api' && this.state.backgroundType !== 'marketplace'
@@ -345,7 +375,7 @@ export default class BackgroundSettings extends PureComponent {
/>
<Checkbox
name="photoMap"
text={getMessage('modals.main.settings.sections.background.show_map')}
text={variables.getMessage('modals.main.settings.sections.background.show_map')}
element=".other"
disabled={this.state.backgroundAPI !== 'unsplash'}
/>
@@ -354,38 +384,48 @@ export default class BackgroundSettings extends PureComponent {
{this.state.backgroundSettingsSection ? (
<>
<SettingsItem
title={getMessage('modals.main.settings.sections.background.source.title')}
subtitle={getMessage('modals.main.settings.sections.background.source.subtitle')}
title={variables.getMessage('modals.main.settings.sections.background.source.title')}
subtitle={variables.getMessage(
'modals.main.settings.sections.background.source.subtitle',
)}
final={
this.state.backgroundType === 'random_colour' ||
this.state.backgroundType === 'random_gradient'
}
>
<Dropdown
label={getMessage('modals.main.settings.sections.background.type.title')}
label={variables.getMessage('modals.main.settings.sections.background.type.title')}
name="backgroundType"
onChange={(value) => this.setState({ backgroundType: value })}
category="background"
>
{this.state.marketplaceEnabled ? (
<option value="photo_pack">
{this.getMessage('modals.main.navbar.marketplace')}
{variables.getMessage('modals.main.navbar.marketplace')}
</option>
) : null}
<option value="api">
{getMessage('modals.main.settings.sections.background.type.api')}
{variables.getMessage('modals.main.settings.sections.background.type.api')}
</option>
<option value="custom">
{getMessage('modals.main.settings.sections.background.type.custom_image')}
{variables.getMessage(
'modals.main.settings.sections.background.type.custom_image',
)}
</option>
<option value="colour">
{getMessage('modals.main.settings.sections.background.type.custom_colour')}
{variables.getMessage(
'modals.main.settings.sections.background.type.custom_colour',
)}
</option>
<option value="random_colour">
{getMessage('modals.main.settings.sections.background.type.random_colour')}
{variables.getMessage(
'modals.main.settings.sections.background.type.random_colour',
)}
</option>
<option value="random_gradient">
{getMessage('modals.main.settings.sections.background.type.random_gradient')}
{variables.getMessage(
'modals.main.settings.sections.background.type.random_gradient',
)}
</option>
</Dropdown>
</SettingsItem>
@@ -397,12 +437,14 @@ export default class BackgroundSettings extends PureComponent {
this.state.marketplaceEnabled) &&
this.state.effects ? (
<SettingsItem
title={getMessage('modals.main.settings.sections.background.effects.title')}
subtitle={getMessage('modals.main.settings.sections.background.effects.subtitle')}
title={variables.getMessage('modals.main.settings.sections.background.effects.title')}
subtitle={variables.getMessage(
'modals.main.settings.sections.background.effects.subtitle',
)}
final={true}
>
<Slider
title={getMessage('modals.main.settings.sections.background.effects.blur')}
title={variables.getMessage('modals.main.settings.sections.background.effects.blur')}
name="blur"
min="0"
max="100"
@@ -413,7 +455,9 @@ export default class BackgroundSettings extends PureComponent {
element="#backgroundImage"
/>
<Slider
title={getMessage('modals.main.settings.sections.background.effects.brightness')}
title={variables.getMessage(
'modals.main.settings.sections.background.effects.brightness',
)}
name="brightness"
min="0"
max="100"
@@ -424,34 +468,48 @@ export default class BackgroundSettings extends PureComponent {
element="#backgroundImage"
/>
<Dropdown
label={getMessage('modals.main.settings.sections.background.effects.filters.title')}
label={variables.getMessage(
'modals.main.settings.sections.background.effects.filters.title',
)}
name="backgroundFilter"
onChange={(value) => this.setState({ backgroundFilter: value })}
category="background"
element="#backgroundImage"
>
<option value="none">
{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.none')}
{variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_options.none',
)}
</option>
<option value="grayscale">
{getMessage('modals.main.settings.sections.background.effects.filters.grayscale')}
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.grayscale',
)}
</option>
<option value="sepia">
{getMessage('modals.main.settings.sections.background.effects.filters.sepia')}
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.sepia',
)}
</option>
<option value="invert">
{getMessage('modals.main.settings.sections.background.effects.filters.invert')}
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.invert',
)}
</option>
<option value="saturate">
{getMessage('modals.main.settings.sections.background.effects.filters.saturate')}
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.saturate',
)}
</option>
<option value="contrast">
{getMessage('modals.main.settings.sections.background.effects.filters.contrast')}
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.contrast',
)}
</option>
</Dropdown>
{this.state.backgroundFilter !== 'none' ? (
<Slider
title={getMessage(
title={variables.getMessage(
'modals.main.settings.sections.background.effects.filters.amount',
)}
name="backgroundFilterAmount"

17
src/components/modals/main/settings/sections/background/Colour.jsx
View File

@@ -18,8 +18,6 @@ export default class ColourSettings extends PureComponent {
};
GradientPickerInitialState = undefined;
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
constructor() {
super();
this.state = {
@@ -32,7 +30,7 @@ export default class ColourSettings extends PureComponent {
this.setState({
gradientSettings: this.DefaultGradientSettings,
});
toast(this.getMessage('toasts.reset'));
toast(variables.getMessage('toasts.reset'));
}
initialiseColourPickerState(gradientSettings) {
@@ -120,7 +118,8 @@ export default class ColourSettings extends PureComponent {
typeof this.state.gradientSettings === 'object' &&
this.state.gradientSettings.gradient.every(
(g) =>
g.colour !== this.getMessage('modals.main.settings.sections.background.source.disabled'),
g.colour !==
variables.getMessage('modals.main.settings.sections.background.source.disabled'),
)
) {
const clampNumber = (num, a, b) => Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
@@ -133,7 +132,7 @@ export default class ColourSettings extends PureComponent {
].sort((a, b) => (a.stop > b.stop ? 1 : -1)),
});
}
return this.getMessage('modals.main.settings.sections.background.source.disabled');
return variables.getMessage('modals.main.settings.sections.background.source.disabled');
};
onColourPickerChange = (attrs, name) => {
@@ -211,7 +210,7 @@ export default class ColourSettings extends PureComponent {
{!gradientHasMoreThanOneColour ? (
<>
<button type="button" className="add" onClick={this.addColour}>
{this.getMessage('modals.main.settings.sections.background.source.add_colour')}
{variables.getMessage('modals.main.settings.sections.background.source.add_colour')}
</button>
</>
) : null}
@@ -222,11 +221,13 @@ export default class ColourSettings extends PureComponent {
return (
<>
<SettingsItem
title={this.getMessage('modals.main.settings.sections.background.source.custom_colour')}
title={variables.getMessage(
'modals.main.settings.sections.background.source.custom_colour',
)}
final={true}
>
<span className="link" onClick={() => this.resetColour()}>
{this.getMessage('modals.main.settings.buttons.reset')}
{variables.getMessage('modals.main.settings.buttons.reset')}
</span>
{colourSettings}
</SettingsItem>

32
src/components/modals/main/settings/sections/background/Custom.jsx
View File

@@ -21,8 +21,7 @@ import Modal from 'react-modal';
import CustomURLModal from './CustomURLModal';
export default class CustomSettings extends PureComponent {
getMessage = (text, obj) =>
variables.language.getMessage(variables.languagecode, text, obj || {});
getMessage = (text, obj) => variables.getMessage(text, obj || {});
constructor() {
super();
@@ -38,7 +37,7 @@ export default class CustomSettings extends PureComponent {
this.setState({
customBackground: [],
});
toast(this.getMessage('toasts.reset'));
toast(variables.getMessage('toasts.reset'));
EventBus.dispatch('refresh', 'background');
};
@@ -92,11 +91,15 @@ export default class CustomSettings extends PureComponent {
<>
<Checkbox
name="backgroundVideoLoop"
text={this.getMessage('modals.main.settings.sections.background.source.loop_video')}
text={variables.getMessage(
'modals.main.settings.sections.background.source.loop_video',
)}
/>
<Checkbox
name="backgroundVideoMute"
text={this.getMessage('modals.main.settings.sections.background.source.mute_video')}
text={variables.getMessage(
'modals.main.settings.sections.background.source.mute_video',
)}
/>
</>
);
@@ -152,7 +155,7 @@ export default class CustomSettings extends PureComponent {
const settingsSize = new TextEncoder().encode(JSON.stringify(settings)).length;
if (videoCheck(file.type) === true) {
if (settingsSize + file.size > 4850000) {
return toast(this.getMessage('toasts.no_storage'));
return toast(variables.getMessage('toasts.no_storage'));
}
return this.customBackground(file, false, this.state.currentBackgroundIndex);
@@ -160,7 +163,7 @@ export default class CustomSettings extends PureComponent {
compressAccurately(file, 300).then(async (res) => {
if (settingsSize + res.size > 4850000) {
return toast(this.getMessage('toasts.no_storage'));
return toast(variables.getMessage('toasts.no_storage'));
}
this.customBackground(await filetoDataURL(res), false, this.state.currentBackgroundIndex);
@@ -188,7 +191,7 @@ export default class CustomSettings extends PureComponent {
<MdOutlineFileUpload />
</button>
<button onClick={() => this.setState({ customURLModal: true })}>
{this.getMessage('modals.main.settings.sections.background.source.add_url')}{' '}
{variables.getMessage('modals.main.settings.sections.background.source.add_url')}{' '}
<MdAddLink />
</button>
</div>
@@ -217,17 +220,20 @@ export default class CustomSettings extends PureComponent {
<div className="emptyNewMessage">
<MdAddPhotoAlternate />
<span className="title">
{this.getMessage(
{variables.getMessage(
'modals.main.settings.sections.background.source.drop_to_upload',
)}
</span>
<span className="subtitle">
{this.getMessage('modals.main.settings.sections.background.source.formats', {
list: 'jpeg, png, webp, webm, gif, mp4, webm, ogg',
})}
{variables.getMessage(
'modals.main.settings.sections.background.source.formats',
{
list: 'jpeg, png, webp, webm, gif, mp4, webm, ogg',
},
)}
</span>
<button onClick={() => this.uploadCustomBackground()}>
{this.getMessage('modals.main.settings.sections.background.source.select')}
{variables.getMessage('modals.main.settings.sections.background.source.select')}
<MdFolder />
</button>
</div>

15
src/components/modals/main/settings/sections/background/CustomURLModal.jsx
View File

@@ -10,16 +10,10 @@ export default function CustomURLModal({ modalClose, modalCloseOnly }) {
<div className="smallModal">
<div className="shareHeader">
<span className="title">
{variables.language.getMessage(
variables.languagecode,
'modals.main.settings.sections.background.source.add_url',
)}
{variables.getMessage('modals.main.settings.sections.background.source.add_url')}
</span>
<Tooltip
title={variables.language.getMessage(
variables.languagecode,
'modals.main.settings.sections.advanced.reset_modal.cancel',
)}
title={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
>
<div className="close" onClick={modalCloseOnly}>
<MdClose />
@@ -34,10 +28,7 @@ export default function CustomURLModal({ modalClose, modalCloseOnly }) {
varient="outlined"
/>
<Tooltip
title={variables.language.getMessage(
variables.languagecode,
'modals.main.settings.sections.background.source.add_url',
)}
title={variables.getMessage('modals.main.settings.sections.background.source.add_url')}
placement="top"
>
<button onClick={() => modalClose(url)}>