style: better create tab settings ui

This commit is contained in:
David Ralph
2021-08-15 15:12:03 +01:00
parent 70273798b6
commit cd5364dd36

View File

@@ -25,7 +25,11 @@ export default class Create extends PureComponent {
icon_url: '', icon_url: '',
screenshot_url: '' screenshot_url: ''
}, },
addonData: '' addonData: '',
settingsClasses: {
current: 'toggle lightTheme',
json: 'toggle lightTheme'
}
}; };
} }
@@ -55,7 +59,11 @@ export default class Create extends PureComponent {
}); });
this.setState({ this.setState({
addonData: settings addonData: settings,
settingsClasses: {
current: input ? 'toggle lightTheme' : 'toggle lightTheme active',
json: input ? 'toggle lightTheme active' : 'toggle lightTheme'
}
}); });
toast('Imported settings!'); toast('Imported settings!');
@@ -145,16 +153,22 @@ export default class Create extends PureComponent {
</> </>
); );
const nextSettingsDisabled = (this.state.addonData === '') ? true : false;
// settings // settings
const nextSettingsDisabled = (this.state.addonData === '') ? true : false;
const importSettings = ( const importSettings = (
<> <>
<h3>{welcome.sections.settings.title}</h3> <h3>{welcome.sections.settings.title}</h3>
<p onClick={() => this.importSettings()} className='addToMue'>{addons.create.settings.current}</p> <div className='themesToggleArea'>
<br/><br/><br/> <div className='options'>
<div className={this.state.settingsClasses.current} onClick={() => this.importSettings()}>
<span>{addons.create.settings.current}</span>
</div>
<div className={this.state.settingsClasses.json} onClick={() => document.getElementById('file-input').click()}>
<span>{addons.create.settings.json}</span>
</div>
</div>
</div>
<FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.importSettings(JSON.parse(e.target.result))} /> <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.importSettings(JSON.parse(e.target.result))} />
<p className='addToMue' style={{ position: 'absolute' }} onClick={() => document.getElementById('file-input').click()}>{addons.create.settings.json}</p>
<br/><br/> <br/><br/>
<button onClick={() => this.changeTab(2)} className='uploadbg' style={{ marginRight: '10px' }}>{welcome.buttons.previous}</button> <button onClick={() => this.changeTab(2)} className='uploadbg' style={{ marginRight: '10px' }}>{welcome.buttons.previous}</button>
<button onClick={() => this.changeTab(3)} className='uploadbg' disabled={nextSettingsDisabled}>{welcome.buttons.next}</button> <button onClick={() => this.changeTab(3)} className='uploadbg' disabled={nextSettingsDisabled}>{welcome.buttons.next}</button>