From 51d0715f0f4b89230ea9d8ec3f2ff6a5a7edf38d Mon Sep 17 00:00:00 2001 From: David Ralph Date: Wed, 21 Apr 2021 19:35:33 +0100 Subject: [PATCH] fix: some bug fixes --- src/components/modals/Modals.jsx | 3 ++- src/components/modals/main/Main.jsx | 1 + src/components/modals/main/marketplace/Item.jsx | 2 +- .../modals/main/marketplace/sections/Added.jsx | 2 +- .../main/marketplace/sections/Marketplace.jsx | 2 +- src/components/modals/main/scss/index.scss | 1 - .../modals/main/settings/FileUpload.jsx | 4 +++- src/components/modals/main/settings/Slider.jsx | 2 +- src/components/modals/main/settings/Text.jsx | 2 +- .../modals/main/settings/sections/About.jsx | 2 +- .../modals/main/settings/sections/Advanced.jsx | 4 ++-- .../modals/main/settings/sections/Changelog.jsx | 2 +- .../modals/main/settings/sections/Order.jsx | 2 +- .../settings/sections/background/Background.jsx | 14 ++++++-------- src/components/widgets/background/Background.jsx | 1 + src/components/widgets/background/Favourite.jsx | 3 ++- src/components/widgets/background/Maximise.jsx | 5 +++-- .../background/scss/_photoinformation.scss | 3 ++- src/modules/helpers/eventbus.js | 4 +++- src/modules/helpers/marketplace.js | 16 ++++++++++------ src/modules/helpers/settings.js | 11 ++++++----- src/scss/index.scss | 1 - 22 files changed, 49 insertions(+), 38 deletions(-) diff --git a/src/components/modals/Modals.jsx b/src/components/modals/Modals.jsx index 0c106036..d5ae60e8 100644 --- a/src/components/modals/Modals.jsx +++ b/src/components/modals/Modals.jsx @@ -5,7 +5,8 @@ import Navbar from '../widgets/navbar/Navbar'; import Modal from 'react-modal'; -// Modals are lazy loaded as the user won't use them every time they open a tab +// These modals are lazy loaded as the user won't use them every time they open a tab +// We used to lazy load the main modal, but doing so broke the main modal open animation on first click const Welcome = React.lazy(() => import('./welcome/Welcome')); const Feedback = React.lazy(() => import('./feedback/Feedback')); const renderLoader = () => <>; diff --git a/src/components/modals/main/Main.jsx b/src/components/modals/main/Main.jsx index f326ef30..7f5aab18 100644 --- a/src/components/modals/main/Main.jsx +++ b/src/components/modals/main/Main.jsx @@ -4,6 +4,7 @@ import Tabs from './tabs/backend/Tabs'; import './scss/index.scss'; +// Lazy load all the tabs instead of the modal itself const Settings = React.lazy(() => import('./tabs/Settings')); const Addons = React.lazy(() => import('./tabs/Addons')); const Marketplace = React.lazy(() => import('./tabs/Marketplace')); diff --git a/src/components/modals/main/marketplace/Item.jsx b/src/components/modals/main/marketplace/Item.jsx index 21eea538..d45267f2 100644 --- a/src/components/modals/main/marketplace/Item.jsx +++ b/src/components/modals/main/marketplace/Item.jsx @@ -39,7 +39,7 @@ export default function Item(props) { product

{language.overview}

-

