mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-06-08 22:18:40 +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>

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

@@ -74,7 +74,7 @@ export default class Widgets extends React.PureComponent {
if (order) {
order.forEach(element => {
elements.push(this.widgets[element]);
elements.push(<React.Fragment key={element}>{this.widgets[element]}</React.Fragment>);
});
} else {
elements = ['greeting', 'time', 'quote', 'date'];

3
src/components/widgets/background/Background.jsx
View File

@@ -199,7 +199,8 @@ export default class Background extends React.PureComponent {
return (
<React.Fragment>
<div id='backgroundImage'/>
<PhotoInformation className={this.props.photoInformationClass} info={this.state.photoInfo}/>
{(this.state.photoInfo.credit !== '') ? <PhotoInformation className={this.props.photoInformationClass} info={this.state.photoInfo}/>
: null}
</React.Fragment>
);
}

10
src/components/widgets/background/Favourite.jsx
View File

@@ -7,7 +7,7 @@ export default class Favourite extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
favourited: <StarIcon2 onClick={() => this.favourite()} />
favourited: (localStorage.getItem('favourite')) ? <StarIcon onClick={() => this.favourite()} /> : <StarIcon2 onClick={() => this.favourite()} />
};
}
@@ -30,14 +30,6 @@ export default class Favourite extends React.PureComponent {
}
}
componentDidMount() {
if (localStorage.getItem('favourite')) {
this.setState({
favourited: <StarIcon onClick={() => this.favourite()} />
});
}
}
render() {
if (localStorage.getItem('favouriteEnabled') === 'false' || localStorage.getItem('background') === 'false' || localStorage.getItem('customBackgroundColour') || localStorage.getItem('customBackground')) {
return null;

2
src/components/widgets/background/Maximise.jsx
View File

@@ -19,7 +19,7 @@ export default class View extends React.PureComponent {
viewStuff() {
// elements to hide
const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time'];
const elements = ['.searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time'];
elements.forEach((element) => {
try {

2
src/components/widgets/navbar/Navbar.jsx
View File

@@ -10,7 +10,7 @@ import './scss/index.scss';
// the user probably won't use the notes feature every time so we lazy load
const Notes = React.lazy(() => import('./Notes'));
const renderLoader = () => <div></div>;
const renderLoader = () => <></>;
export default function Navbar(props) {
const language = window.language;

12
src/components/widgets/search/Search.jsx
View File

@@ -70,13 +70,11 @@ export default class Search extends React.PureComponent {
render() {
return (
<>
<form action={this.state.url} id='searchBar'>
{this.state.microphone}
<SearchIcon onClick={() => this.searchButton()} id='searchButton'/>
<input type='text' placeholder={this.language} name={this.state.query} id='searchtext'/>
</form>
</>
<form action={this.state.url} className='searchBar'>
{this.state.microphone}
<SearchIcon onClick={() => this.searchButton()} id='searchButton'/>
<input type='text' placeholder={this.language} name={this.state.query} id='searchtext'/>
</form>
);
}
}

2
src/components/widgets/search/search.scss
View File

@@ -1,6 +1,6 @@
@import '../../../scss/variables';
#searchBar {
.searchBar {
position: absolute;
left: 20px;
top: 20px;