diff --git a/src/components/modals/main/marketplace/sections/Create.jsx b/src/components/modals/main/marketplace/sections/Create.jsx index a7da9e10..43b9156f 100644 --- a/src/components/modals/main/marketplace/sections/Create.jsx +++ b/src/components/modals/main/marketplace/sections/Create.jsx @@ -2,10 +2,15 @@ import { PureComponent } from 'react'; import FileUpload from '../../settings/FileUpload'; -import { saveFile } from '../../../../../modules/helpers/settings/modals'; +import Settings from '@material-ui/icons/SettingsRounded'; +import Photos from '@material-ui/icons/PhotoOutlined'; +import Quotes from '@material-ui/icons/FormatQuoteOutlined'; +import { saveFile } from '../../../../../modules/helpers/settings/modals'; import { toast } from 'react-toastify'; +import '../../../welcome/welcome.scss'; + export default class Create extends PureComponent { constructor() { super(); @@ -18,7 +23,7 @@ export default class Create extends PureComponent { version: '', author: '', icon_url: '', - screenshot_url: '', + screenshot_url: '' }, addonData: '' }; @@ -39,25 +44,10 @@ export default class Create extends PureComponent { }); } - importSettings() { + importSettings(input) { + const data = input || localStorage; let settings = {}; - Object.keys(localStorage).forEach((key) => { - if (key === 'statsData' || key === 'firstRun' || key === 'showWelcome' || key === 'language' || key === 'installed' || key === 'stats') { - return; - } - settings[key] = localStorage.getItem(key); - }); - - this.setState({ - addonData: settings - }); - - toast('Imported settings!'); - } - - uploadSettings(input) { - let settings = {}; - Object.keys(input).forEach((key) => { + Object.keys(data).forEach((key) => { if (key === 'statsData' || key === 'firstRun' || key === 'showWelcome' || key === 'language' || key === 'installed' || key === 'stats') { return; } @@ -80,7 +70,7 @@ export default class Create extends PureComponent { author: this.state.addonMetadata.author, icon_url: this.state.addonMetadata.icon_url, screenshot_url: this.state.addonMetadata.screenshot_url, - settings: this.state.addonData + [this.state.addonMetadata.type]: this.state.addonData }, this.state.addonMetadata.name + '.json'); } @@ -90,42 +80,94 @@ export default class Create extends PureComponent { const chooseType = ( <>

Type

- +
+
+
this.changeTab(2, 'photos')}> + + Photo Pack (soon™️) +
+
this.changeTab(2, 'quotes')}> + + Quote Pack (soon™️) +
+
this.changeTab(2, 'settings')}> + + Preset Settings +
+
+
); + // todo: find a better way to do all this + const nextDescriptionDisabled = (this.state.addonMetadata.name !== undefined && + this.state.addonMetadata.description !== undefined && + this.state.addonMetadata.version !== undefined && this.state.addonMetadata.author !== undefined && + this.state.addonMetadata.icon_url !== undefined && this.state.addonMetadata.screenshot_url !== undefined) + ? false : true; + + 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, + screenshot_url: (type === 'screenshot_url') ? data : this.state.addonMetadata.screenshot_url, + type: this.state.addonMetadata.type + } + }); + } + const writeDescription = ( <>

Information

Name

- this.setState({ addonMetadata: { name: e.target.value }})}/> + setMetadata(e.target.value, 'name')}/>

Version

- this.setState({ addonMetadata: { version: e.target.value }})}/> + setMetadata(e.target.value, 'version')}/>

Author

- this.setState({ addonMetadata: { author: e.target.value }})}/> + setMetadata(e.target.value, 'author')}/>

Icon URL

- this.setState({ addonMetadata: { icon_url: e.target.value }})}/> + setMetadata(e.target.value, 'icon_url')}/>

Screenshot URL

- this.setState({ addonMetadata: { screenshot_url: e.target.value }})}/> + setMetadata(e.target.value, 'screenshot_url')}/>

Description

- +
- + ); + const nextSettingsDisabled = (this.state.addonData === '') ? true : false; + // settings const importSettings = ( <>

Import Settings

this.importSettings()} className='addToMue'>Import current setup




- this.uploadSettings(JSON.parse(e.target.result))} /> + this.importSettings(JSON.parse(e.target.result))} />

document.getElementById('file-input').click()}>Upload JSON



- - + + + + ); + + // quotes + const addQuotes = ( + <> +

Add Quotes

+ + ); + + // photos + const addPhotos = ( + <> +

Add Photos

); @@ -141,6 +183,8 @@ export default class Create extends PureComponent { switch (this.state.currentTab) { case 2: tabContent = writeDescription; break; case 'settings': tabContent = importSettings; break; + case 'quotes': tabContent = addQuotes; break; + case 'photos': tabContent = addPhotos; break; case 3: tabContent = downloadAddon; break; default: tabContent = chooseType; } @@ -152,4 +196,4 @@ export default class Create extends PureComponent { ); } -} \ No newline at end of file +} diff --git a/src/modules/helpers/stats.js b/src/modules/helpers/stats.js index cab54432..923a696d 100644 --- a/src/modules/helpers/stats.js +++ b/src/modules/helpers/stats.js @@ -28,7 +28,7 @@ export default class Stats { } // local - let data = JSON.parse(localStorage.getItem('statsData')); + const data = JSON.parse(localStorage.getItem('statsData')); // tl;dr this creates the objects if they don't exist // this really needs a cleanup at some point if (!data[type] || !data[type][value]) { @@ -66,7 +66,7 @@ export default class Stats { } // local - let data = JSON.parse(localStorage.getItem('statsData')); + const data = JSON.parse(localStorage.getItem('statsData')); data['tabs-opened'] = data['tabs-opened'] + 1 || 1; localStorage.setItem('statsData', JSON.stringify(data)); } diff --git a/src/scss/modules/_buttons.scss b/src/scss/modules/_buttons.scss index fbebc862..eb555f80 100644 --- a/src/scss/modules/_buttons.scss +++ b/src/scss/modules/_buttons.scss @@ -12,6 +12,13 @@ outline: none; background: none; } + + &:disabled { + cursor: not-allowed; + color: grey !important; + background: none; + border: 2px solid grey !important; + } } .dark %settingsButton { @@ -79,4 +86,4 @@ span { font-size: 2em; } -} \ No newline at end of file +}