+

    {/*
  • {language.last_updated}
    • diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx index 4d180963..f28b8071 100644 --- a/src/components/modals/main/marketplace/sections/Added.jsx +++ b/src/components/modals/main/marketplace/sections/Added.jsx @@ -66,7 +66,7 @@ export default class Added extends React.PureComponent { } uninstall() { - MarketplaceFunctions.uninstall(this.state.item.display_name, this.state.item.type); + MarketplaceFunctions.uninstall(this.state.item.type, this.state.item.display_name); toast(window.language.toasts.uninstalled); diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx index f36213bb..46c90a6b 100644 --- a/src/components/modals/main/marketplace/sections/Marketplace.jsx +++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx @@ -110,7 +110,7 @@ export default class Marketplace extends React.PureComponent { if (type === 'install') { MarketplaceFunctions.install(this.state.item.type, this.state.item.data); } else { - MarketplaceFunctions.uninstall(this.state.item.display_name, this.state.item.type); + MarketplaceFunctions.uninstall(this.state.item.type, this.state.item.display_name); } toast(window.language.toasts[type + 'ed']); diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss index 768e128f..e8cb2ce8 100644 --- a/src/components/modals/main/scss/index.scss +++ b/src/components/modals/main/scss/index.scss @@ -1,5 +1,4 @@ @import '../../../../scss/variables'; -@import '../../../../scss/mixins'; @import 'settings/main'; @import 'settings/buttons'; diff --git a/src/components/modals/main/settings/FileUpload.jsx b/src/components/modals/main/settings/FileUpload.jsx index 340345a7..600e3b4d 100644 --- a/src/components/modals/main/settings/FileUpload.jsx +++ b/src/components/modals/main/settings/FileUpload.jsx @@ -19,7 +19,9 @@ export default class FileUpload extends React.PureComponent { reader.readAsDataURL(file); } - reader.addEventListener('load', (e) => this.props.loadFunction(e)); + reader.addEventListener('load', (e) => { + this.props.loadFunction(e); + }); }; } diff --git a/src/components/modals/main/settings/Slider.jsx b/src/components/modals/main/settings/Slider.jsx index 372b2982..166d13d2 100644 --- a/src/components/modals/main/settings/Slider.jsx +++ b/src/components/modals/main/settings/Slider.jsx @@ -30,7 +30,7 @@ export default class Slider extends React.PureComponent { value: this.props.default }); - toast(this.language.toasts.reset); + toast(window.language.toasts.reset); EventBus.dispatch('refresh', this.props.category); } diff --git a/src/components/modals/main/settings/Text.jsx b/src/components/modals/main/settings/Text.jsx index 2566bd5b..0620b492 100644 --- a/src/components/modals/main/settings/Text.jsx +++ b/src/components/modals/main/settings/Text.jsx @@ -42,7 +42,7 @@ export default class Text extends React.PureComponent { value: this.props.default || '' }); - toast(this.language.toasts.reset); + toast(window.language.toasts.reset); EventBus.dispatch('refresh', this.props.category); } diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx index 3ef3b264..3e059694 100644 --- a/src/components/modals/main/settings/sections/About.jsx +++ b/src/components/modals/main/settings/sections/About.jsx @@ -64,7 +64,7 @@ export default class About extends React.PureComponent { } componentDidMount() { - if (localStorage.getItem('offlineMode') === 'true') { + if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') { this.setState({ update: this.language.version.offline_mode }); diff --git a/src/components/modals/main/settings/sections/Advanced.jsx b/src/components/modals/main/settings/sections/Advanced.jsx index ed0cfde4..3cfa2a18 100644 --- a/src/components/modals/main/settings/sections/Advanced.jsx +++ b/src/components/modals/main/settings/sections/Advanced.jsx @@ -22,9 +22,9 @@ export default class AdvancedSettings extends React.PureComponent { settingsImport(e) { const content = JSON.parse(e.target.result); - for (const key of Object.keys(content)) { + Object.keys(content).forEach((key) => { localStorage.setItem(key, content[key]); - } + }); toast(window.language.toasts.imported); } diff --git a/src/components/modals/main/settings/sections/Changelog.jsx b/src/components/modals/main/settings/sections/Changelog.jsx index 010c9d73..342b7c1c 100644 --- a/src/components/modals/main/settings/sections/Changelog.jsx +++ b/src/components/modals/main/settings/sections/Changelog.jsx @@ -29,7 +29,7 @@ export default class Changelog extends React.PureComponent { } componentDidMount() { - if (localStorage.getItem('offlineMode') === 'true') { + if (navigator.onLine || localStorage.getItem('offlineMode') === 'true') { return; } diff --git a/src/components/modals/main/settings/sections/Order.jsx b/src/components/modals/main/settings/sections/Order.jsx index d375c5db..fb77b7d5 100644 --- a/src/components/modals/main/settings/sections/Order.jsx +++ b/src/components/modals/main/settings/sections/Order.jsx @@ -78,7 +78,7 @@ export default class OrderSettings extends React.PureComponent { items: JSON.parse(localStorage.getItem('order')) }); - toast(this.language.toasts.reset); + toast(window.language.toasts.reset); } componentDidUpdate() { diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx index 295ccba1..8890605b 100644 --- a/src/components/modals/main/settings/sections/background/Background.jsx +++ b/src/components/modals/main/settings/sections/background/Background.jsx @@ -30,18 +30,12 @@ export default class BackgroundSettings extends React.PureComponent { this.setState({ customBackground: '' }); - toast(this.language.toasts.reset); + toast(window.language.toasts.reset); EventBus.dispatch('refresh', 'background'); } customBackground(e, text) { - let result; - if (text === true) { - result = e.target.value; - } else { - result = e.target.result; - } - + const result = (text === true) ? e.target.value : e.target.result; localStorage.setItem('customBackground', result); this.setState({ customBackground: result @@ -83,6 +77,10 @@ export default class BackgroundSettings extends React.PureComponent { } componentDidMount() { + if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') { + return; + } + this.getBackgroundCategories(); } diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx index 8681df64..db3db760 100644 --- a/src/components/widgets/background/Background.jsx +++ b/src/components/widgets/background/Background.jsx @@ -1,3 +1,4 @@ +// warning: the code here is fairly messy and probably needs a rewrite import React from 'react'; import EventBus from '../../../modules/helpers/eventbus'; diff --git a/src/components/widgets/background/Favourite.jsx b/src/components/widgets/background/Favourite.jsx index e04aeed3..1a97ca88 100644 --- a/src/components/widgets/background/Favourite.jsx +++ b/src/components/widgets/background/Favourite.jsx @@ -32,7 +32,8 @@ export default class Favourite extends React.PureComponent { } render() { - if (localStorage.getItem('backgroundType') === 'colour') { + const backgroundType = localStorage.getItem('backgroundType'); + if (backgroundType === 'colour' || backgroundType === 'custom') { return null; } diff --git a/src/components/widgets/background/Maximise.jsx b/src/components/widgets/background/Maximise.jsx index 1cb9a497..7752ff09 100644 --- a/src/components/widgets/background/Maximise.jsx +++ b/src/components/widgets/background/Maximise.jsx @@ -13,9 +13,10 @@ export default class View extends React.PureComponent { } setAttribute(blur, brightness) { - document.querySelector('#backgroundImage').setAttribute( + const element = document.getElementById('backgroundImage'); + element.setAttribute( 'style', - `background-image: url(${document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', '')}); -webkit-filter: blur(${blur}px) brightness(${brightness}%);` + `background-image: url(${element.style.backgroundImage.replace('url("', '').replace('")', '')}); -webkit-filter: blur(${blur}px) brightness(${brightness}%);` ); } diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss index 9b4b59da..25227da8 100644 --- a/src/components/widgets/background/scss/_photoinformation.scss +++ b/src/components/widgets/background/scss/_photoinformation.scss @@ -73,7 +73,8 @@ border: none; } - &:hover, span { + &:hover, + span { display: block !important; } diff --git a/src/modules/helpers/eventbus.js b/src/modules/helpers/eventbus.js index 898419bc..e65c3dea 100644 --- a/src/modules/helpers/eventbus.js +++ b/src/modules/helpers/eventbus.js @@ -1,6 +1,8 @@ export default class EventBus { static on(event, callback) { - document.addEventListener(event, (e) => callback(e.detail)); + document.addEventListener(event, (e) => { + callback(e.detail); + }); } static dispatch(event, data) { diff --git a/src/modules/helpers/marketplace.js b/src/modules/helpers/marketplace.js index e84ca372..188d7944 100644 --- a/src/modules/helpers/marketplace.js +++ b/src/modules/helpers/marketplace.js @@ -4,17 +4,19 @@ import EventBus from './eventbus'; export default class MarketplaceFunctions { // based on https://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links - static urlParser (input) { + static urlParser(input) { const urlPattern = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_+.~#?&//=]*)/; return input.replace(urlPattern, '$&'); } - static uninstall(name, type) { + static uninstall(type, name) { switch (type) { case 'settings': const oldSettings = JSON.parse(localStorage.getItem('backup_settings')); localStorage.clear(); - oldSettings.forEach((item) => localStorage.setItem(item.name, item.value)); + oldSettings.forEach((item) => { + localStorage.setItem(item.name, item.value); + }); break; case 'quote_packs': localStorage.removeItem('quote_packs'); @@ -52,15 +54,17 @@ export default class MarketplaceFunctions { localStorage.removeItem('backup_settings'); let oldSettings = []; - for (const key of Object.keys(localStorage)) { + Object.keys(localStorage).forEach((key) => { oldSettings.push({ name: key, value: localStorage.getItem(key) }); - } + }); localStorage.setItem('backup_settings', JSON.stringify(oldSettings)); - input.settings.forEach((element) => localStorage.setItem(element.name, element.value)); + input.settings.forEach((element) => { + localStorage.setItem(element.name, element.value); + }); break; case 'photos': diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js index a7de6ec6..34456875 100644 --- a/src/modules/helpers/settings.js +++ b/src/modules/helpers/settings.js @@ -23,10 +23,9 @@ const saveFile = (data, filename = 'file') => { export default class SettingsFunctions { static exportSettings() { let settings = {}; - for (const key of Object.keys(localStorage)) { + Object.keys(localStorage).forEach((key) => { settings[key] = localStorage.getItem(key); - } - + }); saveFile(settings, 'mue-settings.json'); } @@ -160,15 +159,17 @@ export default class SettingsFunctions { `); } + // in a nutshell, this function saves all of the current settings, resets them, sets the defaults and then overrides + // the new settings with the old saved messages where they exist static moveSettings() { if (Object.keys(localStorage).length === 0) { return this.setDefaultSettings(); } let settings = {}; - for (const key of Object.keys(localStorage)) { + Object.keys(localStorage).forEach((key) => { settings[key] = localStorage.getItem(key); - } + }); localStorage.clear(); diff --git a/src/scss/index.scss b/src/scss/index.scss index 66b39aa6..c17a4ddc 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,5 +1,4 @@ @import 'variables'; -@import 'mixins'; @import 'themes'; @import 'modules/toast';