mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-16 05:23:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor and cleanup modals slightly

Browse Source
This commit is contained in:
David Ralph
2020-10-15 15:23:01 +01:00
parent edd8872403
commit b70bd85370
6 changed files with 117 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/modals/MainModal.jsx Normal file
View File

@@ -0,0 +1,74 @@
import React from 'react';
import Settings from './tabs/Settings';
import Addons from './tabs/Addons';
import Marketplace from './tabs/Marketplace';
export default class MainModal extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
tab: <Settings language={this.props.language.settings} toastLanguage={this.props.toastLanguage} />,
settingsActive: 'active',
addonsActive: '',
marketplaceActive: ''
};
}
componentDidMount() {
document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
document.getElementById('center').classList.toggle('backgroundEffects');
}
componentWillUnmount() {
document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
document.getElementById('center').classList.toggle('backgroundEffects');
}
changeEnabled(input) {
switch (input) {
case 'addons':
this.setState({
tab: <Addons language={this.props.language.addons} marketplaceLanguage={this.props.language.marketplace} toastLanguage={this.props.toastLanguage}/>,
addonsActive: 'active',
settingsActive: '',
marketplaceActive: ''
});
break;
case 'settings':
this.setState({
tab: <Settings language={this.props.language.settings} toastLanguage={this.props.toastLanguage}/>,
settingsActive: 'active',
addonsActive: '',
marketplaceActive: ''
});
break;
case 'marketplace':
this.setState({
tab: <Marketplace language={this.props.language.marketplace} toastLanguage={this.props.toastLanguage}/>,
marketplaceActive: 'active',
addonsActive: '',
settingsActive: ''
});
break;
default:
break;
}
}
render() {
return (
<div className='content'>
<span className='closeModal' onClick={this.props.modalClose}>&times;</span>
<h1>{this.props.modalLanguage.title}</h1>
<div className='tab'>
<button className='tablinks' id={this.state.marketplaceActive} onClick={() => this.changeEnabled('marketplace')}>{this.props.modalLanguage.marketplace}</button>
<button className='tablinks' id={this.state.addonsActive} onClick={() => this.changeEnabled('addons')}>{this.props.modalLanguage.addons}</button>
<button className='tablinks' id={this.state.settingsActive} onClick={() => this.changeEnabled('settings')}>{this.props.modalLanguage.settings}</button>
</div>
<br/>
{this.state.tab}
</div>
)
}
}

38
src/components/modals/Addons.jsx → src/components/modals/tabs/Addons.jsx
View File

@@ -1,8 +1,8 @@
import React from 'react';
import LocalMallIcon from '@material-ui/icons/LocalMall';
import { toast } from 'react-toastify';
import Item from './marketplace/Item';
import MarketplaceFunctions from '../../modules/marketplaceFunctions';
import Item from '../marketplace/Item';
import MarketplaceFunctions from '../../../modules/marketplaceFunctions';
export default class Addons extends React.PureComponent {
constructor(...args) {
@@ -136,16 +136,9 @@ export default class Addons extends React.PureComponent {
};
};
document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
document.getElementById('center').classList.toggle('backgroundEffects');
this.setState({ installed: JSON.parse(localStorage.getItem('installed')) });
}
componentWillUnmount() {
document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
document.getElementById('center').classList.toggle('backgroundEffects');
}
render() {
let content = <div className='items'>
{this.state.installed.map((item) =>
@@ -169,21 +162,16 @@ export default class Addons extends React.PureComponent {
</div>;
}
return <div className='content'>
<span className='closeModal' onClick={this.props.modalClose}>&times;</span>
<h1>{this.props.modalLanguage.title}</h1>
<div className='tab'>
<button className='tablinks' onClick={this.props.openMarketplace}>{this.props.modalLanguage.marketplace}</button>
<button className='tablinks' id='active'>{this.props.modalLanguage.addons}</button>
<button className='tablinks' onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
</div>
<div id='marketplace'>
<input id='file-input' type='file' name='name' className='hidden' />
<button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.props.language.sideload}</button>
<h1>{this.props.language.added}</h1>
{content}
</div>
<Item button={this.state.button} data={this.state.item_data} function={() => this.toggle()} language={this.props.marketplaceLanguage.product} />
</div>;
return (
<div>
<div id='marketplace'>
<input id='file-input' type='file' name='name' className='hidden' />
<button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.props.language.sideload}</button>
<h1>{this.props.language.added}</h1>
{content}
</div>
<Item button={this.state.button} data={this.state.item_data} function={() => this.toggle()} language={this.props.marketplaceLanguage.product} />
</div>
);
}
}

59
src/components/modals/Marketplace.jsx → src/components/modals/tabs/Marketplace.jsx
View File

