mirror of
https://github.com/mue/mue.git
synced 2026-07-21 16:04:22 +02:00
refactor(translations): cleanup and fix import settings text
This commit is contained in:
David Ralph
@@ -4,8 +4,7 @@ import { PureComponent } from 'react';
|
||||
import './feedback.scss';
|
||||
|
||||
export default class FeedbackModal extends PureComponent {
|
||||
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
languagecode = variables.languagecode;
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -30,11 +29,11 @@ export default class FeedbackModal extends PureComponent {
|
||||
let question_two_error, question_four_error;
|
||||
|
||||
if (this.state.question_two.value.length <= 0) {
|
||||
question_two_error = this.getMessage(this.languagecode, 'modals.feedback.not_filled');
|
||||
question_two_error = this.getMessage('modals.feedback.not_filled');
|
||||
}
|
||||
|
||||
if (this.state.question_four.value.length <= 0) {
|
||||
question_four_error = this.getMessage(this.languagecode, 'modals.feedback.not_filled');
|
||||
question_four_error = this.getMessage('modals.feedback.not_filled');
|
||||
}
|
||||
|
||||
if (question_two_error || question_four_error) {
|
||||
@@ -61,7 +60,7 @@ export default class FeedbackModal extends PureComponent {
|
||||
});
|
||||
|
||||
this.setState({
|
||||
formsubmit: this.getMessage(this.languagecode, 'modals.feedback.success')
|
||||
formsubmit: this.getMessage('modals.feedback.success')
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
@@ -73,36 +72,36 @@ export default class FeedbackModal extends PureComponent {
|
||||
render() {
|
||||
return (
|
||||
<div className='feedback'>
|
||||
<h1>{this.getMessage(this.languagecode, 'modals.feedback.title')}</h1>
|
||||
<h1>{this.getMessage('modals.feedback.title')}</h1>
|
||||
<span className='closeModal' onClick={this.props.modalClose}>×</span>
|
||||
<form>
|
||||
<input type='hidden' name='version' value={window.constants.VERSION} />
|
||||
<div className='question'>
|
||||
<label>{this.getMessage(this.languagecode, 'modals.feedback.question_one')}</label>
|
||||
<label>{this.getMessage('modals.feedback.question_one')}</label>
|
||||
<br/><br/>
|
||||
<label className='values'>0</label>
|
||||
<input className='range' type='range' min='0' max='10' name='questionone' value={this.state.question_one} onChange={(e) => this.setState({ question_one: e.target.value })}/>
|
||||
<label className='values'>10 ({this.state.question_one})</label>
|
||||
</div>
|
||||
<div className='question'>
|
||||
<label>{this.getMessage(this.languagecode, 'modals.feedback.question_two')}</label>
|
||||
<label>{this.getMessage('modals.feedback.question_two')}</label>
|
||||
<textarea name='questiontwo' onChange={(e) => this.setState({ question_two: { value: e.target.value }})}/>
|
||||
<p className='feedbackerror'>{this.state.question_two.error}</p>
|
||||
</div>
|
||||
<div className='question'>
|
||||
<label>{this.getMessage(this.languagecode, 'modals.feedback.question_three')}</label>
|
||||
<label>{this.getMessage('modals.feedback.question_three')}</label>
|
||||
<br/><br/>
|
||||
<label className='values'>0</label>
|
||||
<input className='range' type='range' min='0' max='10' name='questionthree' value={this.state.question_three} onChange={(e) => this.setState({ question_three: e.target.value })}/>
|
||||
<label className='values'>10 ({this.state.question_three})</label>
|
||||
</div>
|
||||
<div className='question'>
|
||||
<label>{this.getMessage(this.languagecode, 'modals.feedback.question_four')}</label>
|
||||
<label>{this.getMessage('modals.feedback.question_four')}</label>
|
||||
<textarea name='questionfour' value={this.state.question_four.value} onChange={(e) => this.setState({ question_four: { value: e.target.value }})}/>
|
||||
<p className='feedbackerror'>{this.state.question_four.error}</p>
|
||||
</div>
|
||||
<p>{this.state.formsubmit}</p>
|
||||
<button onClick={(e) => this.submitForm(e)}>{this.getMessage(this.languagecode, 'modals.feedback.submit')}</button>
|
||||
<button onClick={(e) => this.submitForm(e)}>{this.getMessage('modals.feedback.submit')}</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -27,8 +27,7 @@ export default class Item extends PureComponent {
|
||||
}
|
||||
|
||||
render() {
|
||||
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
const languagecode = variables.languagecode;
|
||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
if (!this.props.data.display_name) {
|
||||
return null;
|
||||
@@ -39,8 +38,8 @@ export default class Item extends PureComponent {
|
||||
warningHTML = (
|
||||
<div className='productInformation'>
|
||||
<ul>
|
||||
<li className='header'>{getMessage(languagecode, 'modals.main.marketplace.product.quote_warning.title')}</li>
|
||||
<li id='updated'>{getMessage(languagecode, 'modals.main.marketplace.product.quote_warning.description')}</li>
|
||||
<li className='header'>{getMessage('modals.main.marketplace.product.quote_warning.title')}</li>
|
||||
<li id='updated'>{getMessage('modals.main.marketplace.product.quote_warning.description')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
@@ -77,10 +76,10 @@ export default class Item extends PureComponent {
|
||||
<div className='side'>
|
||||
<div className='productInformation'>
|
||||
<ul>
|
||||
<li className='header'>{getMessage(languagecode, 'modals.main.marketplace.product.version')}</li>
|
||||
<li className='header'>{getMessage('modals.main.marketplace.product.version')}</li>
|
||||
{updateButton ? <li>{this.props.data.version} (Installed: {this.props.data.addonInstalledVersion})</li> : <li>{this.props.data.version}</li>}
|
||||
<br/>
|
||||
<li className='header'>{getMessage(languagecode, 'modals.main.marketplace.product.author')}</li>
|
||||
<li className='header'>{getMessage('modals.main.marketplace.product.author')}</li>
|
||||
<li>{this.props.data.author}</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -91,7 +90,7 @@ export default class Item extends PureComponent {
|
||||
<br/><br/>
|
||||
</div>
|
||||
<div className='informationContainer'>
|
||||
<h1 className='overview'>{getMessage(languagecode, 'modals.main.marketplace.product.overview')}</h1>
|
||||
<h1 className='overview'>{getMessage('modals.main.marketplace.product.overview')}</h1>
|
||||
<p className='description' dangerouslySetInnerHTML={{ __html: this.props.data.description }}></p>
|
||||
</div>
|
||||
<Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showLightbox: false })} isOpen={this.state.showLightbox} className='Modal lightboxmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
|
||||
|
||||
@@ -10,8 +10,7 @@ import Dropdown from '../../settings/Dropdown';
|
||||
import { uninstall, urlParser } from 'modules/helpers/marketplace';
|
||||
|
||||
export default class Added extends PureComponent {
|
||||
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
languagecode = variables.languagecode;
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -21,7 +20,7 @@ export default class Added extends PureComponent {
|
||||
button: ''
|
||||
};
|
||||
this.buttons = {
|
||||
uninstall: <button className='removeFromMue' onClick={() => this.uninstall()}>{this.getMessage(this.languagecode, 'modals.main.marketplace.product.buttons.remove')}</button>,
|
||||
uninstall: <button className='removeFromMue' onClick={() => this.uninstall()}>{this.getMessage('modals.main.marketplace.product.buttons.remove')}</button>,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -55,7 +54,7 @@ export default class Added extends PureComponent {
|
||||
uninstall() {
|
||||
uninstall(this.state.item.type, this.state.item.display_name);
|
||||
|
||||
toast(this.getMessage(this.languagecode, 'toasts.uninstalled'));
|
||||
toast(this.getMessage('toasts.uninstalled'));
|
||||
|
||||
this.setState({
|
||||
button: '',
|
||||
@@ -119,8 +118,8 @@ export default class Added extends PureComponent {
|
||||
<div className='emptyitems'>
|
||||
<div className='emptyMessage'>
|
||||
<LocalMall/>
|
||||
<h1>{this.getMessage(this.languagecode, 'modals.main.addons.empty.title')}</h1>
|
||||
<p className='description'>{this.getMessage(this.languagecode, 'modals.main.addons.empty.description')}</p>
|
||||
<h1>{this.getMessage('modals.main.addons.empty.title')}</h1>
|
||||
<p className='description'>{this.getMessage('modals.main.addons.empty.description')}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -132,11 +131,11 @@ export default class Added extends PureComponent {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dropdown label={this.getMessage(this.languagecode, 'modals.main.addons.sort.title')} name='sortAddons' onChange={(value) => this.sortAddons(value)}>
|
||||
<option value='newest'>{this.getMessage(this.languagecode, 'modals.main.addons.sort.newest')}</option>
|
||||
<option value='oldest'>{this.getMessage(this.languagecode, 'modals.main.addons.sort.oldest')}</option>
|
||||
<option value='a-z'>{this.getMessage(this.languagecode, 'modals.main.addons.sort.a_z')}</option>
|
||||
<option value='z-a'>{this.getMessage(this.languagecode, 'modals.main.addons.sort.z_a')}</option>
|
||||
<Dropdown label={this.getMessage('modals.main.addons.sort.title')} name='sortAddons' onChange={(value) => this.sortAddons(value)}>
|
||||
<option value='newest'>{this.getMessage('modals.main.addons.sort.newest')}</option>
|
||||
<option value='oldest'>{this.getMessage('modals.main.addons.sort.oldest')}</option>
|
||||
<option value='a-z'>{this.getMessage('modals.main.addons.sort.a_z')}</option>
|
||||
<option value='z-a'>{this.getMessage('modals.main.addons.sort.z_a')}</option>
|
||||
</Dropdown>
|
||||
<button className='addToMue sideload updateCheck' onClick={() => this.updateCheck()}>Check for updates</button>
|
||||
<br/>
|
||||
|
||||
@@ -88,12 +88,11 @@ export default class Create extends PureComponent {
|
||||
render() {
|
||||
let tabContent;
|
||||
|
||||
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
const languagecode = variables.languagecode;
|
||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
const chooseType = (
|
||||
<>
|
||||
<h3>{getMessage(languagecode, 'modals.main.settings.sections.time.type')}</h3>
|
||||
<h3>{getMessage('modals.main.settings.sections.time.type')}</h3>
|
||||
<div className='themesToggleArea'>
|
||||
<div className='options'>
|
||||
{/* <div className='toggle lightTheme' onClick={() => this.changeTab(2, 'photos')}>
|
||||
@@ -107,7 +106,7 @@ export default class Create extends PureComponent {
|
||||
*/}
|
||||
<div className='toggle lightTheme' onClick={() => this.changeTab(2, 'settings')}>
|
||||
<Settings/>
|
||||
<span>{getMessage(languagecode, 'modals.main.marketplace.preset_settings')}</span>
|
||||
<span>{getMessage('modals.main.marketplace.preset_settings')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -137,22 +136,22 @@ export default class Create extends PureComponent {
|
||||
|
||||
const writeDescription = (
|
||||
<>
|
||||
<h3>{getMessage(languagecode, 'modals.main.marketplace.product.information')}</h3>
|
||||
<p>{getMessage(languagecode, 'modals.main.addons.create.metadata.name')}</p>
|
||||
<h3>{getMessage('modals.main.marketplace.product.information')}</h3>
|
||||
<p>{getMessage('modals.main.addons.create.metadata.name')}</p>
|
||||
<input type='text' value={this.state.addonMetadata.name} onInput={(e) => setMetadata(e.target.value, 'name')}/>
|
||||
<p>{getMessage(languagecode, 'modals.main.marketplace.product.version')}</p>
|
||||
<p>{getMessage('modals.main.marketplace.product.version')}</p>
|
||||
<input type='text' value={this.state.addonMetadata.version} onInput={(e) => setMetadata(e.target.value, 'version')}/>
|
||||
<p>{getMessage(languagecode, 'modals.main.marketplace.product.author')}</p>
|
||||
<p>{getMessage('modals.main.marketplace.product.author')}</p>
|
||||
<input type='text' value={this.state.addonMetadata.author} onInput={(e) => setMetadata(e.target.value, 'author')}/>
|
||||
<p>{getMessage(languagecode, 'modals.main.addons.create.metadata.icon_url')}</p>
|
||||
<p>{getMessage('modals.main.addons.create.metadata.icon_url')}</p>
|
||||
<input type='text' value={this.state.addonMetadata.icon_url} onInput={(e) => setMetadata(e.target.value, 'icon_url')}/>
|
||||
<p>{getMessage(languagecode, 'modals.main.addons.create.metadata.screenshot_url')}</p>
|
||||
<p>{getMessage('modals.main.addons.create.metadata.screenshot_url')}</p>
|
||||
<input type='text' value={this.state.addonMetadata.screenshot_url} onInput={(e) => setMetadata(e.target.value, 'screenshot_url')}/>
|
||||
<p>{getMessage(languagecode, 'modals.main.addons.create.metadata.description')}</p>
|
||||
<p>{getMessage('modals.main.addons.create.metadata.description')}</p>
|
||||
<textarea className='settingsTextarea' value={this.state.addonMetadata.description} onInput={(e) => setMetadata(e.target.value, 'description')}/>
|
||||
<br/>
|
||||
<button onClick={() => this.changeTab(1)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage(languagecode, 'modals.welcome.buttons.previous')}</button>
|
||||
<button onClick={() => this.changeTab(this.state.addonMetadata.type)} className='uploadbg' disabled={nextDescriptionDisabled}>{getMessage(languagecode, 'modals.welcome.buttons.next')}</button>
|
||||
<button onClick={() => this.changeTab(1)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
|
||||
<button onClick={() => this.changeTab(this.state.addonMetadata.type)} className='uploadbg' disabled={nextDescriptionDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -160,44 +159,44 @@ export default class Create extends PureComponent {
|
||||
const nextSettingsDisabled = (this.state.addonData === '') ? true : false;
|
||||
const importSettings = (
|
||||
<>
|
||||
<h3>{getMessage(languagecode, 'modals.mwelcome.sections.title')}</h3>
|
||||
<h3>{getMessage('modals.mwelcome.sections.title')}</h3>
|
||||
<div className='themesToggleArea'>
|
||||
<div className='options'>
|
||||
<div className={this.state.settingsClasses.current} onClick={() => this.importSettings()}>
|
||||
<span>{getMessage(languagecode, 'modals.main.addons.create.settings.current')}</span>
|
||||
<span>{getMessage('modals.main.addons.create.settings.current')}</span>
|
||||
</div>
|
||||
<div className={this.state.settingsClasses.json} onClick={() => document.getElementById('file-input').click()}>
|
||||
<span>{getMessage(languagecode, 'modals.main.addons.create.settings.json')}</span>
|
||||
<span>{getMessage('modals.main.addons.create.settings.json')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.importSettings(JSON.parse(e.target.result))} />
|
||||
<br/><br/>
|
||||
<button onClick={() => this.changeTab(2)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage(languagecode, 'modals.welcome.buttons.previous')}</button>
|
||||
<button onClick={() => this.changeTab(3)} className='uploadbg' disabled={nextSettingsDisabled}>{getMessage(languagecode, 'modals.welcome.buttons.next')}</button>
|
||||
<button onClick={() => this.changeTab(2)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
|
||||
<button onClick={() => this.changeTab(3)} className='uploadbg' disabled={nextSettingsDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
|
||||
</>
|
||||
);
|
||||
|
||||
// quotes
|
||||
const addQuotes = (
|
||||
<>
|
||||
<h3>{getMessage(languagecode, 'modals.main.addons.create.quotes.title')}</h3>
|
||||
<h3>{getMessage('modals.main.addons.create.quotes.title')}</h3>
|
||||
</>
|
||||
);
|
||||
|
||||
// photos
|
||||
const addPhotos = (
|
||||
<>
|
||||
<h3>{getMessage(languagecode, 'modals.main.addons.create.photos.title')}</h3>
|
||||
<h3>{getMessage('modals.main.addons.create.photos.title')}</h3>
|
||||
</>
|
||||
);
|
||||
|
||||
const downloadAddon = (
|
||||
<>
|
||||
<h3>{getMessage(languagecode, 'modals.main.addons.create.finish.title')}</h3>
|
||||
<button onClick={() => this.downloadAddon()} className='upload'>{getMessage(languagecode, 'modals.main.addons.create.finish.download')}</button>
|
||||
<h3>{getMessage('modals.main.addons.create.finish.title')}</h3>
|
||||
<button onClick={() => this.downloadAddon()} className='upload'>{getMessage('modals.main.addons.create.finish.download')}</button>
|
||||
<br/><br/>
|
||||
<button onClick={() => this.changeTab(this.state.addonMetadata.type)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage(languagecode, 'modals.welcome.buttons.previous')}</button>
|
||||
<button onClick={() => this.changeTab(this.state.addonMetadata.type)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -212,7 +211,7 @@ export default class Create extends PureComponent {
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>{getMessage(languagecode, 'modals.main.addons.create.other_title')}</h2>
|
||||
<h2>{getMessage('modals.main.addons.create.other_title')}</h2>
|
||||
{tabContent}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -10,8 +10,7 @@ import Dropdown from '../../settings/Dropdown';
|
||||
import { install, urlParser, uninstall } from 'modules/helpers/marketplace';
|
||||
|
||||
export default class Marketplace extends PureComponent {
|
||||
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
languagecode = variables.languagecode;
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -23,8 +22,8 @@ export default class Marketplace extends PureComponent {
|
||||
item: {}
|
||||
};
|
||||
this.buttons = {
|
||||
uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>{this.getMessage(this.languagecode, 'modals.main.marketplace.product.buttons.remove')}</button>,
|
||||
install: <button className='addToMue' onClick={() => this.manage('install')}>{this.getMessage(this.languagecode, 'modals.main.marketplace.product.buttons.addtomue')}</button>
|
||||
uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>{this.getMessage('modals.main.marketplace.product.buttons.remove')}</button>,
|
||||
install: <button className='addToMue' onClick={() => this.manage('install')}>{this.getMessage('modals.main.marketplace.product.buttons.addtomue')}</button>
|
||||
};
|
||||
this.controller = new AbortController();
|
||||
}
|
||||
@@ -37,7 +36,7 @@ export default class Marketplace extends PureComponent {
|
||||
info = await (await fetch(`${window.constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`, { signal: this.controller.signal })).json();
|
||||
} catch (e) {
|
||||
if (this.controller.signal.aborted === false) {
|
||||
return toast(this.getMessage(this.languagecode, 'toasts.error'));
|
||||
return toast(this.getMessage('toasts.error'));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -112,7 +111,7 @@ export default class Marketplace extends PureComponent {
|
||||
uninstall(this.state.item.type, this.state.item.display_name);
|
||||
}
|
||||
|
||||
toast(this.getMessage(this.languagecode, 'toats.' + type + 'ed'));
|
||||
toast(this.getMessage('toats.' + type + 'ed'));
|
||||
this.setState({
|
||||
button: (type === 'install') ? this.buttons.uninstall : this.buttons.install
|
||||
});
|
||||
@@ -176,13 +175,13 @@ export default class Marketplace extends PureComponent {
|
||||
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
|
||||
return errorMessage(<>
|
||||
<WifiOff/>
|
||||
<h1>{this.getMessage(this.languagecode, 'modals.main.marketplace.offline.title')}</h1>
|
||||
<p className='description'>{this.getMessage(this.languagecode, 'modals.main.marketplace.offline.description')}</p>
|
||||
<h1>{this.getMessage('modals.main.marketplace.offline.title')}</h1>
|
||||
<p className='description'>{this.getMessage('modals.main.marketplace.offline.description')}</p>
|
||||
</>);
|
||||
}
|
||||
|
||||
if (this.state.done === false) {
|
||||
return errorMessage(<h1>{this.getMessage(this.languagecode, 'modals.main.loading')}</h1>);
|
||||
return errorMessage(<h1>{this.getMessage('modals.main.loading')}</h1>);
|
||||
}
|
||||
|
||||
const featured = () => {
|
||||
@@ -206,8 +205,8 @@ export default class Marketplace extends PureComponent {
|
||||
{featured()}
|
||||
{errorMessage(<>
|
||||
<LocalMall/>
|
||||
<h1>{this.getMessage(this.languagecode, 'modals.main.addons.empty.title')}</h1>
|
||||
<p className='description'>{this.getMessage(this.languagecode, 'modals.main.marketplace.no_items')}</p>
|
||||
<h1>{this.getMessage('modals.main.addons.empty.title')}</h1>
|
||||
<p className='description'>{this.getMessage('modals.main.marketplace.no_items')}</p>
|
||||
</>)}
|
||||
</>
|
||||
);
|
||||
@@ -221,9 +220,9 @@ export default class Marketplace extends PureComponent {
|
||||
<>
|
||||
{featured()}
|
||||
<br/>
|
||||
<Dropdown label={this.getMessage(this.languagecode, 'modals.main.addons.sort.title')} name='sortMarketplace' onChange={(value) => this.sortMarketplace(value)}>
|
||||
<option value='a-z'>{this.getMessage(this.languagecode, 'modals.main.addons.sort.a_z')}</option>
|
||||
<option value='z-a'>{this.getMessage(this.languagecode, 'modals.main.addons.sort.z_a')}</option>
|
||||
<Dropdown label={this.getMessage('modals.main.addons.sort.title')} name='sortMarketplace' onChange={(value) => this.sortMarketplace(value)}>
|
||||
<option value='a-z'>{this.getMessage('modals.main.addons.sort.a_z')}</option>
|
||||
<option value='z-a'>{this.getMessage('modals.main.addons.sort.z_a')}</option>
|
||||
</Dropdown>
|
||||
<br/>
|
||||
<Items items={this.state.items} toggleFunction={(input) => this.toggle('item', input)} />
|
||||
|
||||
@@ -11,8 +11,7 @@ import FileUpload from '../../settings/FileUpload';
|
||||
import { install } from 'modules/helpers/marketplace';
|
||||
|
||||
export default class Sideload extends PureComponent {
|
||||
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
languagecode = variables.languagecode;
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@@ -46,7 +45,7 @@ export default class Sideload extends PureComponent {
|
||||
}
|
||||
|
||||
install(input.type, input);
|
||||
toast(this.getMessage(this.languagecode, 'toasts.installed'));
|
||||
toast(this.getMessage('toasts.installed'));
|
||||
window.stats.postEvent('marketplace', 'Sideload');
|
||||
}
|
||||
|
||||
@@ -56,8 +55,8 @@ export default class Sideload extends PureComponent {
|
||||
<div className='emptyMessage'>
|
||||
<FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.installAddon(JSON.parse(e.target.result))} />
|
||||
<LocalMall/>
|
||||
<h1>{this.getMessage(this.languagecode, 'modals.main.addons.sideload')}</h1>
|
||||
<button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.upload')}</button>
|
||||
<h1>{this.getMessage('modals.main.addons.sideload')}</h1>
|
||||
<button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.getMessage('modals.main.settings.sections.background.source.upload')}</button>
|
||||
</div>
|
||||
<Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showFailed: false })} isOpen={this.state.showFailed} className='Modal resetmodal mainModal sideloadModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
|
||||
<SideloadFailedModal modalClose={() => this.setState({ showFailed: false })} reason={this.state.failedReason}/>
|
||||
|
||||
@@ -3,8 +3,7 @@ import { PureComponent } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
export default class FileUpload extends PureComponent {
|
||||
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
languagecode = variables.languagecode;
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
componentDidMount() {
|
||||
document.getElementById(this.props.id).onchange = (e) => {
|
||||
@@ -16,7 +15,7 @@ export default class FileUpload extends PureComponent {
|
||||
} else {
|
||||
// background upload
|
||||
if (file.size > 2000000) {
|
||||
return toast(this.getMessage(this.languagecode, 'modals.main.file_upload_error'));
|
||||
return toast(this.getMessage('modals.main.file_upload_error'));
|
||||
}
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
@@ -7,8 +7,7 @@ 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;
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -16,9 +15,9 @@ export default class About extends PureComponent {
|
||||
contributors: [],
|
||||
sponsors: [],
|
||||
other_contributors: [],
|
||||
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')
|
||||
photographers: this.getMessage('modals.main.loading'),
|
||||
update: this.getMessage('modals.main.settings.sections.about.version.checking_update'),
|
||||
loading: this.getMessage('modals.main.loading')
|
||||
};
|
||||
this.controller = new AbortController();
|
||||
}
|
||||
@@ -37,8 +36,8 @@ export default class About extends PureComponent {
|
||||
}
|
||||
|
||||
return this.setState({
|
||||
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')
|
||||
update: this.getMessage('modals.main.settings.sections.about.version.error.title'),
|
||||
loading: this.getMessage('modals.main.settings.sections.about.version.error.description')
|
||||
});
|
||||
}
|
||||
|
||||
@@ -48,9 +47,9 @@ export default class About extends PureComponent {
|
||||
|
||||
const newVersion = versionData[0].tag_name;
|
||||
|
||||
let update = this.getMessage(this.languagecode, 'modals.main.settings.sections.about.version.no_update');
|
||||
let update = this.getMessage('modals.main.settings.sections.about.version.no_update');
|
||||
if (Number(window.constants.VERSION.replaceAll('.', '')) < Number(newVersion.replaceAll('.', ''))) {
|
||||
update = `${this.getMessage(this.languagecode, 'modals.main.settings.sections.about.version.update_available')}: ${newVersion}`;
|
||||
update = `${this.getMessage('modals.main.settings.sections.about.version.update_available')}: ${newVersion}`;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
@@ -67,8 +66,8 @@ export default class About extends PureComponent {
|
||||
componentDidMount() {
|
||||
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
|
||||
this.setState({
|
||||
update: this.getMessage(this.languagecode, 'modals.main.settings.sections.about.version.checking_update'),
|
||||
loading: this.getMessage(this.languagecode, 'modals.main.marketplace.offline.description')
|
||||
update: this.getMessage('modals.main.settings.sections.about.version.checking_update'),
|
||||
loading: this.getMessage('modals.main.marketplace.offline.description')
|
||||
});
|
||||
return;
|
||||
}
|
||||
@@ -84,34 +83,34 @@ export default class About extends PureComponent {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<h2>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.title')}</h2>
|
||||
<h2>{this.getMessage('modals.main.settings.sections.about.title')}</h2>
|
||||
<img draggable='false' className='aboutLogo' src='./././icons/logo_horizontal.png' alt='Logo'></img>
|
||||
<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>
|
||||
<p>{this.getMessage('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('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('modals.welcome.sections.privacy.links.privacy_policy')}</a>
|
||||
|
||||
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.contact_us')}</h3>
|
||||
<h3>{this.getMessage('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.getMessage(this.languagecode, 'modals.main.settings.sections.about.support_mue')}</h3>
|
||||
<h3>{this.getMessage('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>
|
||||
• <a href={'https://ko-fi.com/' + window.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>Ko-Fi</a>
|
||||
• <a href={'https://patreon.com/' + window.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>Patreon</a>
|
||||
</p>
|
||||
|
||||
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.resources_used.title')}</h3>
|
||||
<h3>{this.getMessage('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.getMessage(this.languagecode, 'modals.main.settings.sections.about.resources_used.bg_images')})
|
||||
, <a href='https://unsplash.com' className='aboutLink' target='_blank' rel='noopener noreferrer'>Unsplash</a> ({this.getMessage('modals.main.settings.sections.about.resources_used.bg_images')})
|
||||
</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>
|
||||
<p><a href='https://undraw.co' className='aboutLink' target='_blank' rel='noopener noreferrer'>Undraw</a> ({this.getMessage('modals.main.settings.sections.about.resources_used.welcome_img')})</p>
|
||||
|
||||
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.contributors')}</h3>
|
||||
<h3>{this.getMessage('modals.main.settings.sections.about.contributors')}</h3>
|
||||
<p>{this.state.loading}</p>
|
||||
{this.state.contributors.map(({ login, id }) => (
|
||||
<Tooltip title={login} key={login}>
|
||||
@@ -125,7 +124,7 @@ export default class About extends PureComponent {
|
||||
</Tooltip>
|
||||
))}
|
||||
|
||||
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.supporters')}</h3>
|
||||
<h3>{this.getMessage('modals.main.settings.sections.about.supporters')}</h3>
|
||||
<p>{this.state.loading}</p>
|
||||
{this.state.sponsors.map(({ handle, avatar }) => (
|
||||
<Tooltip title={handle} key={handle}>
|
||||
@@ -133,7 +132,7 @@ export default class About extends PureComponent {
|
||||
</Tooltip>
|
||||
))}
|
||||
|
||||
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.photographers')}</h3>
|
||||
<h3>{this.getMessage('modals.main.settings.sections.about.photographers')}</h3>
|
||||
<p>{this.state.photographers}</p>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -22,34 +22,33 @@ export default class AdvancedSettings extends PureComponent {
|
||||
}
|
||||
|
||||
render() {
|
||||
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
const languagecode = variables.languagecode;
|
||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
<h2>{getMessage('modals.main.settings.sections.advanced.title')}</h2>
|
||||
<Checkbox name='offlineMode' text={getMessage('modals.main.settings.sections.advanced.offline_mode')} element='.other' />
|
||||
<Dropdown name='timezone' label={getMessage('modals.main.settings.sections.advanced.timezone.title')} category='timezone'>
|
||||
<option value='auto'>{getMessage('modals.main.settings.sections.advanced.timezone.automatic')}</option>
|
||||
{time_zones.map((timezone) => (
|
||||
<option value={timezone} key={timezone}>{timezone}</option>
|
||||
))}
|
||||
</Dropdown>
|
||||
|
||||
<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>
|
||||
<h3>{getMessage('modals.main.settings.sections.advanced.data')}</h3>
|
||||
<button className='reset' onClick={() => this.setState({ resetModal: true })}>{getMessage('modals.main.settings.buttons.reset')}</button>
|
||||
<button className='export' onClick={() => exportSettings()}>{getMessage('modals.main.settings.buttons.export')}</button>
|
||||
<button className='import' onClick={() => document.getElementById('file-input').click()}>{getMessage('modals.main.settings.buttons.import')}</button>
|
||||
<FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => importSettings(e)}/>
|
||||
|
||||
<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>{getMessage('modals.main.settings.sections.advanced.customisation')}</h3>
|
||||
<Text title={getMessage('modals.main.settings.sections.advanced.tab_name')} name='tabName' default={getMessage('tabname')} category='other'/>
|
||||
<Text title={getMessage('modals.main.settings.sections.advanced.custom_js')} name='customjs' textarea={true} category='other' element='other'/>
|
||||
<Text title={getMessage('modals.main.settings.sections.advanced.custom_css')} name='customcss' textarea={true} category='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'/>
|
||||
<h3>{getMessage('modals.main.settings.sections.experimental.title')}</h3>
|
||||
<p style={{ maxWidth: '75%' }}>{getMessage('modals.main.settings.sections.advanced.experimental_warning')}</p>
|
||||
<Switch name='experimental' text={getMessage('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 })} />
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import variables from 'modules/variables';
|
||||
|
||||
import Checkbox from '../Checkbox';
|
||||
import Dropdown from '../Dropdown';
|
||||
import Radio from '../Radio';
|
||||
@@ -6,68 +7,67 @@ import Slider from '../Slider';
|
||||
import Text from '../Text';
|
||||
|
||||
export default function AppearanceSettings() {
|
||||
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
const languagecode = variables.languagecode;
|
||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
const themeOptions = [
|
||||
{
|
||||
name: getMessage(languagecode, 'modals.main.settings.sections.appearance.theme.auto'),
|
||||
name: getMessage('modals.main.settings.sections.appearance.theme.auto'),
|
||||
value: 'auto'
|
||||
},
|
||||
{
|
||||
name: getMessage(languagecode, 'modals.main.settings.sections.appearance.theme.light'),
|
||||
name: getMessage('modals.main.settings.sections.appearance.theme.light'),
|
||||
value: 'light'
|
||||
},
|
||||
{
|
||||
name: getMessage(languagecode, 'modals.main.settings.sections.appearance.theme.dark'),
|
||||
name: getMessage('modals.main.settings.sections.appearance.theme.dark'),
|
||||
value: 'dark'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<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' />
|
||||
<h2>{getMessage('modals.main.settings.sections.appearance.title')}</h2>
|
||||
<Radio name='theme' title={getMessage('modals.main.settings.sections.appearance.theme.title')} options={themeOptions} category='other' />
|
||||
|
||||
<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>
|
||||
<h3>{getMessage('modals.main.settings.sections.appearance.navbar.title')}</h3>
|
||||
<Checkbox name='notesEnabled' text={getMessage('modals.main.settings.sections.appearance.navbar.notes')} category='navbar' />
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.appearance.navbar.refresh')} name='refresh' category='navbar'>
|
||||
<option value='false'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.none')}</option>
|
||||
<option value='background'>{getMessage('modals.main.settings.sections.background.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')}</option>
|
||||
{/* before it was just a checkbox */}
|
||||
<option value='true'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.navbar.refresh_options.page')}</option>
|
||||
<option value='true'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.page')}</option>
|
||||
</Dropdown>
|
||||
<br/>
|
||||
<Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomNavbar' min='10' max='400' default='100' display='%' category='navbar' />
|
||||
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomNavbar' min='10' max='400' default='100' display='%' category='navbar' />
|
||||
|
||||
<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' />
|
||||
<h3>{getMessage('modals.main.settings.sections.appearance.font.title')}</h3>
|
||||
<Text title={getMessage('modals.main.settings.sections.appearance.font.custom')} name='font' upperCaseFirst={true} category='other' />
|
||||
<br/>
|
||||
<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'>
|
||||
<Checkbox name='fontGoogle' text={getMessage('modals.main.settings.sections.appearance.font.google')} category='other' />
|
||||
<Dropdown label={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(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>
|
||||
<option value='100'>{getMessage('modals.main.settings.sections.appearance.font.weight.thin')}</option>
|
||||
<option value='200'>{getMessage('modals.main.settings.sections.appearance.font.weight.extra_light')}</option>
|
||||
<option value='300'>{getMessage('modals.main.settings.sections.appearance.font.weight.light')}</option>
|
||||
<option value='400'>{getMessage('modals.main.settings.sections.appearance.font.weight.normal')}</option>
|
||||
<option value='500'>{getMessage('modals.main.settings.sections.appearance.font.weight.medium')}</option>
|
||||
<option value='600'>{getMessage('modals.main.settings.sections.appearance.font.weight.semi_bold')}</option>
|
||||
<option value='700'>{getMessage('modals.main.settings.sections.appearance.font.weight.bold')}</option>
|
||||
<option value='800'>{getMessage('modals.main.settings.sections.appearance.font.weight.extra_bold')}</option>
|
||||
</Dropdown>
|
||||
<br/><br/>
|
||||
<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 label={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')}</option>
|
||||
<option value='italic'>{getMessage('modals.main.settings.sections.appearance.font.style.italic')}</option>
|
||||
<option value='oblique'>{getMessage('modals.main.settings.sections.appearance.font.style.oblique')}</option>
|
||||
</Dropdown>
|
||||
|
||||
<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')} />
|
||||
<h3>{getMessage('modals.main.settings.sections.appearance.accessibility.title')}</h3>
|
||||
<Checkbox text={getMessage('modals.main.settings.sections.appearance.accessibility.text_shadow')} name='textBorder' category='other'/>
|
||||
<Checkbox text={getMessage('modals.main.settings.sections.appearance.accessibility.animations')} name='animations' category='other'/>
|
||||
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.toast_duration')} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' toast={true} display={' ' + getMessage('modals.main.settings.sections.appearance.accessibility.miliseconds')} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -75,8 +75,7 @@ export default class Changelog extends PureComponent {
|
||||
}
|
||||
|
||||
render() {
|
||||
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
const languagecode = variables.languagecode;
|
||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
const errorMessage = (msg) => {
|
||||
return (
|
||||
@@ -91,13 +90,13 @@ export default class Changelog extends PureComponent {
|
||||
if (navigator.onLine === false || this.offlineMode) {
|
||||
return errorMessage(<>
|
||||
<WifiOff/>
|
||||
<h1>{getMessage(languagecode, 'modals.main.marketplace.offline.title')}</h1>
|
||||
<p className='description'>{getMessage(languagecode, 'modals.main.marketplace.offline.description')}</p>
|
||||
<h1>{getMessage('modals.main.marketplace.offline.title')}</h1>
|
||||
<p className='description'>{getMessage('modals.main.marketplace.offline.description')}</p>
|
||||
</>);
|
||||
}
|
||||
|
||||
if (!this.state.title) {
|
||||
return errorMessage(<h1>{getMessage(languagecode, 'modals.main.loading')}</h1>);
|
||||
return errorMessage(<h1>{getMessage('modals.main.loading')}</h1>);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -6,15 +6,14 @@ import { toast } from 'react-toastify';
|
||||
|
||||
import EventBus from 'modules/helpers/eventbus';
|
||||
|
||||
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
const languagecode = variables.languagecode;
|
||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
const widget_name = {
|
||||
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'),
|
||||
message: getMessage(languagecode, 'modals.main.settings.sections.message.title')
|
||||
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.greeting.title'),
|
||||
message: getMessage('modals.main.settings.sections.message.title')
|
||||
};
|
||||
|
||||
const SortableItem = sortableElement(({ value }) => (
|
||||
@@ -67,7 +66,7 @@ export default class OrderSettings extends PureComponent {
|
||||
items: JSON.parse(localStorage.getItem('order'))
|
||||
});
|
||||
|
||||
toast(getMessage(languagecode, 'toats.reset'));
|
||||
toast(getMessage('toats.reset'));
|
||||
}
|
||||
|
||||
enabled = (setting) => {
|
||||
@@ -88,8 +87,8 @@ export default class OrderSettings extends PureComponent {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<h2>{getMessage(languagecode, 'modals.main.settings.sections.order.title')}</h2>
|
||||
<span className='modalLink' onClick={this.reset}>{getMessage(languagecode, 'modals.main.settings.buttons.reset')}</span>
|
||||
<h2>{getMessage('modals.main.settings.sections.order.title')}</h2>
|
||||
<span className='modalLink' onClick={this.reset}>{getMessage('modals.main.settings.buttons.reset')}</span>
|
||||
<SortableContainer onSortEnd={this.onSortEnd} lockAxis='y' lockToContainerEdges disableAutoscroll>
|
||||
{this.state.items.map((value, index) => {
|
||||
if (!this.enabled(value)) {
|
||||
|
||||
@@ -5,18 +5,17 @@ import Checkbox from '../Checkbox';
|
||||
import Slider from '../Slider';
|
||||
|
||||
export default function QuickLinks() {
|
||||
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
const languagecode = variables.languagecode;
|
||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
return (
|
||||
<>
|
||||
<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='quicklinksText' text={getMessage(languagecode, 'modals.main.settings.sections.quicklinks.text_only')} category='quicklinks'/>
|
||||
<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'/>
|
||||
<h2>{getMessage('modals.main.settings.sections.quicklinks.title')}</h2>
|
||||
<Switch name='quicklinksenabled' text={getMessage('modals.main.settings.enabled')} category='quicklinks' element='.quicklinks-container'/>
|
||||
<Checkbox name='quicklinksText' text={getMessage('modals.main.settings.sections.quicklinks.text_only')} category='quicklinks'/>
|
||||
<Checkbox name='quicklinksddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} category='quicklinks'/>
|
||||
<Checkbox name='quicklinksnewtab' text={getMessage('modals.main.settings.sections.quicklinks.open_new')} category='quicklinks'/>
|
||||
<Checkbox name='quicklinkstooltip' text={getMessage('modals.main.settings.sections.quicklinks.tooltip')} category='quicklinks'/>
|
||||
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomQuicklinks' min='10' max='400' default='100' display='%' category='quicklinks'/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,8 +8,7 @@ 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;
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -20,7 +19,7 @@ export default class QuoteSettings extends PureComponent {
|
||||
|
||||
marketplaceType = () => {
|
||||
if (localStorage.getItem('quote_packs')) {
|
||||
return <option value='quote_pack'>{this.getMessage(this.languagecode, 'modals.main.navbar.marketplace')}</option>;
|
||||
return <option value='quote_pack'>{this.getMessage('modals.main.navbar.marketplace')}</option>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,8 +28,8 @@ export default class QuoteSettings extends PureComponent {
|
||||
if (this.state.quoteType === 'custom') {
|
||||
customSettings = (
|
||||
<>
|
||||
<Text title={this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.custom')} name='customQuote' category='quote' />
|
||||
<Text title={this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.custom_author')} name='customQuoteAuthor' category='quote'/>
|
||||
<Text title={this.getMessage('modals.main.settings.sections.quote.custom')} name='customQuote' category='quote' />
|
||||
<Text title={this.getMessage('modals.main.settings.sections.quote.custom_author')} name='customQuoteAuthor' category='quote'/>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
@@ -38,14 +37,14 @@ export default class QuoteSettings extends PureComponent {
|
||||
customSettings = (
|
||||
<>
|
||||
<br/><br/>
|
||||
<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 label={this.getMessage('modals.main.settings.sections.background.interval.title')} name='quotechange'>
|
||||
<option value='refresh'>{this.getMessage('tabname')}</option>
|
||||
<option value='60000'>{this.getMessage('modals.main.settings.sections.background.interval.minute')}</option>
|
||||
<option value='1800000'>{this.getMessage('modals.main.settings.sections.background.interval.half_hour')}</option>
|
||||
<option value='3600000'>{this.getMessage('modals.main.settings.sections.background.interval.hour')}</option>
|
||||
<option value='86400000'>{this.getMessage('modals.main.settings.sections.background.interval.day')}</option>
|
||||
<option value='604800000'>{this.getMessage('widgets.date.week')}</option>
|
||||
<option value='2628000000'>{this.getMessage('modals.main.settings.sections.background.interval.month')}</option>
|
||||
</Dropdown>
|
||||
</>
|
||||
);
|
||||
@@ -53,21 +52,21 @@ export default class QuoteSettings extends PureComponent {
|
||||
|
||||
return (
|
||||
<>
|
||||
<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'>
|
||||
<h2>{this.getMessage('modals.main.settings.sections.quote.title')}</h2>
|
||||
<Switch name='quote' text={this.getMessage('modals.main.settings.enabled')} category='quote' element='.quotediv' />
|
||||
<Checkbox name='authorLink' text={this.getMessage('modals.main.settings.sections.quote.author_link')} element='.other' />
|
||||
<Dropdown label={this.getMessage('modals.main.settings.sections.background.type.title')} name='quoteType' onChange={(value) => this.setState({ quoteType: value })} category='quote'>
|
||||
{this.marketplaceType()}
|
||||
<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>
|
||||
<option value='api'>{this.getMessage('modals.main.settings.sections.background.type.api')}</option>
|
||||
<option value='custom'>{this.getMessage('modals.main.settings.sections.quote.custom')}</option>
|
||||
</Dropdown>
|
||||
{customSettings}
|
||||
<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' />
|
||||
<Slider title={this.getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomQuote' min='10' max='400' default='100' display='%' 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'/>
|
||||
<h3>{this.getMessage('modals.main.settings.sections.quote.buttons.title')}</h3>
|
||||
<Checkbox name='copyButton' text={this.getMessage('modals.main.settings.sections.quote.buttons.copy')} category='quote'/>
|
||||
<Checkbox name='tweetButton' text={this.getMessage('modals.main.settings.sections.quote.buttons.tweet')} category='quote'/>
|
||||
<Checkbox name='favouriteQuoteEnabled' text={this.getMessage('modals.main.settings.sections.quote.buttons.favourite')} category='quote'/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -13,8 +13,7 @@ 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;
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -31,7 +30,7 @@ export default class SearchSettings extends PureComponent {
|
||||
customValue: ''
|
||||
});
|
||||
|
||||
toast(this.getMessage(this.languagecode, 'toasts.reset'));
|
||||
toast(this.getMessage('toasts.reset'));
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@@ -73,27 +72,27 @@ export default class SearchSettings extends PureComponent {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<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' />
|
||||
<h2>{this.getMessage('modals.main.settings.sections.search.title')}</h2>
|
||||
<Switch name='searchBar' text={this.getMessage('modals.main.settings.enabled')} category='widgets' />
|
||||
{/* not supported on firefox */}
|
||||
{(navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined') ?
|
||||
<Checkbox name='voiceSearch' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.search.voice_search')} category='search'/>
|
||||
<Checkbox name='voiceSearch' text={this.getMessage('modals.main.settings.sections.search.voice_search')} category='search'/>
|
||||
: null}
|
||||
<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)}>
|
||||
<Checkbox name='searchDropdown' text={this.getMessage('modals.main.settings.sections.search.dropdown')} category='search' element='.other'/>
|
||||
<Dropdown label={this.getMessage('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'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.search.custom').split(' ')[0]}</option>
|
||||
<option value='custom'>{this.getMessage('modals.main.settings.sections.search.custom').split(' ')[0]}</option>
|
||||
</Dropdown>
|
||||
<ul style={{ display: this.state.customDisplay }}>
|
||||
<br/>
|
||||
<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>
|
||||
<p style={{ marginTop: '0px' }}>{this.getMessage('modals.main.settings.sections.search.custom')} <span className='modalLink' onClick={() => this.resetSearch()}>{this.getMessage('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={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'/>
|
||||
<Checkbox name='autocomplete' text={this.getMessage('modals.main.settings.sections.search.autocomplete')} category='search' />
|
||||
<Radio title={this.getMessage('modals.main.settings.sections.search.autocomplete_provider')} options={autocompleteProviders} name='autocompleteProvider' category='search'/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -32,30 +32,29 @@ export default class Stats extends PureComponent {
|
||||
}
|
||||
|
||||
render() {
|
||||
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
const languagecode = variables.languagecode;
|
||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
if (localStorage.getItem('stats') === 'false') {
|
||||
return (
|
||||
<>
|
||||
<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'/>
|
||||
<h2>{getMessage('modals.main.settings.reminder.title')}</h2>
|
||||
<p>{getMessage('modals.main.settings.sections.stats.warning')}</p>
|
||||
<Switch name='stats' text={getMessage('modals.main.settings.sections.stats.usage')} category='stats'/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<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'/>
|
||||
<h2>{getMessage('modals.main.settings.sections.stats.title')}</h2>
|
||||
<p>{getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}: {this.state.stats['tabs-opened'] || 0}</p>
|
||||
<p>{getMessage('modals.main.settings.sections.stats.sections.backgrounds_favourited')}: {this.state.stats.feature ? this.state.stats.feature['background-favourite'] || 0 : 0}</p>
|
||||
<p>{getMessage('modals.main.settings.sections.stats.sections.backgrounds_downloaded')}: {this.state.stats.feature ? this.state.stats.feature['background-download'] || 0 : 0}</p>
|
||||
<p>{getMessage('modals.main.settings.sections.stats.sections.quotes_favourited')}: {this.state.stats.feature ? this.state.stats.feature['quoted-favourite'] || 0 : 0}</p>
|
||||
<p>{getMessage('modals.main.settings.sections.stats.sections.quicklinks_added')}: {this.state.stats.feature ? this.state.stats.feature['quicklink-add'] || 0 : 0}</p>
|
||||
<p>{getMessage('modals.main.settings.sections.stats.sections.settings_changed')}: {this.state.stats.setting ? Object.keys(this.state.stats.setting).length : 0}</p>
|
||||
<p>{getMessage('modals.main.settings.sections.stats.sections.addons_installed')}: {this.state.stats.marketplace ? this.state.stats.marketplace['install'] : 0}</p>
|
||||
<Switch name='stats' text={getMessage('modals.main.settings.sections.stats.usage')} category='stats'/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -17,40 +17,39 @@ export default class TimeSettings extends PureComponent {
|
||||
}
|
||||
|
||||
render() {
|
||||
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
const languagecode = variables.languagecode;
|
||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
let timeSettings;
|
||||
|
||||
const digitalOptions = [
|
||||
{
|
||||
name: getMessage(languagecode, 'modals.main.settings.sections.time.digital.twentyfourhour'),
|
||||
name: getMessage('modals.main.settings.sections.time.digital.twentyfourhour'),
|
||||
value: 'twentyfourhour'
|
||||
},
|
||||
{
|
||||
name: getMessage(languagecode, 'modals.main.settings.sections.time.digital.twelvehour'),
|
||||
name: getMessage('modals.main.settings.sections.time.digital.twelvehour'),
|
||||
value: 'twelvehour'
|
||||
}
|
||||
];
|
||||
|
||||
const digitalSettings = (
|
||||
<>
|
||||
<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' />
|
||||
<h3>{getMessage('modals.main.settings.sections.time.digital.title')}</h3>
|
||||
<Radio title={getMessage('modals.main.settings.sections.time.format')} name='timeformat' options={digitalOptions} smallTitle={true} category='clock' />
|
||||
<br/>
|
||||
<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' />
|
||||
<Checkbox name='seconds' text={getMessage('modals.main.settings.sections.time.digital.seconds')} category='clock' />
|
||||
<Checkbox name='zero' text={getMessage('modals.main.settings.sections.time.digital.zero')} category='clock' />
|
||||
</>
|
||||
);
|
||||
|
||||
const analogSettings = (
|
||||
<>
|
||||
<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' />
|
||||
<h3>{getMessage('modals.main.settings.sections.time.analogue.title')}</h3>
|
||||
<Checkbox name='secondHand' text={getMessage('modals.main.settings.sections.time.analogue.second_hand')} category='clock' />
|
||||
<Checkbox name='minuteHand' text={getMessage('modals.main.settings.sections.time.analogue.minute_hand')} category='clock' />
|
||||
<Checkbox name='hourHand' text={getMessage('modals.main.settings.sections.time.analogue.hour_hand')} category='clock' />
|
||||
<Checkbox name='hourMarks' text={getMessage('modals.main.settings.sections.time.analogue.hour_marks')} category='clock' />
|
||||
<Checkbox name='minuteMarks' text={getMessage('modals.main.settings.sections.time.analogue.minute_marks')} category='clock' />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -64,25 +63,25 @@ export default class TimeSettings extends PureComponent {
|
||||
|
||||
const longSettings = (
|
||||
<>
|
||||
<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' />
|
||||
<Checkbox name='dayofweek' text={getMessage('modals.main.settings.sections.time.date.day_of_week')} category='date' />
|
||||
<Checkbox name='datenth' text={getMessage('modals.main.settings.sections.time.date.datenth')} category='date' />
|
||||
</>
|
||||
);
|
||||
|
||||
const shortSettings = (
|
||||
<>
|
||||
<br/>
|
||||
<Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.time.date.short_format')} name='dateFormat' category='date'>
|
||||
<Dropdown label={getMessage('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={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 label={getMessage('modals.main.settings.sections.time.date.short_separator.title')} name='shortFormat' category='date'>
|
||||
<option value='dash'>{getMessage('modals.main.settings.sections.time.date.short_separator.dash')}</option>
|
||||
<option value='dots'>{getMessage('modals.main.settings.sections.time.date.short_separator.dots')}</option>
|
||||
<option value='gaps'>{getMessage('modals.main.settings.sections.time.date.short_separator.gaps')}</option>
|
||||
<option value='slashes'>{getMessage('modals.main.settings.sections.time.date.short_separator.slashes')}</option>
|
||||
</Dropdown>
|
||||
</>
|
||||
);
|
||||
@@ -95,29 +94,29 @@ export default class TimeSettings extends PureComponent {
|
||||
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
<h2>{getMessage('modals.main.settings.sections.time.title')}</h2>
|
||||
<Switch name='time' text={getMessage('modals.main.settings.enabled')} category='clock' element='.clock-container' />
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.time.type')} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock'>
|
||||
<option value='digital'>{getMessage('modals.main.settings.sections.time.digital.title')}</option>
|
||||
<option value='analogue'>{getMessage('modals.main.settings.sections.time.analogue.title')}</option>
|
||||
<option value='percentageComplete'>{getMessage('modals.main.settings.sections.time.percentage_complete')}</option>
|
||||
</Dropdown>
|
||||
{timeSettings}
|
||||
{this.state.timeType !== 'analogue' ?
|
||||
<Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomClock' min='10' max='400' default='100' display='%' category='clock'/>
|
||||
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomClock' min='10' max='400' default='100' display='%' category='clock'/>
|
||||
: null}
|
||||
|
||||
<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>
|
||||
<h3>{getMessage('modals.main.settings.sections.time.date.title')}</h3>
|
||||
<Switch name='date' text={getMessage('modals.main.settings.enabled')} category='date' element='.date'/>
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.time.type')} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date'>
|
||||
<option value='long'>{getMessage('modals.main.settings.sections.time.date.type.long')}</option>
|
||||
<option value='short'>{getMessage('modals.main.settings.sections.time.date.type.short')}</option>
|
||||
</Dropdown>
|
||||
<br/>
|
||||
<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'/>
|
||||
<Checkbox name='datezero' text={getMessage('modals.main.settings.sections.time.digital.zero')} category='date'/>
|
||||
<Checkbox name='weeknumber' text={getMessage('modals.main.settings.sections.time.date.week_number')} category='date'/>
|
||||
{dateSettings}
|
||||
<Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomDate' min='10' max='400' default='100' display='%' category='date'/>
|
||||
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomDate' min='10' max='400' default='100' display='%' category='date'/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -48,47 +48,46 @@ export default class TimeSettings extends PureComponent {
|
||||
}
|
||||
|
||||
render() {
|
||||
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
const languagecode = variables.languagecode;
|
||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
const tempFormat = [
|
||||
{
|
||||
name: getMessage(languagecode, 'modals.main.settings.sections.weather.temp_format.celsius') + ' (°C)',
|
||||
name: getMessage('modals.main.settings.sections.weather.temp_format.celsius') + ' (°C)',
|
||||
value: 'celsius'
|
||||
},
|
||||
{
|
||||
name: getMessage(languagecode, 'modals.main.settings.sections.weather.temp_format.fahrenheit') + ' (°F)',
|
||||
name: getMessage('modals.main.settings.sections.weather.temp_format.fahrenheit') + ' (°F)',
|
||||
value: 'fahrenheit'
|
||||
},
|
||||
{
|
||||
name: getMessage(languagecode, 'modals.main.settings.sections.weather.temp_format.kelvin') + ' (K)',
|
||||
name: getMessage('modals.main.settings.sections.weather.temp_format.kelvin') + ' (K)',
|
||||
value: 'kelvin'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>{getMessage(languagecode, 'modals.main.settings.sections.weather.title')}</h2>
|
||||
<Switch name='weatherEnabled' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='widgets'/>
|
||||
<h2>{getMessage('modals.main.settings.sections.weather.title')}</h2>
|
||||
<Switch name='weatherEnabled' text={getMessage('modals.main.settings.enabled')} category='widgets'/>
|
||||
<ul>
|
||||
<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>
|
||||
<p>{getMessage('modals.main.settings.sections.weather.location')} <span className='modalLink' onClick={() => this.getAuto()}>{getMessage('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={getMessage(languagecode, 'modals.main.settings.sections.weather.temp_format.title')} options={tempFormat} category='weather'/>
|
||||
<Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomWeather' min='10' max='400' default='100' display='%' category='weather'/>
|
||||
<Radio name='tempformat' title={getMessage('modals.main.settings.sections.weather.temp_format.title')} options={tempFormat} category='weather'/>
|
||||
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomWeather' min='10' max='400' default='100' display='%' 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'/>
|
||||
<h3>{getMessage('modals.main.settings.sections.weather.extra_info.title')}</h3>
|
||||
<Checkbox name='showlocation' text={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')} category='weather'/>
|
||||
<Checkbox name='cloudiness' text={getMessage('modals.main.settings.sections.weather.extra_info.cloudiness')} category='weather'/>
|
||||
<Checkbox name='humidity' text={getMessage('modals.main.settings.sections.weather.extra_info.humidity')} category='weather'/>
|
||||
<Checkbox name='visibility' text={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')} category='weather'/>
|
||||
<Checkbox name='windDirection' text={getMessage('modals.main.settings.sections.weather.extra_info.wind_direction')} category='weather'/>
|
||||
<Checkbox name='mintemp' text={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')} category='weather'/>
|
||||
<Checkbox name='atmosphericpressure' text={getMessage('modals.main.settings.sections.weather.extra_info.atmospheric_pressure')} category='weather'/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -15,15 +15,14 @@ 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;
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
customBackground: this.getCustom(),
|
||||
backgroundType: localStorage.getItem('backgroundType') || 'api',
|
||||
backgroundCategories: [this.getMessage(this.languagecode, 'modals.main.loading')]
|
||||
backgroundCategories: [this.getMessage('modals.main.loading')]
|
||||
};
|
||||
this.controller = new AbortController();
|
||||
}
|
||||
@@ -33,7 +32,7 @@ export default class BackgroundSettings extends PureComponent {
|
||||
this.setState({
|
||||
customBackground: ['']
|
||||
});
|
||||
toast(this.getMessage(this.languagecode, 'toasts.reset'));
|
||||
toast(this.getMessage('toasts.reset'));
|
||||
EventBus.dispatch('refresh', 'background');
|
||||
}
|
||||
|
||||
@@ -73,8 +72,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.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')}/>
|
||||
<Checkbox name='backgroundVideoLoop' text={this.getMessage('modals.main.settings.sections.background.source.loop_video')}/>
|
||||
<Checkbox name='backgroundVideoMute' text={this.getMessage('modals.main.settings.sections.background.source.mute_video')}/>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
@@ -84,7 +83,7 @@ export default class BackgroundSettings extends PureComponent {
|
||||
|
||||
marketplaceType = () => {
|
||||
if (localStorage.getItem('photo_packs')) {
|
||||
return <option value='photo_pack'>{this.getMessage(this.languagecode, 'modals.main.navbar.marketplace')}</option>;
|
||||
return <option value='photo_pack'>{this.getMessage('modals.main.navbar.marketplace')}</option>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -123,7 +122,7 @@ export default class BackgroundSettings extends PureComponent {
|
||||
componentDidMount() {
|
||||
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
|
||||
return this.setState({
|
||||
backgroundCategories: [this.getMessage(this.languagecode, 'modals.update.offline.title')]
|
||||
backgroundCategories: [this.getMessage('modals.update.offline.title')]
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -13,8 +13,7 @@ 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;
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -28,7 +27,7 @@ export default class ColourSettings extends PureComponent {
|
||||
this.setState({
|
||||
gradientSettings: this.DefaultGradientSettings
|
||||
});
|
||||
toast(this.getMessage(this.languagecode, 'toasts.reset'));
|
||||
toast(this.getMessage('toasts.reset'));
|
||||
}
|
||||
|
||||
initialiseColourPickerState(gradientSettings) {
|
||||
@@ -105,14 +104,14 @@ export default class ColourSettings extends PureComponent {
|
||||
}
|
||||
|
||||
currentGradientSettings = () => {
|
||||
if (typeof this.state.gradientSettings === 'object' && this.state.gradientSettings.gradient.every(g => g.colour !== this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.disabled'))) {
|
||||
if (typeof this.state.gradientSettings === 'object' && this.state.gradientSettings.gradient.every(g => g.colour !== this.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));
|
||||
return JSON.stringify({
|
||||
...this.state.gradientSettings,
|
||||
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.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.disabled');
|
||||
return this.getMessage('modals.main.settings.sections.background.source.disabled');
|
||||
}
|
||||
|
||||
onColourPickerChange = (attrs, name) => {
|
||||
@@ -176,14 +175,14 @@ export default class ColourSettings extends PureComponent {
|
||||
colourSettings = (
|
||||
<>
|
||||
{gradientInputs}
|
||||
{!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}
|
||||
{!gradientHasMoreThanOneColour ? (<><br/><br/><button type='button' className='add' onClick={this.addColour}>{this.getMessage('modals.main.settings.sections.background.source.add_colour')}</button></>) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
<p>{this.getMessage('modals.main.settings.sections.background.source.custom_colour')} <span className='modalLink' onClick={() => this.resetColour()}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
|
||||
{colourSettings}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -6,14 +6,13 @@ import Sideload from '../marketplace/sections/Sideload';
|
||||
import Create from '../marketplace/sections/Create';
|
||||
|
||||
export default function Addons() {
|
||||
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
const languagecode = variables.languagecode;
|
||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
return (
|
||||
<Tabs>
|
||||
<div label={getMessage(languagecode, 'modals.main.addons.added')} name='added'><Added/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.addons.sideload')} name='sideload'><Sideload/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.addons.create.title')} name='create'><Create/></div>
|
||||
<div label={getMessage('modals.main.addons.added')} name='added'><Added/></div>
|
||||
<div label={getMessage('modals.main.addons.sideload')} name='sideload'><Sideload/></div>
|
||||
<div label={getMessage('modals.main.addons.create.title')} name='create'><Create/></div>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,14 +4,13 @@ import Tabs from './backend/Tabs';
|
||||
import MarketplaceTab from '../marketplace/sections/Marketplace';
|
||||
|
||||
export default function Marketplace() {
|
||||
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
const languagecode = variables.languagecode;
|
||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
return (
|
||||
<Tabs>
|
||||
<div label={getMessage(languagecode, 'modals.main.marketplace.photo_packs')} name='photo_packs'><MarketplaceTab type='photo_packs'/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.marketplace.quote_packs')} name='quote_packs'><MarketplaceTab type='quote_packs'/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.marketplace.preset_settings')} name='preset_settings'><MarketplaceTab type='preset_settings'/></div>
|
||||
<div label={getMessage('modals.main.marketplace.photo_packs')} name='photo_packs'><MarketplaceTab type='photo_packs'/></div>
|
||||
<div label={getMessage('modals.main.marketplace.quote_packs')} name='quote_packs'><MarketplaceTab type='quote_packs'/></div>
|
||||
<div label={getMessage('modals.main.marketplace.preset_settings')} name='preset_settings'><MarketplaceTab type='preset_settings'/></div>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,29 +20,28 @@ import Keybinds from '../settings/sections/Keybinds';
|
||||
import Message from '../settings/sections/Message';
|
||||
|
||||
export default function Settings() {
|
||||
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
const languagecode = variables.languagecode;
|
||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tabs>
|
||||
<div label={getMessage(languagecode, 'modals.main.settings.sections.time.title')} name='time'><Time/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.settings.sections.quote.title')} name='quote'><Quote/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.settings.sections.greeting.title')} name='greeting'><Greeting/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.settings.sections.background.title')} name='background'><Background/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.settings.sections.search.title')} name='search'><Search/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.settings.sections.quicklinks.title')} name='quicklinks'><QuickLinks/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.settings.sections.weather.title')} name='weather'><Weather/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.settings.sections.message.title')} name='message'><Message/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.settings.sections.appearance.title')} name='appearance'><Appearance/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.settings.sections.order.title')} name='order'><Order/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.settings.sections.language.title')} name='language'><Language/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.settings.sections.advanced.title')} name='advanced'><Advanced/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.settings.sections.keybinds.title')} name='keybinds'><Keybinds/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.settings.sections.stats.title')} name='stats'><Stats/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.settings.sections.experimental.title')} name='experimental'><Experimental/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.settings.sections.changelog')} name='changelog'><Changelog/></div>
|
||||
<div label={getMessage(languagecode, 'modals.main.settings.sections.about.title')} name='about'><About/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.time.title')} name='time'><Time/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.quote.title')} name='quote'><Quote/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.greeting.title')} name='greeting'><Greeting/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.background.title')} name='background'><Background/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.search.title')} name='search'><Search/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.quicklinks.title')} name='quicklinks'><QuickLinks/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.weather.title')} name='weather'><Weather/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.message.title')} name='message'><Message/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.appearance.title')} name='appearance'><Appearance/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.order.title')} name='order'><Order/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.language.title')} name='language'><Language/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.advanced.title')} name='advanced'><Advanced/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.keybinds.title')} name='keybinds'><Keybinds/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.stats.title')} name='stats'><Stats/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.experimental.title')} name='experimental'><Experimental/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.changelog')} name='changelog'><Changelog/></div>
|
||||
<div label={getMessage('modals.main.settings.sections.about.title')} name='about'><About/></div>
|
||||
</Tabs>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -27,8 +27,7 @@ import {
|
||||
} from '@mui/icons-material';
|
||||
|
||||
function Tab({ label, currentTab, onClick, navbarTab }) {
|
||||
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
const languagecode = variables.languagecode;
|
||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
let className = 'tab-list-item';
|
||||
if (currentTab === label) {
|
||||
@@ -44,40 +43,40 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
|
||||
|
||||
let icon, divider;
|
||||
switch (label) {
|
||||
case getMessage(languagecode, 'modals.main.navbar.settings'): icon = <Settings/>; break;
|
||||
case getMessage(languagecode, 'modals.main.navbar.addons'): icon = <Addons/>; break;
|
||||
case getMessage(languagecode, 'modals.main.navbar.marketplace'): icon = <Marketplace/>; break;
|
||||
case getMessage('modals.main.navbar.settings'): icon = <Settings/>; break;
|
||||
case getMessage('modals.main.navbar.addons'): icon = <Addons/>; break;
|
||||
case getMessage('modals.main.navbar.marketplace'): icon = <Marketplace/>; break;
|
||||
|
||||
case getMessage(languagecode, 'modals.main.settings.sections.time.title'): icon = <Time/>; break;
|
||||
case getMessage(languagecode, 'modals.main.settings.sections.greeting.title'): icon = <Greeting/>; break;
|
||||
case getMessage(languagecode, 'modals.main.settings.sections.quote.title'): icon = <Quote/>; break;
|
||||
case getMessage(languagecode, 'modals.main.settings.sections.background.title'): icon = <Background/>; break;
|
||||
case getMessage(languagecode, 'modals.main.settings.sections.search.title'): icon = <Search/>; break;
|
||||
case getMessage(languagecode, 'modals.main.settings.sections.weather.title'): icon = <Weather/>; break;
|
||||
case getMessage(languagecode, 'modals.main.settings.sections.quicklinks.title'): icon = <QuickLinks/>; break;
|
||||
case getMessage(languagecode, 'modals.main.settings.sections.appearance.title'): icon = <Appearance/>; break;
|
||||
case getMessage(languagecode, 'modals.main.settings.sections.order.title'): icon = <Order/>; break;
|
||||
case getMessage(languagecode, 'modals.main.settings.sections.message.title'): icon = <Message/>; break;
|
||||
case getMessage(languagecode, 'modals.main.settings.sections.language.title'): icon = <Language/>; divider = true; break;
|
||||
case getMessage(languagecode, 'modals.main.settings.sections.advanced.title'): icon = <Advanced/>; break;
|
||||
case getMessage(languagecode, 'modals.main.settings.sections.keybinds.title'): icon = <Keybinds/>; break;
|
||||
case getMessage(languagecode, 'modals.main.settings.sections.stats.title'): icon = <Stats/>; break;
|
||||
case getMessage(languagecode, 'modals.main.settings.sections.experimental.title'): icon = <Experimental/>; divider = true; break;
|
||||
case getMessage(languagecode, 'modals.main.settings.sections.changelog'): icon = <Changelog/>; break;
|
||||
case getMessage(languagecode, 'modals.main.settings.sections.about.title'): icon = <About/>; break;
|
||||
case getMessage('modals.main.settings.sections.time.title'): icon = <Time/>; break;
|
||||
case getMessage('modals.main.settings.sections.greeting.title'): icon = <Greeting/>; break;
|
||||
case getMessage('modals.main.settings.sections.quote.title'): icon = <Quote/>; break;
|
||||
case getMessage('modals.main.settings.sections.background.title'): icon = <Background/>; break;
|
||||
case getMessage('modals.main.settings.sections.search.title'): icon = <Search/>; break;
|
||||
case getMessage('modals.main.settings.sections.weather.title'): icon = <Weather/>; break;
|
||||
case getMessage('modals.main.settings.sections.quicklinks.title'): icon = <QuickLinks/>; break;
|
||||
case getMessage('modals.main.settings.sections.appearance.title'): icon = <Appearance/>; break;
|
||||
case getMessage('modals.main.settings.sections.order.title'): icon = <Order/>; break;
|
||||
case getMessage('modals.main.settings.sections.message.title'): icon = <Message/>; break;
|
||||
case getMessage('modals.main.settings.sections.language.title'): icon = <Language/>; divider = true; break;
|
||||
case getMessage('modals.main.settings.sections.advanced.title'): icon = <Advanced/>; break;
|
||||
case getMessage('modals.main.settings.sections.keybinds.title'): icon = <Keybinds/>; break;
|
||||
case getMessage('modals.main.settings.sections.stats.title'): icon = <Stats/>; break;
|
||||
case getMessage('modals.main.settings.sections.experimental.title'): icon = <Experimental/>; divider = true; break;
|
||||
case getMessage('modals.main.settings.sections.changelog'): icon = <Changelog/>; break;
|
||||
case getMessage('modals.main.settings.sections.about.title'): icon = <About/>; break;
|
||||
|
||||
case getMessage(languagecode, 'modals.main.addons.added'): icon = <Added/>; break;
|
||||
case getMessage(languagecode, 'modals.main.addons.sideload'): icon = <Sideload/>; break;
|
||||
case getMessage(languagecode, 'modals.main.addons.create.title'): icon = <Create/>; break;
|
||||
case getMessage('modals.main.addons.added'): icon = <Added/>; break;
|
||||
case getMessage('modals.main.addons.sideload'): icon = <Sideload/>; break;
|
||||
case getMessage('modals.main.addons.create.title'): icon = <Create/>; break;
|
||||
|
||||
case getMessage(languagecode, 'modals.main.marketplace.photo_packs'): icon = <Background/>; break;
|
||||
case getMessage(languagecode, 'modals.main.marketplace.quote_packs'): icon = <Quote/>; break;
|
||||
case getMessage(languagecode, 'modals.main.marketplace.preset_settings'): icon = <Advanced/>; break;
|
||||
case getMessage('modals.main.marketplace.photo_packs'): icon = <Background/>; break;
|
||||
case getMessage('modals.main.marketplace.quote_packs'): icon = <Quote/>; break;
|
||||
case getMessage('modals.main.marketplace.preset_settings'): icon = <Advanced/>; break;
|
||||
|
||||
default: break;
|
||||
}
|
||||
|
||||
if (label === getMessage(languagecode, 'modals.main.settings.sections.experimental.title')) {
|
||||
if (label === getMessage('modals.main.settings.sections.experimental.title')) {
|
||||
if (localStorage.getItem('experimental') === 'false') {
|
||||
return <hr/>;
|
||||
}
|
||||
|
||||
@@ -9,8 +9,7 @@ import ProgressBar from './ProgressBar';
|
||||
import './welcome.scss';
|
||||
|
||||
export default class WelcomeModal extends PureComponent {
|
||||
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
languagecode = variables.languagecode;
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -18,7 +17,7 @@ export default class WelcomeModal extends PureComponent {
|
||||
image: './././icons/undraw_celebration.svg',
|
||||
currentTab: 0,
|
||||
finalTab: 4,
|
||||
buttonText: this.getMessage(this.languagecode, 'modals.welcome.buttons.next')
|
||||
buttonText: this.getMessage('modals.welcome.buttons.next')
|
||||
};
|
||||
this.images = [
|
||||
'./././icons/undraw_celebration.svg',
|
||||
@@ -38,18 +37,18 @@ export default class WelcomeModal extends PureComponent {
|
||||
return this.setState({
|
||||
currentTab: this.state.currentTab - 1,
|
||||
image: this.images[this.state.currentTab - 1],
|
||||
buttonText: this.getMessage(this.languagecode, 'modals.welcome.buttons.next')
|
||||
buttonText: this.getMessage('modals.welcome.buttons.next')
|
||||
});
|
||||
}
|
||||
|
||||
if (this.state.buttonText === this.getMessage(this.languagecode, 'modals.welcome.buttons.close')) {
|
||||
if (this.state.buttonText === this.getMessage('modals.welcome.buttons.close')) {
|
||||
return this.props.modalClose();
|
||||
}
|
||||
|
||||
this.setState({
|
||||
currentTab: this.state.currentTab + 1,
|
||||
image: this.images[this.state.currentTab + 1],
|
||||
buttonText: (this.state.currentTab !== this.state.finalTab) ? this.getMessage(this.languagecode, 'modals.welcome.buttons.next') : this.getMessage(this.languagecode, 'modals.welcome.buttons.close')
|
||||
buttonText: (this.state.currentTab !== this.state.finalTab) ? this.getMessage('modals.welcome.buttons.next') : this.getMessage('modals.welcome.buttons.close')
|
||||
});
|
||||
}
|
||||
|
||||
@@ -58,7 +57,7 @@ export default class WelcomeModal extends PureComponent {
|
||||
this.setState({
|
||||
currentTab: tab,
|
||||
image: this.images[tab],
|
||||
buttonText: (tab !== this.state.finalTab + 1) ? this.getMessage(this.languagecode, 'modals.welcome.buttons.next') : this.getMessage(this.languagecode, 'modals.welcome.buttons.close')
|
||||
buttonText: (tab !== this.state.finalTab + 1) ? this.getMessage('modals.welcome.buttons.next') : this.getMessage('modals.welcome.buttons.close')
|
||||
});
|
||||
|
||||
localStorage.setItem('bgtransition', true);
|
||||
@@ -71,7 +70,7 @@ export default class WelcomeModal extends PureComponent {
|
||||
this.setState({
|
||||
currentTab: Number(welcomeTab),
|
||||
image: this.images[Number(welcomeTab)],
|
||||
buttonText: (Number(welcomeTab) !== this.state.finalTab + 1) ? this.getMessage(this.languagecode, 'modals.welcome.buttons.next') : this.getMessage(this.languagecode, 'modals.welcome.buttons.close')
|
||||
buttonText: (Number(welcomeTab) !== this.state.finalTab + 1) ? this.getMessage('modals.welcome.buttons.next') : this.getMessage('modals.welcome.buttons.close')
|
||||
});
|
||||
}
|
||||
|
||||
@@ -100,7 +99,7 @@ export default class WelcomeModal extends PureComponent {
|
||||
<WelcomeSections currentTab={this.state.currentTab} switchTab={(tab) => this.switchTab(tab)}/>
|
||||
</div>
|
||||
<div className='buttons'>
|
||||
{(this.state.currentTab !== 0) ? <button className='close' style={{ marginRight: '20px' }} onClick={() => this.changeTab(true)}>{this.getMessage(this.languagecode, 'modals.welcome.buttons.previous')}</button> : null}
|
||||
{(this.state.currentTab !== 0) ? <button className='close' style={{ marginRight: '20px' }} onClick={() => this.changeTab(true)}>{this.getMessage('modals.welcome.buttons.previous')}</button> : null}
|
||||
<button className='close' onClick={() => this.changeTab()}>{this.state.buttonText}</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -13,8 +13,7 @@ const languages = require('modules/languages.json');
|
||||
const default_settings = require('modules/default_settings.json');
|
||||
|
||||
export default class WelcomeSections extends PureComponent {
|
||||
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
languagecode = variables.languagecode;
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -112,8 +111,8 @@ export default class WelcomeSections extends PureComponent {
|
||||
|
||||
const intro = (
|
||||
<>
|
||||
<h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.intro.title')}</h1>
|
||||
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.intro.description')}</p>
|
||||
<h1>{this.getMessage('modals.welcome.sections.intro.title')}</h1>
|
||||
<p>{this.getMessage('modals.welcome.sections.intro.description')}</p>
|
||||
<h3 className='quicktip'>#shareyourmue</h3>
|
||||
<div className='examples'>
|
||||
<img src={this.welcomeImages[this.state.welcomeImage]} alt='Example Mue setup' draggable={false}/>
|
||||
@@ -123,78 +122,78 @@ export default class WelcomeSections extends PureComponent {
|
||||
|
||||
const chooseLanguage = (
|
||||
<>
|
||||
<h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.language.title')}</h1>
|
||||
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.language.description')} <a href={window.constants.TRANSLATIONS_URL} className='resetLink' target='_blank' rel='noopener noreferrer'>GitHub</a>!</p>
|
||||
<h1>{this.getMessage('modals.welcome.sections.language.title')}</h1>
|
||||
<p>{this.getMessage('modals.welcome.sections.language.description')} <a href={window.constants.TRANSLATIONS_URL} className='resetLink' target='_blank' rel='noopener noreferrer'>GitHub</a>!</p>
|
||||
<Radio name='language' options={languages} category='welcomeLanguage'/>
|
||||
</>
|
||||
);
|
||||
|
||||
const theme = (
|
||||
<>
|
||||
<h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.theme.title')}</h1>
|
||||
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.theme.description')}</p>
|
||||
<h1>{this.getMessage('modals.welcome.sections.theme.title')}</h1>
|
||||
<p>{this.getMessage('modals.welcome.sections.theme.description')}</p>
|
||||
<div className='themesToggleArea'>
|
||||
<div className={this.state.autoClass} onClick={() => this.changeTheme('auto')}>
|
||||
<AutoAwesome/>
|
||||
<span>{this.getMessage(this.languagecode, 'modals.main.settings.sections.appearance.theme.auto')}</span>
|
||||
<span>{this.getMessage('modals.main.settings.sections.appearance.theme.auto')}</span>
|
||||
</div>
|
||||
<div className='options'>
|
||||
<div className={this.state.lightClass} onClick={() => this.changeTheme('light')}>
|
||||
<LightMode/>
|
||||
<span>{this.getMessage(this.languagecode, 'modals.main.settings.sections.appearance.theme.light')}</span>
|
||||
<span>{this.getMessage('modals.main.settings.sections.appearance.theme.light')}</span>
|
||||
</div>
|
||||
<div className={this.state.darkClass} onClick={() => this.changeTheme('dark')}>
|
||||
<DarkMode/>
|
||||
<span>{this.getMessage(this.languagecode, 'modals.main.settings.sections.appearance.theme.dark')}</span>
|
||||
<span>{this.getMessage('modals.main.settings.sections.appearance.theme.dark')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className='quicktip'>{this.getMessage(this.languagecode, 'modals.welcome.tip')}</h3>
|
||||
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.theme.tip')}</p>
|
||||
<h3 className='quicktip'>{this.getMessage('modals.welcome.tip')}</h3>
|
||||
<p>{this.getMessage('modals.welcome.sections.theme.tip')}</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
const settings = (
|
||||
<>
|
||||
<h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.settings.title')}</h1>
|
||||
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.settings.description')}</p>
|
||||
<h1>{this.getMessage('modals.welcome.sections.settings.title')}</h1>
|
||||
<p>{this.getMessage('modals.welcome.sections.settings.description')}</p>
|
||||
<button className='upload' onClick={() => document.getElementById('file-input').click()}>
|
||||
<CloudUpload/>
|
||||
<br/>
|
||||
<span>{this.getMessage(this.languagecode, 'modals.main.settings.buttons.import')}</span>
|
||||
<span>{this.getMessage('modals.main.settings.buttons.import')}</span>
|
||||
</button>
|
||||
<FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.importSettings(e)}/>
|
||||
<h3 className='quicktip'>{this.getMessage(this.languagecode, 'modals.welcome.tip')}</h3>
|
||||
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.settings.tip')}</p>
|
||||
<h3 className='quicktip'>{this.getMessage('modals.welcome.tip')}</h3>
|
||||
<p>{this.getMessage('modals.welcome.sections.settings.tip')}</p>
|
||||
</>
|
||||
);
|
||||
|
||||
const privacy = (
|
||||
<>
|
||||
<h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.title')}</h1>
|
||||
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.description')}</p>
|
||||
<Checkbox name='offlineMode' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.advanced.offline_mode')} element='.other' />
|
||||
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.offline_mode_description')}</p>
|
||||
<Checkbox name='quicklinksddgProxy' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.ddg_image_proxy') + ' (' + this.getMessage(this.languagecode, 'modals.main.settings.sections.quicklinks.title') + ')'}/>
|
||||
<Checkbox name='ddgProxy' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.ddg_image_proxy') + ' (' +this.getMessage(this.languagecode, 'modals.main.settings.sections.background.title') + ')'}/>
|
||||
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.ddg_proxy_description')}</p>
|
||||
<h3 className='quicktip'>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.links.title')}</h3>
|
||||
<a className='privacy' href={window.constants.PRIVACY_URL} target='_blank' rel='noopener noreferrer'>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.links.privacy_policy')}</a>
|
||||
<h1>{this.getMessage('modals.welcome.sections.privacy.title')}</h1>
|
||||
<p>{this.getMessage('modals.welcome.sections.privacy.description')}</p>
|
||||
<Checkbox name='offlineMode' text={this.getMessage('modals.main.settings.sections.advanced.offline_mode')} element='.other' />
|
||||
<p>{this.getMessage('modals.welcome.sections.privacy.offline_mode_description')}</p>
|
||||
<Checkbox name='quicklinksddgProxy' text={this.getMessage('modals.main.settings.sections.background.ddg_image_proxy') + ' (' + this.getMessage('modals.main.settings.sections.quicklinks.title') + ')'}/>
|
||||
<Checkbox name='ddgProxy' text={this.getMessage('modals.main.settings.sections.background.ddg_image_proxy') + ' (' +this.getMessage('modals.main.settings.sections.background.title') + ')'}/>
|
||||
<p>{this.getMessage('modals.welcome.sections.privacy.ddg_proxy_description')}</p>
|
||||
<h3 className='quicktip'>{this.getMessage('modals.welcome.sections.privacy.links.title')}</h3>
|
||||
<a className='privacy' href={window.constants.PRIVACY_URL} target='_blank' rel='noopener noreferrer'>{this.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}</a>
|
||||
<br/><br/>
|
||||
<a className='privacy' href={'https://github.com/' + window.constants.ORG_NAME} target='_blank' rel='noopener noreferrer'>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.links.source_code')}</a>
|
||||
<a className='privacy' href={'https://github.com/' + window.constants.ORG_NAME} target='_blank' rel='noopener noreferrer'>{this.getMessage('modals.welcome.sections.privacy.links.source_code')}</a>
|
||||
</>
|
||||
);
|
||||
|
||||
const final = (
|
||||
<>
|
||||
<h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.final.title')}</h1>
|
||||
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.final.description')}</p>
|
||||
<h3 className='quicktip'>{this.getMessage(this.languagecode, 'modals.welcome.sections.final.changes')}</h3>
|
||||
<p>{this.getMessage(this.languagecode, 'modals.welcome.sections.final.changes_description')}</p>
|
||||
<h1>{this.getMessage('modals.welcome.sections.final.title')}</h1>
|
||||
<p>{this.getMessage('modals.welcome.sections.final.description')}</p>
|
||||
<h3 className='quicktip'>{this.getMessage('modals.welcome.sections.final.changes')}</h3>
|
||||
<p>{this.getMessage('modals.welcome.sections.final.changes_description')}</p>
|
||||
<div className='themesToggleArea'>
|
||||
<div className='toggle' onClick={() => this.props.switchTab(1)}><span>{this.getMessage(this.languagecode, 'modals.main.settings.sections.language.title')}: {languages.find((i) => i.value === localStorage.getItem('language')).name}</span></div>
|
||||
<div className='toggle' onClick={() => this.props.switchTab(3)}><span>{this.getMessage(this.languagecode, 'modals.main.settings.sections.appearance.theme.title')}: {this.getSetting('theme')}</span></div>
|
||||
{(this.state.importedSettings.length !== 0) ? <div className='toggle' onClick={() => this.props.switchTab(2)}>{this.getMessage(this.languagecode, 'modals.main.settings.sections.final.imported')} {this.state.importedSettings.length} {this.getMessage(this.languagecode, 'modals.welcome.sections.final.settings')}</div> : null}
|
||||
<div className='toggle' onClick={() => this.props.switchTab(1)}><span>{this.getMessage('modals.main.settings.sections.language.title')}: {languages.find((i) => i.value === localStorage.getItem('language')).name}</span></div>
|
||||
<div className='toggle' onClick={() => this.props.switchTab(3)}><span>{this.getMessage('modals.main.settings.sections.appearance.theme.title')}: {this.getSetting('theme')}</span></div>
|
||||
{(this.state.importedSettings.length !== 0) ? <div className='toggle' onClick={() => this.props.switchTab(2)}>{this.getMessage('modals.main.settings.sections.final.imported')} {this.state.importedSettings.length} {this.getMessage('modals.welcome.sections.final.settings')}</div> : null}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -10,8 +10,7 @@ import EventBus from 'modules/helpers/eventbus';
|
||||
import './quicklinks.scss';
|
||||
|
||||
export default class QuickLinks extends PureComponent {
|
||||
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
languagecode = variables.languagecode;
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -46,13 +45,13 @@ export default class QuickLinks extends PureComponent {
|
||||
|
||||
let nameError, urlError;
|
||||
if (this.state.name.length <= 0) {
|
||||
nameError = this.getMessage(this.languagecode, 'widgets.quicklinks.name_error');
|
||||
nameError = this.getMessage('widgets.quicklinks.name_error');
|
||||
}
|
||||
|
||||
// regex: https://ihateregex.io/expr/url/
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
if (url.length <= 0 || /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/.test(url) === false) {
|
||||
urlError = this.getMessage(this.languagecode, 'widgets.quicklinks.url_error');
|
||||
urlError = this.getMessage('widgets.quicklinks.url_error');
|
||||
}
|
||||
|
||||
if (nameError || urlError) {
|
||||
@@ -182,14 +181,14 @@ export default class QuickLinks extends PureComponent {
|
||||
<button className='quicklinks' onClick={this.toggleAdd}>+</button>
|
||||
<span className='quicklinkscontainer' style={{ visibility: this.state.showAddLink, marginTop }}>
|
||||
<div className='topbarquicklinks' onKeyDown={this.topbarEnter}>
|
||||
<h4>{this.getMessage(this.languagecode, 'widgets.quicklinks.new')}</h4>
|
||||
<TextareaAutosize rowsmax={1} placeholder={this.getMessage(this.languagecode, 'widgets.quicklinks.name')} value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />
|
||||
<h4>{this.getMessage('widgets.quicklinks.new')}</h4>
|
||||
<TextareaAutosize rowsmax={1} placeholder={this.getMessage('widgets.quicklinks.name')} value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />
|
||||
<p>{this.state.nameError}</p>
|
||||
<TextareaAutosize rowsmax={10} placeholder={this.getMessage(this.languagecode, 'widgets.quicklinks.url')} value={this.state.url} onChange={(e) => this.setState({ url: e.target.value })} />
|
||||
<TextareaAutosize rowsmax={10} placeholder={this.getMessage('widgets.quicklinks.url')} value={this.state.url} onChange={(e) => this.setState({ url: e.target.value })} />
|
||||
<p>{this.state.urlError}</p>
|
||||
<TextareaAutosize rowsmax={10} placeholder={this.getMessage(this.languagecode, 'widgets.quicklinks.icon')} value={this.state.icon} onChange={(e) => this.setState({ icon: e.target.value })} />
|
||||
<TextareaAutosize rowsmax={10} placeholder={this.getMessage('widgets.quicklinks.icon')} value={this.state.icon} onChange={(e) => this.setState({ icon: e.target.value })} />
|
||||
<p></p>
|
||||
<button className='pinNote' onClick={this.addLink}>{this.getMessage(this.languagecode, 'widgets.quicklinks.add')}</button>
|
||||
<button className='pinNote' onClick={this.addLink}>{this.getMessage('widgets.quicklinks.add')}</button>
|
||||
</div>
|
||||
</span>
|
||||
{window.keybinds.toggleQuicklinks && window.keybinds.toggleQuicklinks !== '' ? <Hotkeys keyName={window.keybinds.toggleQuicklinks} onKeyDown={this.toggleAdd} /> : null}
|
||||
|
||||
@@ -29,14 +29,13 @@ export function exportSettings() {
|
||||
}
|
||||
|
||||
export function importSettings(e) {
|
||||
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
|
||||
const languagecode = variables.languagecode;
|
||||
const getMessage = (languagecode, text) => variables.language.getMessage(variables.languagecode, text);
|
||||
const content = JSON.parse(e.target.result);
|
||||
|
||||
Object.keys(content).forEach((key) => {
|
||||
localStorage.setItem(key, content[key]);
|
||||
});
|
||||
|
||||
toast(getMessage(languagecode, 'toats.imported'));
|
||||
toast(getMessage('toasts.imported'));
|
||||
window.stats.postEvent('tab', 'Settings imported');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user