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

fix: author loading before quote

Browse Source 
- Make author div not load if quote is empty
- photoinformation taking too much of the screen
- more transitions and consistent transitions
- running prettier across all files

Co-authored-by: David Ralph <me@davidcralph.co.uk>
This commit is contained in:
alexsparkes
2022-04-11 22:57:07 +01:00
parent 4498f5b934
commit 7bb48ebc8e
84 changed files with 2630 additions and 2323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/modals/Modals.jsx
View File

@@ -93,19 +93,16 @@ export default class Modals extends PureComponent {
<Main modalClose={() => this.toggleModal('mainModal', false)} />
</Modal>
<Modal
closeTimeoutMS={300}
onRequestClose={() => this.closeWelcome()}
isOpen={this.state.welcomeModal}
className="Modal welcomemodal mainModal"
overlayClassName="Overlay welcomeoverlay"
shouldCloseOnOverlayClick={false}
ariaHideApp={false}
>
<Welcome
modalClose={() => this.closeWelcome()}
modalSkip={() => this.previewWelcome()}
/>
</Modal>
closeTimeoutMS={300}
onRequestClose={() => this.closeWelcome()}
isOpen={this.state.welcomeModal}
className="Modal welcomemodal mainModal"
overlayClassName="Overlay welcomeoverlay"
shouldCloseOnOverlayClick={false}
ariaHideApp={false}
>
<Welcome modalClose={() => this.closeWelcome()} modalSkip={() => this.previewWelcome()} />
</Modal>
{this.state.preview ? <Preview setup={() => window.location.reload()} /> : null}
{/*variables.keybinds.toggleModal && variables.keybinds.toggleModal !== '' ? <Hotkeys keyName={variables.keybinds.toggleModal} onKeyDown={() => this.toggleModal('mainModal', (this.state.mainModal === true ? false : true))}/> : null*/}
</>

30
src/components/modals/main/marketplace/Collection.jsx
View File

@@ -1,26 +1,24 @@
import variables from "modules/variables";
import variables from 'modules/variables';
export default function Collection({ items, toggleFunction }) {
return [
<div className='collection starWars'>
<div className='content'>
<div className="tags">
<div className="collection starWars">
<div className="content">
<div className="tags">
<div className="tag">
<span>Star Wars</span>
</div>
</div>
<span className='title'>Star Wars Collection</span>
<span className='subtitle'>A Collection of stuff inspired by the film franchise star wars..</span>
<button>Explore Collection</button>
</div>
</div>,
<div className="items">
<span className="title">Star Wars Collection</span>
<span className="subtitle">
A Collection of stuff inspired by the film franchise star wars..
</span>
<button>Explore Collection</button>
</div>
</div>,
<div className="items">
{items.map((item) => (
<div
className="item"
onClick={() => toggleFunction(item)}
key={item.name}
>
<div className="item" onClick={() => toggleFunction(item)} key={item.name}>
<img
alt="icon"
draggable="false"
@@ -33,7 +31,7 @@ export default function Collection({ items, toggleFunction }) {
<div className="tag">
<span>{item.author}</span>
</div>
<div className='moreTag'>
<div className="moreTag">
<span>1</span>
</div>
</div>

6
src/components/modals/main/marketplace/Lightbox.jsx
View File

@@ -5,8 +5,10 @@ export default function Lightbox({ modalClose, img }) {
return (
<>
<span className='closeModal' onClick={modalClose}>&times;</span>
<img src={img} className='lightboximg' draggable={false} alt='Item screenshot'/>
<span className="closeModal" onClick={modalClose}>
&times;
</span>
<img src={img} className="lightboximg" draggable={false} alt="Item screenshot" />
</>
);
}

353
src/components/modals/main/marketplace/sections/Create.jsx
View File

@@ -1,5 +1,5 @@
import variables from "modules/variables";
import { PureComponent } from "react";
import variables from 'modules/variables';
import { PureComponent } from 'react';
import {
MdSettings as Settings,
MdOutlineInsertPhoto as Photos,
@@ -9,18 +9,18 @@ import {
MdArrowBack,
MdDownload,
MdOpenInNew,
} from "react-icons/md";
import { TextField } from "@mui/material";
import { toast } from "react-toastify";
import SettingsItem from "../../../main/settings/SettingsItem";
} from 'react-icons/md';
import { TextField } from '@mui/material';
import { toast } from 'react-toastify';
import SettingsItem from '../../../main/settings/SettingsItem';
import { saveFile } from "modules/helpers/settings/modals";
import Tooltip from "../../../../helpers/tooltip/Tooltip";
import { saveFile } from 'modules/helpers/settings/modals';
import Tooltip from '../../../../helpers/tooltip/Tooltip';
import FileUpload from "../../settings/FileUpload";
import Dropdown from "../../settings/Dropdown";
import FileUpload from '../../settings/FileUpload';
import Dropdown from '../../settings/Dropdown';
import "../../../welcome/welcome.scss";
import '../../../welcome/welcome.scss';
export default class Create extends PureComponent {
constructor() {
@@ -28,18 +28,18 @@ export default class Create extends PureComponent {
this.state = {
currentTab: 1,
addonMetadata: {
name: "",
description: "",
type: "",
version: "",
author: "",
icon_url: "",
screenshot_url: "",
name: '',
description: '',
type: '',
version: '',
author: '',
icon_url: '',
screenshot_url: '',
},
addonData: "",
addonData: '',
settingsClasses: {
current: "toggle lightTheme",
json: "toggle lightTheme",
current: 'toggle lightTheme',
json: 'toggle lightTheme',
},
};
}
@@ -64,17 +64,17 @@ export default class Create extends PureComponent {
let settings = {};
Object.keys(data).forEach((key) => {
if (
key === "statsData" ||
key === "firstRun" ||
key === "showWelcome" ||
key === "language" ||
key === "installed" ||
key === "stats" ||
key === "backup_settings" ||
key === "showReminder" ||
key === "experimental" ||
key === "debugtimeout" ||
key === "quotelanguage"
key === 'statsData' ||
key === 'firstRun' ||
key === 'showWelcome' ||
key === 'language' ||
key === 'installed' ||
key === 'stats' ||
key === 'backup_settings' ||
key === 'showReminder' ||
key === 'experimental' ||
key === 'debugtimeout' ||
key === 'quotelanguage'
) {
return;
}
@@ -84,14 +84,12 @@ export default class Create extends PureComponent {
this.setState({
addonData: settings,
settingsClasses: {
current: input ? "toggle lightTheme active" : "toggle lightTheme",
json: input ? "toggle lightTheme active" : "toggle lightTheme",
current: input ? 'toggle lightTheme active' : 'toggle lightTheme',
json: input ? 'toggle lightTheme active' : 'toggle lightTheme',
},
});
toast(
variables.language.getMessage(variables.languagecode, "toasts.imported")
);
toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
}
updateQuotePackType(type) {
@@ -104,7 +102,7 @@ export default class Create extends PureComponent {
icon_url: this.state.addonMetadata.icon_url,
screenshot_url: this.state.addonMetadata.screenshot_url,
};
if (type === "quotePack") {
if (type === 'quotePack') {
this.setState({
addonMetadata: {
addonMetadata,
@@ -117,9 +115,9 @@ export default class Create extends PureComponent {
addonMetadata,
},
addonData: {
url: "",
name: "",
author: "",
url: '',
name: '',
author: '',
},
});
}
@@ -128,45 +126,38 @@ export default class Create extends PureComponent {
updateQuotePackAPI(type, data) {
this.setState({
addonData: {
url: type === "url" ? data : this.state.addonData.url || "",
name: type === "name" ? data : this.state.addonData.name || "",
author: type === "author" ? data : this.state.addonData.author || "",
url: type === 'url' ? data : this.state.addonData.url || '',
name: type === 'name' ? data : this.state.addonData.name || '',
author: type === 'author' ? data : this.state.addonData.author || '',
},
});
}
importQuotes() {
this.setState({
addonData: JSON.parse(localStorage.getItem("customQuote")) || [],
addonData: JSON.parse(localStorage.getItem('customQuote')) || [],
});
toast(
variables.language.getMessage(variables.languagecode, "toasts.imported")
);
toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
}
importPhotos() {
let data = [];
try {
const current =
JSON.parse(localStorage.getItem("customBackground")) || [];
const current = JSON.parse(localStorage.getItem('customBackground')) || [];
data = current.map((item) => {
return {
photographer: "???",
location: "???",
photographer: '???',
location: '???',
url: {
default: item,
},
};
});
toast(
variables.language.getMessage(variables.languagecode, "toasts.imported")
);
toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
} catch (e) {
console.log(e);
toast(
variables.language.getMessage(variables.languagecode, "toasts.error")
);
toast(variables.language.getMessage(variables.languagecode, 'toasts.error'));
}
this.setState({
@@ -180,23 +171,20 @@ export default class Create extends PureComponent {
name: this.state.addonMetadata.name,
description: this.state.addonMetadata.description,
type:
this.state.addonMetadata.type === "quote_api"
? "quotes"
: this.state.addonMetadata.type,
this.state.addonMetadata.type === 'quote_api' ? 'quotes' : this.state.addonMetadata.type,
version: this.state.addonMetadata.version,
author: this.state.addonMetadata.author,
icon_url: this.state.addonMetadata.icon_url,
screenshot_url: this.state.addonMetadata.screenshot_url,
[this.state.addonMetadata.type]: this.state.addonData,
},
this.state.addonMetadata.name + ".json"
this.state.addonMetadata.name + '.json',
);
}
render() {
let tabContent;
const getMessage = (text) =>
variables.language.getMessage(variables.languagecode, text);
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
const chooseType = (
<>
@@ -204,8 +192,7 @@ export default class Create extends PureComponent {
<div className="content">
<span className="title">Help Centre</span>
<span className="subtitle">
Home of all docs and guides on creating addons for Mue's
marketplace
Home of all docs and guides on creating addons for Mue's marketplace
</span>
</div>
<button>
@@ -215,28 +202,17 @@ export default class Create extends PureComponent {
</div>
<div className="themesToggleArea">
<div className="options">
<div
className="toggle lightTheme"
onClick={() => this.changeTab(2, "photos")}
>
<div className="toggle lightTheme" onClick={() => this.changeTab(2, 'photos')}>
<Photos />
<span>{getMessage("modals.main.marketplace.photo_packs")}</span>
<span>{getMessage('modals.main.marketplace.photo_packs')}</span>
</div>
<div
className="toggle lightTheme"
onClick={() => this.changeTab(2, "quotes")}
>
<div className="toggle lightTheme" onClick={() => this.changeTab(2, 'quotes')}>
<Quotes />
<span>{getMessage("modals.main.marketplace.quote_packs")}</span>
<span>{getMessage('modals.main.marketplace.quote_packs')}</span>
</div>
<div
className="toggle lightTheme"
onClick={() => this.changeTab(2, "settings")}
>
<div className="toggle lightTheme" onClick={() => this.changeTab(2, 'settings')}>
<Settings />
<span>
{getMessage("modals.main.marketplace.preset_settings")}
</span>
<span>{getMessage('modals.main.marketplace.preset_settings')}</span>
</div>
</div>
</div>
@@ -256,19 +232,13 @@ export default class Create extends PureComponent {
const setMetadata = (data, type) => {
this.setState({
addonMetadata: {
name: type === "name" ? data : this.state.addonMetadata.name,
description:
type === "description"
? data
: this.state.addonMetadata.description,
version: type === "version" ? data : this.state.addonMetadata.version,
author: type === "author" ? data : this.state.addonMetadata.author,
icon_url:
type === "icon_url" ? data : this.state.addonMetadata.icon_url,
name: type === 'name' ? data : this.state.addonMetadata.name,
description: type === 'description' ? data : this.state.addonMetadata.description,
version: type === 'version' ? data : this.state.addonMetadata.version,
author: type === 'author' ? data : this.state.addonMetadata.author,
icon_url: type === 'icon_url' ? data : this.state.addonMetadata.icon_url,
screenshot_url:
type === "screenshot_url"
? data
: this.state.addonMetadata.screenshot_url,
type === 'screenshot_url' ? data : this.state.addonMetadata.screenshot_url,
type: this.state.addonMetadata.type,
},
});
@@ -278,7 +248,7 @@ export default class Create extends PureComponent {
<>
<div className="smallBanner">
<div className="content">
<span className="title" style={{ textTransform: "capitalize" }}>
<span className="title" style={{ textTransform: 'capitalize' }}>
Create {this.state.addonMetadata.type} Pack
</span>
<span className="subtitle">Description of what is being made</span>
@@ -288,120 +258,97 @@ export default class Create extends PureComponent {
<MdDownload />
</button>
</div>
<SettingsItem
title={getMessage("modals.main.addons.create.metadata.name")}
>
<SettingsItem title={getMessage('modals.main.addons.create.metadata.name')}>
<TextField
label={getMessage("modals.main.addons.create.metadata.name")}
label={getMessage('modals.main.addons.create.metadata.name')}
varient="outlined"
InputLabelProps={{ shrink: true }}
value={this.state.addonMetadata.name}
onInput={(e) => setMetadata(e.target.value, "name")}
onInput={(e) => setMetadata(e.target.value, 'name')}
/>
</SettingsItem>
<SettingsItem
title={getMessage("modals.main.marketplace.product.version")}
>
<SettingsItem title={getMessage('modals.main.marketplace.product.version')}>
<TextField
label={getMessage("modals.main.marketplace.product.version")}
label={getMessage('modals.main.marketplace.product.version')}
varient="outlined"
InputLabelProps={{ shrink: true }}
value={this.state.addonMetadata.version}
onInput={(e) => setMetadata(e.target.value, "version")}
onInput={(e) => setMetadata(e.target.value, 'version')}
/>
</SettingsItem>
<SettingsItem
title={getMessage("modals.main.marketplace.product.author")}
>
<SettingsItem title={getMessage('modals.main.marketplace.product.author')}>
<TextField
label={getMessage("modals.main.marketplace.product.author")}
label={getMessage('modals.main.marketplace.product.author')}
varient="outlined"
InputLabelProps={{ shrink: true }}
value={this.state.addonMetadata.author}
onInput={(e) => setMetadata(e.target.value, "author")}
onInput={(e) => setMetadata(e.target.value, 'author')}
/>
</SettingsItem>
<SettingsItem
title={getMessage("modals.main.addons.create.metadata.icon_url")}
>
<SettingsItem title={getMessage('modals.main.addons.create.metadata.icon_url')}>
<TextField
label={getMessage("modals.main.addons.create.metadata.icon_url")}
label={getMessage('modals.main.addons.create.metadata.icon_url')}
varient="outlined"
InputLabelProps={{ shrink: true }}
value={this.state.addonMetadata.icon_url}
onInput={(e) => setMetadata(e.target.value, "icon_url")}
onInput={(e) => setMetadata(e.target.value, 'icon_url')}
/>
</SettingsItem>
<SettingsItem
title={getMessage(
"modals.main.addons.create.metadata.screenshot_url"
)}
>
<SettingsItem title={getMessage('modals.main.addons.create.metadata.screenshot_url')}>
<TextField
label={getMessage(
"modals.main.addons.create.metadata.screenshot_url"
)}
label={getMessage('modals.main.addons.create.metadata.screenshot_url')}
varient="outlined"
InputLabelProps={{ shrink: true }}
value={this.state.addonMetadata.screenshot_url}
onInput={(e) => setMetadata(e.target.value, "screenshot_url")}
onInput={(e) => setMetadata(e.target.value, 'screenshot_url')}
/>
</SettingsItem>
<SettingsItem
title={getMessage("modals.main.addons.create.metadata.description")}
>
<SettingsItem title={getMessage('modals.main.addons.create.metadata.description')}>
<TextField
label={getMessage("modals.main.addons.create.metadata.description")}
label={getMessage('modals.main.addons.create.metadata.description')}
varient="outlined"
InputLabelProps={{ shrink: true }}
multiline
spellCheck={false}
rows={4}
value={this.state.addonMetadata.description}
onInput={(e) => setMetadata(e.target.value, "description")}
onInput={(e) => setMetadata(e.target.value, 'description')}
/>
</SettingsItem>
<div className="createButtons">
<button onClick={() => this.changeTab(1)}>
{getMessage("modals.welcome.buttons.previous")}
{getMessage('modals.welcome.buttons.previous')}
</button>
<button
onClick={() => this.changeTab(this.state.addonMetadata.type)}
disabled={nextDescriptionDisabled}
>
{getMessage("modals.welcome.buttons.next")}
{getMessage('modals.welcome.buttons.next')}
</button>
</div>
</>
);
// settings
const nextSettingsDisabled = this.state.addonData === "";
const nextSettingsDisabled = this.state.addonData === '';
const importSettings = (
<>
<SettingsItem
final={true}
title={getMessage("modals.welcome.sections.settings.title")}
>
<SettingsItem final={true} title={getMessage('modals.welcome.sections.settings.title')}>
<div className="themesToggleArea">
<div className="options" style={{ maxWidth: "512px" }}>
<div className="options" style={{ maxWidth: '512px' }}>
<div
className={this.state.settingsClasses.current}
onClick={() => this.importSettings()}
>
<ExportIcon />
<span>
{getMessage("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()}
onClick={() => document.getElementById('file-input').click()}
>
<ImportIcon />
<span>
{getMessage("modals.main.addons.create.settings.json")}
</span>
<span>{getMessage('modals.main.addons.create.settings.json')}</span>
</div>
</div>
</div>
@@ -411,20 +358,15 @@ export default class Create extends PureComponent {
id="file-input"
type="settings"
accept="application/json"
loadFunction={(e) =>
this.importSettings(JSON.parse(e.target.result))
}
loadFunction={(e) => this.importSettings(JSON.parse(e.target.result))}
/>
</SettingsItem>
<div className="createButtons">
<button onClick={() => this.changeTab(2)}>
{getMessage("modals.welcome.buttons.previous")}
{getMessage('modals.welcome.buttons.previous')}
</button>
<button
onClick={() => this.changeTab(3)}
disabled={nextSettingsDisabled}
>
{getMessage("modals.welcome.buttons.next")}
<button onClick={() => this.changeTab(3)} disabled={nextSettingsDisabled}>
{getMessage('modals.welcome.buttons.next')}
</button>
</div>
</>
@@ -432,68 +374,68 @@ export default class Create extends PureComponent {
// quotes
const nextQuotesDisabled = !(
(this.state.addonMetadata.type === "quote_api" &&
this.state.addonData.url !== "" &&
this.state.addonData.name !== "" &&
this.state.addonData.author !== "") ||
(this.state.addonMetadata.type === "quotes" &&
this.state.addonData.quotes !== "")
(this.state.addonMetadata.type === 'quote_api' &&
this.state.addonData.url !== '' &&
this.state.addonData.name !== '' &&
this.state.addonData.author !== '') ||
(this.state.addonMetadata.type === 'quotes' && this.state.addonData.quotes !== '')
);
const addQuotes = (
<>
<SettingsItem final={true} title={getMessage("modals.main.addons.create.quotes.title")}>
<SettingsItem final={true} title={getMessage('modals.main.addons.create.quotes.title')}>
<Dropdown
label={getMessage("modals.main.settings.sections.time.type")}
label={getMessage('modals.main.settings.sections.time.type')}
noSetting
onChange={(e) => this.updateQuotePackType(e)}
>
<option value="quotes">
{getMessage("modals.main.addons.create.quotes.local.title")}
{getMessage('modals.main.addons.create.quotes.local.title')}
</option>
<option value="quote_api">
{getMessage("modals.main.addons.create.quotes.api.title")}
{getMessage('modals.main.addons.create.quotes.api.title')}
</option>
</Dropdown>
</SettingsItem>
{this.state.addonMetadata.type === "quote_api" ? (
{this.state.addonMetadata.type === 'quote_api' ? (
<>
<TextField
label={getMessage("modals.main.addons.create.quotes.api.url")}
label={getMessage('modals.main.addons.create.quotes.api.url')}
varient="outlined"
InputLabelProps={{ shrink: true }}
value={this.state.addonData.url}
onInput={(e) => this.updateQuotePack(e.target.value, "url")}
onInput={(e) => this.updateQuotePack(e.target.value, 'url')}
/>
<TextField
label={getMessage("modals.main.addons.create.quotes.api.name")}
label={getMessage('modals.main.addons.create.quotes.api.name')}
varient="outlined"
InputLabelProps={{ shrink: true }}
value={this.state.addonData.name}
onInput={(e) => this.updateQuotePack(e.target.value, "name")}
onInput={(e) => this.updateQuotePack(e.target.value, 'name')}
/>
<TextField
label={getMessage("modals.main.addons.create.quotes.api.author")}
label={getMessage('modals.main.addons.create.quotes.api.author')}
varient="outlined"
InputLabelProps={{ shrink: true }}
value={this.state.addonData.author}
onInput={(e) => this.updateQuotePack(e.target.value, "author")}
onInput={(e) => this.updateQuotePack(e.target.value, 'author')}
/>
<br />
<br />
</>
) : (
<SettingsItem final={true} title={getMessage("modals.main.addons.create.settings.current")} >
<SettingsItem
final={true}
title={getMessage('modals.main.addons.create.settings.current')}
>
<div className="themesToggleArea">
<div className="options">
<div
onClick={() => this.importQuotes()}
className="toggle lightTheme"
style={{ width: "60%", margin: "10px 0 10px 0" }}
style={{ width: '60%', margin: '10px 0 10px 0' }}
>
<ExportIcon />
<span>
{getMessage("modals.main.addons.create.settings.current")}
</span>
<span>{getMessage('modals.main.addons.create.settings.current')}</span>
</div>
</div>
</div>
@@ -501,13 +443,10 @@ export default class Create extends PureComponent {
)}
<div className="createButtons">
<button onClick={() => this.changeTab(2)}>
{getMessage("modals.welcome.buttons.previous")}
{getMessage('modals.welcome.buttons.previous')}
</button>
<button
onClick={() => this.changeTab(3)}
disabled={nextQuotesDisabled}
>
{getMessage("modals.welcome.buttons.next")}
<button onClick={() => this.changeTab(3)} disabled={nextQuotesDisabled}>
{getMessage('modals.welcome.buttons.next')}
</button>
</div>
</>
@@ -515,26 +454,24 @@ export default class Create extends PureComponent {
// photos
const nextPhotosDisabled = !(
this.state.addonData.photos !== "" && this.state.addonData.photos !== []
this.state.addonData.photos !== '' && this.state.addonData.photos !== []
);
const addPhotos = (
<>
<SettingsItem
final={true}
title={getMessage("modals.main.addons.create.photos.title")}
subtitle={"Import from custom settings."}
title={getMessage('modals.main.addons.create.photos.title')}
subtitle={'Import from custom settings.'}
>
<div className="themesToggleArea">
<div className="options">
<div
onClick={() => this.importPhotos()}
className="toggle lightTheme"
style={{ width: "60%", margin: "10px 0 10px 0" }}
style={{ width: '60%', margin: '10px 0 10px 0' }}
>
<ExportIcon />
<span>
{getMessage("modals.main.addons.create.settings.current")}
</span>
<span>{getMessage('modals.main.addons.create.settings.current')}</span>
</div>
</div>
</div>
@@ -542,13 +479,10 @@ export default class Create extends PureComponent {
<br />
<div className="createButtons">
<button onClick={() => this.changeTab(2)}>
{getMessage("modals.welcome.buttons.previous")}
{getMessage('modals.welcome.buttons.previous')}
</button>
<button
onClick={() => this.changeTab(3)}
disabled={nextPhotosDisabled}
>
{getMessage("modals.welcome.buttons.next")}
<button onClick={() => this.changeTab(3)} disabled={nextPhotosDisabled}>
{getMessage('modals.welcome.buttons.next')}
</button>
</div>
</>
@@ -558,12 +492,11 @@ export default class Create extends PureComponent {
<>
<div className="smallBanner">
<div className="content">
<span className="title" style={{ textTransform: "capitalize" }}>
<span className="title" style={{ textTransform: 'capitalize' }}>
Next step, Publishing...
</span>
<span className="subtitle">
Visit the Mue Knowledgebase on information on how to publish your
newly created addon.
Visit the Mue Knowledgebase on information on how to publish your newly created addon.
</span>
</div>
<button>
@@ -577,12 +510,10 @@ export default class Create extends PureComponent {
<div
onClick={() => this.downloadAddon()}
className="toggle lightTheme"
style={{ width: "60%", margin: "10px 0 10px 0" }}
style={{ width: '60%', margin: '10px 0 10px 0' }}
>
<ExportIcon />
<span>
{getMessage("modals.main.addons.create.finish.download")}
</span>
<span>{getMessage('modals.main.addons.create.finish.download')}</span>
</div>
</div>
</div>
@@ -591,14 +522,14 @@ export default class Create extends PureComponent {
<button
onClick={() =>
this.changeTab(
this.state.addonMetadata.type === "quote_api"
? "quotes"
: this.state.addonMetadata.type
this.state.addonMetadata.type === 'quote_api'
? 'quotes'
: this.state.addonMetadata.type,
)
}
disabled={nextDescriptionDisabled}
>
{getMessage("modals.welcome.buttons.previous")}
{getMessage('modals.welcome.buttons.previous')}
</button>
</div>
{/*<button
@@ -619,13 +550,13 @@ export default class Create extends PureComponent {
case 2:
tabContent = writeDescription;
break;
case "settings":
case 'settings':
tabContent = importSettings;
break;
case "quotes":
case 'quotes':
tabContent = addQuotes;
break;
case "photos":
case 'photos':
tabContent = addPhotos;
break;
case 3:
@@ -648,9 +579,7 @@ export default class Create extends PureComponent {
</Tooltip>
</div>
)}
<span className="mainTitle">
{getMessage("modals.main.addons.create.other_title")}
</span>
<span className="mainTitle">{getMessage('modals.main.addons.create.other_title')}</span>
</div>
{tabContent}
</>

4
src/components/modals/main/scss/index.scss
View File

@@ -146,7 +146,7 @@ h5 {
gap: 15px;
align-items: center;
&:hover {
opacity: .8;
opacity: 0.8;
cursor: pointer;
}
}
@@ -187,7 +187,7 @@ h5 {
gap: 15px;
align-items: center;
&:hover {
opacity: .8;
opacity: 0.8;
cursor: pointer;
}
}

1
src/components/modals/main/scss/marketplace/modules/_item.scss
View File

@@ -3,7 +3,6 @@
margin-left: 20px;
}
p.description {
margin-top: 0;
max-width: 800px;

2
src/components/modals/main/scss/modules/_tab-content.scss
View File

@@ -102,4 +102,4 @@ table {
svg {
font-size: 1.5rem !important;
}
}
}

2
src/components/modals/main/scss/settings/modules/_resetmodal.scss
View File

@@ -26,4 +26,4 @@
display: flex;
flex-flow: row;
justify-content: space-around;
}
}

24
src/components/modals/main/settings/Checkbox.jsx
View File

@@ -8,23 +8,26 @@ export default class Checkbox extends PureComponent {
constructor(props) {
super(props);
this.state = {
checked: (localStorage.getItem(this.props.name) === 'true')
checked: localStorage.getItem(this.props.name) === 'true',
};
}
handleChange = () => {
const value = (this.state.checked !== true);
const value = this.state.checked !== true;
localStorage.setItem(this.props.name, value);
this.setState({
checked: value
checked: value,
});
if (this.props.onChange) {
this.props.onChange(value);
}
variables.stats.postEvent('setting', `${this.props.name} ${(this.state.checked === true) ? 'enabled' : 'disabled'}`);
variables.stats.postEvent(
'setting',
`${this.props.name} ${this.state.checked === true ? 'enabled' : 'disabled'}`,
);
if (this.props.element) {
if (!document.querySelector(this.props.element)) {
@@ -34,13 +37,22 @@ export default class Checkbox extends PureComponent {
}
EventBus.dispatch('refresh', this.props.category);
}
};
render() {
return (
<>
<FormControlLabel
control={<CheckboxUI name={this.props.name} color='primary' className='checkbox' checked={this.state.checked} onChange={this.handleChange} disabled={this.props.disabled || false} />}
control={
<CheckboxUI
name={this.props.name}
color="primary"
className="checkbox"
checked={this.state.checked}
onChange={this.handleChange}
disabled={this.props.disabled || false}
/>
}
label={this.props.text}
/>
</>

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

@@ -9,7 +9,7 @@ export default class Dropdown extends PureComponent {
super(props);
this.state = {
value: localStorage.getItem(this.props.name) || this.props.children[0].props.value,
title: ''
title: '',
};
this.dropdown = createRef();
}
@@ -24,13 +24,13 @@ export default class Dropdown extends PureComponent {
variables.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);
this.setState({
value
value,
});
if (!this.props.noSetting) {
localStorage.setItem(this.props.name, value);
}
if (this.props.onChange) {
this.props.onChange(value);
}
@@ -43,7 +43,7 @@ export default class Dropdown extends PureComponent {
}
EventBus.dispatch('refresh', this.props.category);
}
};
render() {
const id = 'dropdown' + this.props.name;
@@ -52,10 +52,24 @@ export default class Dropdown extends PureComponent {
return (
<FormControl fullWidth className={id}>
<InputLabel id={id}>{label}</InputLabel>
<Select labelId={id} id={this.props.name} value={this.state.value} label={label} onChange={this.onChange} ref={this.dropdown} key={id}>
{this.props.manual ? this.props.children : this.props.children.map((e, index) => {
return e ? <MenuItem key={index} value={e.props ? e.props.value : ''}>{e.props ? e.props.children : ''}</MenuItem> : null
})}
<Select
labelId={id}
id={this.props.name}
value={this.state.value}
label={label}
onChange={this.onChange}
ref={this.dropdown}
key={id}
>
{this.props.manual
? this.props.children
: this.props.children.map((e, index) => {
return e ? (
<MenuItem key={index} value={e.props ? e.props.value : ''}>
{e.props ? e.props.children : ''}
</MenuItem>
) : null;
})}
</Select>
</FormControl>
);

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

@@ -28,6 +28,13 @@ export default class FileUpload extends PureComponent {
}
render() {
return <input id={this.props.id} type='file' style={{ display: 'none' }} accept={this.props.accept} />;
return (
<input
id={this.props.id}
type="file"
style={{ display: 'none' }}
accept={this.props.accept}
/>
);
}
}

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

@@ -7,17 +7,53 @@ export default function KeybindInput(props) {
const getButton = () => {
if (!value) {
return <button className='cleanButton' style={{ visibility: 'hidden' }} onClick={() => props.action('reset', props.setting)}><MdCancel/></button>;;
} else if (value === variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.keybinds.recording')) {
return <button className='cleanButton' onClick={() => props.action('cancel', props.setting)}><MdCancel/></button>;
return (
<button
className="cleanButton"
style={{ visibility: 'hidden' }}
onClick={() => props.action('reset', props.setting)}
>
<MdCancel />
</button>
);
} else if (
value ===
variables.language.getMessage(
variables.languagecode,
'modals.main.settings.sections.keybinds.recording',
)
) {
return (
<button className="cleanButton" onClick={() => props.action('cancel', props.setting)}>
<MdCancel />
</button>
);
} else {
return <button className='cleanButton' onClick={() => props.action('reset', props.setting)}><MdCancel/></button>;
return (
<button className="cleanButton" onClick={() => props.action('reset', props.setting)}>
<MdCancel />
</button>
);
}
}
};
return (
<>
<TextField label={props.name} onClick={() => props.action('listen', props.setting)} value={value || variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.keybinds.click_to_record')} readOnly spellCheck={false} varient='outlined' InputLabelProps={{ shrink: true }} />
<TextField
label={props.name}
onClick={() => props.action('listen', props.setting)}
value={
value ||
variables.language.getMessage(
variables.languagecode,
'modals.main.settings.sections.keybinds.click_to_record',
)
}
readOnly
spellCheck={false}
varient="outlined"
InputLabelProps={{ shrink: true }}
/>
{getButton()}
</>
);

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

@@ -1,6 +1,12 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { Radio as RadioUI, RadioGroup, FormControlLabel, FormControl, FormLabel } from '@mui/material';
import {
Radio as RadioUI,
RadioGroup,
FormControlLabel,
FormControl,
FormLabel,
} from '@mui/material';
import EventBus from 'modules/helpers/eventbus';
@@ -8,10 +14,10 @@ export default class Radio extends PureComponent {
constructor(props) {
super(props);
this.state = {
value: localStorage.getItem(this.props.name)
value: localStorage.getItem(this.props.name),
};
}
handleChange = (e) => {
const { value } = e.target;
@@ -21,15 +27,21 @@ export default class Radio extends PureComponent {
if (this.props.name === 'language') {
// old tab name
if (localStorage.getItem('tabName') === variables.language.getMessage(variables.languagecode, 'tabname')) {
localStorage.setItem('tabName', require(`translations/${value.replace('-', '_')}.json`).tabname);
if (
localStorage.getItem('tabName') ===
variables.language.getMessage(variables.languagecode, 'tabname')
) {
localStorage.setItem(
'tabName',
require(`translations/${value.replace('-', '_')}.json`).tabname,
);
}
}
localStorage.setItem(this.props.name, value);
this.setState({
value
value,
});
if (this.props.onChange) {
@@ -37,7 +49,7 @@ export default class Radio extends PureComponent {
}
variables.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);
if (this.props.element) {
if (!document.querySelector(this.props.element)) {
document.querySelector('.reminder-info').style.display = 'flex';
@@ -46,15 +58,30 @@ export default class Radio extends PureComponent {
}
EventBus.dispatch('refresh', this.props.category);
}
};
render() {
return (
<FormControl component='fieldset'>
<FormLabel className={this.props.smallTitle ? 'radio-title-small' : 'radio-title'} component='legend'>{this.props.title}</FormLabel>
<RadioGroup aria-label={this.props.name} name={this.props.name} onChange={this.handleChange} value={this.state.value}>
<FormControl component="fieldset">
<FormLabel
className={this.props.smallTitle ? 'radio-title-small' : 'radio-title'}
component="legend"
>
{this.props.title}
</FormLabel>
<RadioGroup
aria-label={this.props.name}
name={this.props.name}
onChange={this.handleChange}
value={this.state.value}
>
{this.props.options.map((option) => (
<FormControlLabel value={option.value} control={<RadioUI/>} label={option.name} key={option.name} />
<FormControlLabel
value={option.value}
control={<RadioUI />}
label={option.name}
key={option.name}
/>
))}
</RadioGroup>
</FormControl>

24
src/components/modals/main/settings/Switch.jsx
View File

@@ -8,19 +8,22 @@ export default class Switch extends PureComponent {
constructor(props) {
super(props);
this.state = {
checked: (localStorage.getItem(this.props.name) === 'true')
checked: localStorage.getItem(this.props.name) === 'true',
};
}
handleChange = () => {
const value = (this.state.checked !== true);
const value = this.state.checked !== true;
localStorage.setItem(this.props.name, value);
this.setState({
checked: value
checked: value,
});
variables.stats.postEvent('setting', `${this.props.name} ${(this.state.checked === true) ? 'enabled' : 'disabled'}`);
variables.stats.postEvent(
'setting',
`${this.props.name} ${this.state.checked === true ? 'enabled' : 'disabled'}`,
);
if (this.props.element) {
if (!document.querySelector(this.props.element)) {
@@ -30,15 +33,22 @@ export default class Switch extends PureComponent {
}
EventBus.dispatch('refresh', this.props.category);
}
};
render() {
return (
<>
<FormControlLabel
control={<SwitchUI name={this.props.name} color='primary' checked={this.state.checked} onChange={this.handleChange} />}
control={
<SwitchUI
name={this.props.name}
color="primary"
checked={this.state.checked}
onChange={this.handleChange}
/>
}
label={this.props.text}
labelPlacement='start'
labelPlacement="start"
/>
</>
);

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

@@ -9,13 +9,13 @@ export default class Text extends PureComponent {
constructor(props) {
super(props);
this.state = {
value: localStorage.getItem(this.props.name) || ''
value: localStorage.getItem(this.props.name) || '',
};
}
handleChange = (e) => {
let { value } = e.target;
// Alex wanted font to work with montserrat and Montserrat, so I made it work
if (this.props.upperCaseFirst === true) {
value = value.charAt(0).toUpperCase() + value.slice(1);
@@ -23,7 +23,7 @@ export default class Text extends PureComponent {
localStorage.setItem(this.props.name, value);
this.setState({
value
value,
});
if (this.props.element) {
@@ -34,25 +34,47 @@ export default class Text extends PureComponent {
}
EventBus.dispatch('refresh', this.props.category);
}
};
resetItem = () => {
this.handleChange({
target: {
value: this.props.default || ''
}
value: this.props.default || '',
},
});
toast(variables.language.getMessage(variables.languagecode, 'toasts.reset'));
}
};
render() {
return (
<>
{(this.props.textarea === true) ?
<TextField label={this.props.title} value={this.state.value} onChange={this.handleChange} varient='outlined' multiline spellCheck={false} minRows={4} maxRows={10} InputLabelProps={{ shrink: true }} />
: <TextField label={this.props.title} value={this.state.value} onChange={this.handleChange} varient='outlined' InputLabelProps={{ shrink: true }} />
}
<span className='link' onClick={this.resetItem}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.buttons.reset')}</span>
{this.props.textarea === true ? (
<TextField
label={this.props.title}
value={this.state.value}
onChange={this.handleChange}
varient="outlined"
multiline
spellCheck={false}
minRows={4}
maxRows={10}
InputLabelProps={{ shrink: true }}
/>
) : (
<TextField
label={this.props.title}
value={this.state.value}
onChange={this.handleChange}
varient="outlined"
InputLabelProps={{ shrink: true }}
/>
)}
<span className="link" onClick={this.resetItem}>
{variables.language.getMessage(
variables.languagecode,
'modals.main.settings.buttons.reset',
)}
</span>
</>
);
}

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

@@ -134,7 +134,7 @@ export default class About extends PureComponent {
<span className="mainTitle">
{this.getMessage('modals.main.settings.sections.about.title')}
</span>
<div className='settingsRow' style={{ justifyContent: 'center' }}>
<div className="settingsRow" style={{ justifyContent: 'center' }}>
<div style={{ display: 'flex', flexFlow: 'column', gap: '5px' }}>
<img draggable="false" className="aboutLogo" src={this.state.image} alt="Logo" />
<span className="title">
@@ -179,10 +179,10 @@ export default class About extends PureComponent {
{this.getMessage('modals.main.settings.sections.about.contact_us')}
</span>
<div className="aboutContact">
<a class='donateButton' href='https://muetab.com/contact'>
<MdContactPage />
Form
</a>
<a class="donateButton" href="https://muetab.com/contact">
<MdContactPage />
Form
</a>
<Tooltip title={'Email'}>
<a
href={'mailto:' + variables.constants.EMAIL}
@@ -217,13 +217,16 @@ export default class About extends PureComponent {
<span className="title">
{this.getMessage('modals.main.settings.sections.about.support_mue')}
</span>
<p>As Mue is entirely free, we rely on donations to cover pay the server bills and fund development</p>
<p>
As Mue is entirely free, we rely on donations to cover pay the server bills and fund
development
</p>
<div className="aboutContact">
<a class='donateButton' href={variables.constants.DONATE_LINK}>
<a class="donateButton" href={variables.constants.DONATE_LINK}>
<BiDonateHeart />
Donate
</a>
<Tooltip title={'Github Sponsors'}>
</a>
<Tooltip title={'Github Sponsors'}>
<a
href={'https://discord.gg/' + variables.constants.DISCORD_SERVER}
target="_blank"

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

@@ -1,27 +1,24 @@
import variables from "modules/variables";
import { PureComponent } from "react";
import Modal from "react-modal";
import { MenuItem } from "@mui/material";
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Modal from 'react-modal';
import { MenuItem } from '@mui/material';
import {
MdUpload as ImportIcon,
MdDownload as ExportIcon,
MdRestartAlt as ResetIcon,
} from "react-icons/md";
} from 'react-icons/md';
import {
exportSettings,
importSettings,
} from "modules/helpers/settings/modals";
import { exportSettings, importSettings } from 'modules/helpers/settings/modals';
import Checkbox from "../Checkbox";
import FileUpload from "../FileUpload";
import Text from "../Text";
import Switch from "../Switch";
import ResetModal from "../ResetModal";
import Dropdown from "../Dropdown";
import SettingsItem from "../SettingsItem";
import Checkbox from '../Checkbox';
import FileUpload from '../FileUpload';
import Text from '../Text';
import Switch from '../Switch';
import ResetModal from '../ResetModal';
import Dropdown from '../Dropdown';
import SettingsItem from '../SettingsItem';
const time_zones = require("components/widgets/time/timezones.json");
const time_zones = require('components/widgets/time/timezones.json');
export default class AdvancedSettings extends PureComponent {
constructor() {
@@ -32,52 +29,41 @@ export default class AdvancedSettings extends PureComponent {
}
render() {
const getMessage = (text) =>
variables.language.getMessage(variables.languagecode, text);
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<>
<span className="mainTitle">
{getMessage("modals.main.settings.sections.advanced.title")}
{getMessage('modals.main.settings.sections.advanced.title')}
</span>
<SettingsItem
title={getMessage(
"modals.main.settings.sections.advanced.offline_mode"
)}
>
<SettingsItem title={getMessage('modals.main.settings.sections.advanced.offline_mode')}>
<Switch
name="offlineMode"
text={getMessage(
"modals.main.settings.sections.advanced.offline_mode"
)}
text={getMessage('modals.main.settings.sections.advanced.offline_mode')}
element=".other"
/>
</SettingsItem>
{localStorage.getItem("welcomePreview") !== "true" ? (
{localStorage.getItem('welcomePreview') !== 'true' ? (
<div className="settingsRow">
<div className="content">
<span className="title">
{getMessage("modals.main.settings.sections.advanced.data")}
{getMessage('modals.main.settings.sections.advanced.data')}
</span>
<span className="subtitle">
{getMessage(
"modals.main.settings.sections.advanced.experimental_warning"
)}
{getMessage('modals.main.settings.sections.advanced.experimental_warning')}
</span>
</div>
<div className="action activityButtons">
<button onClick={() => this.setState({ resetModal: true })}>
{getMessage("modals.main.settings.buttons.reset")}
{getMessage('modals.main.settings.buttons.reset')}
<ResetIcon />
</button>
<button onClick={() => exportSettings()}>
{getMessage("modals.main.settings.buttons.export")}
{getMessage('modals.main.settings.buttons.export')}
<ExportIcon />
</button>
<button
onClick={() => document.getElementById("file-input").click()}
>
{getMessage("modals.main.settings.buttons.import")}
<button onClick={() => document.getElementById('file-input').click()}>
{getMessage('modals.main.settings.buttons.import')}
<ImportIcon />
</button>
</div>
@@ -86,16 +72,12 @@ export default class AdvancedSettings extends PureComponent {
<SettingsItem title="This should really be in time">
<Dropdown
name="timezone"
label={getMessage(
"modals.main.settings.sections.advanced.timezone.title"
)}
label={getMessage('modals.main.settings.sections.advanced.timezone.title')}
category="timezone"
manual={true}
>
<MenuItem value="auto">
{getMessage(
"modals.main.settings.sections.advanced.timezone.automatic"
)}
{getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
</MenuItem>
{time_zones.map((timezone) => (
<MenuItem value={timezone} key={timezone}>
@@ -104,15 +86,11 @@ export default class AdvancedSettings extends PureComponent {
))}
</Dropdown>
</SettingsItem>
<SettingsItem
title={getMessage("modals.main.settings.sections.advanced.tab_name")}
>
<SettingsItem title={getMessage('modals.main.settings.sections.advanced.tab_name')}>
<Text
title={getMessage(
"modals.main.settings.sections.advanced.tab_name"
)}
title={getMessage('modals.main.settings.sections.advanced.tab_name')}
name="tabName"
default={getMessage("tabname")}
default={getMessage('tabname')}
category="other"
/>
</SettingsItem>
@@ -122,15 +100,9 @@ export default class AdvancedSettings extends PureComponent {
type="settings"
loadFunction={(e) => importSettings(e)}
/>
<SettingsItem
title={getMessage(
"modals.main.settings.sections.advanced.custom_css"
)}
>
<SettingsItem title={getMessage('modals.main.settings.sections.advanced.custom_css')}>
<Text
title={getMessage(
"modals.main.settings.sections.advanced.custom_css"
)}
title={getMessage('modals.main.settings.sections.advanced.custom_css')}
name="customcss"
textarea={true}
category="other"
@@ -139,18 +111,16 @@ export default class AdvancedSettings extends PureComponent {
<div className="settingsRow">
<div className="content">
<span className="title">
{getMessage("modals.main.settings.sections.experimental.title")}
{getMessage('modals.main.settings.sections.experimental.title')}
</span>
<span className="subtitle">
{getMessage(
"modals.main.settings.sections.advanced.experimental_warning"
)}
{getMessage('modals.main.settings.sections.advanced.experimental_warning')}
</span>
</div>
<div className="action">
<Switch
name="experimental"
text={getMessage("modals.main.settings.enabled")}
text={getMessage('modals.main.settings.enabled')}
element=".other"
/>
</div>

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

@@ -1,53 +1,52 @@
import variables from "modules/variables";
import variables from 'modules/variables';
import Checkbox from "../Checkbox";
import Dropdown from "../Dropdown";
import Radio from "../Radio";
import Slider from "../Slider";
import Text from "../Text";
import SettingsItem from "../SettingsItem";
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import Radio from '../Radio';
import Slider from '../Slider';
import Text from '../Text';
import SettingsItem from '../SettingsItem';
import { values } from "modules/helpers/settings/modals";
import { values } from 'modules/helpers/settings/modals';
export default function AppearanceSettings() {
const getMessage = (text) =>
variables.language.getMessage(variables.languagecode, text);
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
const themeOptions = [
{
name: getMessage("modals.main.settings.sections.appearance.theme.auto"),
value: "auto",
name: getMessage('modals.main.settings.sections.appearance.theme.auto'),
value: 'auto',
},
{
name: getMessage("modals.main.settings.sections.appearance.theme.light"),
value: "light",
name: getMessage('modals.main.settings.sections.appearance.theme.light'),
value: 'light',
},
{
name: getMessage("modals.main.settings.sections.appearance.theme.dark"),
value: "dark",
name: getMessage('modals.main.settings.sections.appearance.theme.dark'),
value: 'dark',
},
];
const styleOptions = [
{
name: "Legacy",
value: "legacy",
name: 'Legacy',
value: 'legacy',
},
{
name: "New",
value: "new",
name: 'New',
value: 'new',
},
];
return (
<>
<span className="mainTitle">
{getMessage("modals.main.settings.sections.appearance.title")}
{getMessage('modals.main.settings.sections.appearance.title')}
</span>
<div className="settingsRow">
<div className="content">
<span className="title">
{getMessage("modals.main.settings.sections.appearance.theme.title")}
{getMessage('modals.main.settings.sections.appearance.theme.title')}
</span>
<span className="subtitle">subtitle</span>
</div>
@@ -58,96 +57,66 @@ export default function AppearanceSettings() {
<div className="settingsRow">
<div className="content">
<span className="title">
{getMessage("modals.main.settings.sections.appearance.font.title")}
{getMessage('modals.main.settings.sections.appearance.font.title')}
</span>
<span className="subtitle">subtitle</span>
</div>
<div className="action">
<Checkbox
name="fontGoogle"
text={getMessage(
"modals.main.settings.sections.appearance.font.google"
)}
text={getMessage('modals.main.settings.sections.appearance.font.google')}
category="other"
/>
<Text
title={getMessage(
"modals.main.settings.sections.appearance.font.custom"
)}
title={getMessage('modals.main.settings.sections.appearance.font.custom')}
name="font"
upperCaseFirst={true}
category="other"
/>
<Dropdown
label={getMessage(
"modals.main.settings.sections.appearance.font.weight.title"
)}
label={getMessage('modals.main.settings.sections.appearance.font.weight.title')}
name="fontweight"
category="other"
>
{/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
<option value="100">
{getMessage(
"modals.main.settings.sections.appearance.font.weight.thin"
)}
{getMessage('modals.main.settings.sections.appearance.font.weight.thin')}
</option>
<option value="200">
{getMessage(
"modals.main.settings.sections.appearance.font.weight.extra_light"
)}
{getMessage('modals.main.settings.sections.appearance.font.weight.extra_light')}
</option>
<option value="300">
{getMessage(
"modals.main.settings.sections.appearance.font.weight.light"
)}
{getMessage('modals.main.settings.sections.appearance.font.weight.light')}
</option>
<option value="400">
{getMessage(
"modals.main.settings.sections.appearance.font.weight.normal"
)}
{getMessage('modals.main.settings.sections.appearance.font.weight.normal')}
</option>
<option value="500">
{getMessage(
"modals.main.settings.sections.appearance.font.weight.medium"
)}
{getMessage('modals.main.settings.sections.appearance.font.weight.medium')}
</option>
<option value="600">
{getMessage(
"modals.main.settings.sections.appearance.font.weight.semi_bold"
)}
{getMessage('modals.main.settings.sections.appearance.font.weight.semi_bold')}
</option>
<option value="700">
{getMessage(
"modals.main.settings.sections.appearance.font.weight.bold"
)}
{getMessage('modals.main.settings.sections.appearance.font.weight.bold')}
</option>
<option value="800">
{getMessage(
"modals.main.settings.sections.appearance.font.weight.extra_bold"
)}
{getMessage('modals.main.settings.sections.appearance.font.weight.extra_bold')}
</option>
</Dropdown>
<Dropdown
label={getMessage(
"modals.main.settings.sections.appearance.font.style.title"
)}
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"
)}
{getMessage('modals.main.settings.sections.appearance.font.style.normal')}
</option>
<option value="italic">
{getMessage(
"modals.main.settings.sections.appearance.font.style.italic"
)}
{getMessage('modals.main.settings.sections.appearance.font.style.italic')}
</option>
<option value="oblique">
{getMessage(
"modals.main.settings.sections.appearance.font.style.oblique"
)}
{getMessage('modals.main.settings.sections.appearance.font.style.oblique')}
</option>
</Dropdown>
</div>
@@ -167,17 +136,13 @@ export default function AppearanceSettings() {
<div className="settingsRow">
<div className="content">
<span className="title">
{getMessage(
"modals.main.settings.sections.appearance.accessibility.title"
)}
{getMessage('modals.main.settings.sections.appearance.accessibility.title')}
</span>
<span className="subtitle">subtitle</span>
</div>
<div className="action">
<Dropdown
label={getMessage(
"modals.main.settings.sections.appearance.accessibility.text_shadow"
)}
label={getMessage('modals.main.settings.sections.appearance.accessibility.text_shadow')}
name="textBorder"
category="other"
>
@@ -186,27 +151,23 @@ export default function AppearanceSettings() {
<option value="none">None</option>
</Dropdown>
<Checkbox
text={getMessage(
"modals.main.settings.sections.appearance.accessibility.animations"
)}
text={getMessage('modals.main.settings.sections.appearance.accessibility.animations')}
name="animations"
category="other"
/>
<Slider
title={getMessage(
"modals.main.settings.sections.appearance.accessibility.toast_duration"
'modals.main.settings.sections.appearance.accessibility.toast_duration',
)}
name="toastDisplayTime"
default="2500"
step="100"
min="500"
max="5000"
marks={values("toast")}
marks={values('toast')}
display={
" " +
getMessage(
"modals.main.settings.sections.appearance.accessibility.milliseconds"
)
' ' +
getMessage('modals.main.settings.sections.appearance.accessibility.milliseconds')
}
/>
</div>

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

@@ -1,9 +1,9 @@
import variables from "modules/variables";
import { PureComponent, createRef } from "react";
import { MdOutlineWifiOff } from "react-icons/md";
import Modal from "react-modal";
import variables from 'modules/variables';
import { PureComponent, createRef } from 'react';
import { MdOutlineWifiOff } from 'react-icons/md';
import Modal from 'react-modal';
import Lightbox from "../../marketplace/Lightbox";
import Lightbox from '../../marketplace/Lightbox';
export default class Changelog extends PureComponent {
constructor() {
@@ -13,14 +13,14 @@ export default class Changelog extends PureComponent {
showLightbox: false,
lightboxImg: null,
};
this.offlineMode = localStorage.getItem("offlineMode") === "true";
this.offlineMode = localStorage.getItem('offlineMode') === 'true';
this.controller = new AbortController();
this.changelog = createRef();
}
async getUpdate() {
const data = await (
await fetch(variables.constants.BLOG_POST + "/index.json", {
await fetch(variables.constants.BLOG_POST + '/index.json', {
signal: this.controller.signal,
})
).json();
@@ -29,11 +29,11 @@ export default class Changelog extends PureComponent {
return;
}
let date = new Date(data.date.split(" ")[0]);
date = date.toLocaleDateString(variables.languagecode.replace("_", "-"), {
year: "numeric",
month: "long",
day: "numeric",
let date = new Date(data.date.split(' ')[0]);
date = date.toLocaleDateString(variables.languagecode.replace('_', '-'), {
year: 'numeric',
month: 'long',
day: 'numeric',
});
this.setState({
@@ -42,17 +42,17 @@ export default class Changelog extends PureComponent {
image: data.featured_image || null,
author: variables.language.getMessage(
variables.languagecode,
"modals.main.settings.sections.changelog.by",
'modals.main.settings.sections.changelog.by',
{
author: data.authors.join(", "),
}
author: data.authors.join(', '),
},
),
html: data.html,
});
// lightbox etc
const images = this.changelog.current.getElementsByTagName("img");
const links = this.changelog.current.getElementsByTagName("a");
const images = this.changelog.current.getElementsByTagName('img');
const links = this.changelog.current.getElementsByTagName('a');
for (const img of images) {
img.draggable = false;
@@ -66,8 +66,8 @@ export default class Changelog extends PureComponent {
// open in new tab
for (let link = 0; link < links.length; link++) {
links[link].target = "_blank";
links[link].rel = "noopener noreferrer";
links[link].target = '_blank';
links[link].rel = 'noopener noreferrer';
}
}
@@ -85,8 +85,7 @@ export default class Changelog extends PureComponent {
}
render() {
const getMessage = (text) =>
variables.language.getMessage(variables.languagecode, text);
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
const errorMessage = (msg) => {
return (
@@ -100,11 +99,9 @@ export default class Changelog extends PureComponent {
return errorMessage(
<>
<MdOutlineWifiOff />
<h1>{getMessage("modals.main.marketplace.offline.title")}</h1>
<p className="description">
{getMessage("modals.main.marketplace.offline.description")}
</p>
</>
<h1>{getMessage('modals.main.marketplace.offline.title')}</h1>
<p className="description">{getMessage('modals.main.marketplace.offline.description')}</p>
</>,
);
}
@@ -113,7 +110,7 @@ export default class Changelog extends PureComponent {
<div className="loaderHolder">
<div id="loader"></div>
<span className="subtitle">Just be a sec.</span>
</div>
</div>,
);
}
@@ -131,10 +128,7 @@ export default class Changelog extends PureComponent {
className="updateImage"
/>
) : null}
<div
className="updateChangelog"
dangerouslySetInnerHTML={{ __html: this.state.html }}
/>
<div className="updateChangelog" dangerouslySetInnerHTML={{ __html: this.state.html }} />
<Modal
closeTimeoutMS={100}
onRequestClose={() => this.setState({ showLightbox: false })}

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

@@ -1,44 +1,39 @@
import variables from "modules/variables";
import { PureComponent } from "react";
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Header from "../Header";
import Checkbox from "../Checkbox";
import Dropdown from "../Dropdown";
import SettingsItem from "../SettingsItem";
import Header from '../Header';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import SettingsItem from '../SettingsItem';
export default class DateSettings extends PureComponent {
constructor() {
super();
this.state = {
dateType: localStorage.getItem("dateType") || "long",
dateType: localStorage.getItem('dateType') || 'long',
};
}
render() {
const getMessage = (text) =>
variables.language.getMessage(variables.languagecode, text);
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
let dateSettings;
const longSettings = (
<>
<Dropdown
label="Long Format"
name="longFormat"
category="date"
>
<Dropdown label="Long Format" name="longFormat" category="date">
<option value="DMY">DMY</option>
<option value="MDY">MDY</option>
<option value="YMD">YMD</option>
</Dropdown>
<Checkbox
name="dayofweek"
text={getMessage("modals.main.settings.sections.date.day_of_week")}
text={getMessage('modals.main.settings.sections.date.day_of_week')}
category="date"
/>
<Checkbox
name="datenth"
text={getMessage("modals.main.settings.sections.date.datenth")}
text={getMessage('modals.main.settings.sections.date.datenth')}
category="date"
/>
</>
@@ -47,7 +42,7 @@ export default class DateSettings extends PureComponent {
const shortSettings = (
<>
<Dropdown
label={getMessage("modals.main.settings.sections.date.short_format")}
label={getMessage('modals.main.settings.sections.date.short_format')}
name="dateFormat"
category="date"
>
@@ -57,37 +52,27 @@ export default class DateSettings extends PureComponent {
</Dropdown>
<Dropdown
label={getMessage(
"modals.main.settings.sections.date.short_separator.title"
)}
label={getMessage('modals.main.settings.sections.date.short_separator.title')}
name="shortFormat"
category="date"
>
<option value="dash">
{getMessage(
"modals.main.settings.sections.date.short_separator.dash"
)}
{getMessage('modals.main.settings.sections.date.short_separator.dash')}
</option>
<option value="dots">
{getMessage(
"modals.main.settings.sections.date.short_separator.dots"
)}
{getMessage('modals.main.settings.sections.date.short_separator.dots')}
</option>
<option value="gaps">
{getMessage(
"modals.main.settings.sections.date.short_separator.gaps"
)}
{getMessage('modals.main.settings.sections.date.short_separator.gaps')}
</option>
<option value="slashes">
{getMessage(
"modals.main.settings.sections.date.short_separator.slashes"
)}
{getMessage('modals.main.settings.sections.date.short_separator.slashes')}
</option>
</Dropdown>
</>
);
if (this.state.dateType === "long") {
if (this.state.dateType === 'long') {
dateSettings = longSettings;
} else {
dateSettings = shortSettings;
@@ -96,7 +81,7 @@ export default class DateSettings extends PureComponent {
return (
<>
<Header
title={getMessage("modals.main.settings.sections.date.title")}
title={getMessage('modals.main.settings.sections.date.title')}
setting="date"
category="date"
element=".date"
@@ -105,28 +90,28 @@ export default class DateSettings extends PureComponent {
/>
<SettingsItem title="Date Type">
<Dropdown
label={getMessage("modals.main.settings.sections.time.type")}
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.date.type.long")}
{getMessage('modals.main.settings.sections.date.type.long')}
</option>
<option value="short">
{getMessage("modals.main.settings.sections.date.type.short")}
{getMessage('modals.main.settings.sections.date.type.short')}
</option>
</Dropdown>
</SettingsItem>
<SettingsItem title="Extra Options">
<Checkbox
name="weeknumber"
text={getMessage("modals.main.settings.sections.date.week_number")}
text={getMessage('modals.main.settings.sections.date.week_number')}
category="date"
/>
<Checkbox
name="datezero"
text={getMessage("modals.main.settings.sections.time.digital.zero")}
text={getMessage('modals.main.settings.sections.time.digital.zero')}
category="date"
/>
{dateSettings}

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

@@ -1,25 +1,22 @@
import variables from "modules/variables";
import { useState } from "react";
import Checkbox from "../Checkbox";
import Slider from "../Slider";
import { TextField } from "@mui/material";
import variables from 'modules/variables';
import { useState } from 'react';
import Checkbox from '../Checkbox';
import Slider from '../Slider';
import { TextField } from '@mui/material';
import EventBus from "modules/helpers/eventbus";
import { values } from "modules/helpers/settings/modals";
import EventBus from 'modules/helpers/eventbus';
import { values } from 'modules/helpers/settings/modals';
export default function ExperimentalSettings() {
const getMessage = (text) =>
variables.language.getMessage(variables.languagecode, text);
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
const [eventType, setEventType] = useState();
const [eventName, setEventName] = useState();
return (
<>
<h2>{getMessage("modals.main.settings.sections.experimental.title")}</h2>
<p>{getMessage("modals.main.settings.sections.experimental.warning")}</p>
<h3>
{getMessage("modals.main.settings.sections.experimental.developer")}
</h3>
<h2>{getMessage('modals.main.settings.sections.experimental.title')}</h2>
<p>{getMessage('modals.main.settings.sections.experimental.warning')}</p>
<h3>{getMessage('modals.main.settings.sections.experimental.developer')}</h3>
<Checkbox name="debug" text="Debug hotkey (Ctrl + #)" element=".other" />
<Slider
title="Debug timeout"
@@ -28,12 +25,12 @@ export default function ExperimentalSettings() {
max="5000"
default="0"
step="100"
marks={values("experimental")}
marks={values('experimental')}
element=".other"
/>
<p>Send Event</p>
<TextField
label={"Type"}
label={'Type'}
value={eventType}
onChange={(e) => setEventType(e.target.value)}
spellCheck={false}
@@ -41,7 +38,7 @@ export default function ExperimentalSettings() {
InputLabelProps={{ shrink: true }}
/>
<TextField
label={"Name"}
label={'Name'}
value={eventName}
onChange={(e) => setEventName(e.target.value)}
spellCheck={false}
@@ -49,19 +46,12 @@ export default function ExperimentalSettings() {
InputLabelProps={{ shrink: true }}
/>
<br />
<button
className="uploadbg"
onClick={() => EventBus.dispatch(eventType, eventName)}
>
<button className="uploadbg" onClick={() => EventBus.dispatch(eventType, eventName)}>
Send
</button>
<br />
<br />
<button
className="reset"
style={{ marginLeft: "0px" }}
onClick={() => localStorage.clear()}
>
<button className="reset" style={{ marginLeft: '0px' }} onClick={() => localStorage.clear()}>
Clear LocalStorage
</button>
</>

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

@@ -11,7 +11,7 @@ export default class GreetingSettings extends PureComponent {
constructor() {
super();
this.state = {
birthday: new Date(localStorage.getItem('birthday')) || new Date()
birthday: new Date(localStorage.getItem('birthday')) || new Date(),
};
}
@@ -19,26 +19,64 @@ export default class GreetingSettings extends PureComponent {
localStorage.setItem('birthday', e.target.value || new Date());
this.setState({
birthday: e.target.value ? new Date(e.target.value) : new Date()
birthday: e.target.value ? new Date(e.target.value) : new Date(),
});
}
};
render() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<>
<Header title={getMessage('modals.main.settings.sections.greeting.title')} setting='greeting' category='greeting' element='.greeting' zoomSetting='zoomGreeting' switch={true}/>
<SettingsItem title="Additional Settings" subtitle={getMessage('modals.main.settings.enabled')}>
<Checkbox name='events' text={getMessage('modals.main.settings.sections.greeting.events')} category='greeting'/>
<Checkbox name='defaultGreetingMessage' text={getMessage('modals.main.settings.sections.greeting.default')} category='greeting'/>
<Text title={getMessage('modals.main.settings.sections.greeting.name')} name='greetingName' category='greeting'/>
<Header
title={getMessage('modals.main.settings.sections.greeting.title')}
setting="greeting"
category="greeting"
element=".greeting"
zoomSetting="zoomGreeting"
switch={true}
/>
<SettingsItem
title="Additional Settings"
subtitle={getMessage('modals.main.settings.enabled')}
>
<Checkbox
name="events"
text={getMessage('modals.main.settings.sections.greeting.events')}
category="greeting"
/>
<Checkbox
name="defaultGreetingMessage"
text={getMessage('modals.main.settings.sections.greeting.default')}
category="greeting"
/>
<Text
title={getMessage('modals.main.settings.sections.greeting.name')}
name="greetingName"
category="greeting"
/>
</SettingsItem>
<SettingsItem title={getMessage('modals.main.settings.sections.greeting.birthday')} subtitle={getMessage('modals.main.settings.enabled')}>
<Switch name='birthdayenabled' text={getMessage('modals.main.settings.enabled')} category='greeting'/>
<Checkbox name='birthdayage' text={getMessage('modals.main.settings.sections.greeting.birthday_age')} category='greeting'/>
<p>{getMessage('modals.main.settings.sections.greeting.birthday_date')}</p>
<input type='date' onChange={this.changeDate} value={this.state.birthday.toISOString().substr(0, 10)} required/>
<SettingsItem
title={getMessage('modals.main.settings.sections.greeting.birthday')}
subtitle={getMessage('modals.main.settings.enabled')}
>
<Switch
name="birthdayenabled"
text={getMessage('modals.main.settings.enabled')}
category="greeting"
/>
<Checkbox
name="birthdayage"
text={getMessage('modals.main.settings.sections.greeting.birthday_age')}
category="greeting"
/>
<p>{getMessage('modals.main.settings.sections.greeting.birthday_date')}</p>
<input
type="date"
onChange={this.changeDate}
value={this.state.birthday.toISOString().substr(0, 10)}
required
/>
</SettingsItem>
{/*<h3>{getMessage('modals.main.settings.sections.greeting.birthday')}</h3>
<Switch name='birthdayenabled' text={getMessage('modals.main.settings.enabled')} category='greeting'/>

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

@@ -11,7 +11,7 @@ export default class KeybindSettings extends PureComponent {
super();
this.state = {
keybinds: JSON.parse(localStorage.getItem('keybinds')) || {},
cancelled: false
cancelled: false,
};
}
@@ -25,7 +25,7 @@ export default class KeybindSettings extends PureComponent {
currentKeybinds[type] = this.getMessage('modals.main.settings.sections.keybinds.recording');
this.setState({
keybinds: currentKeybinds,
cancelled: false
cancelled: false,
});
this.forceUpdate();
@@ -42,7 +42,7 @@ export default class KeybindSettings extends PureComponent {
keys = `${keys}+${event.key}`;
}
previouskey = event.key
previouskey = event.key;
});
this.keyup = document.addEventListener('keyup', () => {
@@ -55,7 +55,7 @@ export default class KeybindSettings extends PureComponent {
keybinds[type] = keys.split('+').slice(0, 4).join('+');
localStorage.setItem('keybinds', JSON.stringify(keybinds));
this.setState({
keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
keybinds: JSON.parse(localStorage.getItem('keybinds')) || {},
});
});
@@ -73,7 +73,7 @@ export default class KeybindSettings extends PureComponent {
this.setState({
keybinds: currentKeybinds,
cancelled: true
cancelled: true,
});
this.forceUpdate();
}
@@ -85,7 +85,7 @@ export default class KeybindSettings extends PureComponent {
this.setState({
keybinds: JSON.parse(localStorage.getItem('keybinds')) || {},
cancelled: true
cancelled: true,
});
this.showReminder();
@@ -110,35 +110,140 @@ export default class KeybindSettings extends PureComponent {
render() {
return (
<>
<Header title={this.getMessage('modals.main.settings.sections.keybinds.title')} setting='keybindsEnabled' element='.other' />
<table className='keybind-table'>
<Header
title={this.getMessage('modals.main.settings.sections.keybinds.title')}
setting="keybindsEnabled"
element=".other"
/>
<table className="keybind-table">
<tbody>
<tr>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.favourite')} state={this.state.keybinds} setting='favouriteBackground' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.maximise')} state={this.state.keybinds} setting='maximiseBackground' action={(type, e) => this.action(type, e)}/></th>
<th>
<KeybindInput
name={this.getMessage(
'modals.main.settings.sections.keybinds.background.favourite',
)}
state={this.state.keybinds}
setting="favouriteBackground"
action={(type, e) => this.action(type, e)}
/>
</th>
<th>
<KeybindInput
name={this.getMessage(
'modals.main.settings.sections.keybinds.background.maximise',
)}
state={this.state.keybinds}
setting="maximiseBackground"
action={(type, e) => this.action(type, e)}
/>
</th>
</tr>
<tr>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.download')} state={this.state.keybinds} setting='downloadBackground' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.show_info')} state={this.state.keybinds} setting='showBackgroundInformation' action={(type, e) => this.action(type, e)}/></th>
<th>
<KeybindInput
name={this.getMessage(
'modals.main.settings.sections.keybinds.background.download',
)}
state={this.state.keybinds}
setting="downloadBackground"
action={(type, e) => this.action(type, e)}
/>
</th>
<th>
<KeybindInput
name={this.getMessage(
'modals.main.settings.sections.keybinds.background.show_info',
)}
state={this.state.keybinds}
setting="showBackgroundInformation"
action={(type, e) => this.action(type, e)}
/>
</th>
</tr>
<tr>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.show_info')} state={this.state.keybinds} setting='showBackgroundInformation' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quote.favourite')} state={this.state.keybinds} setting='favouriteQuote' action={(type, e) => this.action(type, e)}/></th>
<th>
<KeybindInput
name={this.getMessage(
'modals.main.settings.sections.keybinds.background.show_info',
)}
state={this.state.keybinds}
setting="showBackgroundInformation"
action={(type, e) => this.action(type, e)}
/>
</th>
<th>
<KeybindInput
name={this.getMessage('modals.main.settings.sections.keybinds.quote.favourite')}
state={this.state.keybinds}
setting="favouriteQuote"
action={(type, e) => this.action(type, e)}
/>
</th>
</tr>
<tr>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quote.copy')} state={this.state.keybinds} setting='copyQuote' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quote.tweet')} state={this.state.keybinds} setting='tweetQuote' action={(type, e) => this.action(type, e)}/></th>
<th>
<KeybindInput
name={this.getMessage('modals.main.settings.sections.keybinds.quote.copy')}
state={this.state.keybinds}
setting="copyQuote"
action={(type, e) => this.action(type, e)}
/>
</th>
<th>
<KeybindInput
name={this.getMessage('modals.main.settings.sections.keybinds.quote.tweet')}
state={this.state.keybinds}
setting="tweetQuote"
action={(type, e) => this.action(type, e)}
/>
</th>
</tr>
<tr>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.notes.pin')} state={this.state.keybinds} setting='pinNotes' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.notes.copy')} state={this.state.keybinds} setting='copyNotes' action={(type, e) => this.action(type, e)}/></th>
<th>
<KeybindInput
name={this.getMessage('modals.main.settings.sections.keybinds.notes.pin')}
state={this.state.keybinds}
setting="pinNotes"
action={(type, e) => this.action(type, e)}
/>
</th>
<th>
<KeybindInput
name={this.getMessage('modals.main.settings.sections.keybinds.notes.copy')}
state={this.state.keybinds}
setting="copyNotes"
action={(type, e) => this.action(type, e)}
/>
</th>
</tr>
<tr>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.search')} state={this.state.keybinds} setting='focusSearch' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quicklinks')} state={this.state.keybinds} setting='toggleQuicklinks' action={(type, e) => this.action(type, e)}/></th>
<th>
<KeybindInput
name={this.getMessage('modals.main.settings.sections.keybinds.search')}
state={this.state.keybinds}
setting="focusSearch"
action={(type, e) => this.action(type, e)}
/>
</th>
<th>
<KeybindInput
name={this.getMessage('modals.main.settings.sections.keybinds.quicklinks')}
state={this.state.keybinds}
setting="toggleQuicklinks"
action={(type, e) => this.action(type, e)}
/>
</th>
</tr>
<tr>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.modal')} state={this.state.keybinds} setting='toggleModal' action={(type, e) => this.action(type, e)}/></th>
<th>
<KeybindInput
name={this.getMessage('modals.main.settings.sections.keybinds.modal')}
state={this.state.keybinds}
setting="toggleModal"
action={(type, e) => this.action(type, e)}
/>
</th>
</tr>
</tbody>
</table>

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

@@ -96,8 +96,9 @@ export default class Message extends PureComponent {
<th>
{this.state.messages.length > 1 ? (
<button
className='deleteButton'
onClick={() => this.modifyMessage('remove', index)}>
className="deleteButton"
onClick={() => this.modifyMessage('remove', index)}
>
<MdCancel />
</button>
) : null}

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

@@ -12,12 +12,38 @@ export default function QuickLinks() {
return (
<>
<Header title={getMessage('modals.main.settings.sections.quicklinks.title')} setting='quicklinksenabled' category='quicklinks' element='.quicklinks-container' zoomSetting='zoomQuicklinks' switch={true}/>
<Header
title={getMessage('modals.main.settings.sections.quicklinks.title')}
setting="quicklinksenabled"
category="quicklinks"
element=".quicklinks-container"
zoomSetting="zoomQuicklinks"
switch={true}
/>
<SettingsItem title="Extra Options" subtitle="subtitle">
<Checkbox name='quicklinksText' text={getMessage('modals.main.settings.sections.quicklinks.text_only')} category='quicklinks' onChange={(value) => setTextOnly(value)}/>
<Checkbox name='quicklinksddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} category='quicklinks' disabled={textOnly}/>
<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' disabled={textOnly}/>
<Checkbox
name="quicklinksText"
text={getMessage('modals.main.settings.sections.quicklinks.text_only')}
category="quicklinks"
onChange={(value) => setTextOnly(value)}
/>
<Checkbox
name="quicklinksddgProxy"
text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')}
category="quicklinks"
disabled={textOnly}
/>
<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"
disabled={textOnly}
/>
</SettingsItem>
</>
);

23
src/components/modals/main/settings/sections/Reminder.jsx
View File

@@ -6,7 +6,7 @@ export default class ReminderSettings extends PureComponent {
constructor() {
super();
this.state = {
colour: localStorage.getItem('reminderColour') || '#ffa500'
colour: localStorage.getItem('reminderColour') || '#ffa500',
};
}
@@ -20,9 +20,24 @@ export default class ReminderSettings extends PureComponent {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<>
<Header title='Reminder' setting='reminder' category='reminder' element='.reminder' zoomSetting='zoomReminder' switch={true}/>
<input type='color' name='colour' className='colour' onChange={(event) => this.updateColour(event)} value={this.state.colour}></input>
<label htmlFor={'colour'} className='customBackgroundHex'>{this.state.colour}</label>
<Header
title="Reminder"
setting="reminder"
category="reminder"
element=".reminder"
zoomSetting="zoomReminder"
switch={true}
/>
<input
type="color"
name="colour"
className="colour"
onChange={(event) => this.updateColour(event)}
value={this.state.colour}
></input>
<label htmlFor={'colour'} className="customBackgroundHex">
{this.state.colour}
</label>
</>
);
}

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

@@ -22,14 +22,14 @@ export default class SearchSettings extends PureComponent {
this.state = {
customEnabled: false,
customDisplay: 'none',
customValue: localStorage.getItem('customSearchEngine') || ''
customValue: localStorage.getItem('customSearchEngine') || '',
};
}
resetSearch() {
localStorage.removeItem('customSearchEngine');
this.setState({
customValue: ''
customValue: '',
});
toast(this.getMessage('toasts.reset'));
@@ -39,7 +39,7 @@ export default class SearchSettings extends PureComponent {
if (localStorage.getItem('searchEngine') === 'custom') {
this.setState({
customDisplay: 'block',
customEnabled: true
customEnabled: true,
});
} else {
localStorage.removeItem('customSearchEngine');
@@ -58,12 +58,12 @@ export default class SearchSettings extends PureComponent {
if (input === 'custom') {
this.setState({
customDisplay: 'block',
customEnabled: true
customEnabled: true,
});
} else {
this.setState({
customDisplay: 'none',
customEnabled: false
customEnabled: false,
});
localStorage.setItem('searchEngine', input);
}
@@ -74,30 +74,78 @@ export default class SearchSettings extends PureComponent {
render() {
return (
<>
<Header title={this.getMessage('modals.main.settings.sections.search.title')} setting='searchBar' category='widgets' switch={true}/>
<Header
title={this.getMessage('modals.main.settings.sections.search.title')}
setting="searchBar"
category="widgets"
switch={true}
/>
<SettingsItem title="Extra Options" subtitle="eeeee">
{/* not supported on firefox */}
{(navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined') ?
<Checkbox name='voiceSearch' text={this.getMessage('modals.main.settings.sections.search.voice_search')} category='search'/>
: null}
<Checkbox name='searchDropdown' text={this.getMessage('modals.main.settings.sections.search.dropdown')} category='search' element='.other'/>
<Checkbox name='searchFocus' text={this.getMessage('modals.main.settings.sections.search.focus')} category='search' element='.other'/>
<ul style={{ display: this.state.customDisplay }}>
<p style={{ marginTop: '0px' }}><span className='link' onClick={() => this.resetSearch()}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
<TextField label={this.getMessage('modals.main.settings.sections.search.custom')} value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })} varient='outlined' InputLabelProps={{ shrink: true }} />
</ul>
<Checkbox name='autocomplete' text={this.getMessage('modals.main.settings.sections.search.autocomplete')} category='search' />
{/* not supported on firefox */}
{navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
<Checkbox
name="voiceSearch"
text={this.getMessage('modals.main.settings.sections.search.voice_search')}
category="search"
/>
) : null}
<Checkbox
name="searchDropdown"
text={this.getMessage('modals.main.settings.sections.search.dropdown')}
category="search"
element=".other"
/>
<Checkbox
name="searchFocus"
text={this.getMessage('modals.main.settings.sections.search.focus')}
category="search"
element=".other"
/>
<ul style={{ display: this.state.customDisplay }}>
<p style={{ marginTop: '0px' }}>
<span className="link" onClick={() => this.resetSearch()}>
{this.getMessage('modals.main.settings.buttons.reset')}
</span>
</p>
<TextField
label={this.getMessage('modals.main.settings.sections.search.custom')}
value={this.state.customValue}
onInput={(e) => this.setState({ customValue: e.target.value })}
varient="outlined"
InputLabelProps={{ shrink: true }}
/>
</ul>
<Checkbox
name="autocomplete"
text={this.getMessage('modals.main.settings.sections.search.autocomplete')}
category="search"
/>
</SettingsItem>
<SettingsItem title={this.getMessage('modals.main.settings.sections.search.search_engine')} subtitle="cheese is gucci tbf">
<Dropdown label={this.getMessage('modals.main.settings.sections.search.search_engine')} name='searchEngine' onChange={(value) => this.setSearchEngine(value)} manual={true}>
{searchEngines.map((engine) => (
<MenuItem key={engine.name} value={engine.settingsName}>{engine.name}</MenuItem>
))}
<MenuItem value='custom'>{this.getMessage('modals.main.settings.sections.search.custom').split(' ')[0]}</MenuItem>
</Dropdown>
<SettingsItem
title={this.getMessage('modals.main.settings.sections.search.search_engine')}
subtitle="cheese is gucci tbf"
>
<Dropdown
label={this.getMessage('modals.main.settings.sections.search.search_engine')}
name="searchEngine"
onChange={(value) => this.setSearchEngine(value)}
manual={true}
>
{searchEngines.map((engine) => (
<MenuItem key={engine.name} value={engine.settingsName}>
{engine.name}
</MenuItem>
))}
<MenuItem value="custom">
{this.getMessage('modals.main.settings.sections.search.custom').split(' ')[0]}
</MenuItem>
</Dropdown>
</SettingsItem>
<SettingsItem title={this.getMessage('modals.main.settings.sections.search.autocomplete_provider')} subtitle="cheese">
<Radio options={autocompleteProviders} name='autocompleteProvider' category='search'/>
<SettingsItem
title={this.getMessage('modals.main.settings.sections.search.autocomplete_provider')}
subtitle="cheese"
>
<Radio options={autocompleteProviders} name="autocompleteProvider" category="search" />
</SettingsItem>
</>
);

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

@@ -8,13 +8,12 @@ import Checkbox from '../Checkbox';
import { TextField } from '@mui/material';
import SettingsItem from '../SettingsItem';
export default class TimeSettings extends PureComponent {
constructor() {
super();
this.state = {
location: localStorage.getItem('location') || '',
windSpeed: (localStorage.getItem('windspeed') !== 'true')
windSpeed: localStorage.getItem('windspeed') !== 'true',
};
}
@@ -29,26 +28,34 @@ export default class TimeSettings extends PureComponent {
changeLocation(e) {
this.setState({
location: e.target.value
location: e.target.value,
});
this.showReminder();
}
getAuto() {
navigator.geolocation.getCurrentPosition(async (position) => {
const data = await (await fetch(`${variables.constants.PROXY_URL}/weather/autolocation?lat=${position.coords.latitude}&lon=${position.coords.longitude}`)).json();
this.setState({
location: data[0].name
});
navigator.geolocation.getCurrentPosition(
async (position) => {
const data = await (
await fetch(
`${variables.constants.PROXY_URL}/weather/autolocation?lat=${position.coords.latitude}&lon=${position.coords.longitude}`,
)
).json();
this.setState({
location: data[0].name,
});
this.showReminder();
}, (error) => {
// firefox requires this 2nd function
console.log(error);
}, {
enableHighAccuracy: true
});
this.showReminder();
},
(error) => {
// firefox requires this 2nd function
console.log(error);
},
{
enableHighAccuracy: true,
},
);
}
render() {
@@ -57,62 +64,151 @@ export default class TimeSettings extends PureComponent {
const tempFormat = [
{
name: getMessage('modals.main.settings.sections.weather.temp_format.celsius') + ' (°C)',
value: 'celsius'
value: 'celsius',
},
{
name: getMessage('modals.main.settings.sections.weather.temp_format.fahrenheit') + ' (°F)',
value: 'fahrenheit'
value: 'fahrenheit',
},
{
name: getMessage('modals.main.settings.sections.weather.temp_format.kelvin') + ' (K)',
value: 'kelvin'
}
value: 'kelvin',
},
];
return (
<>
<Header title={getMessage('modals.main.settings.sections.weather.title')} setting='weatherEnabled' category='widgets' zoomSetting='zoomWeather' zoomCategory='weather' switch={true}/>
<Header
title={getMessage('modals.main.settings.sections.weather.title')}
setting="weatherEnabled"
category="widgets"
zoomSetting="zoomWeather"
zoomCategory="weather"
switch={true}
/>
<SettingsItem title="Widget Type">
<Dropdown label="Type" name="weatherType">
<option value='1'>Basic</option>
<option value='2'>Standard</option>
<option value='3'>Expanded</option>
</Dropdown>
<Dropdown label="Type" name="weatherType">
<option value="1">Basic</option>
<option value="2">Standard</option>
<option value="3">Expanded</option>
</Dropdown>
</SettingsItem>
<SettingsItem title={getMessage('modals.main.settings.sections.weather.location')}>
<TextField label={getMessage('modals.main.settings.sections.weather.location')} value={this.state.location} onChange={(e) => this.changeLocation(e)} placeholder='London' varient='outlined' InputLabelProps={{ shrink: true }} />
<span className='link' onClick={() => this.getAuto()}>{getMessage('modals.main.settings.sections.weather.auto')}</span>
<TextField
label={getMessage('modals.main.settings.sections.weather.location')}
value={this.state.location}
onChange={(e) => this.changeLocation(e)}
placeholder="London"
varient="outlined"
InputLabelProps={{ shrink: true }}
/>
<span className="link" onClick={() => this.getAuto()}>
{getMessage('modals.main.settings.sections.weather.auto')}
</span>
</SettingsItem>
<SettingsItem title={getMessage('modals.main.settings.sections.weather.temp_format.title')}>
<Radio name='tempformat' options={tempFormat} category='weather'/>
<Radio name="tempformat" options={tempFormat} category="weather" />
</SettingsItem>
{ localStorage.getItem('weatherType') > 1 &&
{localStorage.getItem('weatherType') > 1 && (
<SettingsItem title="Active bit" subtitle="idk a better word for it sorry">
<Dropdown label="Type" name="weatherActiveBit" category='weather'>
<option value='weatherdescription'>{getMessage('modals.main.settings.sections.weather.extra_info.show_description')} </option>
<option value='cloudiness'>{getMessage('modals.main.settings.sections.weather.extra_info.cloudiness')}</option>
<option value='humidity'>{getMessage('modals.main.settings.sections.weather.extra_info.humidity')}</option>
<option value='visibility'>{getMessage('modals.main.settings.sections.weather.extra_info.visibility')}</option>
<option value='windspeed' onChange={() => this.setState({ windSpeed: (localStorage.getItem('windspeed') !== 'true') })}>{getMessage('modals.main.settings.sections.weather.extra_info.wind_speed')}</option>
<option value='windDirection' disabled={this.state.windSpeed}>{getMessage('modals.main.settings.sections.weather.extra_info.wind_direction')}</option>
<option value='mintemp'>{getMessage('modals.main.settings.sections.weather.extra_info.min_temp')}</option>
<option value='maxtemp'>{getMessage('modals.main.settings.sections.weather.extra_info.max_temp')}</option>
<option value='feelsliketemp'>Feels like temperature</option>
<option value='atmosphericpressure'>{getMessage('modals.main.settings.sections.weather.extra_info.atmospheric_pressure')}</option>
</Dropdown>
<Dropdown label="Type" name="weatherActiveBit" category="weather">
<option value="weatherdescription">
{getMessage('modals.main.settings.sections.weather.extra_info.show_description')}{' '}
</option>
<option value="cloudiness">
{getMessage('modals.main.settings.sections.weather.extra_info.cloudiness')}
</option>
<option value="humidity">
{getMessage('modals.main.settings.sections.weather.extra_info.humidity')}
</option>
<option value="visibility">
{getMessage('modals.main.settings.sections.weather.extra_info.visibility')}
</option>
<option
value="windspeed"
onChange={() =>
this.setState({
windSpeed: localStorage.getItem('windspeed') !== 'true',
})
}
>
{getMessage('modals.main.settings.sections.weather.extra_info.wind_speed')}
</option>
<option value="windDirection" disabled={this.state.windSpeed}>
{getMessage('modals.main.settings.sections.weather.extra_info.wind_direction')}
</option>
<option value="mintemp">
{getMessage('modals.main.settings.sections.weather.extra_info.min_temp')}
</option>
<option value="maxtemp">
{getMessage('modals.main.settings.sections.weather.extra_info.max_temp')}
</option>
<option value="feelsliketemp">Feels like temperature</option>
<option value="atmosphericpressure">
{getMessage(
'modals.main.settings.sections.weather.extra_info.atmospheric_pressure',
)}
</option>
</Dropdown>
</SettingsItem>
}
<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' onChange={() => this.setState({ windSpeed: (localStorage.getItem('windspeed') !== 'true') })}/>
<Checkbox name='windDirection' text={getMessage('modals.main.settings.sections.weather.extra_info.wind_direction')} category='weather' disabled={this.state.windSpeed}/>
<Checkbox name='mintemp' text={getMessage('modals.main.settings.sections.weather.extra_info.min_temp')} category='weather'/>
<Checkbox name='maxtemp' text={getMessage('modals.main.settings.sections.weather.extra_info.max_temp')} category='weather'/>
<Checkbox name='feelsliketemp' text={'Feels like temperature'} category='weather'/>
<Checkbox name='atmosphericpressure' text={getMessage('modals.main.settings.sections.weather.extra_info.atmospheric_pressure')} category='weather'/>
)}
<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"
onChange={() =>
this.setState({
windSpeed: localStorage.getItem('windspeed') !== 'true',
})
}
/>
<Checkbox
name="windDirection"
text={getMessage('modals.main.settings.sections.weather.extra_info.wind_direction')}
category="weather"
disabled={this.state.windSpeed}
/>
<Checkbox
name="mintemp"
text={getMessage('modals.main.settings.sections.weather.extra_info.min_temp')}
category="weather"
/>
<Checkbox
name="maxtemp"
text={getMessage('modals.main.settings.sections.weather.extra_info.max_temp')}
category="weather"
/>
<Checkbox name="feelsliketemp" text={'Feels like temperature'} category="weather" />
<Checkbox
name="atmosphericpressure"
text={getMessage('modals.main.settings.sections.weather.extra_info.atmospheric_pressure')}
category="weather"
/>
</>
);
}

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

@@ -1,38 +1,37 @@
import variables from "modules/variables";
import { PureComponent } from "react";
import { MenuItem } from "@mui/material";
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { MenuItem } from '@mui/material';
import Header from "../../Header";
import Checkbox from "../../Checkbox";
import Dropdown from "../../Dropdown";
import Slider from "../../Slider";
import Radio from "../../Radio";
import SettingsItem from "../../SettingsItem";
import Header from '../../Header';
import Checkbox from '../../Checkbox';
import Dropdown from '../../Dropdown';
import Slider from '../../Slider';
import Radio from '../../Radio';
import SettingsItem from '../../SettingsItem';
import ColourSettings from "./Colour";
import CustomSettings from "./Custom";
import ColourSettings from './Colour';
import CustomSettings from './Custom';
import { values } from "modules/helpers/settings/modals";
import { values } from 'modules/helpers/settings/modals';
export default class BackgroundSettings extends PureComponent {
getMessage = (text) =>
variables.language.getMessage(variables.languagecode, text);
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
constructor() {
super();
this.state = {
backgroundType: localStorage.getItem("backgroundType") || "api",
backgroundFilter: localStorage.getItem("backgroundFilter") || "none",
backgroundCategories: [this.getMessage("modals.main.loading")],
backgroundAPI: localStorage.getItem("backgroundAPI") || "mue",
marketplaceEnabled: localStorage.getItem("photo_packs"),
backgroundType: localStorage.getItem('backgroundType') || 'api',
backgroundFilter: localStorage.getItem('backgroundFilter') || 'none',
backgroundCategories: [this.getMessage('modals.main.loading')],
backgroundAPI: localStorage.getItem('backgroundAPI') || 'mue',
marketplaceEnabled: localStorage.getItem('photo_packs'),
};
this.controller = new AbortController();
}
async getBackgroundCategories() {
const data = await (
await fetch(variables.constants.API_URL + "/images/categories", {
await fetch(variables.constants.API_URL + '/images/categories', {
signal: this.controller.signal,
})
).json();
@@ -47,12 +46,9 @@ export default class BackgroundSettings extends PureComponent {
}
componentDidMount() {
if (
navigator.onLine === false ||
localStorage.getItem("offlineMode") === "true"
) {
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
return this.setState({
backgroundCategories: [this.getMessage("modals.update.offline.title")],
backgroundCategories: [this.getMessage('modals.update.offline.title')],
});
}
@@ -71,53 +67,41 @@ export default class BackgroundSettings extends PureComponent {
const apiOptions = [
{
name: "Mue",
value: "mue",
name: 'Mue',
value: 'mue',
},
{
name: "Unsplash",
value: "unsplash",
name: 'Unsplash',
value: 'unsplash',
},
{
name: "Pexels",
value: "pexels",
name: 'Pexels',
value: 'pexels',
},
];
const interval = (
<SettingsItem>
<Dropdown
label={getMessage(
"modals.main.settings.sections.background.interval.title"
)}
label={getMessage('modals.main.settings.sections.background.interval.title')}
name="backgroundchange"
>
<option value="refresh">{getMessage("tabname")}</option>
<option value="refresh">{getMessage('tabname')}</option>
<option value="60000">
{getMessage(
"modals.main.settings.sections.background.interval.minute"
)}
{getMessage('modals.main.settings.sections.background.interval.minute')}
</option>
<option value="1800000">
{getMessage(
"modals.main.settings.sections.background.interval.half_hour"
)}
{getMessage('modals.main.settings.sections.background.interval.half_hour')}
</option>
<option value="3600000">
{getMessage(
"modals.main.settings.sections.background.interval.hour"
)}
{getMessage('modals.main.settings.sections.background.interval.hour')}
</option>
<option value="86400000">
{getMessage(
"modals.main.settings.sections.background.interval.day"
)}
{getMessage('modals.main.settings.sections.background.interval.day')}
</option>
<option value="604800000">{getMessage("widgets.date.week")}</option>
<option value="604800000">{getMessage('widgets.date.week')}</option>
<option value="2628000000">
{getMessage(
"modals.main.settings.sections.background.interval.month"
)}
{getMessage('modals.main.settings.sections.background.interval.month')}
</option>
</Dropdown>
</SettingsItem>
@@ -127,37 +111,30 @@ export default class BackgroundSettings extends PureComponent {
<>
<SettingsItem>
<Radio
title={getMessage(
"modals.main.settings.sections.background.source.api"
)}
title={getMessage('modals.main.settings.sections.background.source.api')}
options={apiOptions}
name="backgroundAPI"
category="background"
element="#backgroundImage"
onChange={(e) => this.setState({ backgroundAPI: e })}
/>
{this.state.backgroundCategories[0] ===
getMessage("modals.main.loading") ? (
{this.state.backgroundCategories[0] === getMessage('modals.main.loading') ? (
<>
<Dropdown
label={getMessage(
"modals.main.settings.sections.background.category"
)}
label={getMessage('modals.main.settings.sections.background.category')}
name="apiCategory"
>
<MenuItem value="loading" key="loading">
{getMessage("modals.main.loading")}
{getMessage('modals.main.loading')}
</MenuItem>
<MenuItem value="loading" key="loading">
{getMessage("modals.main.loading")}
{getMessage('modals.main.loading')}
</MenuItem>
</Dropdown>
</>
) : (
<Dropdown
label={getMessage(
"modals.main.settings.sections.background.category"
)}
label={getMessage('modals.main.settings.sections.background.category')}
name="apiCategory"
>
{this.state.backgroundCategories.map((category) => (
@@ -168,31 +145,21 @@ export default class BackgroundSettings extends PureComponent {
</Dropdown>
)}
<Dropdown
label={getMessage(
"modals.main.settings.sections.background.source.quality.title"
)}
label={getMessage('modals.main.settings.sections.background.source.quality.title')}
name="apiQuality"
element=".other"
>
<option value="original">
{getMessage(
"modals.main.settings.sections.background.source.quality.original"
)}
{getMessage('modals.main.settings.sections.background.source.quality.original')}
</option>
<option value="high">
{getMessage(
"modals.main.settings.sections.background.source.quality.high"
)}
{getMessage('modals.main.settings.sections.background.source.quality.high')}
</option>
<option value="normal">
{getMessage(
"modals.main.settings.sections.background.source.quality.normal"
)}
{getMessage('modals.main.settings.sections.background.source.quality.normal')}
</option>
<option value="datasaver">
{getMessage(
"modals.main.settings.sections.background.source.quality.datasaver"
)}
{getMessage('modals.main.settings.sections.background.source.quality.datasaver')}
</option>
</Dropdown>
</SettingsItem>
@@ -201,16 +168,16 @@ export default class BackgroundSettings extends PureComponent {
);
switch (this.state.backgroundType) {
case "custom":
case 'custom':
backgroundSettings = <CustomSettings interval={interval} />;
break;
case "colour":
case 'colour':
backgroundSettings = <ColourSettings />;
break;
case "random_colour":
case 'random_colour':
backgroundSettings = <></>;
break;
case "random_gradient":
case 'random_gradient':
backgroundSettings = <></>;
break;
default:
@@ -219,23 +186,23 @@ export default class BackgroundSettings extends PureComponent {
}
if (
localStorage.getItem("photo_packs") &&
this.state.backgroundType !== "custom" &&
this.state.backgroundType !== "colour" &&
this.state.backgroundType !== "api"
localStorage.getItem('photo_packs') &&
this.state.backgroundType !== 'custom' &&
this.state.backgroundType !== 'colour' &&
this.state.backgroundType !== 'api'
) {
backgroundSettings = null;
}
const usingImage =
this.state.backgroundType !== "colour" &&
this.state.backgroundType !== "random_colour" &&
this.state.backgroundType !== "random_gradient";
this.state.backgroundType !== 'colour' &&
this.state.backgroundType !== 'random_colour' &&
this.state.backgroundType !== 'random_gradient';
return (
<>
<Header
title={getMessage("modals.main.settings.sections.background.title")}
title={getMessage('modals.main.settings.sections.background.title')}
setting="background"
category="background"
element="#backgroundImage"
@@ -243,171 +210,130 @@ export default class BackgroundSettings extends PureComponent {
<SettingsItem title="cheese" subtitle="cheese">
<Checkbox
name="ddgProxy"
text={getMessage(
"modals.main.settings.sections.background.ddg_image_proxy"
)}
text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')}
element=".other"
disabled={!usingImage}
/>
<Checkbox
name="bgtransition"
text={getMessage(
"modals.main.settings.sections.background.transition"
)}
text={getMessage('modals.main.settings.sections.background.transition')}
element=".other"
disabled={!usingImage}
/>
<Checkbox
name="photoInformation"
text={getMessage(
"modals.main.settings.sections.background.photo_information"
)}
text={getMessage('modals.main.settings.sections.background.photo_information')}
element=".other"
disabled={
this.state.backgroundType !== "api" &&
this.state.backgroundType !== "marketplace"
this.state.backgroundType !== 'api' && this.state.backgroundType !== 'marketplace'
}
/>
<Checkbox
name="photoMap"
text={getMessage(
"modals.main.settings.sections.background.show_map"
)}
text={getMessage('modals.main.settings.sections.background.show_map')}
element=".other"
disabled={this.state.backgroundAPI !== "unsplash"}
disabled={this.state.backgroundAPI !== 'unsplash'}
/>
</SettingsItem>
<SettingsItem
title={getMessage(
"modals.main.settings.sections.background.source.title"
)}
title={getMessage('modals.main.settings.sections.background.source.title')}
subtitle="mucho gracias"
>
<Dropdown
label={getMessage(
"modals.main.settings.sections.background.type.title"
)}
label={getMessage('modals.main.settings.sections.background.type.title')}
name="backgroundType"
onChange={(value) => this.setState({ backgroundType: value })}
category="background"
>
{this.state.marketplaceEnabled ? (
<option value="photo_pack">
{this.getMessage("modals.main.navbar.marketplace")}
{this.getMessage('modals.main.navbar.marketplace')}
</option>
) : null}
<option value="api">
{getMessage("modals.main.settings.sections.background.type.api")}
{getMessage('modals.main.settings.sections.background.type.api')}
</option>
<option value="custom">
{getMessage(
"modals.main.settings.sections.background.type.custom_image"
)}
{getMessage('modals.main.settings.sections.background.type.custom_image')}
</option>
<option value="colour">
{getMessage(
"modals.main.settings.sections.background.type.custom_colour"
)}
{getMessage('modals.main.settings.sections.background.type.custom_colour')}
</option>
<option value="random_colour">
{getMessage(
"modals.main.settings.sections.background.type.random_colour"
)}
{getMessage('modals.main.settings.sections.background.type.random_colour')}
</option>
<option value="random_gradient">
{getMessage(
"modals.main.settings.sections.background.type.random_gradient"
)}
{getMessage('modals.main.settings.sections.background.type.random_gradient')}
</option>
</Dropdown>
</SettingsItem>
{backgroundSettings}
{this.state.backgroundType === "api" ||
this.state.backgroundType === "custom" ||
{this.state.backgroundType === 'api' ||
this.state.backgroundType === 'custom' ||
this.state.marketplaceEnabled ? (
<SettingsItem
title={getMessage(
"modals.main.settings.sections.background.effects.title"
)}
title={getMessage('modals.main.settings.sections.background.effects.title')}
subtitle="cheese"
>
<Slider
title={getMessage(
"modals.main.settings.sections.background.effects.blur"
)}
title={getMessage('modals.main.settings.sections.background.effects.blur')}
name="blur"
min="0"
max="100"
default="0"
display="%"
marks={values("background")}
marks={values('background')}
category="background"
element="#backgroundImage"
/>
<Slider
title={getMessage(
"modals.main.settings.sections.background.effects.brightness"
)}
title={getMessage('modals.main.settings.sections.background.effects.brightness')}
name="brightness"
min="0"
max="100"
default="90"
display="%"
marks={values("background")}
marks={values('background')}
category="background"
element="#backgroundImage"
/>
<Dropdown
label={getMessage(
"modals.main.settings.sections.background.effects.filters.title"
)}
label={getMessage('modals.main.settings.sections.background.effects.filters.title')}
name="backgroundFilter"
onChange={(value) => this.setState({ backgroundFilter: value })}
category="background"
element="#backgroundImage"
>
<option value="none">
{getMessage(
"modals.main.settings.sections.appearance.navbar.refresh_options.none"
)}
{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.none')}
</option>
<option value="grayscale">
{getMessage(
"modals.main.settings.sections.background.effects.filters.grayscale"
)}
{getMessage('modals.main.settings.sections.background.effects.filters.grayscale')}
</option>
<option value="sepia">
{getMessage(
"modals.main.settings.sections.background.effects.filters.sepia"
)}
{getMessage('modals.main.settings.sections.background.effects.filters.sepia')}
</option>
<option value="invert">
{getMessage(
"modals.main.settings.sections.background.effects.filters.invert"
)}
{getMessage('modals.main.settings.sections.background.effects.filters.invert')}
</option>
<option value="saturate">
{getMessage(
"modals.main.settings.sections.background.effects.filters.saturate"
)}
{getMessage('modals.main.settings.sections.background.effects.filters.saturate')}
</option>
<option value="contrast">
{getMessage(
"modals.main.settings.sections.background.effects.filters.contrast"
)}
{getMessage('modals.main.settings.sections.background.effects.filters.contrast')}
</option>
</Dropdown>
{this.state.backgroundFilter !== "none" ? (
{this.state.backgroundFilter !== 'none' ? (
<Slider
title={getMessage(
"modals.main.settings.sections.background.effects.filters.amount"
'modals.main.settings.sections.background.effects.filters.amount',
)}
name="backgroundFilterAmount"
min="0"
max="100"
default="0"
display="%"
marks={values("background")}
marks={values('background')}
category="background"
element="#backgroundImage"
/>

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

@@ -1,25 +1,24 @@
import variables from "modules/variables";
import { PureComponent, Fragment } from "react";
import { ColorPicker } from "react-color-gradient-picker";
import { toast } from "react-toastify";
import SettingsItem from "../../SettingsItem";
import variables from 'modules/variables';
import { PureComponent, Fragment } from 'react';
import { ColorPicker } from 'react-color-gradient-picker';
import { toast } from 'react-toastify';
import SettingsItem from '../../SettingsItem';
import hexToRgb from "modules/helpers/background/hexToRgb";
import rgbToHex from "modules/helpers/background/rgbToHex";
import hexToRgb from 'modules/helpers/background/hexToRgb';
import rgbToHex from 'modules/helpers/background/rgbToHex';
import "react-color-gradient-picker/dist/index.css";
import "../../../scss/settings/react-color-picker-gradient-picker-custom-styles.scss";
import 'react-color-gradient-picker/dist/index.css';
import '../../../scss/settings/react-color-picker-gradient-picker-custom-styles.scss';
export default class ColourSettings extends PureComponent {
DefaultGradientSettings = {
angle: "180",
gradient: [{ colour: "#ffb032", stop: 0 }],
type: "linear",
angle: '180',
gradient: [{ colour: '#ffb032', stop: 0 }],
type: 'linear',
};
GradientPickerInitialState = undefined;
getMessage = (text) =>
variables.language.getMessage(variables.languagecode, text);
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
constructor() {
super();
@@ -29,11 +28,11 @@ export default class ColourSettings extends PureComponent {
}
resetColour() {
localStorage.setItem("customBackgroundColour", "");
localStorage.setItem('customBackgroundColour', '');
this.setState({
gradientSettings: this.DefaultGradientSettings,
});
toast(this.getMessage("toasts.reset"));
toast(this.getMessage('toasts.reset'));
}
initialiseColourPickerState(gradientSettings) {
@@ -54,10 +53,10 @@ export default class ColourSettings extends PureComponent {
}
componentDidMount() {
const hex = localStorage.getItem("customBackgroundColour");
const hex = localStorage.getItem('customBackgroundColour');
let gradientSettings = undefined;
if (hex !== "") {
if (hex !== '') {
try {
gradientSettings = JSON.parse(hex);
} catch (e) {
@@ -75,10 +74,7 @@ export default class ColourSettings extends PureComponent {
}
componentDidUpdate() {
localStorage.setItem(
"customBackgroundColour",
this.currentGradientSettings()
);
localStorage.setItem('customBackgroundColour', this.currentGradientSettings());
}
onGradientChange = (event, index) => {
@@ -89,7 +85,7 @@ export default class ColourSettings extends PureComponent {
gradientSettings: {
...s.gradientSettings,
gradient: s.gradientSettings.gradient.map((g, i) =>
i === index ? { ...g, [name]: newValue } : g
i === index ? { ...g, [name]: newValue } : g,
),
},
});
@@ -100,8 +96,7 @@ export default class ColourSettings extends PureComponent {
addColour = () => {
this.setState((s) => {
const [lastGradient, ...initGradients] =
s.gradientSettings.gradient.reverse();
const [lastGradient, ...initGradients] = s.gradientSettings.gradient.reverse();
return {
gradientSettings: {
...s.gradientSettings,
@@ -109,10 +104,7 @@ export default class ColourSettings extends PureComponent {
...initGradients,
lastGradient,
{
colour:
localStorage.getItem("theme") === "dark"
? "#000000"
: "#ffffff",
colour: localStorage.getItem('theme') === 'dark' ? '#000000' : '#ffffff',
stop: 100,
},
].sort((a, b) => (a.stop > b.stop ? 1 : -1)),
@@ -120,25 +112,18 @@ export default class ColourSettings extends PureComponent {
};
});
variables.stats.postEvent(
"setting",
"Changed backgroundType from colour to gradient"
);
variables.stats.postEvent('setting', 'Changed backgroundType from colour to gradient');
};
currentGradientSettings = () => {
if (
typeof this.state.gradientSettings === "object" &&
typeof this.state.gradientSettings === 'object' &&
this.state.gradientSettings.gradient.every(
(g) =>
g.colour !==
this.getMessage(
"modals.main.settings.sections.background.source.disabled"
)
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));
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: [
@@ -148,13 +133,11 @@ export default class ColourSettings extends PureComponent {
].sort((a, b) => (a.stop > b.stop ? 1 : -1)),
});
}
return this.getMessage(
"modals.main.settings.sections.background.source.disabled"
);
return this.getMessage('modals.main.settings.sections.background.source.disabled');
};
onColourPickerChange = (attrs, name) => {
if (process.env.NODE_ENV === "development") {
if (process.env.NODE_ENV === 'development') {
console.log(attrs, name);
}
@@ -163,7 +146,7 @@ export default class ColourSettings extends PureComponent {
angle: attrs.degree,
gradient: attrs.points.map((p) => {
return {
colour: "#" + rgbToHex(p.red, p.green, p.blue),
colour: '#' + rgbToHex(p.red, p.green, p.blue),
stop: p.left,
};
}),
@@ -175,18 +158,17 @@ export default class ColourSettings extends PureComponent {
};
showReminder() {
const reminderInfo = document.querySelector(".reminder-info");
if (reminderInfo.style.display !== "block") {
reminderInfo.style.display = "block";
localStorage.setItem("showReminder", true);
const reminderInfo = document.querySelector('.reminder-info');
if (reminderInfo.style.display !== 'block') {
reminderInfo.style.display = 'block';
localStorage.setItem('showReminder', true);
}
}
render() {
let colourSettings = null;
if (typeof this.state.gradientSettings === "object") {
const gradientHasMoreThanOneColour =
this.state.gradientSettings.gradient.length > 1;
if (typeof this.state.gradientSettings === 'object') {
const gradientHasMoreThanOneColour = this.state.gradientSettings.gradient.length > 1;
let gradientInputs;
if (gradientHasMoreThanOneColour) {
@@ -196,11 +178,9 @@ export default class ColourSettings extends PureComponent {
gradientInputs = (
<ColorPicker
onStartChange={(colour) =>
this.onColourPickerChange(colour, "start")
}
onChange={(colour) => this.onColourPickerChange(colour, "change")}
onEndChange={(colour) => this.onColourPickerChange(colour, "end")}
onStartChange={(colour) => this.onColourPickerChange(colour, 'start')}
onChange={(colour) => this.onColourPickerChange(colour, 'change')}
onEndChange={(colour) => this.onColourPickerChange(colour, 'end')}
gradient={this.GradientPickerInitialState}
isGradient
/>
@@ -210,14 +190,14 @@ export default class ColourSettings extends PureComponent {
return (
<Fragment key={i}>
<input
id={"colour_" + i}
id={'colour_' + i}
type="color"
name="colour"
className="colour"
onChange={(event) => this.onGradientChange(event, i)}
value={g.colour}
></input>
<label htmlFor={"colour_" + i} className="customBackgroundHex">
<label htmlFor={'colour_' + i} className="customBackgroundHex">
{g.colour}
</label>
</Fragment>
@@ -231,9 +211,7 @@ export default class ColourSettings extends PureComponent {
{!gradientHasMoreThanOneColour ? (
<>
<button type="button" className="add" onClick={this.addColour}>
{this.getMessage(
"modals.main.settings.sections.background.source.add_colour"
)}
{this.getMessage('modals.main.settings.sections.background.source.add_colour')}
</button>
</>
) : null}
@@ -244,12 +222,10 @@ export default class ColourSettings extends PureComponent {
return (
<>
<SettingsItem
title={this.getMessage(
"modals.main.settings.sections.background.source.custom_colour"
)}
title={this.getMessage('modals.main.settings.sections.background.source.custom_colour')}
>
<span className="link" onClick={() => this.resetColour()}>
{this.getMessage("modals.main.settings.buttons.reset")}
{this.getMessage('modals.main.settings.buttons.reset')}
</span>
{colourSettings}
</SettingsItem>

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

@@ -1,25 +1,19 @@
import variables from "modules/variables";
import { PureComponent } from "react";
import { toast } from "react-toastify";
import {
MdCancel,
MdAddLink,
MdAddPhotoAlternate,
MdPersonalVideo,
} from "react-icons/md";
import EventBus from "modules/helpers/eventbus";
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { toast } from 'react-toastify';
import { MdCancel, MdAddLink, MdAddPhotoAlternate, MdPersonalVideo } from 'react-icons/md';
import EventBus from 'modules/helpers/eventbus';
import Checkbox from "../../Checkbox";
import FileUpload from "../../FileUpload";
import SettingsItem from "../../SettingsItem";
import Checkbox from '../../Checkbox';
import FileUpload from '../../FileUpload';
import SettingsItem from '../../SettingsItem';
import Modal from "react-modal";
import Modal from 'react-modal';
import CustomURLModal from "./CustomURLModal";
import CustomURLModal from './CustomURLModal';
export default class CustomSettings extends PureComponent {
getMessage = (text) =>
variables.language.getMessage(variables.languagecode, text);
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
constructor() {
super();
@@ -30,12 +24,12 @@ export default class CustomSettings extends PureComponent {
}
resetCustom = () => {
localStorage.setItem("customBackground", "[]");
localStorage.setItem('customBackground', '[]');
this.setState({
customBackground: [],
});
toast(this.getMessage("toasts.reset"));
EventBus.dispatch("refresh", "background");
toast(this.getMessage('toasts.reset'));
EventBus.dispatch('refresh', 'background');
};
customBackground(e, text, index) {
@@ -48,15 +42,15 @@ export default class CustomSettings extends PureComponent {
});
this.forceUpdate();
localStorage.setItem("customBackground", JSON.stringify(customBackground));
document.querySelector(".reminder-info").style.display = "flex";
localStorage.setItem("showReminder", true);
localStorage.setItem('customBackground', JSON.stringify(customBackground));
document.querySelector('.reminder-info').style.display = 'flex';
localStorage.setItem('showReminder', true);
}
modifyCustomBackground(type, index) {
const customBackground = this.state.customBackground;
if (type === "add") {
customBackground.push("");
if (type === 'add') {
customBackground.push('');
} else {
customBackground.splice(index, 1);
}
@@ -66,39 +60,33 @@ export default class CustomSettings extends PureComponent {
});
this.forceUpdate();
localStorage.setItem("customBackground", JSON.stringify(customBackground));
document.querySelector(".reminder-info").style.display = "flex";
localStorage.setItem("showReminder", true);
localStorage.setItem('customBackground', JSON.stringify(customBackground));
document.querySelector('.reminder-info').style.display = 'flex';
localStorage.setItem('showReminder', true);
}
videoCheck(url) {
return (
url.startsWith("data:video/") ||
url.endsWith(".mp4") ||
url.endsWith(".webm") ||
url.endsWith(".ogg")
url.startsWith('data:video/') ||
url.endsWith('.mp4') ||
url.endsWith('.webm') ||
url.endsWith('.ogg')
);
}
videoCustomSettings = () => {
const hasVideo = this.state.customBackground.filter((bg) =>
this.videoCheck(bg)
);
const hasVideo = this.state.customBackground.filter((bg) => this.videoCheck(bg));
if (hasVideo.length > 0) {
return (
<>
<Checkbox
name="backgroundVideoLoop"
text={this.getMessage(
"modals.main.settings.sections.background.source.loop_video"
)}
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"
)}
text={this.getMessage('modals.main.settings.sections.background.source.mute_video')}
/>
</>
);
@@ -110,19 +98,17 @@ export default class CustomSettings extends PureComponent {
getCustom() {
let data;
try {
data = JSON.parse(localStorage.getItem("customBackground"));
data = JSON.parse(localStorage.getItem('customBackground'));
} catch (e) {
data = [localStorage.getItem("customBackground")];
data = [localStorage.getItem('customBackground')];
}
return data;
}
uploadCustomBackground() {
document
.getElementById("bg-input")
.setAttribute("index", this.state.customBackground.length);
document.getElementById("bg-input").click();
document.getElementById('bg-input').setAttribute('index', this.state.customBackground.length);
document.getElementById('bg-input').click();
// to fix loadFunction
this.setState({
currentBackgroundIndex: this.state.customBackground.length,
@@ -134,39 +120,27 @@ export default class CustomSettings extends PureComponent {
customURLModal: false,
currentBackgroundIndex: this.state.customBackground.length,
});
this.customBackground(
{ target: { value: e } },
true,
this.state.customBackground.length
);
this.customBackground({ target: { value: e } }, true, this.state.customBackground.length);
}
render() {
return (
<>
{this.props.interval}
<div className="settingsRow" style={{ alignItems: "flex-start" }}>
<div className="settingsRow" style={{ alignItems: 'flex-start' }}>
<div className="content">
<div className="images-row">
{this.state.customBackground.map((url, index) => (
<div key={index}>
<img
alt={"Custom background " + (index || 0)}
src={`${
!this.videoCheck(url)
? this.state.customBackground[index]
: ""
}`}
alt={'Custom background ' + (index || 0)}
src={`${!this.videoCheck(url) ? this.state.customBackground[index] : ''}`}
/>
{this.videoCheck(url) ? (
<MdPersonalVideo className="customvideoicon" />
) : null}
{this.videoCheck(url) ? <MdPersonalVideo className="customvideoicon" /> : null}
{this.state.customBackground.length > 0 ? (
<button
className="iconButton"
onClick={() =>
this.modifyCustomBackground("remove", index)
}
onClick={() => this.modifyCustomBackground('remove', index)}
>
<MdCancel />
</button>
@@ -183,14 +157,10 @@ export default class CustomSettings extends PureComponent {
<span className="subtitle">
Available formats, jpeg, png, webp, webm, gif, mp4, webm, ogg
</span>
<button onClick={() => this.uploadCustomBackground()}>
Or Select
</button>
<button onClick={() => this.uploadCustomBackground()}>Or Select</button>
</div>
<button onClick={() => this.setState({ customURLModal: true })}>
{this.getMessage(
"modals.main.settings.sections.background.source.add_url"
)}{" "}
{this.getMessage('modals.main.settings.sections.background.source.add_url')}{' '}
<MdAddLink />
</button>
{/*<span className='subtitle'>
@@ -204,9 +174,7 @@ export default class CustomSettings extends PureComponent {
<FileUpload
id="bg-input"
accept="image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg"
loadFunction={(e) =>
this.customBackground(e, false, this.state.currentBackgroundIndex)
}
loadFunction={(e) => this.customBackground(e, false, this.state.currentBackgroundIndex)}
/>
{this.videoCustomSettings()}
<Modal

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

@@ -1,7 +1,7 @@
import variables from "modules/variables";
import { useState } from "react";
import { MdAdd } from "react-icons/md";
import { TextField } from "@mui/material";
import variables from 'modules/variables';
import { useState } from 'react';
import { MdAdd } from 'react-icons/md';
import { TextField } from '@mui/material';
export default function CustomURLModal({ modalClose, modalCloseOnly }) {
const [url, setURL] = useState();
@@ -14,18 +14,14 @@ export default function CustomURLModal({ modalClose, modalCloseOnly }) {
<h1>
{variables.language.getMessage(
variables.languagecode,
"modals.main.settings.sections.background.source.add_url"
'modals.main.settings.sections.background.source.add_url',
)}
</h1>
<TextField
value={url}
onChange={(e) => setURL(e.target.value)}
varient="outlined"
/>
<TextField value={url} onChange={(e) => setURL(e.target.value)} varient="outlined" />
<div className="resetFooter">
<button
className="round import"
style={{ marginLeft: "5px" }}
style={{ marginLeft: '5px' }}
onClick={() => modalClose(url)}
>
<MdAdd />

14
src/components/modals/main/tabs/Addons.jsx
View File

@@ -9,10 +9,16 @@ export default function Addons(props) {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<Tabs changeTab={(type) => props.changeTab(type)} current='addons'>
<div label={getMessage('modals.main.addons.added')} name='added'><Added/></div>
<div label={getMessage('modals.main.addons.sideload.title')} name='sideload'><Sideload/></div>
<div label={getMessage('modals.main.addons.create.title')} name='create'><Create/></div>
<Tabs changeTab={(type) => props.changeTab(type)} current="addons">
<div label={getMessage('modals.main.addons.added')} name="added">
<Added />
</div>
<div label={getMessage('modals.main.addons.sideload.title')} name="sideload">
<Sideload />
</div>
<div label={getMessage('modals.main.addons.create.title')} name="create">
<Create />
</div>
</Tabs>
);
}

18
src/components/modals/main/tabs/Marketplace.jsx
View File

@@ -7,11 +7,19 @@ export default function Marketplace(props) {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<Tabs changeTab={(type) => props.changeTab(type)} current='marketplace'>
<div label='All' name='all'><MarketplaceTab type='all'/></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 changeTab={(type) => props.changeTab(type)} current="marketplace">
<div label="All" name="all">
<MarketplaceTab type="all" />
</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>
);
}

90
src/components/modals/main/tabs/Settings.jsx
View File

@@ -26,28 +26,72 @@ export default function Settings(props) {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<Tabs changeTab={(type) => props.changeTab(type)} current='settings'>
<div label={getMessage('modals.main.settings.sections.appearance.navbar.title')} name='navbar'><Navbar/></div>
<div label={getMessage('modals.main.settings.sections.greeting.title')} name='greeting'><Greeting/></div>
<div label={getMessage('modals.main.settings.sections.time.title')} name='time'><Time/></div>
<div label={getMessage('modals.main.settings.sections.quicklinks.title')} name='quicklinks'><QuickLinks/></div>
<div label={getMessage('modals.main.settings.sections.quote.title')} name='quote'><Quote/></div>
<div label={getMessage('modals.main.settings.sections.date.title')} name='date'><Date/></div>
<div label='Reminder' name='reminder'><Reminder/></div>
<div label={getMessage('modals.main.settings.sections.message.title')} name='message'><Message/></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.weather.title')} name='weather'><Weather/></div>
<div label={getMessage('modals.main.settings.sections.order.title')} name='order'><Order/></div>
<div label={getMessage('modals.main.settings.sections.appearance.title')} name='appearance'><Appearance/></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.title')} name='changelog'><Changelog/></div>
<div label={getMessage('modals.main.settings.sections.about.title')} name='about'><About/></div>
</Tabs>
<Tabs changeTab={(type) => props.changeTab(type)} current="settings">
<div
label={getMessage('modals.main.settings.sections.appearance.navbar.title')}
name="navbar"
>
<Navbar />
</div>
<div label={getMessage('modals.main.settings.sections.greeting.title')} name="greeting">
<Greeting />
</div>
<div label={getMessage('modals.main.settings.sections.time.title')} name="time">
<Time />
</div>
<div label={getMessage('modals.main.settings.sections.quicklinks.title')} name="quicklinks">
<QuickLinks />
</div>
<div label={getMessage('modals.main.settings.sections.quote.title')} name="quote">
<Quote />
</div>
<div label={getMessage('modals.main.settings.sections.date.title')} name="date">
<Date />
</div>
<div label="Reminder" name="reminder">
<Reminder />
</div>
<div label={getMessage('modals.main.settings.sections.message.title')} name="message">
<Message />
</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.weather.title')} name="weather">
<Weather />
</div>
<div label={getMessage('modals.main.settings.sections.order.title')} name="order">
<Order />
</div>
<div label={getMessage('modals.main.settings.sections.appearance.title')} name="appearance">
<Appearance />
</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.title')} name="changelog">
<Changelog />
</div>
<div label={getMessage('modals.main.settings.sections.about.title')} name="about">
<About />
</div>
</Tabs>
);
}

131
src/components/modals/main/tabs/backend/Tab.jsx
View File

@@ -26,7 +26,7 @@ import {
MdEvent as Reminder,
MdCode as Sideload,
MdAddCircleOutline as Added,
MdAddCircleOutline as Create
MdAddCircleOutline as Create,
} from 'react-icons/md';
function Tab({ label, currentTab, onClick, navbarTab }) {
@@ -46,56 +46,119 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
let icon, divider;
switch (label) {
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('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('modals.main.settings.sections.appearance.navbar.title'): icon = <Navbar/>; break;
case getMessage('modals.main.settings.sections.greeting.title'): icon = <Greeting/>; break;
case getMessage('modals.main.settings.sections.time.title'): icon = <Time/>; break;
case getMessage('modals.main.settings.sections.quicklinks.title'): icon = <QuickLinks/>; break;
case getMessage('modals.main.settings.sections.quote.title'): icon = <Quote/>; break;
case getMessage('modals.main.settings.sections.date.title'): icon = <Date/>; break;
case getMessage('modals.main.settings.sections.message.title'): icon = <Message/>; break;
case getMessage('modals.main.settings.sections.background.title'): icon = <Background/>; break;
case getMessage('modals.main.settings.sections.search.title'): icon = <MdSearch/>; break;
case getMessage('modals.main.settings.sections.weather.title'): icon = <Weather/>; divider = true; break;
case getMessage('modals.main.settings.sections.order.title'): icon = <Order/>; break;
case 'Reminder': icon = <Reminder/>; break;
case getMessage('modals.main.settings.sections.appearance.navbar.title'):
icon = <Navbar />;
break;
case getMessage('modals.main.settings.sections.greeting.title'):
icon = <Greeting />;
break;
case getMessage('modals.main.settings.sections.time.title'):
icon = <Time />;
break;
case getMessage('modals.main.settings.sections.quicklinks.title'):
icon = <QuickLinks />;
break;
case getMessage('modals.main.settings.sections.quote.title'):
icon = <Quote />;
break;
case getMessage('modals.main.settings.sections.date.title'):
icon = <Date />;
break;
case getMessage('modals.main.settings.sections.message.title'):
icon = <Message />;
break;
case getMessage('modals.main.settings.sections.background.title'):
icon = <Background />;
break;
case getMessage('modals.main.settings.sections.search.title'):
icon = <MdSearch />;
break;
case getMessage('modals.main.settings.sections.weather.title'):
icon = <Weather />;
divider = true;
break;
case getMessage('modals.main.settings.sections.order.title'):
icon = <Order />;
break;
case 'Reminder':
icon = <Reminder />;
break;
case getMessage('modals.main.settings.sections.appearance.title'): icon = <Appearance/>; 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.appearance.title'):
icon = <Appearance />;
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.title'): icon = <Changelog/>; break;
case getMessage('modals.main.settings.sections.about.title'): icon = <About/>; 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.title'):
icon = <Changelog />;
break;
case getMessage('modals.main.settings.sections.about.title'):
icon = <About />;
break;
case getMessage('modals.main.addons.added'): icon = <Added/>; break;
case getMessage('modals.main.addons.sideload.title'): icon = <Sideload/>; break;
case getMessage('modals.main.addons.create.title'): icon = <Create/>; break;
case getMessage('modals.main.addons.added'):
icon = <Added />;
break;
case getMessage('modals.main.addons.sideload.title'):
icon = <Sideload />;
break;
case getMessage('modals.main.addons.create.title'):
icon = <Create />;
break;
case 'All': icon = <Addons/>; divider = true; 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;
case 'All':
icon = <Addons />;
divider = true;
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;
default:
break;
}
if (label === getMessage('modals.main.settings.sections.experimental.title')) {
if (localStorage.getItem('experimental') === 'false') {
return <hr/>;
return <hr />;
}
}
return (
<>
<button className={className} onClick={() => onClick(label)}>
{icon} <span>{label}</span>
{icon} <span>{label}</span>
</button>
{(divider === true) ? <hr/> : null}
{divider === true ? <hr /> : null}
</>
);
}

58
src/components/modals/main/tabs/backend/Tabs.jsx
View File

@@ -1,12 +1,8 @@
import variables from "modules/variables";
import { PureComponent } from "react";
import {
MdSettings,
MdOutlineShoppingBasket,
MdOutlineExtension,
} from "react-icons/md";
import Tab from "./Tab";
import ErrorBoundary from "../../../ErrorBoundary";
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { MdSettings, MdOutlineShoppingBasket, MdOutlineExtension } from 'react-icons/md';
import Tab from './Tab';
import ErrorBoundary from '../../../ErrorBoundary';
export default class Tabs extends PureComponent {
constructor(props) {
@@ -20,7 +16,7 @@ export default class Tabs extends PureComponent {
onClick = (tab, name) => {
if (name !== this.state.currentName) {
variables.stats.postEvent("tab", `Opened ${name}`);
variables.stats.postEvent('tab', `Opened ${name}`);
}
this.setState({
@@ -31,48 +27,48 @@ export default class Tabs extends PureComponent {
render() {
const reminderInfo = (
<div className="reminder-info" style={{ display: "none" }}>
<div className="reminder-info" style={{ display: 'none' }}>
<span className="title">
{variables.language.getMessage(
variables.languagecode,
"modals.main.settings.reminder.title"
'modals.main.settings.reminder.title',
)}
</span>
<span className="subtitle">
{variables.language.getMessage(
variables.languagecode,
"modals.main.settings.reminder.message"
'modals.main.settings.reminder.message',
)}
</span>
<button onClick={() => window.location.reload()}>
{variables.language.getMessage(
variables.languagecode,
"modals.main.error_boundary.refresh"
'modals.main.error_boundary.refresh',
)}
</button>
</div>
);
let settingsActive = "";
let addonsActive = "";
let marketplaceActive = "";
let settingsActive = '';
let addonsActive = '';
let marketplaceActive = '';
switch (this.props.current) {
case "settings":
settingsActive = " navbar-item-active";
case 'settings':
settingsActive = ' navbar-item-active';
break;
case "addons":
addonsActive = " navbar-item-active";
case 'addons':
addonsActive = ' navbar-item-active';
break;
case "marketplace":
marketplaceActive = " navbar-item-active";
case 'marketplace':
marketplaceActive = ' navbar-item-active';
break;
default:
break;
}
return (
<div style={{ display: "flex", width: "100%" }}>
<div style={{ display: 'flex', width: '100%' }}>
<ul className="sidebar">
{reminderInfo}
{this.props.children.map((tab, index) => (
@@ -85,26 +81,26 @@ export default class Tabs extends PureComponent {
/>
))}
</ul>
<div className="tab-content" style={{ width: "100%" }}>
<div className="tab-content" style={{ width: '100%' }}>
<ErrorBoundary>
<div className="modalNavbar">
<button
className={"navbar-item" + settingsActive}
onClick={() => this.props.changeTab("settings")}
className={'navbar-item' + settingsActive}
onClick={() => this.props.changeTab('settings')}
>
<MdSettings />
<span>Settings</span>
</button>
<button
className={"navbar-item" + addonsActive}
onClick={() => this.props.changeTab("addons")}
className={'navbar-item' + addonsActive}
onClick={() => this.props.changeTab('addons')}
>
<MdOutlineExtension />
<span>Add-ons</span>
</button>
<button
className={"navbar-item" + marketplaceActive}
onClick={() => this.props.changeTab("marketplace")}
className={'navbar-item' + marketplaceActive}
onClick={() => this.props.changeTab('marketplace')}
>
<MdOutlineShoppingBasket />
<span>Marketplace</span>

209
src/components/modals/welcome/WelcomeSections.jsx
View File

@@ -1,33 +1,27 @@
import variables from "modules/variables";
import { PureComponent } from "react";
import {
MdCloudUpload,
MdAutoAwesome,
MdLightMode,
MdDarkMode,
} from "react-icons/md";
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { MdCloudUpload, MdAutoAwesome, MdLightMode, MdDarkMode } from 'react-icons/md';
import Radio from "../main/settings/Radio";
import Checkbox from "../main/settings/Checkbox";
import FileUpload from "../main/settings/FileUpload";
import Radio from '../main/settings/Radio';
import Checkbox from '../main/settings/Checkbox';
import FileUpload from '../main/settings/FileUpload';
import { loadSettings } from "modules/helpers/settings";
import { importSettings } from "modules/helpers/settings/modals";
import { loadSettings } from 'modules/helpers/settings';
import { importSettings } from 'modules/helpers/settings/modals';
const languages = require("modules/languages.json");
const default_settings = require("modules/default_settings.json");
const languages = require('modules/languages.json');
const default_settings = require('modules/default_settings.json');
export default class WelcomeSections extends PureComponent {
getMessage = (text) =>
variables.language.getMessage(variables.languagecode, text);
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
constructor() {
super();
this.state = {
// themes
autoClass: "toggle auto active",
lightClass: "toggle lightTheme",
darkClass: "toggle darkTheme",
autoClass: 'toggle auto active',
lightClass: 'toggle lightTheme',
darkClass: 'toggle darkTheme',
// welcome
welcomeImage: 0,
// final
@@ -39,22 +33,17 @@ export default class WelcomeSections extends PureComponent {
changeTheme(type) {
this.setState({
autoClass: type === "auto" ? "toggle auto active" : "toggle auto",
lightClass:
type === "light" ? "toggle lightTheme active" : "toggle lightTheme",
darkClass:
type === "dark" ? "toggle darkTheme active" : "toggle darkTheme",
autoClass: type === 'auto' ? 'toggle auto active' : 'toggle auto',
lightClass: type === 'light' ? 'toggle lightTheme active' : 'toggle lightTheme',
darkClass: type === 'dark' ? 'toggle darkTheme active' : 'toggle darkTheme',
});
localStorage.setItem("theme", type);
localStorage.setItem('theme', type);
loadSettings(true);
}
getSetting(name) {
const value = localStorage
.getItem(name)
.replace("false", "Off")
.replace("true", "On");
const value = localStorage.getItem(name).replace('false', 'Off').replace('true', 'On');
return value.charAt(0).toUpperCase() + value.slice(1);
}
@@ -66,11 +55,11 @@ export default class WelcomeSections extends PureComponent {
Object.keys(data).forEach((setting) => {
// language and theme already shown, the others are only used internally
if (
setting === "language" ||
setting === "theme" ||
setting === "firstRun" ||
setting === "showWelcome" ||
setting === "showReminder"
setting === 'language' ||
setting === 'theme' ||
setting === 'firstRun' ||
setting === 'showWelcome' ||
setting === 'showReminder'
) {
return;
}
@@ -131,10 +120,8 @@ export default class WelcomeSections extends PureComponent {
render() {
const intro = (
<>
<span className="mainTitle">
{this.getMessage("modals.welcome.sections.intro.title")}
</span>
<p>{this.getMessage("modals.welcome.sections.intro.description")}</p>
<span className="mainTitle">{this.getMessage('modals.welcome.sections.intro.title')}</span>
<p>{this.getMessage('modals.welcome.sections.intro.description')}</p>
<h3 className="quicktip">#shareyourmue</h3>
<div className="examples">
<img
@@ -149,10 +136,10 @@ export default class WelcomeSections extends PureComponent {
const chooseLanguage = (
<>
<span className="mainTitle">
{this.getMessage("modals.welcome.sections.language.title")}
{this.getMessage('modals.welcome.sections.language.title')}
</span>
<p>
{this.getMessage("modals.welcome.sections.language.description")}{" "}
{this.getMessage('modals.welcome.sections.language.description')}{' '}
<a
href={variables.constants.TRANSLATIONS_URL}
className="resetLink"
@@ -169,48 +156,25 @@ export default class WelcomeSections extends PureComponent {
const theme = (
<>
<span className="mainTitle">
{this.getMessage("modals.welcome.sections.theme.title")}
</span>
<p>{this.getMessage("modals.welcome.sections.theme.description")}</p>
<span className="mainTitle">{this.getMessage('modals.welcome.sections.theme.title')}</span>
<p>{this.getMessage('modals.welcome.sections.theme.description')}</p>
<div className="themesToggleArea">
<div
className={this.state.autoClass}
onClick={() => this.changeTheme("auto")}
>
<div className={this.state.autoClass} onClick={() => this.changeTheme('auto')}>
<MdAutoAwesome />
<span>
{this.getMessage(
"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")}
>
<div className={this.state.lightClass} onClick={() => this.changeTheme('light')}>
<MdLightMode />
<span>
{this.getMessage(
"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")}
>
<div className={this.state.darkClass} onClick={() => this.changeTheme('dark')}>
<MdDarkMode />
<span>
{this.getMessage(
"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("modals.welcome.tip")}</h3>
<p>{this.getMessage("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>
</>
);
@@ -218,16 +182,13 @@ export default class WelcomeSections extends PureComponent {
const settings = (
<>
<span className="mainTitle">
{this.getMessage("modals.welcome.sections.settings.title")}
{this.getMessage('modals.welcome.sections.settings.title')}
</span>
<p>{this.getMessage("modals.welcome.sections.settings.description")}</p>
<button
className="upload"
onClick={() => document.getElementById("file-input").click()}
>
<p>{this.getMessage('modals.welcome.sections.settings.description')}</p>
<button className="upload" onClick={() => document.getElementById('file-input').click()}>
<MdCloudUpload />
<br />
<span>{this.getMessage("modals.main.settings.buttons.import")}</span>
<span>{this.getMessage('modals.main.settings.buttons.import')}</span>
</button>
<FileUpload
id="file-input"
@@ -235,58 +196,44 @@ export default class WelcomeSections extends PureComponent {
type="settings"
loadFunction={(e) => this.importSettings(e)}
/>
<h3 className="quicktip">{this.getMessage("modals.welcome.tip")}</h3>
<p>{this.getMessage("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 = (
<>
<span className="mainTitle">
{this.getMessage("modals.welcome.sections.privacy.title")}
{this.getMessage('modals.welcome.sections.privacy.title')}
</span>
<p>{this.getMessage("modals.welcome.sections.privacy.description")}</p>
<p>{this.getMessage('modals.welcome.sections.privacy.description')}</p>
<Checkbox
name="offlineMode"
text={this.getMessage(
"modals.main.settings.sections.advanced.offline_mode"
)}
text={this.getMessage('modals.main.settings.sections.advanced.offline_mode')}
element=".other"
/>
<p>
{this.getMessage(
"modals.welcome.sections.privacy.offline_mode_description"
)}
</p>
<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") +
")"
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") +
")"
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>
<p>{this.getMessage('modals.welcome.sections.privacy.ddg_proxy_description')}</p>
<h3 className="quicktip">
{this.getMessage("modals.welcome.sections.privacy.links.title")}
{this.getMessage('modals.welcome.sections.privacy.links.title')}
</h3>
<a
className="privacy"
@@ -294,59 +241,45 @@ export default class WelcomeSections extends PureComponent {
target="_blank"
rel="noopener noreferrer"
>
{this.getMessage(
"modals.welcome.sections.privacy.links.privacy_policy"
)}
{this.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}
</a>
<br />
<br />
<a
className="privacy"
href={"https://github.com/" + variables.constants.ORG_NAME}
href={'https://github.com/' + variables.constants.ORG_NAME}
target="_blank"
rel="noopener noreferrer"
>
{this.getMessage("modals.welcome.sections.privacy.links.source_code")}
{this.getMessage('modals.welcome.sections.privacy.links.source_code')}
</a>
</>
);
const final = (
<>
<span className="mainTitle">
{this.getMessage("modals.welcome.sections.final.title")}
</span>
<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>
<span className="mainTitle">{this.getMessage('modals.welcome.sections.final.title')}</span>
<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("modals.main.settings.sections.language.title")}:{" "}
{
languages.find(
(i) => i.value === localStorage.getItem("language")
).name
}
{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")}
{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.getMessage('modals.main.settings.sections.final.imported', {
amount: this.state.importedSettings.length,
})}{" "}
})}{' '}
{this.state.importedSettings.length}
</div>
) : null}