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

cleanup

Browse Source
This commit is contained in:
David Ralph
2020-12-01 12:09:50 +00:00
parent d80e9d09c8
commit 12e7ec8995
11 changed files with 48 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.jsx
View File

@@ -50,7 +50,7 @@ export default class App extends React.PureComponent {
// Render all the components
render() {
let modalClassList = 'Modal'; // Modal features
let modalClassList = 'Modal';
let tooltipClassList = 'infoCard';
if ((localStorage.getItem('brightnessTime') && new Date().getHours() > 18) || localStorage.getItem('darkTheme') === 'true') {
modalClassList += ' dark';
@@ -58,9 +58,8 @@ export default class App extends React.PureComponent {
}
const overlayClassList = (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay';
const en = require('./translations/en.json'); // User language
const languagecode = localStorage.getItem('language') || 'en';
const language = merge(en, require(`./translations/${languagecode}.json`));
const language = merge(require('./translations/en.json'), require(`./translations/${languagecode}.json`));
return (
<React.Fragment>

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

@@ -2,22 +2,24 @@ import React from 'react';
export default class Feedback extends React.PureComponent {
render() {
return <div className='feedback'>
<h1>Give us feedback</h1>
<span className='closeModal' onClick={this.props.modalClose}>&times;</span>
<label>How would you rate your experience of this Mue Build?</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>What bugs did you encounter in your use of Mue?</label>
<br/><br/>
<input type='text' />
<br/><br/>
<label>How likely would you be to recommend this version of Mue to a friend or colleague?</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>Submit</button>
</div>;
return (
<div className='feedback'>
<h1>Give us feedback</h1>
<span className='closeModal' onClick={this.props.modalClose}>&times;</span>
<label>How would you rate your experience of this Mue Build?</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>What bugs did you encounter in your use of Mue?</label>
<br/><br/>
<input type='text'/>
<br/><br/>
<label>How likely would you be to recommend this version of Mue to a friend or colleague?</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>Submit</button>
</div>
);
}
}

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

@@ -13,10 +13,13 @@ export default class MainModal extends React.PureComponent {
super(...args);
this.state = {
tab: <Settings language={this.props.language.settings} toastLanguage={this.props.language.toasts} />,
settingsActive: 'active',
addonsActive: '',
marketplaceActive: ''
currentTab: 'settings'
};
this.tabs = {
settings: <Settings language={this.props.language.settings} toastLanguage={this.props.language.toasts} />,
addons: <Addons language={this.props.language.addons} marketplaceLanguage={this.props.language.marketplace} toastLanguage={this.props.language.toasts} openMarketplace={() => this.changeEnabled('marketplace')}/>,
marketplace: <Marketplace language={this.props.language.marketplace} toastLanguage={this.props.language.toasts} updateLanguage={this.props.language.update}/>
}
}
componentDidMount() {
@@ -30,33 +33,9 @@ export default class MainModal extends React.PureComponent {
}
changeEnabled(input) {
switch (input) {
case 'addons':
this.setState({
tab: <Addons language={this.props.language.addons} marketplaceLanguage={this.props.language.marketplace} toastLanguage={this.props.language.toasts} openMarketplace={() => this.changeEnabled('marketplace')}/>,
addonsActive: 'active',
settingsActive: '',
marketplaceActive: ''
});
break;
case 'settings':
this.setState({
tab: <Settings language={this.props.language.settings} toastLanguage={this.props.language.toasts}/>,
settingsActive: 'active',
addonsActive: '',
marketplaceActive: ''
});
break;
case 'marketplace':
this.setState({
tab: <Marketplace language={this.props.language.marketplace} toastLanguage={this.props.language.toasts} updateLanguage={this.props.language.update}/>,
marketplaceActive: 'active',
addonsActive: '',
settingsActive: ''
});
break;
default: break;
}
document.getElementById(this.state.currentTab + 'TabLink').classList.toggle('active');
document.getElementById(input + 'TabLink').classList.toggle('active');
this.setState({ tab: this.tabs[input], currentTab: input });
}
render() {
@@ -65,9 +44,9 @@ export default class MainModal extends React.PureComponent {
<span className='closeModal' onClick={this.props.modalClose}>&times;</span>
<h1>{this.props.language.modals.title}</h1>
<div className='tab'>
<button className='tablinks' id={this.state.marketplaceActive} onClick={() => this.changeEnabled('marketplace')}><MarketplaceIcon/> {this.props.language.modals.marketplace}</button>
<button className='tablinks' id={this.state.addonsActive} onClick={() => this.changeEnabled('addons')}><AddonsIcon/> {this.props.language.modals.addons}</button>
<button className='tablinks' id={this.state.settingsActive} onClick={() => this.changeEnabled('settings')}><SettingsIcon/> {this.props.language.modals.settings}</button>
<button className='tablinks' id='marketplaceTabLink' onClick={() => this.changeEnabled('marketplace')}><MarketplaceIcon/> {this.props.language.modals.marketplace}</button>
<button className='tablinks' id='addonsTabLink'onClick={() => this.changeEnabled('addons')}><AddonsIcon/> {this.props.language.modals.addons}</button>
<button className='tablinks active' id='settingsTabLink' onClick={() => this.changeEnabled('settings')}><SettingsIcon/> {this.props.language.modals.settings}</button>
</div>
<br/>
{this.state.tab}

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

@@ -14,7 +14,7 @@ export default class Update extends React.PureComponent {
}
async getUpdate() {
const supportText = `<br/><p>${this.props.language.contact_support}: <a target='_blank' class='modalLink' href='https://muetab.com/contact.html'</a>https://muetab.com/contact</p>`;
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>`;
if (localStorage.getItem('offlineMode') === 'true') return this.setState({
title: this.props.language.offline.title,

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

@@ -11,7 +11,7 @@ import 'react-color-gradient-picker/dist/index.css';
import '../../../../scss/react-color-picker-gradient-picker-custom-styles.scss';
export default class BackgroundSettings extends React.PureComponent {
DefaultGradientSettings = { "angle": "180", "gradient": [{ "colour": this.props.language.background.disabled, "stop": 0 }], "type": "linear" };
DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': this.props.language.background.disabled, 'stop': 0 }], 'type': 'linear' };
GradientPickerInitalState = undefined;
constructor(...args) {

9
src/components/modals/settings/sections/GreetingSettings.jsx
View File

@@ -12,11 +12,8 @@ export default class GreetingSettings extends React.PureComponent {
};
}
resetItem(type) {
switch (type) {
case 'greeting': document.getElementById('greetingName').value = ''; break;
default: break;
}
resetItem() {
document.getElementById('greetingName').value = '';
toast(this.props.toastLanguage.reset);
}
@@ -32,7 +29,7 @@ export default class GreetingSettings extends React.PureComponent {
<Checkbox name='events' text={this.props.language.greeting.events} />
<Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
<ul>
<p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetItem('greeting')}>{this.props.language.reset}</span></p>
<p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetItem()}>{this.props.language.reset}</span></p>
<input type='text' id='greetingName'></input>
</ul>
<ul>

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

@@ -11,11 +11,8 @@ import LanguageSettings from '../settings/sections/LanguageSettings';
import GreetingSettings from '../settings/sections/GreetingSettings';
export default class Settings extends React.PureComponent {
resetItem(type) {
switch (type) {
case 'css': document.getElementById('customcss').value = ''; break;
default: break;
}
resetItem() {
document.getElementById('customcss').value = '';
toast(this.props.toastLanguage.reset);
}
@@ -90,7 +87,7 @@ export default class Settings extends React.PureComponent {
<Checkbox name='darkTheme' text={this.props.language.dark} />
<Checkbox name='brightnessTime' text={this.props.language.experimental.night_mode} betaFeature={true} />
<ul>
<p>Custom CSS <span className='modalLink' onClick={() => this.resetItem('css')}>{this.props.language.reset}</span> <span className='newFeature'> NEW</span></p>
<p>Custom CSS <span className='modalLink' onClick={() => this.resetItem()}>{this.props.language.reset}</span> <span className='newFeature'> NEW</span></p>
<textarea id='customcss'></textarea>
</ul>
</Section>

1
src/components/widgets/background/PhotoInformation.jsx
View File

@@ -9,6 +9,7 @@ export default class PhotoInformation extends React.PureComponent {
render() {
let classList = 'infoCard';
if (this.props.className) classList = this.props.className;
return (
<div className='photoInformation'>
<h1 id='photographer'>{this.props.language.credit}</h1>

4
src/components/widgets/greeting/Greeting.jsx
View File

@@ -52,9 +52,7 @@ export default class Greeting extends React.PureComponent {
if (birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth() && birth.getFullYear() !== 1001) message = 'Happy Birthday';
// Set the state to the greeting string
this.setState({
greeting: `${message}${name}`
});
this.setState({ greeting: `${message}${name}` });
}
componentDidMount() {

5
src/modules/helpers/marketplace.js
View File

@@ -48,8 +48,7 @@ export default class MarketplaceFunctions {
if (input.quote_api) localStorage.setItem('quote_api', JSON.stringify(input.quote_api));
localStorage.setItem('quote_packs', JSON.stringify(input.quotes));
break;
default:
break;
default: break;
}
let installed = JSON.parse(localStorage.getItem('installed'));
@@ -59,7 +58,7 @@ export default class MarketplaceFunctions {
updated: 'Unpublished',
data: input
}
});
});
} else installed.push(input);
localStorage.setItem('installed', JSON.stringify(installed));
}

11
src/scss/modules/_marketplace.scss
View File

@@ -38,13 +38,8 @@ button.tablinks {
}
#active:after {
content: '';
display: block;
margin: 0 auto;
width: 50%;
padding-top: 10px;
border-bottom: 3px solid map-get($modal, 'tab-underline-active');
.active:after {
border-bottom: 3px solid map-get($modal, 'tab-underline-active') !important;
}
.dark {
@@ -53,7 +48,7 @@ button.tablinks {
color: white;
}
#active:after {
.active:after {
border-image-slice: 1;
border-image-source: map-get($theme-colours, 'gradient');
border-bottom: 3px solid;