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

style: Unified spacing to 2 and add editor config

Browse Source
This commit is contained in:
Wessel Tip
2021-03-17 14:01:53 +01:00
parent aec47d9d0b
commit 9981a28638
98 changed files with 2931 additions and 2902 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/modals/Feedback.jsx
View File

@@ -1,23 +1,23 @@
import React from 'react';
export default function FeedbackModal(props) {
return (
<div className='feedback'>
<h1>{props.language.modals.feedback.title}</h1>
<span className='closeModal' onClick={props.modalClose}>&times;</span>
<label>{props.language.modals.feedback.question_one}</label>
<br/><br/>
<label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
<br/><br/>
<label>{props.language.modals.feedback.question_two}</label>
<br/><br/>
<input type='text'/>
<br/><br/>
<label>{props.language.modals.feedback.question_three}</label>
<br/><br/>
<label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
<br/><br/><br/>
<button>{props.language.modals.feedback.submit}</button>
</div>
);
}
return (
<div className='feedback'>
<h1>{props.language.modals.feedback.title}</h1>
<span className='closeModal' onClick={props.modalClose}>&times;</span>
<label>{props.language.modals.feedback.question_one}</label>
<br/><br/>
<label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
<br/><br/>
<label>{props.language.modals.feedback.question_two}</label>
<br/><br/>
<input type='text'/>
<br/><br/>
<label>{props.language.modals.feedback.question_three}</label>
<br/><br/>
<label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
<br/><br/><br/>
<button>{props.language.modals.feedback.submit}</button>
</div>
);
}

2
src/components/modals/Main.jsx
View File

@@ -26,4 +26,4 @@ export default function MainModal(props) {
</div>
</div>
);
}
}

16
src/components/modals/Update.jsx
View File

