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

perf: further improve performance

Browse Source
This commit is contained in:
David Ralph
2021-03-23 09:44:57 +00:00
parent 5dd11aca94
commit a33151da91
15 changed files with 45 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/modals/main/Main.jsx
View File

@@ -4,27 +4,21 @@ import Settings from './tabs/Settings';
import Addons from './tabs/Addons';
import Marketplace from './tabs/Marketplace';
import Navigation from './tabs/backend/Tabs';
import Tabs from './tabs/backend/Tabs';
import './scss/index.scss';
export default function MainModal(props) {
const language = window.language;
const language = window.language.modals.main.navbar;
return (
<>
<span className='closeModal' onClick={props.modalClose}>&times;</span>
<Navigation navbar={true}>
<div label={language.modals.main.navbar.settings}>
<Settings/>
</div>
<div label={language.modals.main.navbar.addons}>
<Addons/>
</div>
<div label={language.modals.main.navbar.marketplace}>
<Marketplace/>
</div>
</Navigation>
<Tabs navbar={true}>
<div label={language.settings}><Settings/></div>
<div label={language.addons}><Addons/></div>
<div label={language.marketplace}><Marketplace/></div>
</Tabs>
</>
);
}

4
src/components/modals/main/settings/Checkbox.jsx
View File

@@ -25,9 +25,9 @@ export default class Checkbox extends React.PureComponent {
let text = this.props.text;
if (this.props.newFeature) {
text = <span>{this.props.text} <span className='newFeature'> NEW</span></span>;
text = <>{this.props.text} <span className='newFeature'> NEW</span></>;
} else if (this.props.betaFeature) {
text = <span>{this.props.text} <span className='newFeature'> BETA</span></span>;
text = <>{this.props.text} <span className='newFeature'> BETA</span></>;
}
return (

4
src/components/modals/main/settings/Switch.jsx
View File

@@ -25,9 +25,9 @@ export default class Switch extends React.PureComponent {
let text = this.props.text;
if (this.props.newFeature) {
text = <span>{this.props.text} <span className='newFeature'> NEW</span></span>;
text = <>{this.props.text} <span className='newFeature'> NEW</span></>;
} else if (this.props.betaFeature) {
text = <span>{this.props.text} <span className='newFeature'> BETA</span></span>;
text = <>{this.props.text} <span className='newFeature'> BETA</span></>;
}
return (

6
src/components/modals/main/settings/sections/Background.jsx
View File

@@ -176,7 +176,7 @@ export default class BackgroundSettings extends React.PureComponent {
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) => {
@@ -190,12 +190,12 @@ export default class BackgroundSettings extends React.PureComponent {
}
colourSettings = (
<div>
<>
{gradientInputs}
{this.state.gradientSettings.gradient[0].colour !== background.source.disabled &&
!gradientHasMoreThanOneColour ? (<button type='button' className='add' onClick={this.addColour}>{background.source.add_colour}</button>) : null
}
</div>
</>
);
}

14
src/components/modals/main/tabs/Addons.jsx
View File

@@ -6,15 +6,9 @@ import AddonsTabs from './backend/Tabs';
export default function Addons() {
return (
<>
<AddonsTabs>
<div label='Added'>
<Added/>
</div>
<div label=''>
</div>
</AddonsTabs>
</>
<AddonsTabs>
<div label='Added'><Added/></div>
<div label=''></div>
</AddonsTabs>
);
}

19
src/components/modals/main/tabs/Marketplace.jsx
View File

@@ -1,19 +1,14 @@
import React from 'react';
import MarketplaceBackend from '../marketplace/sections/Marketplace';
import MarketplaceTabs from './backend/Tabs';
import MarketplaceTab from '../marketplace/sections/Marketplace';
import Tabs from './backend/Tabs';
export default function Marketplace() {
return (
<>
<MarketplaceTabs>
<div label='Photo Packs'>
<MarketplaceBackend type='photo_packs'/>
</div>
<div label='Quote Packs'>
<MarketplaceBackend type='quote_packs'/>
</div>
</MarketplaceTabs>
</>
<Tabs>
<div label='Photo Packs'><MarketplaceTab type='photo_packs'/></div>
<div label='Quote Packs'><MarketplaceTab type='quote_packs'/></div>
</Tabs>
);
}

6
src/components/modals/main/tabs/Settings.jsx
View File

@@ -12,13 +12,13 @@ import Advanced from '../settings/sections/Advanced';
import Changelog from '../settings/sections/Changelog';
import Order from '../settings/sections/Order';
import SettingsTabs from './backend/Tabs';
import Tabs from './backend/Tabs';
export default function Settings() {
const language = window.language.modals.main.settings.sections;
return (
<>
<SettingsTabs>
<Tabs>
<div label={language.time.title}><Time/></div>
<div label={language.quote.title}><Quote/></div>
<div label={language.greeting.title}><Greeting/></div>
@@ -31,7 +31,7 @@ export default function Settings() {
<div label='Experimental'></div>
<div label={language.changelog}><Changelog/></div>
<div label={language.about.title}><About/></div>
</SettingsTabs>
</Tabs>
<div className='reminder-info'>
<h1>IMPORTANT INFO</h1>
<p>In order for changes to take place, the page must be refreshed.</p>

10
src/components/modals/main/tabs/backend/Tabs.jsx
View File

@@ -32,7 +32,7 @@ export default class Tabs extends React.PureComponent {
return (
<span className='tabs'>
<ul className={className}>
{optionsText}
{optionsText}
{this.props.children.map((tab) => {
return (
<Tab
@@ -47,10 +47,10 @@ export default class Tabs extends React.PureComponent {
</ul>
<div className={tabClass}>
<ErrorBoundary>
{this.props.children.map((child) => {
if (child.props.label !== this.state.currentTab) return undefined;
return child.props.children;
})}
{this.props.children.map((child) => {
if (child.props.label !== this.state.currentTab) return undefined;
return child.props.children;
})}
</ErrorBoundary>
</div>
</span>