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

feat(translations): new translation system

Browse Source
This commit is contained in:
David Ralph
2021-09-10 16:38:53 +01:00
parent 941c168486
commit b0eeff1bf8
63 changed files with 651 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent, createRef } from 'react';
import EventBus from 'modules/helpers/eventbus';
@@ -19,7 +20,7 @@ export default class Dropdown extends PureComponent {
onChange = (e) => {
const { value } = e.target;
if (value === window.language.modals.main.loading) {
if (value === variables.language.getMessage(variables.languagecode, 'modals.main.loading')) {
return;
}

11
src/components/modals/main/settings/KeybindInput.jsx
View File

@@ -1,21 +1,22 @@
import variables from 'modules/variables';
export default function KeybindInput(props) {
const language = window.language.modals.main.settings;
const value = props.state[props.settingsName];
const getButton = () => {
if (!value) {
return null;
} else if (value === language.sections.keybinds.recording) {
return <span className='modalLink' onClick={() => props.cancel(props.settingsName)}>{language.sections.advanced.reset_modal.cancel}</span>
} else if (value === variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.keybinds.recording')) {
return <span className='modalLink' onClick={() => props.cancel(props.settingsName)}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.advanced.reset_modal.cancel')}</span>
} else {
return <span className='modalLink' onClick={() => props.reset(props.settingsName)}>{language.buttons.reset}</span>;
return <span className='modalLink' onClick={() => props.reset(props.settingsName)}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.buttons.reset')}</span>;
}
}
return (
<>
<p>{props.name}</p>
<input type='text' onClick={() => props.set(props.settingsName)} value={value || language.sections.keybinds.click_to_record} readOnly/>
<input type='text' onClick={() => props.set(props.settingsName)} value={value || variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.keybinds.click_to_record')} readOnly/>
{getButton()}
</>
);

3
src/components/modals/main/settings/Radio.jsx
View File

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { Radio as RadioUI, RadioGroup, FormControlLabel, FormControl, FormLabel } from '@material-ui/core';
@@ -20,7 +21,7 @@ export default class Radio extends PureComponent {
if (this.props.name === 'language') {
// old tab name
if (localStorage.getItem('tabName') === window.language.tabname) {
if (localStorage.getItem('tabName') === variables.language.getMessage(variables.languagecode, 'tabname')) {
localStorage.setItem('tabName', require(`translations/${value.replace('-', '_')}.json`).tabname);
}
}

9
src/components/modals/main/settings/ResetModal.jsx
View File

@@ -1,9 +1,8 @@
import variables from 'modules/variables';
import { Close, Delete } from '@material-ui/icons';
import { setDefaultSettings } from 'modules/helpers/settings';
export default function ResetModal({ modalClose }) {
const language = window.language.modals.main.settings.sections.advanced.reset_modal;
const reset = () => {
window.stats.postEvent('setting', 'Reset');
setDefaultSettings('reset');
@@ -12,10 +11,10 @@ export default function ResetModal({ modalClose }) {
return (
<>
<h1 style={{ textAlign: 'center' }}>{language.title}</h1>
<span>{language.question}</span>
<h1 style={{ textAlign: 'center' }}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.advanced.reset_modal.title')}</h1>
<span>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.advanced.reset_modal.question')}</span>
<br/><br/>
<span>{language.information}</span>
<span>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.advanced.reset_modal.information')}</span>
<div className='resetfooter'>
<button className='round reset' style={{ marginLeft: 0 }} onClick={() => reset()}>
<Delete/>

6
src/components/modals/main/settings/Slider.jsx
View File

@@ -1,4 +1,5 @@
// todo: find a better method to do width of number input
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { toast } from 'react-toastify';
@@ -11,7 +12,6 @@ export default class Slider extends PureComponent {
value: localStorage.getItem(this.props.name) || this.props.default,
numberWidth: localStorage.getItem(this.props.name) ? ((localStorage.getItem(this.props.name).length + 1) * ((this.props.toast === true) ? 7.75 : 7)) : 32
};
this.language = window.language.modals.main.settings;
this.widthCalculation = (this.props.toast === true) ? 7.75 : 7;
}
@@ -56,7 +56,7 @@ export default class Slider extends PureComponent {
value: this.props.default || ''
}
});
toast(window.language.toasts.reset);
toast(variables.language.getMessage(variables.languagecode, 'toasts.reset'));
}
render() {
@@ -64,7 +64,7 @@ export default class Slider extends PureComponent {
return (
<>
<p>{this.props.title} ({text}{this.props.display}) <span className='modalLink' onClick={this.resetItem}>{this.language.buttons.reset}</span></p>
<p>{this.props.title} ({text}{this.props.display}) <span className='modalLink' onClick={this.resetItem}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.buttons.reset')}</span></p>
<input className='range' type='range' min={this.props.min} max={this.props.max} step={this.props.step || 1} value={this.state.value} onChange={this.handleChange} />
</>
);

6
src/components/modals/main/settings/Text.jsx
View File

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { toast } from 'react-toastify';
@@ -9,7 +10,6 @@ export default class Text extends PureComponent {
this.state = {
value: localStorage.getItem(this.props.name) || ''
};
this.language = window.language.modals.main.settings;
}
handleChange = (e) => {
@@ -41,13 +41,13 @@ export default class Text extends PureComponent {
value: this.props.default || ''
}
});
toast(window.language.toasts.reset);
toast(variables.language.getMessage(variables.languagecode, 'toasts.reset'));
}
render() {
return (
<>
<p>{this.props.title} <span className='modalLink' onClick={this.resetItem}>{this.language.buttons.reset}</span></p>
<p>{this.props.title} <span className='modalLink' onClick={this.resetItem}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.buttons.reset')}</span></p>
{(this.props.textarea === true) ?
<textarea className='settingsTextarea' spellCheck={false} value={this.state.value} onChange={this.handleChange}/>
: <input type='text' value={this.state.value} onChange={this.handleChange}/>

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

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { Email, Twitter, Chat, Instagram, Facebook } from '@material-ui/icons';
@@ -6,17 +7,19 @@ import Tooltip from 'components/helpers/tooltip/Tooltip';
const other_contributors = require('modules/other_contributors.json');
export default class About extends PureComponent {
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
languagecode = variables.languagecode;
constructor() {
super();
this.state = {
contributors: [],
sponsors: [],
other_contributors: [],
photographers: window.language.modals.main.loading,
update: window.language.modals.main.settings.sections.about.version.checking_update,
loading: window.language.modals.main.loading
photographers: this.getMessage(this.languagecode, 'modals.main.loading'),
update: this.getMessage(this.languagecode, 'modals.main.settings.sections.about.version.checking_update'),
loading: this.getMessage(this.languagecode, 'modals.main.loading')
};
this.language = window.language.modals.main.settings.sections.about;
this.controller = new AbortController();
}
@@ -34,8 +37,8 @@ export default class About extends PureComponent {
}
return this.setState({
update: this.language.version.error.title,
loading: this.language.version.error.description
update: this.getMessage(this.languagecode, 'modals.main.settings.sections.about.version.error.title'),
loading: this.getMessage(this.languagecode, 'modals.main.settings.sections.about.version.error.description')
});
}
@@ -45,9 +48,9 @@ export default class About extends PureComponent {
const newVersion = versionData[0].tag_name;
let update = this.language.version.no_update;
let update = this.getMessage(this.languagecode, 'modals.main.settings.sections.about.version.no_update');
if (Number(window.constants.VERSION.replaceAll('.', '')) < Number(newVersion.replaceAll('.', ''))) {
update = `${this.language.version.update_available}: ${newVersion}`;
update = `${this.getMessage(this.languagecode, 'modals.main.settings.sections.about.version.update_available')}: ${newVersion}`;
}
this.setState({
@@ -64,8 +67,8 @@ export default class About extends PureComponent {
componentDidMount() {
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
this.setState({
update: this.language.version.offline_mode,
loading: window.language.modals.main.marketplace.offline.description
update: this.getMessage(this.languagecode, 'modals.main.settings.sections.about.version.checking_update'),
loading: this.getMessage(this.languagecode, 'modals.main.marketplace.offline.description')
});
return;
}
@@ -81,35 +84,34 @@ export default class About extends PureComponent {
render() {
return (
<>
<h2>{this.language.title}</h2>
<h2>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.title')}</h2>
<img draggable='false' className='aboutLogo' src='./././icons/logo_horizontal.png' alt='Logo'></img>
<p>{this.language.copyright} {window.constants.COPYRIGHT_YEAR}-{new Date().getFullYear()} <a href={'https://github.com/' + window.constants.ORG_NAME + '/' + window.constants.REPO_NAME + '/graphs/contributors'} className='aboutLink' target='_blank' rel='noopener noreferrer'>{window.constants.COPYRIGHT_NAME}</a> ({window.constants.COPYRIGHT_LICENSE})</p>
<p>{this.language.version.title} {window.constants.VERSION} ({this.state.update})</p>
<a href={window.constants.PRIVACY_URL} className='aboutLink' target='_blank' rel='noopener noreferrer' style={{ fontSize: '1rem' }}>{window.language.modals.welcome.sections.privacy.links.privacy_policy}</a>
<p>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.copyright')} {window.constants.COPYRIGHT_YEAR}-{new Date().getFullYear()} <a href={'https://github.com/' + window.constants.ORG_NAME + '/' + window.constants.REPO_NAME + '/graphs/contributors'} className='aboutLink' target='_blank' rel='noopener noreferrer'>{window.constants.COPYRIGHT_NAME}</a> ({window.constants.COPYRIGHT_LICENSE})</p>
<p>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.version.title')} {window.constants.VERSION} ({this.state.update})</p>
<a href={window.constants.PRIVACY_URL} className='aboutLink' target='_blank' rel='noopener noreferrer' style={{ fontSize: '1rem' }}>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.links.privacy_policy')}</a>
<h3>{this.language.contact_us}</h3>
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.contact_us')}</h3>
<a href={'mailto:' + window.constants.EMAIL} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Email/></a>
<a href={'https://twitter.com/' + window.constants.TWITTER_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Twitter/></a>
<a href={'https://instagram.com/' + window.constants.INSTAGRAM_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Instagram/></a>
<a href={'https://facebook.com/' + window.constants.FACEBOOK_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Facebook/></a>
<a href={'https://discord.gg/' + window.constants.DISCORD_SERVER} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Chat/></a>
<h3>{this.language.support_mue}</h3>
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.support_mue')}</h3>
<p>
<a href={'https://github.com/sponsors/' + window.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>GitHub Sponsors</a>
&nbsp; • &nbsp;<a href={'https://ko-fi.com/' + window.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>Ko-Fi</a>
&nbsp; • &nbsp;<a href={'https://patreon.com/' + window.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>Patreon</a>
</p>
<h3>{this.language.resources_used.title}</h3>
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.resources_used.title')}</h3>
<p>
<a href='https://www.pexels.com' className='aboutLink' target='_blank' rel='noopener noreferrer'>Pexels</a>
, <a href='https://unsplash.com' className='aboutLink' target='_blank' rel='noopener noreferrer'>Unsplash</a> ({this.language.resources_used.bg_images})
, <a href='https://unsplash.com' className='aboutLink' target='_blank' rel='noopener noreferrer'>Unsplash</a> ({this.getMessage(this.languagecode, 'modals.main.settings.sections.about.resources_used.bg_images')})
</p>
<p><a href='https://fonts.google.com/icons?selected=Material+Icons' className='aboutLink' target='_blank' rel='noopener noreferrer'>Google Fonts</a> ({this.language.resources_used.pin_icon})</p>
<p><a href='https://undraw.co' className='aboutLink' target='_blank' rel='noopener noreferrer'>Undraw</a> ({this.language.resources_used.welcome_img})</p>
<p><a href='https://undraw.co' className='aboutLink' target='_blank' rel='noopener noreferrer'>Undraw</a> ({this.getMessage(this.languagecode, 'modals.main.settings.sections.about.resources_used.welcome_img')})</p>
<h3>{this.language.contributors}</h3>
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.contributors')}</h3>
<p>{this.state.loading}</p>
{this.state.contributors.map(({ login, id }) => (
<Tooltip title={login} key={login}>
@@ -123,7 +125,7 @@ export default class About extends PureComponent {
</Tooltip>
))}
<h3>{this.language.supporters}</h3>
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.supporters')}</h3>
<p>{this.state.loading}</p>
{this.state.sponsors.map(({ handle, avatar }) => (
<Tooltip title={handle} key={handle}>
@@ -131,7 +133,7 @@ export default class About extends PureComponent {
</Tooltip>
))}
<h3>{this.language.photographers}</h3>
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.photographers')}</h3>
<p>{this.state.photographers}</p>
</>
);

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

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Modal from 'react-modal';
@@ -18,37 +19,37 @@ export default class AdvancedSettings extends PureComponent {
this.state = {
resetModal: false
};
this.language = window.language.modals.main.settings;
}
render() {
const { advanced } = this.language.sections;
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
const languagecode = variables.languagecode;
return (
<>
<h2>{advanced.title}</h2>
<Checkbox name='offlineMode' text={advanced.offline_mode} element='.other' />
<Dropdown name='timezone' label={advanced.timezone.title} category='timezone'>
<option value='auto'>{advanced.timezone.automatic}</option>
<h2>{getMessage(languagecode, 'modals.main.settings.sections.advanced.title')}</h2>
<Checkbox name='offlineMode' text={getMessage(languagecode, 'modals.main.settings.sections.advanced.offline_mode')} element='.other' />
<Dropdown name='timezone' label={getMessage(languagecode, 'modals.main.settings.sections.advanced.timezone.title')} category='timezone'>
<option value='auto'>{getMessage(languagecode, 'modals.main.settings.sections.advanced.timezone.automatic')}</option>
{time_zones.map((timezone) => (
<option value={timezone} key={timezone}>{timezone}</option>
))}
</Dropdown>
<h3>{advanced.data}</h3>
<button className='reset' onClick={() => this.setState({ resetModal: true })}>{this.language.buttons.reset}</button>
<button className='export' onClick={() => exportSettings()}>{this.language.buttons.export}</button>
<button className='import' onClick={() => document.getElementById('file-input').click()}>{this.language.buttons.import}</button>
<h3>{getMessage(languagecode, 'modals.main.settings.sections.advanced.data')}</h3>
<button className='reset' onClick={() => this.setState({ resetModal: true })}>{getMessage(languagecode, 'modals.main.settings.buttons.reset')}</button>
<button className='export' onClick={() => exportSettings()}>{getMessage(languagecode, 'modals.main.settings.buttons.export')}</button>
<button className='import' onClick={() => document.getElementById('file-input').click()}>{getMessage(languagecode, 'modals.main.settings.buttons.import')}</button>
<FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => importSettings(e)}/>
<h3>{advanced.customisation}</h3>
<Text title={advanced.tab_name} name='tabName' default={window.language.tabname} category='other'/>
<Text title={advanced.custom_js} name='customjs' textarea={true} category='other' element='other'/>
<Text title={advanced.custom_css} name='customcss' textarea={true} category='other'/>
<h3>{getMessage(languagecode, 'modals.main.settings.sections.advanced.customisation')}</h3>
<Text title={getMessage(languagecode, 'modals.main.settings.sections.advanced.tab_name')} name='tabName' default={getMessage(languagecode, 'tabname')} category='other'/>
<Text title={getMessage(languagecode, 'modals.main.settings.sections.advanced.custom_js')} name='customjs' textarea={true} category='other' element='other'/>
<Text title={getMessage(languagecode, 'modals.main.settings.sections.advanced.custom_Css')} name='customcss' textarea={true} category='other'/>
<h3>{this.language.sections.experimental.title}</h3>
<p style={{ maxWidth: '75%' }}>{advanced.experimental_warning}</p>
<Switch name='experimental' text={this.language.enabled} element='.other'/>
<h3>{getMessage(languagecode, 'modals.main.settings.sections.experimental.title')}</h3>
<p style={{ maxWidth: '75%' }}>{getMessage(languagecode, 'modals.main.settings.sections.advanced.experimental_warning')}</p>
<Switch name='experimental' text={getMessage(languagecode, 'modals.main.settings.enabled')} element='.other'/>
<Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className='Modal resetmodal mainModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
<ResetModal modalClose={() => this.setState({ resetModal: false })} />

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

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import Radio from '../Radio';
@@ -5,67 +6,68 @@ import Slider from '../Slider';
import Text from '../Text';
export default function AppearanceSettings() {
const { appearance, background, quote } = window.language.modals.main.settings.sections;
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
const languagecode = variables.languagecode;
const themeOptions = [
{
name: appearance.theme.auto,
name: getMessage(languagecode, 'modals.main.settings.sections.appearance.theme.auto'),
value: 'auto'
},
{
name: appearance.theme.light,
name: getMessage(languagecode, 'modals.main.settings.sections.appearance.theme.light'),
value: 'light'
},
{
name: appearance.theme.dark,
name: getMessage(languagecode, 'modals.main.settings.sections.appearance.theme.dark'),
value: 'dark'
}
];
return (
<>
<h2>{appearance.title}</h2>
<Radio name='theme' title={appearance.theme.title} options={themeOptions} category='other' />
<h2>{getMessage(languagecode, 'modals.main.settings.sections.appearance.title')}</h2>
<Radio name='theme' title={getMessage(languagecode, 'modals.main.settings.sections.appearance.theme.title')} options={themeOptions} category='other' />
<h3>{appearance.navbar.title}</h3>
<Checkbox name='notesEnabled' text={appearance.navbar.notes} category='navbar' />
<Dropdown label={appearance.navbar.refresh} name='refresh' category='navbar'>
<option value='false'>{appearance.navbar.refresh_options.none}</option>
<option value='background'>{background.title}</option>
<option value='quote'>{quote.title}</option>
<option value='quotebackground'>{quote.title} + {background.title}</option>
<h3>{getMessage(languagecode, 'modals.main.settings.sections.appearance.navbar.title')}</h3>
<Checkbox name='notesEnabled' text={getMessage(languagecode, 'modals.main.settings.sections.appearance.navbar.notes')} category='navbar' />
<Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.appearance.navbar.refresh')} name='refresh' category='navbar'>
<option value='false'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.navbar.refresh_options.none')}</option>
<option value='background'>{getMessage(languagecode, 'modals.main.settings.sections.background.title')}</option>
<option value='quote'>{getMessage(languagecode, 'modals.main.settings.sections.quote.title')}</option>
<option value='quotebackground'>{getMessage(languagecode, 'modals.main.settings.sections.quote.title')} + {getMessage(languagecode, 'modals.main.settings.sections.background.title')}</option>
{/* before it was just a checkbox */}
<option value='true'>{appearance.navbar.refresh_options.page}</option>
<option value='true'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.navbar.refresh_options.page')}</option>
</Dropdown>
<br/>
<Slider title={appearance.accessibility.widget_zoom} name='zoomNavbar' min='10' max='400' default='100' display='%' category='navbar' />
<Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomNavbar' min='10' max='400' default='100' display='%' category='navbar' />
<h3>{appearance.font.title}</h3>
<Text title={appearance.font.custom} name='font' upperCaseFirst={true} category='other' />
<h3>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.title')}</h3>
<Text title={getMessage(languagecode, 'modals.main.settings.sections.appearance.font.custom')} name='font' upperCaseFirst={true} category='other' />
<br/>
<Checkbox name='fontGoogle' text={appearance.font.google} category='other' />
<Dropdown label={appearance.font.weight.title} name='fontweight' category='other'>
<Checkbox name='fontGoogle' text={getMessage(languagecode, 'modals.main.settings.sections.appearance.font.google')} category='other' />
<Dropdown label={getMessage(languagecode, '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'>{appearance.font.weight.thin}</option>
<option value='200'>{appearance.font.weight.extra_light}</option>
<option value='300'>{appearance.font.weight.light}</option>
<option value='400'>{appearance.font.weight.normal}</option>
<option value='500'>{appearance.font.weight.medium}</option>
<option value='600'>{appearance.font.weight.semi_bold}</option>
<option value='700'>{appearance.font.weight.bold}</option>
<option value='800'>{appearance.font.weight.extra_bold}</option>
<option value='100'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.thin')}</option>
<option value='200'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.extra_light')}</option>
<option value='300'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.light')}</option>
<option value='400'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.normal')}</option>
<option value='500'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.medium')}</option>
<option value='600'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.semi_bold')}</option>
<option value='700'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.bold')}</option>
<option value='800'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.extra_bold')}</option>
</Dropdown>
<br/><br/>
<Dropdown label={appearance.font.style.title} name='fontstyle' category='other'>
<option value='normal'>{appearance.font.style.normal}</option>
<option value='italic'>{appearance.font.style.italic}</option>
<option value='oblique'>{appearance.font.style.oblique}</option>
<Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.appearance.font.style.title')} name='fontstyle' category='other'>
<option value='normal'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.style.normal')}</option>
<option value='italic'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.style.italic')}</option>
<option value='oblique'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.style.oblique')}</option>
</Dropdown>
<h3>{appearance.accessibility.title}</h3>
<Checkbox text={appearance.accessibility.text_shadow} name='textBorder' category='other'/>
<Checkbox text={appearance.accessibility.animations} name='animations' category='other'/>
<Slider title={appearance.accessibility.toast_duration} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' toast={true} display={' ' + appearance.accessibility.milliseconds} />
<h3>{getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.title')}</h3>
<Checkbox text={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.text_shadow')} name='textBorder' category='other'/>
<Checkbox text={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.animations')} name='animations' category='other'/>
<Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.toast_duration')} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' toast={true} display={' ' + getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.miliseconds')} />
</>
);
}

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

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent, createRef } from 'react';
import { WifiOff } from '@material-ui/icons';
import Modal from 'react-modal';
@@ -12,7 +13,6 @@ export default class Changelog extends PureComponent {
showLightbox: false,
lightboxImg: null
};
this.language = window.language.modals.update;
this.offlineMode = (localStorage.getItem('offlineMode') === 'true');
this.controller = new AbortController();
this.changelog = createRef();
@@ -26,7 +26,7 @@ export default class Changelog extends PureComponent {
}
let date = new Date(data.date.split(' ')[0]);
date = date.toLocaleDateString(window.languagecode.replace('_', '-'), {
date = date.toLocaleDateString(variables.languagecode.replace('_', '-'), {
year: 'numeric',
month: 'long',
day: 'numeric'
@@ -75,6 +75,9 @@ export default class Changelog extends PureComponent {
}
render() {
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
const languagecode = variables.languagecode;
const errorMessage = (msg) => {
return (
<div className='emptyitems'>
@@ -85,25 +88,23 @@ export default class Changelog extends PureComponent {
);
};
if (navigator.onLine === false || this.offlineMode) {
const language = window.language.modals.main.marketplace;
if (navigator.onLine === false || this.offlineMode) {
return errorMessage(<>
<WifiOff/>
<h1>{language.offline.title}</h1>
<p className='description'>{language.offline.description}</p>
<h1>{getMessage(languagecode, 'modals.main.marketplace.offline.title')}</h1>
<p className='description'>{getMessage(languagecode, 'modals.main.marketplace.offline.description')}</p>
</>);
}
if (!this.state.title) {
return errorMessage(<h1>{window.language.modals.main.loading}</h1>);
return errorMessage(<h1>{getMessage(languagecode, 'modals.main.loading')}</h1>);
}
return (
<div className='changelogtab' ref={this.changelog}>
<h1>{this.state.title}</h1>
<h5>{this.state.author} • {this.state.date}</h5>
{this.state.image ? <img draggable='false' src={this.state.image} alt={window.language.modals.update.title} className='updateimage'/> : null}
{this.state.image ? <img draggable='false' src={this.state.image} alt={this.state.title} className='updateimage'/> : null}
<div className='updatechangelog' dangerouslySetInnerHTML={{ __html: this.state.html }}/>
<Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showLightbox: false })} isOpen={this.state.showLightbox} className='Modal lightboxmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
<Lightbox modalClose={() => this.setState({ showLightbox: false })} img={this.state.lightboxImg}/>

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

@@ -1,17 +1,18 @@
import variables from 'modules/variables';
import Checkbox from '../Checkbox';
import Slider from '../Slider';
import EventBus from 'modules/helpers/eventbus';
export default function ExperimentalSettings() {
const { experimental } = window.language.modals.main.settings.sections;
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
const languagecode = variables.languagecode;
return (
<>
<h2>{experimental.title}</h2>
<p>{experimental.warning}</p>
<Checkbox name='animations' text={window.language.modals.main.settings.sections.appearance.animations} element='.other'/>
<h3>{experimental.developer}</h3>
<h2>{getMessage(languagecode, 'modals.main.settings.sections.experimental.title')}</h2>
<p>{getMessage(languagecode, 'modals.main.settings.sections.experimental.warning')}</p>
<h3>{getMessage(languagecode, 'modals.main.settings.sections.experimental.developer')}</h3>
<Checkbox name='debug' text='Debug hotkey (Ctrl + #)' element='.other'/>
<Slider title='Debug timeout' name='debugtimeout' min='0' max='5000' default='0' step='100' display=' miliseconds' element='.other' />
<br/>

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

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Checkbox from '../Checkbox';
@@ -11,7 +12,6 @@ export default class GreetingSettings extends PureComponent {
this.state = {
birthday: new Date(localStorage.getItem('birthday')) || new Date()
};
this.language = window.language.modals.main.settings;
}
changeDate = (e) => {
@@ -23,21 +23,22 @@ export default class GreetingSettings extends PureComponent {
}
render() {
const { greeting } = this.language.sections;
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
const languagecode = variables.languagecode;
return (
<>
<h2>{greeting.title}</h2>
<Switch name='greeting' text={this.language.enabled} category='greeting' element='.greeting'/>
<Checkbox name='events' text={greeting.events} category='greeting'/>
<Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting'/>
<Text title={greeting.name} name='greetingName' category='greeting'/>
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomGreeting' min='10' max='400' default='100' display='%' category='greeting' />
<h2>{getMessage(languagecode, 'modals.main.settings.sections.greeting.title')}</h2>
<Switch name='greeting' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='greeting' element='.greeting'/>
<Checkbox name='events' text={getMessage(languagecode, 'modals.main.settings.sections.greeting.events')} category='greeting'/>
<Checkbox name='defaultGreetingMessage' text={getMessage(languagecode, 'modals.main.settings.sections.greeting.default')} category='greeting'/>
<Text title={getMessage(languagecode, 'modals.main.settings.sections.greeting.name')} name='greetingName' category='greeting'/>
<Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomGreeting' min='10' max='400' default='100' display='%' category='greeting' />
<h3>{greeting.birthday}</h3>
<Switch name='birthdayenabled' text={this.language.enabled} category='greeting'/>
<Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting'/>
<p>{greeting.birthday_date}</p>
<h3>{getMessage(languagecode, 'modals.main.settings.sections.greeting.birthday')}</h3>
<Switch name='birthdayenabled' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='greeting'/>
<Checkbox name='birthdayage' text={getMessage(languagecode, 'modals.main.settings.sections.greeting.birthday_age')} category='greeting'/>
<p>{getMessage(languagecode, 'modals.main.settings.sections.greeting.birthday_date')}</p>
<input type='date' onChange={this.changeDate} value={this.state.birthday.toISOString().substr(0, 10)}/>
</>
);

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

@@ -1,15 +1,18 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Switch from '../Switch';
import KeybindInput from '../KeybindInput';
export default class KeybindSettings extends PureComponent {
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
languagecode = variables.languagecode;
constructor() {
super();
this.state = {
keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
};
this.language = window.language.modals.main.settings;
}
showReminder() {
@@ -19,7 +22,7 @@ export default class KeybindSettings extends PureComponent {
listen(type) {
const currentKeybinds = this.state.keybinds;
currentKeybinds[type] = this.language.sections.keybinds.recording;
currentKeybinds[type] = this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.recording');
this.setState({
keybinds: currentKeybinds
});
@@ -72,24 +75,22 @@ export default class KeybindSettings extends PureComponent {
}
render() {
const { keybinds } = this.language.sections;
return (
<>
<h2>{keybinds.title}</h2>
<Switch name='keybindsEnabled' text={this.language.enabled} element='.other' />
<KeybindInput name={keybinds.background.favourite} state={this.state.keybinds} settingsName='favouriteBackground' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={keybinds.background.maximise} state={this.state.keybinds} settingsName='maximiseBackground' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={keybinds.background.download} state={this.state.keybinds} settingsName='downloadBackground' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={keybinds.background.show_info} state={this.state.keybinds} settingsName='showBackgroundInformation' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={keybinds.quote.favourite} state={this.state.keybinds} settingsName='favouriteQuote' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={keybinds.quote.copy} state={this.state.keybinds} settingsName='copyQuote' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={keybinds.quote.tweet} state={this.state.keybinds} settingsName='tweetQuote' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={keybinds.notes.pin} state={this.state.keybinds} settingsName='pinNotes' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={keybinds.notes.copy} state={this.state.keybinds} settingsName='copyNotes' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={keybinds.search} state={this.state.keybinds} settingsName='focusSearch' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={keybinds.quicklinks} state={this.state.keybinds} settingsName='toggleQuicklinks' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={keybinds.modal} state={this.state.keybinds} settingsName='toggleModal' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<h2>{this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.title')}</h2>
<Switch name='keybindsEnabled' text={this.getMessage(this.languagecode, 'modals.main.settings.enabled')} element='.other' />
<KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.background.favourite')} state={this.state.keybinds} settingsName='favouriteBackground' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.background.maximise')} state={this.state.keybinds} settingsName='maximiseBackground' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.background.download')} state={this.state.keybinds} settingsName='downloadBackground' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.background.show_info')} state={this.state.keybinds} settingsName='showBackgroundInformation' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.quote.favourite')} state={this.state.keybinds} settingsName='favouriteQuote' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.quote.copy')} state={this.state.keybinds} settingsName='copyQuote' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.quote.tweet')} state={this.state.keybinds} settingsName='tweetQuote' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.notes.pin')} state={this.state.keybinds} settingsName='pinNotes' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.notes.copy')} state={this.state.keybinds} settingsName='copyNotes' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.search')} state={this.state.keybinds} settingsName='focusSearch' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.quicklinks')} state={this.state.keybinds} settingsName='toggleQuicklinks' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
<KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.modal')} state={this.state.keybinds} settingsName='toggleModal' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
</>
);
}

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

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Radio from '../Radio';
@@ -5,11 +6,14 @@ import Radio from '../Radio';
const languages = require('modules/languages.json');
export default class BackgroundSettings extends PureComponent {
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
languagecode = variables.languagecode;
constructor() {
super();
this.state = {
quoteLanguages: [{
name: window.language.modals.main.loading,
name: this.getMessage(this.languagecode, 'modals.main.loading'),
value: 'loading'
}]
};
@@ -40,7 +44,7 @@ export default class BackgroundSettings extends PureComponent {
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
return this.setState({
quoteLanguages: [{
name: window.language.modals.main.marketplace.offline.description,
name: this.getMessage(this.languagecode, 'modals.main.marketplace.offline.description'),
value: 'loading'
}]
});
@@ -55,13 +59,11 @@ export default class BackgroundSettings extends PureComponent {
}
render() {
const language = window.language.modals.main.settings.sections.language;
return (
<>
<h2>{language.title}</h2>
<h2>{this.getMessage(this.languagecode, 'modals.main.settings.sections.language.title')}</h2>
<Radio name='language' options={languages} element='.other' />
<h3>{language.quote}</h3>
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.language.quote')}</h3>
<Radio name='quotelanguage' options={this.state.quoteLanguages} category='quote' />
</>
);

21
src/components/modals/main/settings/sections/Order.jsx
View File

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { DragIndicator } from '@material-ui/icons';
import { sortableContainer, sortableElement } from 'react-sortable-hoc';
@@ -5,13 +6,14 @@ import { toast } from 'react-toastify';
import EventBus from 'modules/helpers/eventbus';
const settings = window.language.modals.main.settings.sections;
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
const languagecode = variables.languagecode;
const widget_name = {
greeting: settings.greeting.title,
time: settings.time.title,
quicklinks: settings.quicklinks.title,
quote: settings.quote.title,
date: settings.time.date.title
greeting: getMessage(languagecode, 'modals.main.settings.sections.greeting.title'),
time: getMessage(languagecode, 'modals.main.settings.sections.time.title'),
quicklinks: getMessage(languagecode, 'modals.main.settings.sections.quicklinks.title'),
quote: getMessage(languagecode, 'modals.main.settings.sections.quote.title'),
date: getMessage(languagecode, 'modals.main.settings.sections.greeting.title')
};
const SortableItem = sortableElement(({ value }) => (
@@ -31,7 +33,6 @@ export default class OrderSettings extends PureComponent {
this.state = {
items: JSON.parse(localStorage.getItem('order'))
};
this.language = window.language.modals.main.settings;
}
// based on https://stackoverflow.com/a/48301905
@@ -65,7 +66,7 @@ export default class OrderSettings extends PureComponent {
items: JSON.parse(localStorage.getItem('order'))
});
toast(window.language.toasts.reset);
toast(getMessage(languagecode, 'toats.reset'));
}
enabled = (setting) => {
@@ -86,8 +87,8 @@ export default class OrderSettings extends PureComponent {
render() {
return (
<>
<h2>{this.language.sections.order.title}</h2>
<span className='modalLink' onClick={this.reset}>{this.language.buttons.reset}</span>
<h2>{getMessage(languagecode, 'modals.main.settings.sections.order.title')}</h2>
<span className='modalLink' onClick={this.reset}>{getMessage(languagecode, 'modals.main.settings.buttons.reset')}</span>
<SortableContainer onSortEnd={this.onSortEnd} lockAxis='y' lockToContainerEdges disableAutoscroll>
{this.state.items.map((value, index) => {
if (!this.enabled(value)) {

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

@@ -1,18 +1,21 @@
import variables from 'modules/variables';
import Switch from '../Switch';
import Checkbox from '../Checkbox';
import Slider from '../Slider';
export default function QuickLinks() {
const language = window.language.modals.main.settings.sections.quicklinks;
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
const languagecode = variables.languagecode;
return (
<>
<h2>{language.title}</h2>
<Switch name='quicklinksenabled' text={window.language.modals.main.settings.enabled} category='quicklinks' element='.quicklinks-container'/>
<Checkbox name='quicklinksddgProxy' text={window.language.modals.main.settings.sections.background.ddg_image_proxy} category='quicklinks'/>
<Checkbox name='quicklinksnewtab' text={language.open_new} category='quicklinks'/>
<Checkbox name='quicklinkstooltip' text={language.tooltip} category='quicklinks'/>
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuicklinks' min='10' max='400' default='100' display='%' category='quicklinks'/>
<h2>{getMessage(languagecode, 'modals.main.settings.sections.quicklinks.title')}</h2>
<Switch name='quicklinksenabled' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='quicklinks' element='.quicklinks-container'/>
<Checkbox name='quicklinksddgProxy' text={getMessage(languagecode, 'modals.main.settings.sections.background.ddg_image_proxy')} category='quicklinks'/>
<Checkbox name='quicklinksnewtab' text={getMessage(languagecode, 'modals.main.settings.sections.quicklinks.open_new')} category='quicklinks'/>
<Checkbox name='quicklinkstooltip' text={getMessage(languagecode, 'modals.main.settings.sections.quicklinks.tooltip')} category='quicklinks'/>
<Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomQuicklinks' min='10' max='400' default='100' display='%' category='quicklinks'/>
</>
);
}

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

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Checkbox from '../Checkbox';
@@ -7,6 +8,9 @@ import Slider from '../Slider';
import Dropdown from '../Dropdown';
export default class QuoteSettings extends PureComponent {
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
languagecode = variables.languagecode;
constructor() {
super();
this.state = {
@@ -16,19 +20,17 @@ export default class QuoteSettings extends PureComponent {
marketplaceType = () => {
if (localStorage.getItem('quote_packs')) {
return <option value='quote_pack'>{window.language.modals.main.navbar.marketplace}</option>;
return <option value='quote_pack'>{this.getMessage(this.languagecode, 'modals.main.navbar.marketplace')}</option>;
}
}
render() {
const { quote, background } = window.language.modals.main.settings.sections;
let customSettings;
if (this.state.quoteType === 'custom') {
customSettings = (
<>
<Text title={quote.custom} name='customQuote' category='quote' />
<Text title={quote.custom_author} name='customQuoteAuthor' category='quote'/>
<Text title={this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.custom_quote')} name='customQuote' category='quote' />
<Text title={this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.custom_author')} name='customQuoteAuthor' category='quote'/>
</>
);
} else {
@@ -36,14 +38,14 @@ export default class QuoteSettings extends PureComponent {
customSettings = (
<>
<br/><br/>
<Dropdown label={background.interval.title} name='quotechange'>
<option value='refresh'>{window.language.tabname}</option>
<option value='60000'>{background.interval.minute}</option>
<option value='1800000'>{background.interval.half_hour}</option>
<option value='3600000'>{background.interval.hour}</option>
<option value='86400000'>{background.interval.day}</option>
<option value='604800000'>{window.language.widgets.date.week}</option>
<option value='2628000000'>{background.interval.month}</option>
<Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.title')} name='quotechange'>
<option value='refresh'>{this.getMessage(this.languagecode, 'tabname')}</option>
<option value='60000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.minute')}</option>
<option value='1800000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.half_hour')}</option>
<option value='3600000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.hour')}</option>
<option value='86400000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.day')}</option>
<option value='604800000'>{this.getMessage(this.languagecode, 'widgets.date.week')}</option>
<option value='2628000000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.month')}</option>
</Dropdown>
</>
);
@@ -51,21 +53,21 @@ export default class QuoteSettings extends PureComponent {
return (
<>
<h2>{quote.title}</h2>
<Switch name='quote' text={window.language.modals.main.settings.enabled} category='quote' element='.quotediv' />
<Checkbox name='authorLink' text={quote.author_link} element='.other' />
<Dropdown label={window.language.modals.main.settings.sections.background.type.title} name='quoteType' onChange={(value) => this.setState({ quoteType: value })} category='quote'>
<h2>{this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.title')}</h2>
<Switch name='quote' text={this.getMessage(this.languagecode, 'modals.main.settings.enabled')} category='quote' element='.quotediv' />
<Checkbox name='authorLink' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.author_link')} element='.other' />
<Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.type.title')} name='quoteType' onChange={(value) => this.setState({ quoteType: value })} category='quote'>
{this.marketplaceType()}
<option value='api'>{window.language.modals.main.settings.sections.background.type.api}</option>
<option value='custom'>{quote.custom}</option>
<option value='api'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.type.api')}</option>
<option value='custom'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.custom')}</option>
</Dropdown>
{customSettings}
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' />
<Slider title={this.getMessage(this.languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' />
<h3>{quote.buttons.title}</h3>
<Checkbox name='copyButton' text={quote.buttons.copy} category='quote'/>
<Checkbox name='tweetButton' text={quote.buttons.tweet} category='quote'/>
<Checkbox name='favouriteQuoteEnabled' text={quote.buttons.favourite} category='quote'/>
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.buttons.title')}</h3>
<Checkbox name='copyButton' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.buttons.copy')} category='quote'/>
<Checkbox name='tweetButton' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.buttons.tweet')} category='quote'/>
<Checkbox name='favouriteQuoteEnabled' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.buttons.favourite')} category='quote'/>
</>
);
}

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

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { toast } from 'react-toastify';
@@ -12,6 +13,9 @@ const searchEngines = require('components/widgets/search/search_engines.json');
const autocompleteProviders = require('components/widgets/search/autocomplete_providers.json');
export default class SearchSettings extends PureComponent {
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
languagecode = variables.languagecode;
constructor() {
super();
this.state = {
@@ -27,7 +31,7 @@ export default class SearchSettings extends PureComponent {
customValue: ''
});
toast(window.language.toasts.reset);
toast(this.getMessage(this.languagecode, 'toasts.reset'));
}
componentDidMount() {
@@ -67,32 +71,29 @@ export default class SearchSettings extends PureComponent {
}
render() {
const language = window.language.modals.main.settings;
const { search } = language.sections;
return (
<>
<h2>{search.title}</h2>
<Switch name='searchBar' text={language.enabled} category='widgets' />
<h2>{this.getMessage(this.languagecode, 'modals.main.settings.sections.search.title')}</h2>
<Switch name='searchBar' text={this.getMessage(this.languagecode, 'modals.main.settings.enabled')} category='widgets' />
{/* not supported on firefox */}
{(navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined') ?
<Checkbox name='voiceSearch' text={search.voice_search} category='search'/>
<Checkbox name='voiceSearch' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.search.voice_search')} category='search'/>
: null}
<Checkbox name='searchDropdown' text={search.dropdown} category='search' element='.other'/>
<Dropdown label={search.search_engine} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>
<Checkbox name='searchDropdown' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.search.dropdown')} category='search' element='.other'/>
<Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.search.search_engine')} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>
{searchEngines.map((engine) => (
<option key={engine.name} value={engine.settingsName}>{engine.name}</option>
))}
<option value='custom'>{search.custom.split(' ')[0]}</option>
<option value='custom'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.search.custom').split(' ')[0]}</option>
</Dropdown>
<ul style={{ display: this.state.customDisplay }}>
<br/>
<p style={{ marginTop: '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{language.buttons.reset}</span></p>
<p style={{ marginTop: '0px' }}>{this.getMessage(this.languagecode, 'modals.main.settings.sections.search.custom')} <span className='modalLink' onClick={() => this.resetSearch()}>{this.getMessage(this.languagecode, 'modals.main.settings.buttons.reset')}</span></p>
<input type='text' value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })}></input>
</ul>
<br/>
<Checkbox name='autocomplete' text={search.autocomplete} category='search' />
<Radio title={search.autocomplete_provider} options={autocompleteProviders} name='autocompleteProvider' category='search'/>
<Checkbox name='autocomplete' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.search.autocomplete')} category='search' />
<Radio title={this.getMessage(this.languagecode, 'modals.main.settings.sections.search.autocomplete_provider')} options={autocompleteProviders} name='autocompleteProvider' category='search'/>
</>
);
}

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

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Switch from '../Switch';
@@ -10,7 +11,6 @@ export default class Stats extends PureComponent {
this.state = {
stats: JSON.parse(localStorage.getItem('statsData')) || {}
};
this.language = window.language.modals.main.settings.sections.stats;
}
componentDidMount() {
@@ -32,27 +32,30 @@ export default class Stats extends PureComponent {
}
render() {
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
const languagecode = variables.languagecode;
if (localStorage.getItem('stats') === 'false') {
return (
<>
<h2>{window.language.modals.main.settings.reminder.title}</h2>
<p>{this.language.warning}</p>
<Switch name='stats' text={this.language.usage} category='stats'/>
<h2>{getMessage(languagecode, 'modals.main.settings.reminder.title')}</h2>
<p>{getMessage(languagecode, 'modals.main.settings.sections.stats.warning')}</p>
<Switch name='stats' text={getMessage(languagecode, 'modals.main.settings.sections.stats.usage')} category='stats'/>
</>
);
}
return (
<>
<h2>{this.language.title}</h2>
<p>{this.language.sections.tabs_opened}: {this.state.stats['tabs-opened'] || 0}</p>
<p>{this.language.sections.backgrounds_favourited}: {this.state.stats.feature ? this.state.stats.feature['background-favourite'] || 0 : 0}</p>
<p>{this.language.sections.backgrounds_downloaded}: {this.state.stats.feature ? this.state.stats.feature['background-download'] || 0 : 0}</p>
<p>{this.language.sections.quotes_favourited}: {this.state.stats.feature ? this.state.stats.feature['quoted-favourite'] || 0 : 0}</p>
<p>{this.language.sections.quicklinks_added}: {this.state.stats.feature ? this.state.stats.feature['quicklink-add'] || 0 : 0}</p>
<p>{this.language.sections.settings_changed}: {this.state.stats.setting ? Object.keys(this.state.stats.setting).length : 0}</p>
<p>{this.language.sections.addons_installed}: {this.state.stats.marketplace ? this.state.stats.marketplace['install'] : 0}</p>
<Switch name='stats' text={this.language.usage} category='stats'/>
<h2>{getMessage(languagecode, 'modals.main.settings.sections.stats.title')}</h2>
<p>{getMessage(languagecode, 'modals.main.settings.sections.stats.sections.tabs_opened')}: {this.state.stats['tabs-opened'] || 0}</p>
<p>{getMessage(languagecode, 'modals.main.settings.sections.stats.sections.backgrounds_favourited')}: {this.state.stats.feature ? this.state.stats.feature['background-favourite'] || 0 : 0}</p>
<p>{getMessage(languagecode, 'modals.main.settings.sections.stats.sections.backgrounds_downloaded')}: {this.state.stats.feature ? this.state.stats.feature['background-download'] || 0 : 0}</p>
<p>{getMessage(languagecode, 'modals.main.settings.sections.stats.sections.quotes_favourited')}: {this.state.stats.feature ? this.state.stats.feature['quoted-favourite'] || 0 : 0}</p>
<p>{getMessage(languagecode, 'modals.main.settings.sections.stats.sections.quicklinks_added')}: {this.state.stats.feature ? this.state.stats.feature['quicklink-add'] || 0 : 0}</p>
<p>{getMessage(languagecode, 'modals.main.settings.sections.stats.sections.settings_changed')}: {this.state.stats.setting ? Object.keys(this.state.stats.setting).length : 0}</p>
<p>{getMessage(languagecode, 'modals.main.settings.sections.stats.sections.addons_installed')}: {this.state.stats.marketplace ? this.state.stats.marketplace['install'] : 0}</p>
<Switch name='stats' text={getMessage(languagecode, 'modals.main.settings.sections.stats.usage')} category='stats'/>
</>
);
}

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

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Checkbox from '../Checkbox';
@@ -13,43 +14,43 @@ export default class TimeSettings extends PureComponent {
timeType: localStorage.getItem('timeType') || 'digital',
dateType: localStorage.getItem('dateType') || 'long'
};
this.language = window.language.modals.main.settings;
}
render() {
const { time } = this.language.sections;
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
const languagecode = variables.languagecode;
let timeSettings;
const digitalOptions = [
{
name: time.digital.twentyfourhour,
name: getMessage(languagecode, 'modals.main.settings.sections.time.digital.twentyfourhour'),
value: 'twentyfourhour'
},
{
name: time.digital.twelvehour,
name: getMessage(languagecode, 'modals.main.settings.sections.time.digital.twelvehour'),
value: 'twelvehour'
}
];
const digitalSettings = (
<>
<h3>{time.digital.title}</h3>
<Radio title={time.format} name='timeformat' options={digitalOptions} smallTitle={true} category='clock' />
<h3>{getMessage(languagecode, 'modals.main.settings.sections.time.digital.title')}</h3>
<Radio title={getMessage(languagecode, 'modals.main.settings.sections.time.format')} name='timeformat' options={digitalOptions} smallTitle={true} category='clock' />
<br/>
<Checkbox name='seconds' text={time.digital.seconds} category='clock' />
<Checkbox name='zero' text={time.digital.zero} category='clock' />
<Checkbox name='seconds' text={getMessage(languagecode, 'modals.main.settings.sections.time.digital.seconds')} category='clock' />
<Checkbox name='zero' text={getMessage(languagecode, 'modals.main.settings.sections.time.digital.zero')} category='clock' />
</>
);
const analogSettings = (
<>
<h3>{time.analogue.title}</h3>
<Checkbox name='secondHand' text={time.analogue.second_hand} category='clock' />
<Checkbox name='minuteHand' text={time.analogue.minute_hand} category='clock' />
<Checkbox name='hourHand' text={time.analogue.hour_hand} category='clock' />
<Checkbox name='hourMarks' text={time.analogue.hour_marks} category='clock' />
<Checkbox name='minuteMarks' text={time.analogue.minute_marks} category='clock' />
<h3>{getMessage(languagecode, 'modals.main.settings.sections.time.analogue.title')}</h3>
<Checkbox name='secondHand' text={getMessage(languagecode, 'modals.main.settings.sections.time.analogue.second_hand')} category='clock' />
<Checkbox name='minuteHand' text={getMessage(languagecode, 'modals.main.settings.sections.time.analogue.minute_hand')} category='clock' />
<Checkbox name='hourHand' text={getMessage(languagecode, 'modals.main.settings.sections.time.analogue.hour_hand')} category='clock' />
<Checkbox name='hourMarks' text={getMessage(languagecode, 'modals.main.settings.sections.time.analogue.hour_marks')} category='clock' />
<Checkbox name='minuteMarks' text={getMessage(languagecode, 'modals.main.settings.sections.time.analogue.minute_marks')} category='clock' />
</>
);
@@ -63,25 +64,25 @@ export default class TimeSettings extends PureComponent {
const longSettings = (
<>
<Checkbox name='dayofweek' text={time.date.day_of_week} category='date' />
<Checkbox name='datenth' text={time.date.datenth} category='date' />
<Checkbox name='dayofweek' text={getMessage(languagecode, 'modals.main.settings.sections.time.date.day_of_week')} category='date' />
<Checkbox name='datenth' text={getMessage(languagecode, 'modals.main.settings.sections.time.date.datenth')} category='date' />
</>
);
const shortSettings = (
<>
<br/>
<Dropdown label={time.date.short_format} name='dateFormat' category='date'>
<Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.time.date.short_format')} name='dateFormat' category='date'>
<option value='DMY'>DMY</option>
<option value='MDY'>MDY</option>
<option value='YMD'>YMD</option>
</Dropdown>
<br/><br/>
<Dropdown label={time.date.short_separator.title} name='shortFormat' category='date'>
<option value='dash'>{time.date.short_separator.dash}</option>
<option value='dots'>{time.date.short_separator.dots}</option>
<option value='gaps'>{time.date.short_separator.gaps}</option>
<option value='slashes'>{time.date.short_separator.slashes}</option>
<Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.time.date.short_separator.title')} name='shortFormat' category='date'>
<option value='dash'>{getMessage(languagecode, 'modals.main.settings.sections.time.date.short_separator.dash')}</option>
<option value='dots'>{getMessage(languagecode, 'modals.main.settings.sections.time.date.short_separator.dots')}</option>
<option value='gaps'>{getMessage(languagecode, 'modals.main.settings.sections.time.date.short_separator.gaps')}</option>
<option value='slashes'>{getMessage(languagecode, 'modals.main.settings.sections.time.date.short_separator.slashes')}</option>
</Dropdown>
</>
);
@@ -94,29 +95,29 @@ export default class TimeSettings extends PureComponent {
return (
<>
<h2>{time.title}</h2>
<Switch name='time' text={this.language.enabled} category='clock' element='.clock-container' />
<Dropdown label={time.type} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock'>
<option value='digital'>{time.digital.title}</option>
<option value='analogue'>{time.analogue.title}</option>
<option value='percentageComplete'>{time.percentage_complete}</option>
<h2>{getMessage(languagecode, 'modals.main.settings.sections.time.title')}</h2>
<Switch name='time' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='clock' element='.clock-container' />
<Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.time.type')} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock'>
<option value='digital'>{getMessage(languagecode, 'modals.main.settings.sections.time.digital.title')}</option>
<option value='analogue'>{getMessage(languagecode, 'modals.main.settings.sections.time.analogue.title')}</option>
<option value='percentageComplete'>{getMessage(languagecode, 'modals.main.settings.sections.time.percentage_complete')}</option>
</Dropdown>
{timeSettings}
{this.state.timeType !== 'analogue' ?
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomClock' min='10' max='400' default='100' display='%' category='clock'/>
<Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomClock' min='10' max='400' default='100' display='%' category='clock'/>
: null}
<h3>{time.date.title}</h3>
<Switch name='date' text={this.language.enabled} category='date' element='.date'/>
<Dropdown label={time.type} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date'>
<option value='long'>{time.date.type.long}</option>
<option value='short'>{time.date.type.short}</option>
<h3>{getMessage(languagecode, 'modals.main.settings.sections.time.date.title')}</h3>
<Switch name='date' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='date' element='.date'/>
<Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.time.type')} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date'>
<option value='long'>{getMessage(languagecode, 'modals.main.settings.sections.time.date.type.long')}</option>
<option value='short'>{getMessage(languagecode, 'modals.main.settings.sections.time.date.type.short')}</option>
</Dropdown>
<br/>
<Checkbox name='datezero' text={time.digital.zero} category='date'/>
<Checkbox name='weeknumber' text={time.date.week_number} category='date'/>
<Checkbox name='datezero' text={getMessage(languagecode, 'modals.main.settings.sections.time.digital.zero')} category='date'/>
<Checkbox name='weeknumber' text={getMessage(languagecode, 'modals.main.settings.sections.time.date.week_number')} category='date'/>
{dateSettings}
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomDate' min='10' max='400' default='100' display='%' category='date'/>
<Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomDate' min='10' max='400' default='100' display='%' category='date'/>
</>
);
}

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

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Switch from '../Switch';
@@ -11,7 +12,6 @@ export default class TimeSettings extends PureComponent {
this.state = {
location: localStorage.getItem('location') || 'London'
};
this.language = window.language.modals.main.settings;
}
componentDidUpdate() {
@@ -48,46 +48,47 @@ export default class TimeSettings extends PureComponent {
}
render() {
const language = window.language.modals.main.settings.sections.weather;
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
const languagecode = variables.languagecode;
const tempFormat = [
{
name: language.temp_format.celsius + ' (°C)',
name: getMessage(languagecode, 'modals.main.settings.sections.weather.temp_format.celsius') + ' (°C)',
value: 'celsius'
},
{
name: language.temp_format.fahrenheit + ' (°F)',
name: getMessage(languagecode, 'modals.main.settings.sections.weather.temp_format.fahrenheit') + ' (°F)',
value: 'fahrenheit'
},
{
name: language.temp_format.kelvin + ' (K)',
name: getMessage(languagecode, 'modals.main.settings.sections.weather.temp_format.kelvin') + ' (K)',
value: 'kelvin'
}
];
return (
<>
<h2>{language.title}</h2>
<Switch name='weatherEnabled' text={this.language.enabled} category='widgets'/>
<h2>{getMessage(languagecode, 'modals.main.settings.sections.weather.title')}</h2>
<Switch name='weatherEnabled' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='widgets'/>
<ul>
<p>{language.location} <span className='modalLink' onClick={() => this.getAuto()}>{language.auto}</span></p>
<p>{getMessage(languagecode, 'modals.main.settings.sections.weather.location')} <span className='modalLink' onClick={() => this.getAuto()}>{getMessage(languagecode, 'modals.main.settings.sections.weather.auto')}</span></p>
<input type='text' value={this.state.location} onChange={(e) => this.changeLocation(e)}></input>
</ul>
<br/>
<Radio name='tempformat' title={language.temp_format.title} options={tempFormat} category='weather'/>
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomWeather' min='10' max='400' default='100' display='%' category='weather'/>
<Radio name='tempformat' title={getMessage(languagecode, 'modals.main.settings.sections.weather.temp_format.title')} options={tempFormat} category='weather'/>
<Slider title={getMessage(languagecode, 'modals.main.settings.appearance.accessibility.widget_zoom')} name='zoomWeather' min='10' max='400' default='100' display='%' category='weather'/>
<h3>{language.extra_info.title}</h3>
<Checkbox name='showlocation' text={language.extra_info.show_location} category='weather'/>
<Checkbox name='weatherdescription' text={language.extra_info.show_description} category='weather'/>
<Checkbox name='cloudiness' text={language.extra_info.cloudiness} category='weather'/>
<Checkbox name='humidity' text={language.extra_info.humidity} category='weather'/>
<Checkbox name='visibility' text={language.extra_info.visibility} category='weather'/>
<Checkbox name='windspeed' text={language.extra_info.wind_speed} category='weather'/>
<Checkbox name='windDirection' text={language.extra_info.wind_direction} category='weather'/>
<Checkbox name='mintemp' text={language.extra_info.min_temp} category='weather'/>
<Checkbox name='maxtemp' text={language.extra_info.max_temp} category='weather'/>
<Checkbox name='atmosphericpressure' text={language.extra_info.atmospheric_pressure} category='weather'/>
<h3>{getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.title')}</h3>
<Checkbox name='showlocation' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.show_location')} category='weather'/>
<Checkbox name='weatherdescription' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.show_description')} category='weather'/>
<Checkbox name='cloudiness' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.cloudiness')} category='weather'/>
<Checkbox name='humidity' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.humidity')} category='weather'/>
<Checkbox name='visibility' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.visibility')} category='weather'/>
<Checkbox name='windspeed' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.wind_speed')} category='weather'/>
<Checkbox name='windDirection' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.wind_direction')} category='weather'/>
<Checkbox name='mintemp' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.min_temp')} category='weather'/>
<Checkbox name='maxtemp' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.max_temp')} category='weather'/>
<Checkbox name='atmosphericpressure' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.atmospheric_pressure')} category='weather'/>
</>
);
}

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

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent, Fragment } from 'react';
import { toast } from 'react-toastify';
@@ -13,14 +14,16 @@ import ColourSettings from './Colour';
import EventBus from 'modules/helpers/eventbus';
export default class BackgroundSettings extends PureComponent {
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
languagecode = variables.languagecode;
constructor() {
super();
this.state = {
customBackground: [''],
backgroundType: localStorage.getItem('backgroundType') || 'api',
backgroundCategories: [window.language.modals.main.loading]
backgroundCategories: [this.getMessage(this.languagecode, 'modals.main.loading')]
};
this.language = window.language.modals.main.settings;
this.controller = new AbortController();
}
@@ -29,7 +32,7 @@ export default class BackgroundSettings extends PureComponent {
this.setState({
customBackground: ['']
});
toast(window.language.toasts.reset);
toast(this.getMessage(this.languagecode, 'toasts.reset'));
EventBus.dispatch('refresh', 'background');
}
@@ -77,8 +80,8 @@ export default class BackgroundSettings extends PureComponent {
if (customBackground.startsWith('data:video/') || customBackground.endsWith('.mp4') || customBackground.endsWith('.webm') || customBackground.endsWith('.ogg')) {
return (
<>
<Checkbox name='backgroundVideoLoop' text={this.language.sections.background.source.loop_video}/>
<Checkbox name='backgroundVideoMute' text={this.language.sections.background.source.mute_video}/>
<Checkbox name='backgroundVideoLoop' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.loop_video')}/>
<Checkbox name='backgroundVideoMute' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.mute_video')}/>
</>
);
} else {
@@ -88,7 +91,7 @@ export default class BackgroundSettings extends PureComponent {
marketplaceType = () => {
if (localStorage.getItem('photo_packs')) {
return <option value='photo_pack'>{window.language.modals.main.navbar.marketplace}</option>;
return <option value='photo_pack'>{this.getMessage(this.languagecode, 'modals.main.navbar.marketplace')}</option>;
}
}
@@ -131,7 +134,7 @@ export default class BackgroundSettings extends PureComponent {
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
return this.setState({
backgroundCategories: [window.language.modals.update.offline.title]
backgroundCategories: [this.getMessage(this.languagecode, 'modals.update.offline.title')]
});
}
@@ -144,8 +147,6 @@ export default class BackgroundSettings extends PureComponent {
}
render() {
const { background } = this.language.sections;
let backgroundSettings;
const apiOptions = [
@@ -166,29 +167,29 @@ export default class BackgroundSettings extends PureComponent {
const APISettings = (
<>
<br/>
<Radio title={background.source.api} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage'/>
<Radio title={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.api')} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage'/>
<br/>
<Dropdown label={background.category} name='apiCategory'>
<Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.category')} name='apiCategory'>
{this.state.backgroundCategories.map((category) => (
<option value={category} key={category}>{category.charAt(0).toUpperCase() + category.slice(1)}</option>
))}
</Dropdown>
<br/><br/>
<Dropdown label={background.source.quality.title} name='apiQuality' element='.other'>
<option value='original'>{background.source.quality.original}</option>
<option value='high'>{background.source.quality.high}</option>
<option value='normal'>{background.source.quality.normal}</option>
<option value='datasaver'>{background.source.quality.datasaver}</option>
<Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.quality.title')} name='apiQuality' element='.other'>
<option value='original'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.quality.original')}</option>
<option value='high'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.quality.high')}</option>
<option value='normal'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.quality.normal')}</option>
<option value='datasaver'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.quality.datasaver')}</option>
</Dropdown>
<br/><br/>
<Dropdown label={background.interval.title} name='backgroundchange'>
<option value='refresh'>{window.language.tabname}</option>
<option value='60000'>{background.interval.minute}</option>
<option value='1800000'>{background.interval.half_hour}</option>
<option value='3600000'>{background.interval.hour}</option>
<option value='86400000'>{background.interval.day}</option>
<option value='604800000'>{window.language.widgets.date.week}</option>
<option value='2628000000'>{background.interval.month}</option>
<Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.title')} name='backgroundchange'>
<option value='refresh'>{this.getMessage(this.languagecode, 'tabname')}</option>
<option value='60000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.minute')}</option>
<option value='1800000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.half_hour')}</option>
<option value='3600000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.hour')}</option>
<option value='86400000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.day')}</option>
<option value='604800000'>{this.getMessage(this.languagecode, 'widgets.date.week')}</option>
<option value='2628000000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.month')}</option>
</Dropdown>
</>
);
@@ -196,12 +197,12 @@ export default class BackgroundSettings extends PureComponent {
const customSettings = (
<>
<ul>
<p>{background.source.custom_background} <span className='modalLink' onClick={this.resetCustom}>{this.language.buttons.reset}</span></p>
<p>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage(this.languagecode, 'modals.main.settings.buttons.reset')}</span></p>
{this.state.customBackground.map((_url, index) => (
<Fragment key={index}>
{this.state.customBackground.length > 1 ? <button className='reset round round-small' onClick={() => this.removeCustomBackground(index)}>x</button> : null}
<input type='text' value={this.state.customBackground[index]} onChange={(e) => this.customBackground(e, true, index)}></input>
<span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{background.source.upload}</span>
<span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.ypload')}</span>
{this.videoCustomSettings(index)}
<br/><br/>
</Fragment>
@@ -224,41 +225,41 @@ export default class BackgroundSettings extends PureComponent {
return (
<>
<h2>{background.title}</h2>
<Switch name='background' text={this.language.enabled} category='background' element='#backgroundImage' />
<Checkbox name='ddgProxy' text={background.ddg_image_proxy} element='.other' />
<Checkbox name='bgtransition' text={background.transition} element='.other' />
<Checkbox name='photoInformation' text={background.photo_information} element='.other' />
<h2>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.title')}</h2>
<Switch name='background' text={this.getMessage(this.languagecode, 'modals.main.settings.enabled')} category='background' element='#backgroundImage' />
<Checkbox name='ddgProxy' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.ddg_image_proxy')} element='.other' />
<Checkbox name='bgtransition' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.transition')} element='.other' />
<Checkbox name='photoInformation' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.photo_information')} element='.other' />
<Checkbox name='photoMap' text='Show location map on photo information if available' element='.other'/>
<h3>{background.source.title}</h3>
<Dropdown label={background.type.title} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.title')}</h3>
<Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.type.title')} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
{this.marketplaceType()}
<option value='api'>{background.type.api}</option>
<option value='custom'>{background.type.custom_image}</option>
<option value='colour'>{background.type.custom_colour}</option>
<option value='api'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.type.api')}</option>
<option value='custom'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.type.custom_image')}</option>
<option value='colour'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.type.custom_colour')}</option>
</Dropdown>
<br/>
{backgroundSettings}
<h3>{background.buttons.title}</h3>
<Checkbox name='view' text={background.buttons.view} category='navbar' />
<Checkbox name='favouriteEnabled' text={background.buttons.favourite} category='navbar' />
<Checkbox name='downloadbtn' text={background.buttons.download} element='.other' />
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.buttons.title')}</h3>
<Checkbox name='view' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.buttons.view')} category='navbar' />
<Checkbox name='favouriteEnabled' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.buttons.favourite')} category='navbar' />
<Checkbox name='downloadbtn' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.buttons.download')} element='.other' />
<h3>{background.effects.title}</h3>
<Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
<Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='90' display='%' category='background' element='#backgroundImage' />
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.title')}</h3>
<Slider title={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.blur')} name='blur' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
<Slider title={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.brightness')} name='brightness' min='0' max='100' default='90' display='%' category='background' element='#backgroundImage' />
<br/><br/>
<Dropdown label={background.effects.filters.title} name='backgroundFilter' category='background' element='#backgroundImage'>
<option value='grayscale'>{background.effects.filters.grayscale}</option>
<option value='sepia'>{background.effects.filters.sepia}</option>
<option value='invert'>{background.effects.filters.invert}</option>
<option value='saturate'>{background.effects.filters.saturate}</option>
<option value='contrast'>{background.effects.filters.contrast}</option>
<Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.title')} name='backgroundFilter' category='background' element='#backgroundImage'>
<option value='grayscale'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.grayscale')}</option>
<option value='sepia'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.sepia')}</option>
<option value='invert'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.invert')}</option>
<option value='saturate'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.saturate')}</option>
<option value='contrast'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.contrast')}</option>
</Dropdown>
<Slider title={background.effects.filters.amount} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
<Slider title={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.amount')} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
</>
);
}

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

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent, Fragment } from 'react';
import { ColorPicker } from 'react-color-gradient-picker';
import { toast } from 'react-toastify';
@@ -11,13 +12,14 @@ import '../../../scss/settings/react-color-picker-gradient-picker-custom-styles.
export default class ColourSettings extends PureComponent {
DefaultGradientSettings = { angle: '180', gradient: [{ colour: '#ffb032', stop: 0 }], type: 'linear' };
GradientPickerInitalState = undefined;
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
languagecode = variables.languagecode;
constructor() {
super();
this.state = {
gradientSettings: this.DefaultGradientSettings
};
this.language = window.language.modals.main.settings;
}
resetColour() {
@@ -25,7 +27,7 @@ export default class ColourSettings extends PureComponent {
this.setState({
gradientSettings: this.DefaultGradientSettings
});
toast(window.language.toasts.reset);
toast(this.getMessage(this.languagecode, 'toasts.reset'));
}
initialiseColourPickerState(gradientSettings) {
@@ -109,7 +111,7 @@ export default class ColourSettings extends PureComponent {
gradient: [...this.state.gradientSettings.gradient.map(g => { return { ...g, stop: clampNumber(+g.stop, 0, 100) } })].sort((a, b) => (a.stop > b.stop) ? 1 : -1)
});
}
return this.language.sections.background.source.disabled;
return this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.disabled');
}
onColourPickerChange = (attrs, name) => {
@@ -141,8 +143,6 @@ export default class ColourSettings extends PureComponent {
}
render() {
const { background } = this.language.sections;
let colourSettings = null;
if (typeof this.state.gradientSettings === 'object') {
const gradientHasMoreThanOneColour = this.state.gradientSettings.gradient.length > 1;
@@ -175,14 +175,14 @@ export default class ColourSettings extends PureComponent {
colourSettings = (
<>
{gradientInputs}
{!gradientHasMoreThanOneColour ? (<><br/><br/><button type='button' className='add' onClick={this.addColour}>{background.source.add_colour}</button></>) : null}
{!gradientHasMoreThanOneColour ? (<><br/><br/><button type='button' className='add' onClick={this.addColour}>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.add_colour')}</button></>) : null}
</>
);
}
return (
<>
<p>{background.source.custom_colour} <span className='modalLink' onClick={() => this.resetColour()}>{this.language.buttons.reset}</span></p>
<p>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.custom_colour')} <span className='modalLink' onClick={() => this.resetColour()}>{this.getMessage(this.languagecode, 'modals.main.settings.buttons.reset')}</span></p>
{colourSettings}
</>
);