@@ -16,7 +16,7 @@ export default class Update extends React.PureComponent {
async getUpdate() {
const data = await (await fetch(Constants.API_URL + '/getUpdate')).json();
if (data.statusCode === 500 || data.title === null) {
const supportText = `<br/><p>${this.props.language.contact_support}: <a target='_blank' class='modalLink' href='https://muetab.com/contact'>https://muetab.com/contact</a></p>`;
return this.setState({
@@ -47,11 +47,11 @@ export default class Update extends React.PureComponent {
render() {
return <div className='updateContent'>
<span className='closeModal' onClick={this.props.modalClose}>&times;</span>
<h1 style={{ 'marginBottom': '-10px' }}>{this.state.title}</h1>
<h5 style={{ 'lineHeight': '0px' }}>{this.state.date}</h5>
{this.state.image ? <img draggable='false' src={this.state.image} alt='Update'></img> : null}
<p dangerouslySetInnerHTML={{ __html: this.state.html }}></p>
<span className='closeModal' onClick={this.props.modalClose}>&times;</span>
<h1 style={{ 'marginBottom': '-10px' }}>{this.state.title}</h1>
<h5 style={{ 'lineHeight': '0px' }}>{this.state.date}</h5>
{this.state.image ? <img draggable='false' src={this.state.image} alt='Update'></img> : null}
<p dangerouslySetInnerHTML={{ __html: this.state.html }}></p>
</div>;
}
}
}
}

32
src/components/modals/Welcome.jsx
View File

@@ -7,20 +7,20 @@ import ForumIcon from '@material-ui/icons/Forum';
export default function WelcomeModal(props) {
return (
<div className='welcomeContent'>
<span className='closeModal' onClick={props.modalClose}>&times;</span>
<div className='welcomeModalText'>
<h2 className='subtitle'>{props.language.title}</h2>
<h1 className='welcometitle'>Mue Tab</h1>
<img alt='celebration' style={{ 'height': '200px', 'width': 'auto' }} draggable={false} src='./././icons/undraw_celebration.svg' />
<h2 className='subtitle'>{props.language.information}</h2>
<p>{props.language.thankyoumessage1},<br/> {props.language.thankyoumessage2}</p>
<h2 className='subtitle'>{props.language.support}</h2>
<a href='mailto:hello@muetab.com' className='welcomeLink' target='_blank' rel='noopener noreferrer'><EmailIcon/></a>
<a href='https://twitter.com/getmue' className='welcomeLink' target='_blank' rel='noopener noreferrer'><TwitterIcon/></a>
<a href='https://discord.gg/zv8C9F8' className='welcomeLink' target='_blank' rel='noopener noreferrer'><ForumIcon/></a>
<br/>
<button className='close' onClick={props.modalClose}>{props.language.close}</button>
</div>
</div>
<span className='closeModal' onClick={props.modalClose}>&times;</span>
<div className='welcomeModalText'>
<h2 className='subtitle'>{props.language.title}</h2>
<h1 className='welcometitle'>Mue Tab</h1>
<img alt='celebration' style={{ 'height': '200px', 'width': 'auto' }} draggable={false} src='./././icons/undraw_celebration.svg' />
<h2 className='subtitle'>{props.language.information}</h2>
<p>{props.language.thankyoumessage1},<br/> {props.language.thankyoumessage2}</p>
<h2 className='subtitle'>{props.language.support}</h2>
<a href='mailto:hello@muetab.com' className='welcomeLink' target='_blank' rel='noopener noreferrer'><EmailIcon/></a>
<a href='https://twitter.com/getmue' className='welcomeLink' target='_blank' rel='noopener noreferrer'><TwitterIcon/></a>
<a href='https://discord.gg/zv8C9F8' className='welcomeLink' target='_blank' rel='noopener noreferrer'><ForumIcon/></a>
<br/>
<button className='close' onClick={props.modalClose}>{props.language.close}</button>
</div>
</div>
);
}
}

114
src/components/modals/marketplace/Item.jsx
View File

@@ -3,62 +3,62 @@ import React from 'react';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
export default function Item(props) {
let warningHTML;
try { // For some reason it breaks sometimes so we use try/catch
if (props.content.content.data.quote_api) {
warningHTML = (
<div className='productInformation'>
<ul>
<li className='header'>{this.props.language.quote_warning.title}</li>
<li id='updated'>{this.props.language.quote_warning.description}</li>
</ul>
</div>
);
}
} catch (e) {
// ignore
}
let iconsrc = 'https://external-content.duckduckgo.com/iu/?u=' + props.data.icon; // prevent console error
if (!props.data.icon) {
iconsrc = null;
}
return (
<div id='item'>
<br/>
<ArrowBackIcon className='backArrow' onClick={props.function} />
<br/>
<h1>{props.data.name}</h1>
{props.button}
<br/><br/>
<img alt='product' draggable={false} src={iconsrc} />
<div className='informationContainer'>
<div className='productInformation'>
<h4>{props.language.information}</h4>
<ul>
<br/>
<li className='header'>{props.language.last_updated}</li>
<li>{props.data.updated}</li>
<br/>
<li className='header'>{props.language.version}</li>
<li>{props.data.version}</li>
<br/>
<li className='header'>{props.language.author}</li>
<li>{props.data.author}</li>
</ul>
</div>
<div className='productInformation'>
<ul>
<li className='header'>{props.language.notice.title}</li>
<li id='updated'>{props.language.notice.description}</li>
</ul>
</div>
{warningHTML}
let warningHTML;
try { // For some reason it breaks sometimes so we use try/catch
if (props.content.content.data.quote_api) {
warningHTML = (
<div className='productInformation'>
<ul>
<li className='header'>{this.props.language.quote_warning.title}</li>
<li id='updated'>{this.props.language.quote_warning.description}</li>
</ul>
</div>
<br/>
<h1>{props.language.overview}</h1>
<p className='description' dangerouslySetInnerHTML={{__html: props.data.description}}></p>
);
}
} catch (e) {
// ignore
}
let iconsrc = 'https://external-content.duckduckgo.com/iu/?u=' + props.data.icon; // prevent console error
if (!props.data.icon) {
iconsrc = null;
}
return (
<div id='item'>
<br/>
<ArrowBackIcon className='backArrow' onClick={props.function} />
<br/>
<h1>{props.data.name}</h1>
{props.button}
<br/><br/>
<img alt='product' draggable={false} src={iconsrc} />
<div className='informationContainer'>
<div className='productInformation'>
<h4>{props.language.information}</h4>
<ul>
<br/>
<li className='header'>{props.language.last_updated}</li>
<li>{props.data.updated}</li>
<br/>
<li className='header'>{props.language.version}</li>
<li>{props.data.version}</li>
<br/>
<li className='header'>{props.language.author}</li>
<li>{props.data.author}</li>
</ul>
</div>
<div className='productInformation'>
<ul>
<li className='header'>{props.language.notice.title}</li>
<li id='updated'>{props.language.notice.description}</li>
</ul>
</div>
{warningHTML}
</div>
);
}
<br/>
<h1>{props.language.overview}</h1>
<p className='description' dangerouslySetInnerHTML={{__html: props.data.description}}></p>
</div>
);
}

30
src/components/modals/marketplace/Items.jsx
View File

@@ -1,20 +1,20 @@
import React from 'react';
export default function Items(props) {
if (props.items.length === 0) {
return null; // todo: add message here
}
if (props.items.length === 0) {
return null; // todo: add message here
}
return (
<div className='items'>
{props.items.map((item) =>
<div className='item' onClick={() => props.toggleFunction(item.name)} key={item.name}>
<img alt='icon' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + item.icon_url} />
<div className='details'>
<h4>{item.display_name ? item.display_name : item.name}</h4>
<p>{item.author}</p>
</div>
</div>)}
return (
<div className='items'>
{props.items.map((item) =>
<div className='item' onClick={() => props.toggleFunction(item.name)} key={item.name}>
<img alt='icon' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + item.icon_url} />
<div className='details'>
<h4>{item.display_name ? item.display_name : item.name}</h4>
<p>{item.author}</p>
</div>
);
}
</div>)}
</div>
);
}

128
src/components/modals/marketplace/sections/Added.jsx
View File

@@ -11,82 +11,82 @@ export default class Added extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
installed: JSON.parse(localStorage.getItem('installed')),
current_data: {
type: '',
name: '',
content: {}
},
item_data: {
name: 'Name',
author: 'Author',
description: 'Description',
updated: '???',
version: '1.0.0',
icon: ''
},
button: ''
installed: JSON.parse(localStorage.getItem('installed')),
current_data: {
type: '',
name: '',
content: {}
},
item_data: {
name: 'Name',
author: 'Author',
description: 'Description',
updated: '???',
version: '1.0.0',
icon: ''
},
button: ''
}
this.buttons = {
uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>Remove</button>,
uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>Remove</button>,
}
}
toggle(type, type2, data) {
if (type === 'item') {
const installed = JSON.parse(localStorage.getItem('installed'));
const info = installed.find(i => i.name === data);
const installed = JSON.parse(localStorage.getItem('installed'));
const info = installed.find(i => i.name === data);
this.setState({
current_data: {
type: type2,
name: data,
content: info
},
item_data: {
name: info.name,
author: info.author,
description: MarketplaceFunctions.urlParser(info.description.replace(/\n/g, '<br>')),
updated: 'Not Implemented',
version: info.version,
icon: info.screenshot_url
}
});
this.setState({
current_data: {
type: type2,
name: data,
content: info
},
item_data: {
name: info.name,
author: info.author,
description: MarketplaceFunctions.urlParser(info.description.replace(/\n/g, '<br>')),
updated: 'Not Implemented',
version: info.version,
icon: info.screenshot_url
}
});
document.getElementById('item').style.display = 'block';
document.getElementById('marketplace').style.display = 'none';
} else {
document.getElementById('marketplace').style.display = 'block';
document.getElementById('item').style.display = 'none';
document.getElementById('item').style.display = 'block';
document.getElementById('marketplace').style.display = 'none';
} else {
document.getElementById('marketplace').style.display = 'block';
document.getElementById('item').style.display = 'none';
}
this.setState({
button: this.buttons.uninstall
this.setState({
button: this.buttons.uninstall
});
}
manage(type, input) {
switch (type) {
case 'install':
MarketplaceFunctions.install(input.type, input, true);
break;
case 'uninstall':
MarketplaceFunctions.uninstall(this.state.current_data.name, this.state.current_data.content.type);
break;
default:
break;
case 'install':
MarketplaceFunctions.install(input.type, input, true);
break;
case 'uninstall':
MarketplaceFunctions.uninstall(this.state.current_data.name, this.state.current_data.content.type);
break;
default:
break;
}
toast(this.props.toastLanguage[type + 'ed']);
let button = '';
if (type === 'install') {
button = this.buttons.uninstall;
button = this.buttons.uninstall;
}
this.setState({
button: button,
installed: JSON.parse(localStorage.getItem('installed'))
this.setState({
button: button,
installed: JSON.parse(localStorage.getItem('installed'))
});
}
@@ -94,26 +94,26 @@ export default class Added extends React.PureComponent {
let content = <Items items={this.state.installed} toggleFunction={(input) => this.toggle('item', 'addon', input)} />;
if (this.state.installed.length === 0) {
content = (
<div className='items'>
<div className='emptyMessage'>
<LocalMallIcon/>
<h1>Empty</h1>
<p className='description'>Nothing here (yet)</p>
<button className='goToMarket'>Take me there</button>
</div>
content = (
<div className='items'>
<div className='emptyMessage'>
<LocalMallIcon/>
<h1>Empty</h1>
<p className='description'>Nothing here (yet)</p>
<button className='goToMarket'>Take me there</button>
</div>
);
</div>
);
}
return (
<React.Fragment>
<React.Fragment>
<div id='marketplace'>
<FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.manage('install', JSON.parse(e.target.result))} />
<button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>Sideload</button>
{content}
</div>
</React.Fragment>
</React.Fragment>
);
}
}
}

198
src/components/modals/marketplace/sections/Marketplace.jsx
View File

@@ -15,94 +15,94 @@ export default class Marketplace extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
items: [],
current_data: {
type: '',
name: '',
content: {}
},
button: '',
featured: {},
done: false,
item_data: {
name: 'Name',
author: 'Author',
description: 'Description',
updated: '???',
version: '1.0.0',
icon: ''
}
}
this.buttons = {
uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>Remove</button>,
install: <button className='addToMue' onClick={() => this.manage('install')}>Add to Mue</button>
items: [],
current_data: {
type: '',
name: '',
content: {}
},
button: '',
featured: {},
done: false,
item_data: {
name: 'Name',
author: 'Author',
description: 'Description',
updated: '???',
version: '1.0.0',
icon: ''
}
}
this.buttons = {
uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>Remove</button>,
install: <button className='addToMue' onClick={() => this.manage('install')}>Add to Mue</button>
}
}
async toggle(type, data) {
switch (type) {
case 'item':
let info; // get item info
try {
info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`)).json();
} catch (e) {
return toast(this.props.toastLanguage.error);
}
case 'item':
let info; // get item info
try {
info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`)).json();
} catch (e) {
return toast(this.props.toastLanguage.error);
}
// check if already installed
let button = this.buttons.install;
let button = this.buttons.install;
const installed = JSON.parse(localStorage.getItem('installed'));
const installed = JSON.parse(localStorage.getItem('installed'));
if (installed.some(item => item.name === data)) {
button = this.buttons.uninstall;
}
this.setState({
current_data: { type: this.props.type, name: data, content: info },
item_data: {
name: info.data.name,
author: info.data.author,
description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '<br>')),
updated: info.updated,
version: info.data.version,
icon: info.data.screenshot_url
},
button: button
});
document.getElementById('marketplace').style.display = 'none';
document.getElementById('item').style.display = 'block';
break;
default:
document.getElementById('marketplace').style.display = 'block';
document.getElementById('item').style.display = 'none';
break;
if (installed.some(item => item.name === data)) {
button = this.buttons.uninstall;
}
}
this.setState({
current_data: { type: this.props.type, name: data, content: info },
item_data: {
name: info.data.name,
author: info.data.author,
description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '<br>')),
updated: info.updated,
version: info.data.version,
icon: info.data.screenshot_url
},
button: button
});
document.getElementById('marketplace').style.display = 'none';
document.getElementById('item').style.display = 'block';
break;
default:
document.getElementById('marketplace').style.display = 'block';
document.getElementById('item').style.display = 'none';
break;
}
}
async getItems() {
const { data } = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json();
const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json();
this.setState({
items: data[this.props.type],
featured: featured.data,
done: true
items: data[this.props.type],
featured: featured.data,
done: true
});
}
manage(type) {
switch (type) {
case 'install':
MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data);
break;
case 'uninstall':
MarketplaceFunctions.uninstall(this.state.current_data.content.data.name, this.state.current_data.type);
break;
default:
break;
case 'install':
MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data);
break;
case 'uninstall':
MarketplaceFunctions.uninstall(this.state.current_data.content.data.name, this.state.current_data.type);
break;
default:
break;
}
toast(this.props.toastLanguage[type + 'ed']);
@@ -125,31 +125,31 @@ export default class Marketplace extends React.PureComponent {
render() {
const errorMessage = (msg) => {
return (
<div id='marketplace'>
<div className='emptyMessage' style={{ 'marginTop': '20px', 'transform': 'translateY(80%)' }}>
{msg}
</div>
</div>
);
return (
<div id='marketplace'>
<div className='emptyMessage' style={{ 'marginTop': '20px', 'transform': 'translateY(80%)' }}>
{msg}
</div>
</div>
);
}
if (navigator.onLine === false) {
return errorMessage(
<React.Fragment>
<WifiOffIcon/>
<h1>Offline</h1>
<p className='description'>Mue down!</p>
</React.Fragment>
);
return errorMessage(
<React.Fragment>
<WifiOffIcon/>
<h1>Offline</h1>
<p className='description'>Mue down!</p>
</React.Fragment>
);
}
if (localStorage.getItem('offlineMode') === 'true') {
return errorMessage(
<React.Fragment>
<WifiOffIcon/>
<h1>Offline mode is enabled</h1>
<p className='description'>Please turn off offline mode to access the marketplace</p>
<WifiOffIcon/>
<h1>Offline mode is enabled</h1>
<p className='description'>Please turn off offline mode to access the marketplace</p>
</React.Fragment>
);
}
@@ -159,18 +159,18 @@ export default class Marketplace extends React.PureComponent {
}
return (
<React.Fragment>
<div id='marketplace'>
<div className='featured' style={{ 'backgroundColor': this.state.featured.colour }}>
<p>{this.state.featured.title}</p>
<h1>{this.state.featured.name}</h1>
<button className='addToMue' onClick={() => window.location.href = this.state.featured.buttonLink}>{this.state.featured.buttonText}</button>
</div>
<Items
items={this.state.items.slice(0, 3)}
toggleFunction={(input) => this.toggle('item', input)} />
</div>
</React.Fragment>
);
}
}
<React.Fragment>
<div id='marketplace'>
<div className='featured' style={{ 'backgroundColor': this.state.featured.colour }}>
<p>{this.state.featured.title}</p>
<h1>{this.state.featured.name}</h1>
<button className='addToMue' onClick={() => window.location.href = this.state.featured.buttonLink}>{this.state.featured.buttonText}</button>
</div>
<Items
items={this.state.items.slice(0, 3)}
toggleFunction={(input) => this.toggle('item', input)} />
</div>
</React.Fragment>
);
}
}

10
src/components/modals/settings/Checkbox.jsx
View File

@@ -15,15 +15,15 @@ export default class Checkbox extends React.PureComponent {
handleChange(name) {
SettingsFunctions.setItem(name);
this.setState({
checked: (this.state.checked === true) ? false : true
this.setState({
checked: (this.state.checked === true) ? false : true
});
}
render() {
let text = this.props.text;
if (this.props.newFeature) {
text = <span>{this.props.text} <span className='newFeature'> NEW</span></span>;
} else if (this.props.betaFeature) {
@@ -40,4 +40,4 @@ export default class Checkbox extends React.PureComponent {
</React.Fragment>
);
}
}
}

2
src/components/modals/settings/Dropdown.jsx
View File

@@ -17,4 +17,4 @@ export default class Dropdown extends React.PureComponent {
</React.Fragment>
);
}
}
}

24
src/components/modals/settings/FileUpload.jsx
View File

@@ -5,24 +5,24 @@ import { toast } from 'react-toastify';
export default class FileUpload extends React.PureComponent {
componentDidMount() {
document.getElementById(this.props.id).onchange = (e) => {
const reader = new FileReader();
const file = e.target.files[0];
const reader = new FileReader();
const file = e.target.files[0];
if (this.props.type === 'settings') {
reader.readAsText(file, 'UTF-8');
} else { // background upload
if (file.size > 2000000) {
return toast('File is over 2MB');
}
reader.readAsDataURL(file);
if (this.props.type === 'settings') {
reader.readAsText(file, 'UTF-8');
} else { // background upload
if (file.size > 2000000) {
return toast('File is over 2MB');
}
reader.addEventListener('load', (e) => this.props.loadFunction(e));
reader.readAsDataURL(file);
}
reader.addEventListener('load', (e) => this.props.loadFunction(e));
};
}
render() {
return <input id={this.props.id} type='file' className='hidden' accept={this.props.accept} />;
}
}
}

14
src/components/modals/settings/Slider.jsx
View File

@@ -15,17 +15,17 @@ export default class Slider extends React.PureComponent {
SettingsFunctions.setItem(setText);
this.setState({
checked: (this.state.checked === true) ? false : true
this.setState({
checked: (this.state.checked === true) ? false : true
});
}
render() {
return (
<label className='switch'>
<input type='checkbox' checked={this.state.checked} onChange={() => this.handleChange()} />
<span className='slider'></span>
</label>
<label className='switch'>
<input type='checkbox' checked={this.state.checked} onChange={() => this.handleChange()} />
<span className='slider'></span>
</label>
);
}
}
}

48
src/components/modals/settings/sections/About.jsx
View File

@@ -25,9 +25,9 @@ export default class About extends React.PureComponent {
updateMsg = 'Update available: ' + version;
}
this.setState({
contributors: contributors, // TODO: REMOVE BOTS AND MAKE IT ACTUALLY WORK,
update: updateMsg
this.setState({
contributors: contributors, // TODO: REMOVE BOTS AND MAKE IT ACTUALLY WORK,
update: updateMsg
});
}
@@ -38,27 +38,27 @@ export default class About extends React.PureComponent {
render() {
return (
<div>
<h2>About</h2>
<img draggable='false' style={{'height': '100px', 'width': 'auto'}} src='https://raw.githubusercontent.com/mue/branding/master/logo/logo_horizontal.png' alt='Mue logo'></img>
<p>Copyright 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)</p>
<p>Version {Constants.VERSION} ({this.state.update})</p>
<h3>Resources Used</h3>
<p>Pexels (Background Images)</p>
<p>Google (Pin Icon)</p>
<h3>Contributors</h3>
{this.state.contributors.map((item) =>
<Tooltip title={item.login} placement='top' key={item.login}>
<a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
</Tooltip>
)}
{other_contributors.map((item) => // for those who contributed without opening a pull request
<Tooltip title={item.login} placement='top' key={item.login}>
<a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
</Tooltip>
)}
<h3>Supporters</h3>
<p>to be implemented</p>
<h2>About</h2>
<img draggable='false' style={{'height': '100px', 'width': 'auto'}} src='https://raw.githubusercontent.com/mue/branding/master/logo/logo_horizontal.png' alt='Mue logo'></img>
<p>Copyright 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)</p>
<p>Version {Constants.VERSION} ({this.state.update})</p>
<h3>Resources Used</h3>
<p>Pexels (Background Images)</p>
<p>Google (Pin Icon)</p>
<h3>Contributors</h3>
{this.state.contributors.map((item) =>
<Tooltip title={item.login} placement='top' key={item.login}>
<a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
</Tooltip>
)}
{other_contributors.map((item) => // for those who contributed without opening a pull request
<Tooltip title={item.login} placement='top' key={item.login}>
<a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
</Tooltip>
)}
<h3>Supporters</h3>
<p>to be implemented</p>
</div>
);
}
}
}

94
src/components/modals/settings/sections/Advanced.jsx
View File

@@ -8,52 +8,52 @@ import SettingsFunctions from '../../../../modules/helpers/settings';
import { toast } from 'react-toastify';
export default class AdvancedSettings extends React.PureComponent {
resetItem() {
document.getElementById('customcss').value = '';
toast(this.props.toastLanguage.reset);
}
componentDidMount() {
document.getElementById('customcss').value = localStorage.getItem('customcss');
}
settingsImport(e) {
const content = JSON.parse(e.target.result);
for (const key of Object.keys(content)) {
localStorage.setItem(key, content[key]);
}
toast(this.props.toastLanguage.imported);
}
componentWillUnmount() {
localStorage.setItem('customcss', document.getElementById('customcss').value);
resetItem() {
document.getElementById('customcss').value = '';
toast(this.props.toastLanguage.reset);
}
componentDidMount() {
document.getElementById('customcss').value = localStorage.getItem('customcss');
}
settingsImport(e) {
const content = JSON.parse(e.target.result);
for (const key of Object.keys(content)) {
localStorage.setItem(key, content[key]);
}
render() {
return (
<div>
<h2>Advanced</h2>
<Checkbox name='offlineMode' text='Offline Mode' />
<h3>Data</h3>
<button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>Reset</button>
<button className='export' onClick={() => SettingsFunctions.exportSettings()}>Export</button>
<button className='import' onClick={() => document.getElementById('file-input').click()}>Import</button>
<FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)} />
<h3>Customisation</h3>
<ul>
<p>Custom CSS <span className='modalLink' onClick={() => this.resetItem()}>Reset</span></p>
<textarea id='customcss'></textarea>
</ul>
<ul>
<p>Custom JS <span className='modalLink' onClick={() => this.resetItem()}>Reset</span></p>
<textarea id='customjs'></textarea>
</ul>
<h3>Experimental</h3>
<p>Please note that the Mue team cannot provide support if you have experimental mode on. Please disable it first and see if the issues continue to occur before contacting support.</p>
<Checkbox name='experimental' text='Enabled' />
</div>
);
}
}
toast(this.props.toastLanguage.imported);
}
componentWillUnmount() {
localStorage.setItem('customcss', document.getElementById('customcss').value);
}
render() {
return (
<div>
<h2>Advanced</h2>
<Checkbox name='offlineMode' text='Offline Mode' />
<h3>Data</h3>
<button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>Reset</button>
<button className='export' onClick={() => SettingsFunctions.exportSettings()}>Export</button>
<button className='import' onClick={() => document.getElementById('file-input').click()}>Import</button>
<FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)} />
<h3>Customisation</h3>
<ul>
<p>Custom CSS <span className='modalLink' onClick={() => this.resetItem()}>Reset</span></p>
<textarea id='customcss'></textarea>
</ul>
<ul>
<p>Custom JS <span className='modalLink' onClick={() => this.resetItem()}>Reset</span></p>
<textarea id='customjs'></textarea>
</ul>
<h3>Experimental</h3>
<p>Please note that the Mue team cannot provide support if you have experimental mode on. Please disable it first and see if the issues continue to occur before contacting support.</p>
<Checkbox name='experimental' text='Enabled' />
</div>
);
}
}

28
src/components/modals/settings/sections/Appearance.jsx
View File

@@ -4,19 +4,19 @@ import Checkbox from '../Checkbox';
export default function AppearanceSettings (props) {
return (
<div>
<h2>{props.language.title}</h2>
<Checkbox name='darkTheme' text={props.language.dark} />
<Checkbox name='brightnessTime' text={props.language.night_mode} betaFeature={true} />
<h3>Accessibility</h3>
<Checkbox name='animations' text={props.language.animations} betaFeature={true} />
<ul>
<p>Zoom (100%) <span className='modalLink'>{props.language.reset}</span></p>
<input className='range' type='range' min='50' max='200' value={100} />
</ul>
<ul>
<p>Toast Duration (2500 milliseconds) <span className='modalLink'>{props.language.reset}</span></p>
<input className='range' type='range' min='50' max='200' value={100} />
</ul>
<h2>{props.language.title}</h2>
<Checkbox name='darkTheme' text={props.language.dark} />
<Checkbox name='brightnessTime' text={props.language.night_mode} betaFeature={true} />
<h3>Accessibility</h3>
<Checkbox name='animations' text={props.language.animations} betaFeature={true} />
<ul>
<p>Zoom (100%) <span className='modalLink'>{props.language.reset}</span></p>
<input className='range' type='range' min='50' max='200' value={100} />
</ul>
<ul>
<p>Toast Duration (2500 milliseconds) <span className='modalLink'>{props.language.reset}</span></p>
<input className='range' type='range' min='50' max='200' value={100} />
</ul>
</div>
);
}
}