@@ -2,10 +2,10 @@ import React from 'react';
import WifiOffIcon from '@material-ui/icons/WifiOff';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import { toast } from 'react-toastify';
import Item from './marketplace/Item';
import MarketplaceFunctions from '../../modules/marketplaceFunctions';
import * as Constants from '../../modules/constants';
import Items from './marketplace/Items';
import Item from '../marketplace/Item';
import MarketplaceFunctions from '../../../modules/marketplaceFunctions';
import * as Constants from '../../../modules/constants';
import Items from '../marketplace/Items';
export default class Marketplace extends React.PureComponent {
constructor(...args) {
@@ -35,22 +35,12 @@ export default class Marketplace extends React.PureComponent {
}
}
this.offlineHTML = <div className='content'>
<span className='closeModal' onClick={this.props.modalClose}>&times;</span>
<h1>{this.props.modalLanguage.title}</h1>
<div className='tab'>
<button className='tablinks' id='active'>{this.props.modalLanguage.marketplace}</button>
<button className='tablinks' onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
<button className='tablinks'
onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
</div>
<div id='marketplace'>
this.offlineHTML = <div id='marketplace'>
<div className='emptyMessage' style={{'marginTop': '20px', 'transform': 'translateY(80%)'}}>
<WifiOffIcon />
<h1>{this.props.language.offline.title}</h1>
<p className='description'>{this.props.language.offline.description}</p>
</div>
</div>
</div>;
}
@@ -161,47 +151,25 @@ export default class Marketplace extends React.PureComponent {
}
componentDidMount() {
document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
document.getElementById('center').classList.toggle('backgroundEffects');
if (navigator.onLine === false) return;
this.getItems();
}
componentWillUnmount() {
document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
document.getElementById('center').classList.toggle('backgroundEffects');
}
render() {
if (navigator.onLine === false) return this.offlineHTML;
if (this.state.done === false) {
return <div className='content'>
<span className='closeModal' onClick={this.props.modalClose}>&times;</span>
<h1>{this.props.modalLanguage.title}</h1>
<div className='tab'>
<button className='tablinks' id='active'>{this.props.modalLanguage.marketplace}</button>
<button className='tablinks' onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
<button className='tablinks'
onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
</div>
<div id='marketplace'>
return (
<div id='marketplace'>
<div className='emptyMessage' style={{'marginTop': '20px', 'transform': 'translateY(80%)'}}>
<h1>Loading...</h1>
</div>
</div>
</div>;
</div>
)
}
return <div className='content'>
<span className='closeModal' onClick={this.props.modalClose}>&times;</span>
<h1>{this.props.modalLanguage.title}</h1>
<div className='tab'>
<button className='tablinks' id='active'>{this.props.modalLanguage.marketplace}</button>
<button className='tablinks' onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
<button className='tablinks'
onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
</div>
<div id='marketplace'>
return (
<div>
<div id='marketplace'>
<div className='featured' style={{backgroundColor: this.state.featured.colour}}>
<p>{this.state.featured.title}</p>
<h1>{this.state.featured.name}</h1>
@@ -247,6 +215,7 @@ export default class Marketplace extends React.PureComponent {
items={this.state.see_more}
/>
</div>
</div>;
</div>
)
}
}

33
src/components/modals/Settings.jsx → src/components/modals/tabs/Settings.jsx
View File

@@ -1,13 +1,13 @@
import React from 'react';
import SettingsFunctions from '../../modules/settingsFunctions';
import Checkbox from './settings/Checkbox';
import Slider from './settings/Slider';
import Section from './settings/Section';
import SettingsFunctions from '../../../modules/settingsFunctions';
import Checkbox from '../settings/Checkbox';
import Slider from '../settings/Slider';
import Section from '../settings/Section';
import { toast } from 'react-toastify';
import BackgroundSettings from './settings/sections/BackgroundSettings';
import SearchSettings from './settings/sections/SearchSettings';
import LanguageSettings from './settings/sections/LanguageSettings';
import BackgroundSettings from '../settings/sections/BackgroundSettings';
import SearchSettings from '../settings/sections/SearchSettings';
import LanguageSettings from '../settings/sections/LanguageSettings';
export default class Settings extends React.PureComponent {
resetGreeting() {
@@ -41,28 +41,10 @@ export default class Settings extends React.PureComponent {
toast(this.props.toastLanguage.imported);
};
};
document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
document.getElementById('center').classList.toggle('backgroundEffects');
}
componentWillUnmount() {
document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
document.getElementById('center').classList.toggle('backgroundEffects');
}
render() {
return (
<div className='content'>
<span className='closeModal' onClick={this.props.modalClose}>&times;</span>
<h1>{this.props.modalLanguage.title}</h1>
<div className='tab'>
<button className='tablinks' onClick={this.props.openMarketplace}>{this.props.modalLanguage.marketplace}</button>
<button className='tablinks' onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
<button className='tablinks' id='active'>{this.props.modalLanguage.settings}</button>
</div>
<br/>
<div className='columns'>
<Section title={this.props.language.time.title} name='time'>
<Checkbox name='seconds' text={this.props.language.time.seconds} />
@@ -112,7 +94,6 @@ export default class Settings extends React.PureComponent {
<button className='import' onClick={() => document.getElementById('file-input').click()}>{this.props.language.import}</button>
<input id='file-input' type='file' name='name' className='hidden' accept='application/json' />
</div>
</div>
);
}
}

2
src/components/widgets/Search.jsx
View File

@@ -62,4 +62,4 @@ export default class Search extends React.PureComponent {
</div>
);
}
}
}