From 3b520102130c9bd0e2dda19303d0c15b9551ba4b Mon Sep 17 00:00:00 2001 From: David Ralph Date: Wed, 4 Nov 2020 12:01:18 +0000 Subject: [PATCH] More cleanup (some marketplace stuff broken, will fix later) --- src/App.jsx | 17 +- src/components/modals/Welcome.jsx | 16 +- .../settings/sections/BackgroundSettings.jsx | 27 +-- src/components/modals/tabs/Addons.jsx | 58 ++---- src/components/modals/tabs/Marketplace.jsx | 197 +++++++++--------- src/components/widgets/Date.jsx | 2 +- src/modules/helpers/background/hexToRgb.js | 1 - src/modules/helpers/background/rgbToHsv.js | 25 +-- src/modules/helpers/background/setRgba.js | 4 +- src/modules/helpers/marketplace.js | 39 ++-- src/translations/en.json | 10 +- 11 files changed, 176 insertions(+), 220 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index b4d4d455..89bad205 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -20,7 +20,7 @@ import merge from 'lodash.merge'; // Modals are lazy loaded as the user won't use them every time they open a tab const MainModal = React.lazy(() => import('./components/modals/MainModal')); const Update = React.lazy(() => import('./components/modals/Update')); -//const Welcome = React.lazy(() => import('./components/modals/Welcome')); +const Welcome = React.lazy(() => import('./components/modals/Welcome')); const renderLoader = () =>
; export default class App extends React.PureComponent { @@ -28,20 +28,13 @@ export default class App extends React.PureComponent { super(...args); this.state = { mainModal: false, - updateModal: false + updateModal: false, + welcomeModal: false }; } componentDidMount() { if (!localStorage.getItem('firstRun')) SettingsFunctions.setDefaultSettings(); - - const theme = localStorage.getItem('theme'); // Marketplace themes (WIP) - if (theme) { - const style = document.createElement('link'); - style.href = theme; - style.rel = 'stylesheet'; - document.head.appendChild(style); - } } // Render all the components @@ -84,9 +77,9 @@ export default class App extends React.PureComponent { language={language.update} modalClose={() => this.setState({ updateModal: false })} /> - {/* this.setState({ welcomeModal: false })} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}> + this.setState({ welcomeModal: false })} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}> this.setState({ welcomeModal: false })} /> - */ } + diff --git a/src/components/modals/Welcome.jsx b/src/components/modals/Welcome.jsx index 78ba859d..fa51e447 100644 --- a/src/components/modals/Welcome.jsx +++ b/src/components/modals/Welcome.jsx @@ -3,22 +3,15 @@ import EmailIcon from '@material-ui/icons/Email'; export default class Welcome extends React.PureComponent { render() { - return
+ return ( +
×

Welcome to

Mue Tab

- celebration + celebration

Information

Thank you for downloading Mue Tab,
we hope you enjoy your time with our extension.

-

Tutorials

- General Start -
- Marketplace -
- Submitting Photos -
- Settings

Support

{/* twitter discord */} @@ -26,6 +19,7 @@ export default class Welcome extends React.PureComponent {
-
; +
+ ); } } \ No newline at end of file diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx index bd6cde99..6deefd51 100644 --- a/src/components/modals/settings/sections/BackgroundSettings.jsx +++ b/src/components/modals/settings/sections/BackgroundSettings.jsx @@ -156,28 +156,30 @@ export default class BackgroundSettings extends React.PureComponent { const gradientHasMoreThanOneColour = this.state.gradientSettings.gradient.length > 1; let gradientInputs; if (gradientHasMoreThanOneColour) { - if (this.GradientPickerInitalState === undefined) { - this.InitializeColorPickerState(this.state.gradientSettings); - } - gradientInputs = ( this.onColorPickerChange(color, 'start')} - onChange={color => this.onColorPickerChange(color, 'change')} - onEndChange={color => this.onColorPickerChange(color, 'end')} + if (this.GradientPickerInitalState === undefined) this.InitializeColorPickerState(this.state.gradientSettings); + gradientInputs = ( + this.onColorPickerChange(color, 'start')} + onChange={(color) => this.onColorPickerChange(color, 'change')} + onEndChange={(color) => this.onColorPickerChange(color, 'end')} gradient={this.GradientPickerInitalState} - isGradient />); + isGradient/> + ); } else { gradientInputs = this.state.gradientSettings.gradient.map((g, i) => { return (
- this.onGradientChange(event, i)} value={g.colour}> - + this.onGradientChange(event, i)} value={g.colour}> +
); }); } colourSettings = (
{gradientInputs} - {this.state.gradientSettings.gradient[0].colour !== this.props.language.background.disabled && !gradientHasMoreThanOneColour ? () : null} + {this.state.gradientSettings.gradient[0].colour !== this.props.language.background.disabled && + !gradientHasMoreThanOneColour ? () : null + }
); } return ( @@ -193,8 +195,7 @@ export default class BackgroundSettings extends React.PureComponent { label={this.props.language.background.api} name='backgroundapi' id='backgroundAPI' - onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} - > + onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} > diff --git a/src/components/modals/tabs/Addons.jsx b/src/components/modals/tabs/Addons.jsx index 3c396ac2..7569baf0 100644 --- a/src/components/modals/tabs/Addons.jsx +++ b/src/components/modals/tabs/Addons.jsx @@ -23,7 +23,10 @@ export default class Addons extends React.PureComponent { version: '1.0.0', icon: '' }, - button: + button: '' + } + this.buttons = { + uninstall: , } } @@ -46,29 +49,21 @@ export default class Addons extends React.PureComponent { document.getElementById('item').style.display = 'block'; document.getElementById('marketplace').style.display = 'none'; } else { - this.setState({ - button: - }); document.getElementById('marketplace').style.display = 'block'; document.getElementById('item').style.display = 'none'; } + this.setState({ button: this.buttons.uninstall }); } uninstall() { let type, data = this.state.current_data.content.type; switch (data) { - case 'photos': - type = 'photo_packs'; - break; - case 'quotes': - type = 'quote_packs'; - break; - default: - type = this.state.current_data.type; - break; + case 'photos': type = 'photo_packs'; break; + case 'quotes': type = 'quote_packs'; break; + default: type = this.state.current_data.type; break; } MarketplaceFunctions.uninstall(this.state.current_data.name, type); - toast(this.props.toastLanguage.removed); + toast(this.props.toastLanguage.uninstalled); this.setState({ button: '', installed: JSON.parse(localStorage.getItem('installed')) @@ -76,28 +71,19 @@ export default class Addons extends React.PureComponent { } install(input) { - let button; MarketplaceFunctions.install(input.type, input, true); toast(this.props.toastLanguage.installed); - button = ; this.setState({ - button: button, + button: this.buttons.uninstall, installed: JSON.parse(localStorage.getItem('installed')) }); } componentDidMount() { document.getElementById('file-input').onchange = (e) => { - const file = e.target.files[0]; - if (file.type !== 'application/json') return console.error(`expected json, got ${file.type}`); - const reader = new FileReader(); - reader.readAsText(file, 'UTF-8'); - - reader.onload = (readerEvent) => { - const content = JSON.parse(readerEvent.target.result); - this.install(content); - }; + reader.readAsText(e.target.files[0], 'UTF-8'); + reader.onload = (readerEvent) => this.install(JSON.parse(readerEvent.target.result)); }; this.setState({ installed: JSON.parse(localStorage.getItem('installed')) }); @@ -107,20 +93,22 @@ export default class Addons extends React.PureComponent { let content = this.toggle('item', 'addon', input)} /> if (this.state.installed.length === 0) { - content =
-
- -

{this.props.language.empty.title}

-

{this.props.language.empty.description}

- -
-
; + content = ( +
+
+ +

{this.props.language.empty.title}

+

{this.props.language.empty.description}

+ +
+
+ ); } return (
- +

{this.props.language.added}

{content} diff --git a/src/components/modals/tabs/Marketplace.jsx b/src/components/modals/tabs/Marketplace.jsx index 738de35f..27830d19 100644 --- a/src/components/modals/tabs/Marketplace.jsx +++ b/src/components/modals/tabs/Marketplace.jsx @@ -8,59 +8,48 @@ import * as Constants from '../../../modules/constants'; import Items from '../marketplace/Items'; export default class Marketplace extends React.PureComponent { - constructor(...args) { - super(...args); - this.state = { - themes: [], - settings: [], - photo_packs: [], - quote_packs: [], - see_more: [], - see_more_type: '', - current_data: { - type: '', - name: '', - content: {} - }, - button: '', - featured: {}, - done: false, - item_data: { - name: 'Name', - author: 'Author', - description: 'Description', - updated: '???', - version: '1.0.0', - icon: '' - } + constructor(...args) { + super(...args); + this.state = { + settings: [], + photo_packs: [], + quote_packs: [], + see_more: [], + see_more_type: '', + current_data: { + type: '', + name: '', + content: {} + }, + button: '', + featured: {}, + done: false, + item_data: { + name: 'Name', + author: 'Author', + description: 'Description', + updated: '???', + version: '1.0.0', + icon: '' } - - this.offlineHTML =
-
- -

{this.props.language.offline.title}

-

{this.props.language.offline.description}

-
-
; + } + this.buttons = { + uninstall: , + install: + } } - async toggle(type, type2, data) { - if (type === 'seemore') { + async toggle(type, type2, data) { + switch (type) { + case 'seemore': document.getElementById('marketplace').style.display = 'none'; document.getElementById('seemore').style.display = 'block'; - return this.setState({ - see_more: this.state[type2], - see_more_type: type2 - }); - } - - if (type === 'item') { + this.setState({ see_more: this.state[type2], see_more_type: type2 }); + break; + case 'item': let info; - try { - info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`)).json(); - } catch (e) { - return toast(this.props.toastLanguage.error); - } + try { info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`)).json(); } + catch (e) { return toast(this.props.toastLanguage.error); } this.setState({ current_data: { type: type2, name: data, content: info }, @@ -74,111 +63,117 @@ export default class Marketplace extends React.PureComponent { } }); + let button = this.buttons.install; + const installed = JSON.parse(localStorage.getItem('installed')); + if (installed.some(item => item.name === data)) button = this.buttons.uninstall; + this.setState({ button: button }); + document.getElementById('marketplace').style.display = 'none'; document.getElementById('seemore').style.display = 'none'; document.getElementById('item').style.display = 'block'; - - let button = ; - const installed = JSON.parse(localStorage.getItem('installed')); - if (installed.some(item => item.name === data)) button = ; - this.setState({ button: button }); - } else { + break; + default: document.getElementById('marketplace').style.display = 'block'; document.getElementById('item').style.display = 'none'; document.getElementById('seemore').style.display = 'none'; + break; } } - async getItems() { - const data = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json(); - const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json(); - this.setState({ - themes: data.data.themes, - settings: data.data.settings, - photo_packs: data.data.photo_packs, - quote_packs: data.data.quote_packs, - see_more: data.data.photo_packs, - featured: featured.data, - done: true - }); - } + async getItems() { + const data = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json(); + const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json(); + this.setState({ + settings: data.data.settings, + photo_packs: data.data.photo_packs, + quote_packs: data.data.quote_packs, + see_more: data.data.photo_packs, + featured: featured.data, + done: true + }); + } - install() { - let button; - MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data); - toast(this.props.toastLanguage.installed); - button = ; - this.setState({ button: button }); + manage(type) { + switch (type) { + case 'install': MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data); break; + case 'uninstall': MarketplaceFunctions.uninstall(this.state.current_data.content.data.name, this.state.current_data.type); break; + default: break; } + toast(this.props.toastLanguage[type + 'ed']); + let button = this.buttons.install; + if (type === 'install') button = this.buttons.uninstall; + this.setState({ button: button }); + } - uninstall() { - MarketplaceFunctions.uninstall(this.state.current_data.name, this.state.current_data.type); - toast(this.props.toastLanguage.removed); - this.setState({ - button: - }); - } - - componentDidMount() { - if (navigator.onLine === false) return; - this.getItems(); - } + componentDidMount() { + if (navigator.onLine === false) return; + this.getItems(); + } render() { - if (navigator.onLine === false) return this.offlineHTML; - if (this.state.done === false) { + const returnMessage = (msg) => { return (
-

{this.props.updateLanguage.loading}

+ {msg}
); } + if (navigator.onLine === false) { + return returnMessage( + + +

{this.props.language.offline.title}

+

{this.props.language.offline.description}

+ + ); + } + + if (this.state.done === false) return returnMessage(

{this.props.updateLanguage.loading}

) + return (
-
+

{this.state.featured.title}

{this.state.featured.name}

-
- + this.toggle('item', 'photo_packs', input)} seeMoreFunction={() => this.toggle('seemore', 'photo_packs')} /> - this.toggle('item', 'settings', input)} seeMoreFunction={() => this.toggle('seemore', 'settings')} /> - this.toggle('item', 'quote_packs', input)} seeMoreFunction={() => this.toggle('seemore', 'quote_packs')} /> -
- + this.toggle()} language={this.props.language.product} - /> -
+ function={() => this.toggle()} language={this.props.language.product} /> +
this.toggle()} /> this.toggle('item', this.state.see_more_type, input)} - items={this.state.see_more} - /> -
+ items={this.state.see_more} /> +
- ) + ); } } \ No newline at end of file diff --git a/src/components/widgets/Date.jsx b/src/components/widgets/Date.jsx index 879a3e1f..6d0fd5a9 100644 --- a/src/components/widgets/Date.jsx +++ b/src/components/widgets/Date.jsx @@ -63,6 +63,6 @@ export default class DateWidget extends React.PureComponent { } render() { - return {this.state.date} + return {this.state.date} } } \ No newline at end of file diff --git a/src/modules/helpers/background/hexToRgb.js b/src/modules/helpers/background/hexToRgb.js index 4e458912..1d7e92b5 100644 --- a/src/modules/helpers/background/hexToRgb.js +++ b/src/modules/helpers/background/hexToRgb.js @@ -10,7 +10,6 @@ export default function hexToRgb(value) { if (valid) { if (value[0] === '#') value = value.slice(1, value.length); - if (value.length === 3) value = value.replace(regexp, '$1$1$2$2$3$3'); const red = parseInt(value.substr(0, 2), 16); diff --git a/src/modules/helpers/background/rgbToHsv.js b/src/modules/helpers/background/rgbToHsv.js index a5c02bb6..5738d639 100644 --- a/src/modules/helpers/background/rgbToHsv.js +++ b/src/modules/helpers/background/rgbToHsv.js @@ -1,16 +1,14 @@ export default function rgbToHSv({ red, green, blue }) { - let rr; - let gg; - let bb; - let h; - let s; + let rr, gg, bb, h, s; const rabs = red / 255; const gabs = green / 255; const babs = blue / 255; + const v = Math.max(rabs, gabs, babs); const diff = v - Math.min(rabs, gabs, babs); const diffc = c => (v - c) / 6 / diff + 1 / 2; + if (diff === 0) { h = 0; s = 0; @@ -20,18 +18,11 @@ export default function rgbToHSv({ red, green, blue }) { gg = diffc(gabs); bb = diffc(babs); - if (rabs === v) { - h = bb - gg; - } else if (gabs === v) { - h = (1 / 3) + rr - bb; - } else if (babs === v) { - h = (2 / 3) + gg - rr; - } - if (h < 0) { - h += 1; - } else if (h > 1) { - h -= 1; - } + if (rabs === v) h = bb - gg; + else if (gabs === v) h = (1 / 3) + rr - bb; + else if (babs === v) h = (2 / 3) + gg - rr; + if (h < 0) h += 1; + else if (h > 1) h -= 1; } return { diff --git a/src/modules/helpers/background/setRgba.js b/src/modules/helpers/background/setRgba.js index e93c26c6..b1efcad5 100644 --- a/src/modules/helpers/background/setRgba.js +++ b/src/modules/helpers/background/setRgba.js @@ -10,9 +10,7 @@ export default function setRGBA(red, green, blue, alpha) { blue: blue | 0, }; - if (isValidRGBValue(alpha) === true) { - color.alpha = alpha | 0; - } + if (isValidRGBValue(alpha) === true) color.alpha = alpha | 0; // RGBToHSL(color.r, color.g, color.b); diff --git a/src/modules/helpers/marketplace.js b/src/modules/helpers/marketplace.js index aa4a6e64..ac284b0e 100644 --- a/src/modules/helpers/marketplace.js +++ b/src/modules/helpers/marketplace.js @@ -7,39 +7,31 @@ export default class MarketplaceFunctions { } static uninstall(name, type) { - let installed = JSON.parse(localStorage.getItem('installed')); - - const uninstallStuff = () => { - for (let i = 0; i < installed.length; i++) { - if (installed[i].name === name) { - installed.splice(i, 1); - break; - } - } - localStorage.setItem('installed', JSON.stringify(installed)); - }; - switch (type) { case 'settings': const oldSettings = JSON.parse(localStorage.getItem('backup_settings')); localStorage.clear(); oldSettings.forEach(item => localStorage.setItem(item.name, item.value)); - uninstallStuff(); break; case 'quote_packs': - localStorage.removeItem('quote_packs'); - localStorage.removeItem('quote_api'); - uninstallStuff(); - break; + localStorage.removeItem('quote_packs'); + localStorage.removeItem('quote_api'); + break; default: - try { - localStorage.removeItem(type); - uninstallStuff(); - } catch (e) { + try { localStorage.removeItem(type); } + catch (e) { toast('Failed to uninstall addon, check the console'); console.error(e); } - } + } + let installed = JSON.parse(localStorage.getItem('installed')); + for (let i = 0; i < installed.length; i++) { + if (installed[i].name === name) { + installed.splice(i, 1); + break; + } + } + localStorage.setItem('installed', JSON.stringify(installed)); } static install(type, input, sideload) { @@ -54,9 +46,6 @@ export default class MarketplaceFunctions { case 'photo_packs': localStorage.setItem('photo_packs', JSON.stringify(input.photos)); break; - case 'theme': - localStorage.setItem('theme', input.theme); - break; case 'quote_packs': if (input.quote_api) localStorage.setItem('quote_api', JSON.stringify(input.quote_api)); localStorage.setItem('quote_packs', JSON.stringify(input.quotes)); diff --git a/src/translations/en.json b/src/translations/en.json index 73f30d8a..1a95a599 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -90,7 +90,7 @@ "quote": "Quote Copied", "reset": "Reset successfully", "installed": "Successfully installed", - "removed": "Successfully removed", + "uninstalled": "Successfully removed", "error": "Something went wrong", "imported": "Successfully imported" }, @@ -142,5 +142,13 @@ "title": "Notes", "placeholder": "Type here" } + }, + "welcome": { + "title": "Welcome to", + "information": "Information", + "thankyoumessage1": "Thank you for downloading Mue Tab,", + "thankyoumessage2": "we hope you enjoy your time with our extension.", + "support": "Support", + "close": "Close" } } \ No newline at end of file