128
src/components/modals/settings/sections/Background.jsx
View File

@@ -31,30 +31,30 @@ export default class BackgroundSettings extends React.PureComponent {
switch (key) {
case 'customBackgroundColour':
localStorage.setItem('customBackgroundColour', '');
this.setState({
gradientSettings: this.DefaultGradientSettings
this.setState({
gradientSettings: this.DefaultGradientSettings
});
break;
case 'customBackground':
document.getElementById('customBackground').value = '';
case 'customBackground':
document.getElementById('customBackground').value = '';
break;
case 'blur':
localStorage.setItem('blur', 0);
this.setState({
blur: 0
this.setState({
blur: 0
});
break;
case 'brightness':
localStorage.setItem('brightness', 100);
this.setState({
brightness: 100
this.setState({
brightness: 100
});
break;
default:
default:
toast('resetItem requires a key!');
}
@@ -147,21 +147,21 @@ export default class BackgroundSettings extends React.PureComponent {
}
this.setState({
gradientSettings: {
'angle': attrs.degree,
'gradient': attrs.points.map((p) => {
return {
'colour': '#' + rgbToHex(p.red, p.green, p.blue),
'stop': p.left
} }),
'type': attrs.type
gradientSettings: {
'angle': attrs.degree,
'gradient': attrs.points.map((p) => {
return {
'colour': '#' + rgbToHex(p.red, p.green, p.blue),
'stop': p.left
}}),
'type': attrs.type
}
});
};
fileUpload(e) {
localStorage.setItem('customBackground', e.target.result);
this.setState({
this.setState({
customBackground: e.target.result
});
}
@@ -186,7 +186,7 @@ export default class BackgroundSettings extends React.PureComponent {
if (this.GradientPickerInitalState === undefined) {
this.InitializeColorPickerState(this.state.gradientSettings);
}
gradientInputs = (
<ColorPicker
onStartChange={(color) => this.onColorPickerChange(color, 'start')}
@@ -217,50 +217,50 @@ export default class BackgroundSettings extends React.PureComponent {
}
return (
<div>
<h2>Background</h2>
<Checkbox name='background' text='Enabled' />
<h3>Buttons</h3>
<ul>
<Checkbox name='view' text={this.props.language.view} />
<Checkbox name='favouriteEnabled' text={this.props.language.favourite} />
<Checkbox name='refresh' text={this.props.language.refresh} />
</ul>
<h3>Effects</h3>
<ul>
<p>{this.props.language.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
<input className='range' type='range' min='0' max='100' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
</ul>
<ul>
<p>{this.props.language.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
<input className='range' type='range' min='0' max='100' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
</ul>
<h3>Source</h3>
<ul>
<Dropdown
label={this.props.language.api}
name='backgroundapi'
id='backgroundAPI'
onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} >
<option className='choices' value='mue'>Mue</option>
<option className='choices' value='unsplash'>Unsplash</option>
</Dropdown>
</ul>
<ul>
<p>{this.props.language.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>
</ul>
<ul>
<p>{this.props.language.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.upload}</button>
<FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' loadFunction={(e) => this.fileUpload(e)} />
</ul>
<ul>
<p>{this.props.language.custom_colour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
<input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
{colourSettings}
</ul>
</div>
<div>
<h2>Background</h2>
<Checkbox name='background' text='Enabled' />
<h3>Buttons</h3>
<ul>
<Checkbox name='view' text={this.props.language.view} />
<Checkbox name='favouriteEnabled' text={this.props.language.favourite} />
<Checkbox name='refresh' text={this.props.language.refresh} />
</ul>
<h3>Effects</h3>
<ul>
<p>{this.props.language.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
<input className='range' type='range' min='0' max='100' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
</ul>
<ul>
<p>{this.props.language.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
<input className='range' type='range' min='0' max='100' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
</ul>
<h3>Source</h3>
<ul>
<Dropdown
label={this.props.language.api}
name='backgroundapi'
id='backgroundAPI'
onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} >
<option className='choices' value='mue'>Mue</option>
<option className='choices' value='unsplash'>Unsplash</option>
</Dropdown>
</ul>
<ul>
<p>{this.props.language.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>
</ul>
<ul>
<p>{this.props.language.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.upload}</button>
<FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' loadFunction={(e) => this.fileUpload(e)} />
</ul>
<ul>
<p>{this.props.language.custom_colour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
<input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
{colourSettings}
</ul>
</div>
);
}
}
}

3
src/components/modals/settings/sections/Experimental.jsx
View File

@@ -4,7 +4,6 @@ import Checkbox from '../Checkbox';
export default function ExperimentalSettings (props) {
return (
<div>
</div>
);
}
}

26
src/components/modals/settings/sections/Greeting.jsx
View File

@@ -9,29 +9,29 @@ export default class GreetingSettings extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
birthday: new Date(localStorage.getItem('birthday')) || new Date(),
greetingName: localStorage.getItem('greetingName') || ''
birthday: new Date(localStorage.getItem('birthday')) || new Date(),
greetingName: localStorage.getItem('greetingName') || ''
};
}
resetItem() {
this.setState({
greetingName: ''
this.setState({
greetingName: ''
});
toast(this.props.toastLanguage.reset);
}
changeDate(data) {
if (data === 'reset') {
return; //soon
}
if (data === 'reset') {
return; //soon
}
localStorage.setItem('birthday', data);
this.setState({
birthday: data
});
localStorage.setItem('birthday', data);
this.setState({
birthday: data
});
}
componentDidUpdate() {
@@ -58,4 +58,4 @@ export default class GreetingSettings extends React.PureComponent {
</div>
);
}
}
}

12
src/components/modals/settings/sections/Language.jsx
View File

@@ -12,15 +12,15 @@ export default function LanguageSettings (props) {
name='language'
id='language'
onChange={() => localStorage.setItem('language', document.getElementById('language').value)}>
{languages.map(language =>
<option className='choices' value={language.code} key={language.code}>{language.text}</option>
)}
{languages.map(language =>
<option className='choices' value={language.code} key={language.code}>{language.text}</option>
)}
</Dropdown>
<h4 htmlFor='quotelanguage' className='nodropdown'>Quote {props.language.language}</h4>
<Dropdown label={props.language.language} name='quotelanguage' id='quotelanguage' onChange={() => localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}>
<option className='choices' value='English'>English</option>
<option className='choices' value='French'>Français</option>
<option className='choices' value='English'>English</option>
<option className='choices' value='French'>Français</option>
</Dropdown>
</div>
);
}
}

2
src/components/modals/settings/sections/Quote.jsx
View File

@@ -13,4 +13,4 @@ export default function QuoteSettings (props) {
<Checkbox name='favouriteQuoteEnabled' text={props.language.favourite} />
</div>
);
}
}

58
src/components/modals/settings/sections/Search.jsx
View File

@@ -11,7 +11,7 @@ export default class SearchSettings extends React.PureComponent {
resetSearch() {
localStorage.removeItem('customSearchEngine');
document.getElementById('customSearchEngine').value = '';
toast(this.props.toastLanguage.reset);
}
@@ -23,7 +23,7 @@ export default class SearchSettings extends React.PureComponent {
input.style.display = 'block';
input.enabled = 'true';
document.getElementById('customSearchEngine').value = localStorage.getItem('customSearchEngine');
} else {
localStorage.removeItem('customSearchEngine');
@@ -36,8 +36,8 @@ export default class SearchSettings extends React.PureComponent {
if (document.getElementById('searchEngineInput').enabled === 'true') {
const input = document.getElementById('customSearchEngine').value;
if (input) {
localStorage.setItem('searchEngine', 'custom');
localStorage.setItem('customSearchEngine', input);
localStorage.setItem('searchEngine', 'custom');
localStorage.setItem('customSearchEngine', input);
}
}
}
@@ -45,36 +45,36 @@ export default class SearchSettings extends React.PureComponent {
setSearchEngine(input) {
const searchEngineInput = document.getElementById('searchEngineInput');
if (input === 'custom') {
searchEngineInput.enabled = 'true';
searchEngineInput.style.display = 'block';
searchEngineInput.enabled = 'true';
searchEngineInput.style.display = 'block';
} else {
searchEngineInput.style.display = 'none';
searchEngineInput.enabled = 'false';
localStorage.setItem('searchEngine', input);
searchEngineInput.style.display = 'none';
searchEngineInput.enabled = 'false';
localStorage.setItem('searchEngine', input);
}
}
render() {
return (
<div className='section'>
<h2>Search</h2>
<Checkbox name='voiceSearch' text={this.props.language.voice_search} />
<ul>
<Dropdown label={this.props.language.search_engine}
name='searchEngine'
id='searchEngine'
onChange={() => this.setSearchEngine(document.getElementById('searchEngine').value)} >
{searchEngines.map((engine) =>
<option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
)}
<option className='choices' value='custom'>Custom</option>
</Dropdown>
</ul>
<ul id='searchEngineInput' style={{ display: 'none' }}>
<p style={{ 'marginTop': '0px' }}>{this.props.language.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
<input type='text' id='customSearchEngine'></input>
</ul>
</div>
<div className='section'>
<h2>Search</h2>
<Checkbox name='voiceSearch' text={this.props.language.voice_search} />
<ul>
<Dropdown label={this.props.language.search_engine}
name='searchEngine'
id='searchEngine'
onChange={() => this.setSearchEngine(document.getElementById('searchEngine').value)} >
{searchEngines.map((engine) =>
<option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
)}
<option className='choices' value='custom'>Custom</option>
</Dropdown>
</ul>
<ul id='searchEngineInput' style={{ display: 'none' }}>
<p style={{ 'marginTop': '0px' }}>{this.props.language.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
<input type='text' id='customSearchEngine'></input>
</ul>
</div>
);
}
}
}

2
src/components/modals/settings/sections/Time.jsx
View File

@@ -24,4 +24,4 @@ export default function TimeSettings (props) {
</Dropdown>
</div>
);
}
}

26
src/components/modals/tabs/Addons.jsx
View File

@@ -5,16 +5,16 @@ import Added from '../marketplace/sections/Added';
import AddonsTabs from './backend/Tabs';
export default function Addons (props) {
return (
<React.Fragment>
<AddonsTabs>
<div label='Added'>
<Added/>
</div>
<div label=''>
</div>
</AddonsTabs>
</React.Fragment>
);
}
return (
<React.Fragment>
<AddonsTabs>
<div label='Added'>
<Added/>
</div>
<div label=''>
</div>
</AddonsTabs>
</React.Fragment>
);
}

26
src/components/modals/tabs/Marketplace.jsx
View File

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

78
src/components/modals/tabs/Settings.jsx
View File

@@ -13,43 +13,43 @@ import Advanced from '../settings/sections/Advanced';
import SettingsTabs from './backend/Tabs';
export default function Settings (props) {
return (
<React.Fragment>
<SettingsTabs>
<div label={props.language.sections.time.title}>
<Time language={props.language.sections.time}/>
</div>
<div label={props.language.sections.quote.title}>
<Quote language={props.language.sections.quote}/>
</div>
<div label={props.language.sections.greeting.title}>
<Greeting language={props.language.sections.greeting} toastLanguage={props.language.toasts} />
</div>
<div label={props.language.sections.background.title}>
<Background language={props.language.sections.background} toastLanguage={props.toastLanguage}/>
</div>
<div label={props.language.sections.search.title}>
<Search language={props.language.sections.search}/>
</div>
<div label={props.language.sections.appearance}>
<Appearance language={props.language.sections.appearance} toastLanguage={props.toastLanguage}/>
</div>
<div label={props.language.sections.language}>
<Language language={props.language}/>
</div>
<div label='Advanced'>
<Advanced/>
</div>
<div label='Experimental'>
return (
<React.Fragment>
<SettingsTabs>
<div label={props.language.sections.time.title}>
<Time language={props.language.sections.time}/>
</div>
<div label={props.language.sections.quote.title}>
<Quote language={props.language.sections.quote}/>
</div>
<div label={props.language.sections.greeting.title}>
<Greeting language={props.language.sections.greeting} toastLanguage={props.language.toasts} />
</div>
<div label={props.language.sections.background.title}>
<Background language={props.language.sections.background} toastLanguage={props.toastLanguage}/>
</div>
<div label={props.language.sections.search.title}>
<Search language={props.language.sections.search}/>
</div>
<div label={props.language.sections.appearance}>
<Appearance language={props.language.sections.appearance} toastLanguage={props.toastLanguage}/>
</div>
<div label={props.language.sections.language}>
<Language language={props.language}/>
</div>
<div label='Advanced'>
<Advanced/>
</div>
<div label='Experimental'>
</div>
<div label={props.language.sections.changelog}>
<About/>
</div>
<div label={props.language.sections.about.title}>
<About/>
</div>
</SettingsTabs>
</React.Fragment>
);
}
</div>
<div label={props.language.sections.changelog}>
<About/>
</div>
<div label={props.language.sections.about.title}>
<About/>
</div>
</SettingsTabs>
</React.Fragment>
);
}

120
src/components/modals/tabs/backend/Tab.jsx
View File

@@ -23,69 +23,69 @@ import Plugins from '@material-ui/icons/Widgets';
import Added from '@material-ui/icons/AddCircle';
export default class Tab extends React.PureComponent {
onClick = () => {
this.props.onClick(this.props.label);
};
onClick = () => {
this.props.onClick(this.props.label);
};
render() {
let className = 'tab-list-item';
if (this.props.currentTab === this.props.label) {
className += ' tab-list-active';
}
render() {
let className = 'tab-list-item';
if (this.props.currentTab === this.props.label) {
className += ' tab-list-active';
}
if (this.props.navbar === true) {
className = 'navbar-item';
if (this.props.currentTab === this.props.label) {
className += ' navbar-item-active';
}
}
if (this.props.navbar === true) {
className = 'navbar-item';
if (this.props.currentTab === this.props.label) {
className += ' navbar-item-active';
}
}
let icon, divider;
switch (this.props.label) {
// Navbar
case 'Settings': icon = <Settings/>; break;
case 'My Add-ons': icon = <Addons/>; break;
case 'Marketplace': icon = <Marketplace/>; break;
let icon, divider;
switch (this.props.label) {
// Navbar
case 'Settings': icon = <Settings/>; break;
case 'My Add-ons': icon = <Addons/>; break;
case 'Marketplace': icon = <Marketplace/>; break;
// Settings
case 'Time': icon = <Time/>; break;
case 'Greeting': icon = <Greeting/>; break;
case 'Quote': icon = <Quote/>; break;
case 'Background': icon = <Background/>; break;
case 'Search': icon = <Search/>; break;
case 'Appearance': icon = <Appearance/>; break;
case 'Language':
icon = <Language/>;
divider = <div><hr/></div>;
break;
case 'Advanced': icon = <Settings/>; break;
case 'Experimental':
icon = <Experimental/>;
divider = <div><hr/></div>;
break;
case 'Change Log': icon = <Changelog/>; break;
case 'About': icon = <About/>; break;
// Settings
case 'Time': icon = <Time/>; break;
case 'Greeting': icon = <Greeting/>; break;
case 'Quote': icon = <Quote/>; break;
case 'Background': icon = <Background/>; break;
case 'Search': icon = <Search/>; break;
case 'Appearance': icon = <Appearance/>; break;
case 'Language':
icon = <Language/>;
divider = <div><hr/></div>;
break;
case 'Advanced': icon = <Settings/>; break;
case 'Experimental':
icon = <Experimental/>;
divider = <div><hr/></div>;
break;
case 'Change Log': icon = <Changelog/>; break;
case 'About': icon = <About/>; break;
// Store
case 'Themes': icon = <Colors/>; break;
case 'Photo Packs': icon = <Background/>; break;
case 'Quote Packs': icon = <Quote/>; break;
case 'Plugins':
icon = <Plugins/>;
divider = <div><hr/></div>;
break;
case 'Added': icon = <Added/>; break;
default: break;
}
// Store
case 'Themes': icon = <Colors/>; break;
case 'Photo Packs': icon = <Background/>; break;
case 'Quote Packs': icon = <Quote/>; break;
case 'Plugins':
icon = <Plugins/>;
divider = <div><hr/></div>;
break;
case 'Added': icon = <Added/>; break;
return (
<React.Fragment>
<li className={className} onClick={this.onClick}>
{icon} <span>{this.props.label}</span>
</li>
{divider}
</React.Fragment>
)
}
}
default: break;
}
return (
<React.Fragment>
<li className={className} onClick={this.onClick}>
{icon} <span>{this.props.label}</span>
</li>
{divider}
</React.Fragment>
)
}
}

2
src/components/modals/tabs/backend/Tabs.jsx
View File

@@ -54,4 +54,4 @@ export default class Tabs extends React.PureComponent {
</span>
);
}
}
}