mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-03 05:03:19 +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

32
src/components/helpers/autocomplete/Autocomplete.jsx
View File

@@ -12,20 +12,22 @@ export default class Autocomplete extends PureComponent {
this.state = {
filtered: [],
input: '',
autocompleteDisabled: (localStorage.getItem('autocomplete') !== 'true')
autocompleteDisabled: localStorage.getItem('autocomplete') !== 'true',
};
}
onChange = (e) => {
if (this.state.autocompleteDisabled) {
return this.setState({
input: e.target.value
input: e.target.value,
});
}
this.setState({
filtered: this.props.suggestions.filter((suggestion) => suggestion.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1),
input: e.target.value
filtered: this.props.suggestions.filter(
(suggestion) => suggestion.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1,
),
input: e.target.value,
});
this.props.onChange(e.target.value);
@@ -34,14 +36,14 @@ export default class Autocomplete extends PureComponent {
onClick = (e) => {
this.setState({
filtered: [],
input: e.target.innerText
input: e.target.innerText,
});
this.props.onClick({
preventDefault: () => e.preventDefault(),
target: {
value: e.target.innerText
}
value: e.target.innerText,
},
});
};
@@ -49,7 +51,7 @@ export default class Autocomplete extends PureComponent {
EventBus.on('refresh', (data) => {
if (data === 'search') {
this.setState({
autocompleteDisabled: (localStorage.getItem('autocomplete') !== 'true')
autocompleteDisabled: localStorage.getItem('autocomplete') !== 'true',
});
}
});
@@ -65,7 +67,7 @@ export default class Autocomplete extends PureComponent {
// length will only be > 0 if enabled
if (this.state.filtered.length > 0 && this.state.input.length > 0) {
autocomplete = (
<div className='suggestions'>
<div className="suggestions">
{this.state.filtered.map((suggestion) => (
<div key={suggestion} onClick={this.onClick}>
{suggestion}
@@ -76,8 +78,16 @@ export default class Autocomplete extends PureComponent {
}
return (
<div style={{display: 'flex', flexFlow: 'column'}}>
<input type='text' onChange={this.onChange} value={this.state.input} placeholder={this.props.placeholder || ''} autoComplete='off' spellCheck={false} id={this.props.id || ''} />
<div style={{ display: 'flex', flexFlow: 'column' }}>
<input
type="text"
onChange={this.onChange}
value={this.state.input}
placeholder={this.props.placeholder || ''}
autoComplete="off"
spellCheck={false}
id={this.props.id || ''}
/>
{autocomplete}
</div>
);

6
src/components/helpers/preview/Preview.jsx
View File

@@ -6,9 +6,9 @@ export default function Preview(props) {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<div className='preview-mode'>
<span className='title'>{getMessage('modals.main.settings.reminder.title')}</span>
<span className='subtitle'>{getMessage('modals.welcome.preview.description')}</span>
<div className="preview-mode">
<span className="title">{getMessage('modals.main.settings.reminder.title')}</span>
<span className="subtitle">{getMessage('modals.welcome.preview.description')}</span>
<button onClick={() => props.setup()}>{getMessage('modals.welcome.preview.continue')}</button>
</div>
);

91
src/components/helpers/sharemodal/sharemodal.scss
View File

@@ -1,59 +1,58 @@
@import '../../../scss/variables';
.shareModal {
@extend %tabText;
@extend %tabText;
display: flex;
flex-flow: column;
gap: 15px;
padding: 15px;
@include themed() {
background: t($modal-background);
}
.buttons {
justify-content: space-between;
display: flex;
flex-flow: column;
gap: 15px;
padding: 15px;
}
button {
place-items: center;
display: grid;
@include basicIconButton(11px, 1.3rem, modal);
}
.copy {
display: flex;
flex-flow: row;
gap: 15px;
}
input[type='text'] {
@include themed() {
background: t($modal-background);
background: t($modal-sidebar);
border-radius: t($borderRadius);
box-shadow: 0 0 0 4px t($modal-sidebarActive);
padding: 11px;
flex: 1;
color: t($color);
}
.buttons {
justify-content: space-between;
display: flex;
gap: 15px;
}
button {
place-items: center;
display: grid;
@include basicIconButton(11px, 1.3rem, modal);
}
.copy {
display: flex;
flex-flow: row;
gap: 15px;
}
input[type='text'] {
border: none;
outline: none;
}
.close {
padding: 15px;
place-items: center;
display: grid;
cursor: pointer;
&:hover {
@include themed() {
background: t($modal-sidebar);
border-radius: t($borderRadius);
box-shadow: 0 0 0 4px t($modal-sidebarActive);
padding: 11px;
flex: 1;
color: t($color);
}
border: none;
outline: none;
}
.close {
padding: 15px;
place-items: center;
display: grid;
cursor: pointer;
&:hover {
@include themed() {
background: t($modal-sidebar);
border-radius: t($borderRadius);
}
}
}
}
.shareHeader {
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: center;
}
}
.shareHeader {
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: center;
}

12
src/components/helpers/tooltip/Tooltip.jsx
View File

@@ -1,11 +1,11 @@
import { useState } from "react";
import { useFloating, flip, offset, shift } from "@floating-ui/react-dom";
import "./tooltip.scss";
import { useState } from 'react';
import { useFloating, flip, offset, shift } from '@floating-ui/react-dom';
import './tooltip.scss';
export default function Tooltip({ children, title, style, placement }) {
const [showTooltip, setShowTooltip] = useState(false);
const { x, y, reference, floating, strategy } = useFloating({
placement: placement || "bottom",
placement: placement || 'bottom',
middleware: [flip(), offset(15), shift()],
});
@@ -25,8 +25,8 @@ export default function Tooltip({ children, title, style, placement }) {
ref={floating}
style={{
position: strategy,
top: y ?? "",
left: x ?? "",
top: y ?? '',
left: x ?? '',
}}
className="tooltipTitle"
>

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}

73
src/components/widgets/Widgets.jsx
View File

@@ -1,67 +1,64 @@
import { PureComponent, Fragment, Suspense, lazy } from "react";
import { PureComponent, Fragment, Suspense, lazy } from 'react';
import Clock from "./time/Clock";
import Greeting from "./greeting/Greeting";
import Quote from "./quote/Quote";
import Search from "./search/Search";
import QuickLinks from "./quicklinks/QuickLinks";
import Date from "./time/Date";
import Message from "./message/Message";
import Reminder from "./reminder/Reminder";
import Clock from './time/Clock';
import Greeting from './greeting/Greeting';
import Quote from './quote/Quote';
import Search from './search/Search';
import QuickLinks from './quicklinks/QuickLinks';
import Date from './time/Date';
import Message from './message/Message';
import Reminder from './reminder/Reminder';
import EventBus from "modules/helpers/eventbus";
import EventBus from 'modules/helpers/eventbus';
const Weather = lazy(() => import("./weather/Weather"));
const Weather = lazy(() => import('./weather/Weather'));
const renderLoader = () => <></>;
export default class Widgets extends PureComponent {
online = localStorage.getItem("offlineMode") === "false";
online = localStorage.getItem('offlineMode') === 'false';
constructor() {
super();
this.state = {
order: JSON.parse(localStorage.getItem("order")),
welcome: localStorage.getItem("showWelcome"),
order: JSON.parse(localStorage.getItem('order')),
welcome: localStorage.getItem('showWelcome'),
};
// widgets we can re-order
this.widgets = {
time: this.enabled("time") ? <Clock /> : null,
greeting: this.enabled("greeting") ? <Greeting /> : null,
quote: this.enabled("quote") ? <Quote /> : null,
date: this.enabled("date") ? <Date /> : null,
quicklinks:
this.enabled("quicklinksenabled") && this.online ? (
<QuickLinks />
) : null,
message: this.enabled("message") ? <Message /> : null,
reminder: this.enabled("reminder") ? <Reminder /> : null,
time: this.enabled('time') ? <Clock /> : null,
greeting: this.enabled('greeting') ? <Greeting /> : null,
quote: this.enabled('quote') ? <Quote /> : null,
date: this.enabled('date') ? <Date /> : null,
quicklinks: this.enabled('quicklinksenabled') && this.online ? <QuickLinks /> : null,
message: this.enabled('message') ? <Message /> : null,
reminder: this.enabled('reminder') ? <Reminder /> : null,
};
}
enabled(key) {
return localStorage.getItem(key) === "true";
return localStorage.getItem(key) === 'true';
}
componentDidMount() {
EventBus.on("refresh", (data) => {
if (data === "widgets") {
EventBus.on('refresh', (data) => {
if (data === 'widgets') {
this.setState({
order: JSON.parse(localStorage.getItem("order")),
order: JSON.parse(localStorage.getItem('order')),
});
}
if (data === "widgetsWelcome") {
if (data === 'widgetsWelcome') {
this.setState({
welcome: localStorage.getItem("showWelcome"),
welcome: localStorage.getItem('showWelcome'),
});
localStorage.setItem("showWelcome", true);
localStorage.setItem('showWelcome', true);
window.onbeforeunload = () => {
localStorage.clear();
};
}
if (data === "widgetsWelcomeDone") {
if (data === 'widgetsWelcomeDone') {
this.setState({
welcome: localStorage.getItem("showWelcome"),
welcome: localStorage.getItem('showWelcome'),
});
window.onbeforeunload = null;
}
@@ -70,7 +67,7 @@ export default class Widgets extends PureComponent {
render() {
// don't show when welcome is there
if (this.state.welcome !== "false") {
if (this.state.welcome !== 'false') {
return <div id="widgets"></div>;
}
@@ -79,9 +76,7 @@ export default class Widgets extends PureComponent {
if (this.state.order) {
this.state.order.forEach((element) => {
elements.push(
<Fragment key={element}>{this.widgets[element]}</Fragment>
);
elements.push(<Fragment key={element}>{this.widgets[element]}</Fragment>);
});
} else {
// prevent error
@@ -99,9 +94,9 @@ export default class Widgets extends PureComponent {
return (
<div id="widgets">
<Suspense fallback={renderLoader()}>
{this.enabled("searchBar") ? <Search /> : null}
{this.enabled('searchBar') ? <Search /> : null}
{elements}
{this.enabled("weatherEnabled") && this.online ? <Weather /> : null}
{this.enabled('weatherEnabled') && this.online ? <Weather /> : null}
</Suspense>
</div>
);

14
src/components/widgets/background/scss/_photoinformation.scss
View File

@@ -50,6 +50,7 @@
}
}
.photoInformation-content {
padding: 20px;
padding-left: 0;
}
.map-concept {
@@ -183,13 +184,14 @@
font-size: 0.8em;
font-weight: 300;
z-index: 99;
padding: 20px;
display: flex;
flex-flow: row;
align-items: center;
transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
width: 380px;
width: 300px;
padding: 10px;
&:hover {
padding: 20px;
height: auto;
align-items: flex-start;
flex-flow: column;
@@ -240,15 +242,15 @@
}
.map-concept {
@extend %basic;
height: 80px;
width: 80px;
height: 50px;
width: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
border: none !important;
svg {
font-size: 25px;
font-size: 24px;
}
img {
width: 100%;
@@ -281,7 +283,7 @@
.photoInformation-content {
display: flex;
flex-flow: column;
padding: 20px;
padding-left: 20px;
a {
color: #5352ed;
text-decoration: none;

18
src/components/widgets/navbar/Navbar.jsx
View File

@@ -89,14 +89,16 @@ export default class Navbar extends PureComponent {
linkText={'Learn more'}
>
</InfoTooltip>*/}
<Tooltip
title={variables.language.getMessage(
variables.languagecode,
'modals.main.navbar.settings',
)}
><button onClick={() => this.props.openModal('mainModal')}>
<MdSettings className="settings-icon topicons" />
</button></Tooltip>
<Tooltip
title={variables.language.getMessage(
variables.languagecode,
'modals.main.navbar.settings',
)}
>
<button onClick={() => this.props.openModal('mainModal')}>
<MdSettings className="settings-icon topicons" />
</button>
</Tooltip>
</div>
{/*<div className="notification">
<span className="title">New Update</span>

1
src/components/widgets/navbar/scss/_notes.scss
View File

@@ -57,7 +57,6 @@
}
}
.flexNotes {
display: flex;
flex-flow: column;

1
src/components/widgets/navbar/scss/_todo.scss
View File

@@ -61,4 +61,3 @@
cursor: not-allowed;
}
}

1
src/components/widgets/quicklinks/quicklinks.scss
View File

@@ -30,7 +30,6 @@
border-radius: 12px;
}
::placeholder {
color: #636e72;
opacity: 1;

70
src/components/widgets/quote/Quote.jsx
View File

@@ -63,7 +63,7 @@ export default class Quote extends PureComponent {
copy: localStorage.getItem('copyButton') === 'false' ? null : this.buttons.copy,
quoteLanguage: '',
type: localStorage.getItem('quoteType') || 'api',
shareModal: false
shareModal: false,
};
this.quote = createRef();
this.quotediv = createRef();
@@ -398,7 +398,7 @@ export default class Quote extends PureComponent {
<span className="quote" ref={this.quote}>
{this.state.quote}
</span>
{localStorage.getItem('widgetStyle') === 'legacy' ? (
{(localStorage.getItem('widgetStyle') === 'legacy') ? (
<>
<div>
<h1 className="quoteauthor" ref={this.quoteauthor}>
@@ -417,38 +417,42 @@ export default class Quote extends PureComponent {
</div>
</>
) : (
<div className="author-holder">
<div className="author">
<div
className="author-img"
style={{ backgroundImage: `url(${this.state.authorimg})` }}
>
{this.state.authorimg === undefined || this.state.authorimg ? '' : <MdPerson />}
<>
{this.state.author !== '' ? (
<div className="author-holder">
<div className="author">
<div
className="author-img"
style={{ backgroundImage: `url(${this.state.authorimg})` }}
>
{this.state.authorimg === undefined || this.state.authorimg ? '' : <MdPerson />}
</div>
<div className="author-content" ref={this.quoteauthor}>
<span className="title">{this.state.author}</span>
{this.state.authorOccupation !== 'Unknown' ? (
<span className="subtitle">{this.state.authorOccupation}</span>
) : null}
<span className="author-license">{this.state.authorimglicense}</span>
</div>
<div className="quote-buttons">
{this.state.authorOccupation !== 'Unknown' ? (
<Tooltip title="Open">
<a
href={this.state.authorlink}
className="quoteAuthorLink"
target="_blank"
rel="noopener noreferrer"
>
<MdOpenInNew />
</a>{' '}
</Tooltip>
) : null}
{this.state.copy} {this.state.share} {this.state.favourited}
</div>
</div>
</div>
<div className="author-content" ref={this.quoteauthor}>
<span className="title">{this.state.author}</span>
{this.state.authorOccupation !== 'Unknown' ? (
<span className="subtitle">{this.state.authorOccupation}</span>
) : null}
<span className="author-license">{this.state.authorimglicense}</span>
</div>
<div className="quote-buttons">
{this.state.authorOccupation !== 'Unknown' ? (
<Tooltip title="Open">
<a
href={this.state.authorlink}
className="quoteAuthorLink"
target="_blank"
rel="noopener noreferrer"
>
<MdOpenInNew />
</a>{' '}
</Tooltip>
) : null}
{this.state.copy} {this.state.share} {this.state.favourited}
</div>
</div>
</div>
) : <div ref={this.quoteauthor}></div> }
</>
)}
{/*variables.keybinds.favouriteQuote && variables.keybinds.favouriteQuote !== '' ? <Hotkeys keyName={variables.keybinds.favouriteQuote} onKeyDown={() => this.favourite()} /> : null*/}
{/*variables.keybinds.tweetQuote && variables.keybinds.tweetQuote !== '' ? <Hotkeys keyName={variables.keybinds.tweetQuote} onKeyDown={() => this.tweetQuote()} /> : null*/}

11
src/components/widgets/quote/quote.scss
View File

@@ -93,6 +93,16 @@ h1.quoteauthor {
align-items: center;
justify-content: center;
flex-flow: column;
animation: fadeIn 1s;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.quote-buttons {
@@ -110,6 +120,7 @@ h1.quoteauthor {
}
.quotediv {
animation: fadeIn 1s;
width: 40vw;
display: flex;
flex-direction: column;

41
src/components/widgets/reminder/Reminder.jsx
View File

@@ -5,21 +5,26 @@ import './reminder.scss';
import { MdClose, MdSnooze, MdWork } from 'react-icons/md';
export default class Reminder extends React.PureComponent {
render() {
return (
<div className='reminder'>
<div className='identifier' style={{ backgroundColor: localStorage.getItem('reminderColour') || 'orange' }}>
<MdWork />
</div>
<div className='content'>
<span className='title'>Reminder</span>
<span className='subtitle'>Time</span>
</div>
<div className='icons'>
<MdClose />
<MdSnooze />
</div>
</div>
)
}
}
render() {
return (
<div className="reminder">
<div
className="identifier"
style={{
backgroundColor: localStorage.getItem('reminderColour') || 'orange',
}}
>
<MdWork />
</div>
<div className="content">
<span className="title">Reminder</span>
<span className="subtitle">Time</span>
</div>
<div className="icons">
<MdClose />
<MdSnooze />
</div>
</div>
);
}
}

1
src/components/widgets/search/autocomplete_providers.json
View File

@@ -14,4 +14,3 @@
"query": "&query="
}
]

106
src/components/widgets/time/Clock.jsx
View File

@@ -1,11 +1,11 @@
import { PureComponent, Suspense, lazy } from "react";
import { PureComponent, Suspense, lazy } from 'react';
import { convertTimezone } from "modules/helpers/date";
import EventBus from "modules/helpers/eventbus";
import { convertTimezone } from 'modules/helpers/date';
import EventBus from 'modules/helpers/eventbus';
import "./clock.scss";
import './clock.scss';
const Analog = lazy(() => import("react-clock"));
const Analog = lazy(() => import('react-clock'));
const renderLoader = () => <></>;
export default class Clock extends PureComponent {
@@ -14,34 +14,34 @@ export default class Clock extends PureComponent {
this.timer = undefined;
this.state = {
time: "",
ampm: "",
time: '',
ampm: '',
};
}
startTime(
time = localStorage.getItem("seconds") === "true" ||
localStorage.getItem("timeType") === "analogue"
time = localStorage.getItem('seconds') === 'true' ||
localStorage.getItem('timeType') === 'analogue'
? 1000 - (Date.now() % 1000)
: 60000 - (Date.now() % 60000)
: 60000 - (Date.now() % 60000),
) {
this.timer = setTimeout(() => {
let now = new Date();
const timezone = localStorage.getItem("timezone");
if (timezone && timezone !== "auto") {
const timezone = localStorage.getItem('timezone');
if (timezone && timezone !== 'auto') {
now = convertTimezone(now, timezone);
}
switch (localStorage.getItem("timeType")) {
case "percentageComplete":
switch (localStorage.getItem('timeType')) {
case 'percentageComplete':
this.setState({
time: (now.getHours() / 24).toFixed(2).replace("0.", "") + "%",
ampm: "",
time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%',
ampm: '',
});
break;
case "analogue":
case 'analogue':
// load analog clock css
require("react-clock/dist/Clock.css");
require('react-clock/dist/Clock.css');
this.setState({
time: now,
@@ -50,27 +50,25 @@ export default class Clock extends PureComponent {
default:
// Default clock
let time,
sec = "";
const zero = localStorage.getItem("zero");
sec = '';
const zero = localStorage.getItem('zero');
if (localStorage.getItem("seconds") === "true") {
sec = `:${("00" + now.getSeconds()).slice(-2)}`;
if (localStorage.getItem('seconds') === 'true') {
sec = `:${('00' + now.getSeconds()).slice(-2)}`;
}
if (localStorage.getItem("timeformat") === "twentyfourhour") {
if (zero === "false") {
time = `${now.getHours()}:${("00" + now.getMinutes()).slice(
-2
)}${sec}`;
if (localStorage.getItem('timeformat') === 'twentyfourhour') {
if (zero === 'false') {
time = `${now.getHours()}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
} else {
time = `${("00" + now.getHours()).slice(-2)}:${(
"00" + now.getMinutes()
).slice(-2)}${sec}`;
time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(
-2,
)}${sec}`;
}
this.setState({
time,
ampm: "",
ampm: '',
});
} else {
// 12 hour
@@ -82,17 +80,15 @@ export default class Clock extends PureComponent {
hours = 12;
}
if (zero === "false") {
time = `${hours}:${("00" + now.getMinutes()).slice(-2)}${sec}`;
if (zero === 'false') {
time = `${hours}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
} else {
time = `${("00" + hours).slice(-2)}:${(
"00" + now.getMinutes()
).slice(-2)}${sec}`;
time = `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
}
this.setState({
time,
ampm: now.getHours() > 11 ? "PM" : "AM",
ampm: now.getHours() > 11 ? 'PM' : 'AM',
});
}
break;
@@ -103,27 +99,27 @@ export default class Clock extends PureComponent {
}
componentDidMount() {
EventBus.on("refresh", (data) => {
if (data === "clock" || data === "timezone") {
const element = document.querySelector(".clock-container");
EventBus.on('refresh', (data) => {
if (data === 'clock' || data === 'timezone') {
const element = document.querySelector('.clock-container');
if (localStorage.getItem("time") === "false") {
return (element.style.display = "none");
if (localStorage.getItem('time') === 'false') {
return (element.style.display = 'none');
}
this.timer = null;
this.startTime(0);
element.style.display = "block";
element.style.display = 'block';
element.style.fontSize = `${
4 * Number((localStorage.getItem("zoomClock") || 100) / 100)
4 * Number((localStorage.getItem('zoomClock') || 100) / 100)
}em`;
}
});
if (localStorage.getItem("timeType") !== "analogue") {
document.querySelector(".clock-container").style.fontSize = `${
4 * Number((localStorage.getItem("zoomClock") || 100) / 100)
if (localStorage.getItem('timeType') !== 'analogue') {
document.querySelector('.clock-container').style.fontSize = `${
4 * Number((localStorage.getItem('zoomClock') || 100) / 100)
}em`;
}
@@ -131,7 +127,7 @@ export default class Clock extends PureComponent {
}
componentWillUnmount() {
EventBus.off("refresh");
EventBus.off('refresh');
}
render() {
@@ -143,21 +139,21 @@ export default class Clock extends PureComponent {
);
const enabled = (setting) => {
return localStorage.getItem(setting) === "true";
return localStorage.getItem(setting) === 'true';
};
if (localStorage.getItem("timeType") === "analogue") {
if (localStorage.getItem('timeType') === 'analogue') {
clockHTML = (
<Suspense fallback={renderLoader()}>
<div className="clockBackground">
<Analog
className="analogclock clock-container"
value={this.state.time}
renderMinuteMarks={enabled("minuteMarks")}
renderHourMarks={enabled("hourMarks")}
renderSecondHand={enabled("secondHand")}
renderMinuteHand={enabled("minuteHand")}
renderHourHand={enabled("hourHand")}
renderMinuteMarks={enabled('minuteMarks')}
renderHourMarks={enabled('hourMarks')}
renderSecondHand={enabled('secondHand')}
renderMinuteHand={enabled('minuteHand')}
renderHourHand={enabled('hourHand')}
/>
</div>
</Suspense>

91
src/components/widgets/time/Date.jsx
View File

@@ -1,16 +1,16 @@
import variables from "modules/variables";
import { PureComponent, createRef } from "react";
import variables from 'modules/variables';
import { PureComponent, createRef } from 'react';
import { nth, convertTimezone } from "modules/helpers/date";
import EventBus from "modules/helpers/eventbus";
import { nth, convertTimezone } from 'modules/helpers/date';
import EventBus from 'modules/helpers/eventbus';
import "./date.scss";
import './date.scss';
export default class DateWidget extends PureComponent {
constructor() {
super();
this.state = {
date: "",
date: '',
weekNumber: null,
};
this.date = createRef();
@@ -29,21 +29,20 @@ export default class DateWidget extends PureComponent {
}
this.setState({
weekNumber: `${variables.language.getMessage(
variables.languagecode,
"widgets.date.week"
)} ${1 + Math.ceil((firstThursday - dateToday) / 604800000)}`,
weekNumber: `${variables.language.getMessage(variables.languagecode, 'widgets.date.week')} ${
1 + Math.ceil((firstThursday - dateToday) / 604800000)
}`,
});
}
getDate() {
let date = new Date();
const timezone = localStorage.getItem("timezone");
if (timezone && timezone !== "auto") {
const timezone = localStorage.getItem('timezone');
if (timezone && timezone !== 'auto') {
date = convertTimezone(date, timezone);
}
if (localStorage.getItem("weeknumber") === "true") {
if (localStorage.getItem('weeknumber') === 'true') {
this.getWeekNumber(date);
} else if (this.state.weekNumber !== null) {
this.setState({
@@ -51,23 +50,23 @@ export default class DateWidget extends PureComponent {
});
}
if (localStorage.getItem("dateType") === "short") {
if (localStorage.getItem('dateType') === 'short') {
const dateDay = date.getDate();
const dateMonth = date.getMonth() + 1;
const dateYear = date.getFullYear();
const zero = localStorage.getItem("datezero") === "true";
const zero = localStorage.getItem('datezero') === 'true';
let day = zero ? ("00" + dateDay).slice(-2) : dateDay;
let month = zero ? ("00" + dateMonth).slice(-2) : dateMonth;
let day = zero ? ('00' + dateDay).slice(-2) : dateDay;
let month = zero ? ('00' + dateMonth).slice(-2) : dateMonth;
let year = dateYear;
switch (localStorage.getItem("dateFormat")) {
case "MDY":
switch (localStorage.getItem('dateFormat')) {
case 'MDY':
day = dateMonth;
month = dateDay;
break;
case "YMD":
case 'YMD':
day = dateYear;
year = dateDay;
break;
@@ -77,17 +76,17 @@ export default class DateWidget extends PureComponent {
}
let format;
switch (localStorage.getItem("shortFormat")) {
case "dots":
switch (localStorage.getItem('shortFormat')) {
case 'dots':
format = `${day}.${month}.${year}`;
break;
case "dash":
case 'dash':
format = `${day}-${month}-${year}`;
break;
case "gaps":
case 'gaps':
format = `${day} - ${month} - ${year}`;
break;
case "slashes":
case 'slashes':
format = `${day}/${month}/${year}`;
break;
default:
@@ -99,31 +98,29 @@ export default class DateWidget extends PureComponent {
});
} else {
// Long date
const lang = variables.languagecode.split("_")[0];
const lang = variables.languagecode.split('_')[0];
const datenth =
localStorage.getItem("datenth") === "true"
? nth(date.getDate())
: date.getDate();
localStorage.getItem('datenth') === 'true' ? nth(date.getDate()) : date.getDate();
const dateDay =
localStorage.getItem("dayofweek") === "true"
? date.toLocaleDateString(lang, { weekday: "long" })
: "";
const dateMonth = date.toLocaleDateString(lang, { month: "long" });
localStorage.getItem('dayofweek') === 'true'
? date.toLocaleDateString(lang, { weekday: 'long' })
: '';
const dateMonth = date.toLocaleDateString(lang, { month: 'long' });
const dateYear = date.getFullYear();
let day = dateDay + " " + datenth;
let day = dateDay + ' ' + datenth;
let month = dateMonth;
let year = dateYear;
switch (localStorage.getItem("longFormat")) {
case "MDY":
switch (localStorage.getItem('longFormat')) {
case 'MDY':
day = dateMonth;
month = dateDay + " " + datenth;;
month = dateDay + ' ' + datenth;
break;
case "YMD":
case 'YMD':
day = dateYear;
year = dateDay + " " + datenth;;
year = dateDay + ' ' + datenth;
break;
// DMY
default:
@@ -137,28 +134,28 @@ export default class DateWidget extends PureComponent {
}
componentDidMount() {
EventBus.on("refresh", (data) => {
if (data === "date" || data === "timezone") {
if (localStorage.getItem("date") === "false") {
return (this.date.current.style.display = "none");
EventBus.on('refresh', (data) => {
if (data === 'date' || data === 'timezone') {
if (localStorage.getItem('date') === 'false') {
return (this.date.current.style.display = 'none');
}
this.date.current.style.display = "block";
this.date.current.style.display = 'block';
this.date.current.style.fontSize = `${Number(
(localStorage.getItem("zoomDate") || 100) / 100
(localStorage.getItem('zoomDate') || 100) / 100,
)}em`;
this.getDate();
}
});
this.date.current.style.fontSize = `${Number(
(localStorage.getItem("zoomDate") || 100) / 100
(localStorage.getItem('zoomDate') || 100) / 100,
)}em`;
this.getDate();
}
componentWillUnmount() {
EventBus.off("refresh");
EventBus.off('refresh');
}
render() {

138
src/components/widgets/weather/Weather.jsx
View File

@@ -1,43 +1,41 @@
import variables from "modules/variables";
import { PureComponent } from "react";
import { WiHumidity, WiWindy, WiBarometer, WiCloud } from "react-icons/wi";
import { MdDisabledVisible } from "react-icons/md";
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'react-icons/wi';
import { MdDisabledVisible } from 'react-icons/md';
import WeatherIcon from "./WeatherIcon";
import WindDirectionIcon from "./WindDirectionIcon";
import WeatherIcon from './WeatherIcon';
import WindDirectionIcon from './WindDirectionIcon';
import EventBus from "modules/helpers/eventbus";
import EventBus from 'modules/helpers/eventbus';
import "./weather.scss";
import './weather.scss';
export default class Weather extends PureComponent {
constructor() {
super();
this.state = {
location: localStorage.getItem("location") || "London",
icon: "",
temp_text: "",
location: localStorage.getItem('location') || 'London',
icon: '',
temp_text: '',
weather: {
temp: "",
description: "",
temp_min: "",
temp_max: "",
temp_feels_like: "",
humidity: "",
wind_speed: "",
wind_degrees: "",
cloudiness: "",
visibility: "",
pressure: "",
temp: '',
description: '',
temp_min: '',
temp_max: '',
temp_feels_like: '',
humidity: '',
wind_speed: '',
wind_degrees: '',
cloudiness: '',
visibility: '',
pressure: '',
},
};
}
async getWeather() {
const zoomWeather = `${Number(
(localStorage.getItem("zoomWeather") || 100) / 100
)}em`;
document.querySelector(".weather").style.fontSize = zoomWeather;
const zoomWeather = `${Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
document.querySelector('.weather').style.fontSize = zoomWeather;
let data = {
weather: [
@@ -68,16 +66,16 @@ export default class Weather extends PureComponent {
data = await (
await fetch(
variables.constants.PROXY_URL +
`/weather/current?city=${this.state.location}&lang=${variables.languagecode}`
`/weather/current?city=${this.state.location}&lang=${variables.languagecode}`,
)
).json();
}
if (data.cod === "404") {
if (data.cod === '404') {
return this.setState({
location: variables.language.getMessage(
variables.languagecode,
"widgets.weather.not_found"
'widgets.weather.not_found',
),
});
}
@@ -86,22 +84,22 @@ export default class Weather extends PureComponent {
let temp_min = data.main.temp_min;
let temp_max = data.main.temp_max;
let temp_feels_like = data.main.temp_feels_like;
let temp_text = "K";
let temp_text = 'K';
switch (localStorage.getItem("tempformat")) {
case "celsius":
switch (localStorage.getItem('tempformat')) {
case 'celsius':
temp -= 273.15;
temp_min -= 273.15;
temp_max -= 273.15;
temp_feels_like -= 273.15;
temp_text = "°C";
temp_text = '°C';
break;
case "fahrenheit":
case 'fahrenheit':
temp = (temp - 273.15) * 1.8 + 32;
temp_min = (temp_min - 273.15) * 1.8 + 32;
temp_max = (temp_max - 273.15) * 1.8 + 32;
temp_feels_like = (temp_feels_like - 273.15) * 1.8 + 32;
temp_text = "°F";
temp_text = '°F';
break;
// kelvin
default:
@@ -130,12 +128,12 @@ export default class Weather extends PureComponent {
},
});
document.querySelector(".weather svg").style.fontSize = zoomWeather;
document.querySelector('.weather svg').style.fontSize = zoomWeather;
}
componentDidMount() {
EventBus.on("refresh", (data) => {
if (data === "weather") {
EventBus.on('refresh', (data) => {
if (data === 'weather') {
this.getWeather();
}
});
@@ -144,17 +142,17 @@ export default class Weather extends PureComponent {
}
componentWillUnmount() {
EventBus.off("refresh");
EventBus.off('refresh');
}
render() {
const enabled = (setting) => {
return localStorage.getItem(setting) === "true";
return localStorage.getItem(setting) === 'true';
};
if (
this.state.location ===
variables.language.getMessage(variables.languagecode, "weather.not_found")
variables.language.getMessage(variables.languagecode, 'weather.not_found')
) {
return (
<div className="weather">
@@ -164,33 +162,24 @@ export default class Weather extends PureComponent {
}
const minmax = () => {
const mintemp = enabled("mintemp");
const maxtemp = enabled("maxtemp");
const mintemp = enabled('mintemp');
const maxtemp = enabled('maxtemp');
if (!mintemp && !maxtemp) {
return null;
} else if (mintemp && !maxtemp) {
return (
<span className="subtitle">
{this.state.weather.temp_min + this.state.temp_text}
</span>
<span className="subtitle">{this.state.weather.temp_min + this.state.temp_text}</span>
);
} else if (maxtemp && !mintemp) {
return (
<span className="subtitle">
{this.state.weather.temp_max + this.state.temp_text}
</span>
<span className="subtitle">{this.state.weather.temp_max + this.state.temp_text}</span>
);
} else {
return (
<>
<span className="subtitle">
{this.state.weather.temp_min + this.state.temp_text}
</span>{" "}
<span className="subtitle">
{" "}
{this.state.weather.temp_max + this.state.temp_text}
</span>
<span className="subtitle">{this.state.weather.temp_min + this.state.temp_text}</span>{' '}
<span className="subtitle"> {this.state.weather.temp_max + this.state.temp_text}</span>
</>
);
}
@@ -208,15 +197,10 @@ export default class Weather extends PureComponent {
</div>
<div className="extra-info">
{/*{enabled('humidity') ? <span><WiHumidity/>{this.state.weather.humidity}%</span> : null}*/}
{enabled("feelsliketemp") ? (
<span>
Feels like{" "}
{this.state.weather.temp_feels_like + this.state.temp_text}
</span>
) : null}
{enabled("showlocation") ? (
<span className="loc">{this.state.location}</span>
{enabled('feelsliketemp') ? (
<span>Feels like {this.state.weather.temp_feels_like + this.state.temp_text}</span>
) : null}
{enabled('showlocation') ? <span className="loc">{this.state.location}</span> : null}
</div>
<div className="expanded-info">
<span className="subtitle">Upcoming Forecast</span>
@@ -238,18 +222,18 @@ export default class Weather extends PureComponent {
</div>
</div>
<span className="subtitle">Extra Information</span>
{enabled("cloudiness") ? (
{enabled('cloudiness') ? (
<span>
<WiCloud className="weatherIcon" />
{this.state.weather.cloudiness}%
</span>
) : null}
{enabled("windspeed") ? (
{enabled('windspeed') ? (
<span>
<WiWindy className="weatherIcon" />
{this.state.weather.wind_speed}
<span className="minmax"> m/s</span>{" "}
{enabled("windDirection") ? (
<span className="minmax"> m/s</span>{' '}
{enabled('windDirection') ? (
<div className="weatherIcon">
<WindDirectionIcon
className="weatherIcon"
@@ -259,14 +243,14 @@ export default class Weather extends PureComponent {
) : null}
</span>
) : null}
{enabled("atmosphericpressure") ? (
{enabled('atmosphericpressure') ? (
<span>
<WiBarometer className="weatherIcon" />
{this.state.weather.pressure}
<span className="minmax"> hPa</span>
</span>
) : null}
{enabled("weatherdescription") ? (
{enabled('weatherdescription') ? (
<span>
<div className="weatherIcon">
<WeatherIcon name={this.state.icon} />
@@ -274,16 +258,12 @@ export default class Weather extends PureComponent {
{this.state.weather.description}
</span>
) : null}
{enabled("visibility") ? (
{enabled('visibility') ? (
<span>
<MdDisabledVisible style={{ padding: "3px" }} />
{variables.language.getMessage(
variables.languagecode,
"widgets.weather.meters",
{
amount: this.state.weather.visibility,
}
)}
<MdDisabledVisible style={{ padding: '3px' }} />
{variables.language.getMessage(variables.languagecode, 'widgets.weather.meters', {
amount: this.state.weather.visibility,
})}
</span>
) : null}
</div>

38
src/components/widgets/weather/WeatherIcon.jsx
View File

@@ -11,53 +11,53 @@ import {
WiThunderstorm,
WiSnow,
WiFog,
} from "react-icons/wi";
} from 'react-icons/wi';
export default function WeatherIcon({ name }) {
let icon;
// name is the openweathermap icon name, see https://openweathermap.org/weather-conditions
switch (name) {
case "01d":
case '01d':
icon = <WiDaySunny />;
break;
case "01n":
case '01n':
icon = <WiNightClear />;
break;
case "02d":
case '02d':
icon = <WiDayCloudy />;
break;
case "02n":
case '02n':
icon = <WiNightCloudy />;
break;
case "03d":
case "03n":
case '03d':
case '03n':
icon = <WiCloud />;
break;
case "04d":
case "04n":
case '04d':
case '04n':
icon = <WiCloudy />;
break;
case "09d":
case '09d':
icon = <WiDayShowers />;
break;
case "09n":
case '09n':
icon = <WiNightShowers />;
break;
case "10d":
case "10n":
case '10d':
case '10n':
icon = <WiRain />;
break;
case "11d":
case "11n":
case '11d':
case '11n':
icon = <WiThunderstorm />;
break;
case "13d":
case "13n":
case '13d':
case '13n':
icon = <WiSnow />;
break;
case "50d":
case "50n":
case '50d':
case '50n':
icon = <WiFog />;
break;
default:

38
src/components/widgets/weather/WindDirectionIcon.jsx
View File

@@ -7,7 +7,7 @@ import {
WiDirectionUpLeft,
WiDirectionUpRight,
WiDirectionUp,
} from "react-icons/wi";
} from 'react-icons/wi';
// degrees are imported because of a potential bug, IDK what causes it, but now it is fixed
export default function WindDirectionIcon({ degrees }) {
@@ -15,43 +15,41 @@ export default function WindDirectionIcon({ degrees }) {
// convert the number OpenWeatherMap gives us to the closest direction or something
const directions = [
"North",
"North-West",
"West",
"South-West",
"South",
"South-East",
"East",
"North-East",
'North',
'North-West',
'West',
'South-West',
'South',
'South-East',
'East',
'North-East',
];
const direction =
directions[
Math.round(((degrees %= 360) < 0 ? degrees + 360 : degrees) / 45) % 8
];
directions[Math.round(((degrees %= 360) < 0 ? degrees + 360 : degrees) / 45) % 8];
switch (direction) {
case "North":
case 'North':
icon = <WiDirectionUp />;
break;
case "North-West":
case 'North-West':
icon = <WiDirectionUpLeft />;
break;
case "West":
case 'West':
icon = <WiDirectionLeft />;
break;
case "South-West":
case 'South-West':
icon = <WiDirectionDownLeft />;
break;
case "South":
case 'South':
icon = <WiDirectionDown />;
break;
case "South-East":
case 'South-East':
icon = <WiDirectionDownRight />;
break;
case "East":
case 'East':
icon = <WiDirectionRight />;
break;
case "North-East":
case 'North-East':
icon = <WiDirectionUpRight />;
break;
default: