feat: new welcome modal, refactor many things, various bug fixes, use material-ui v5 etc

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
2021-07-02 21:29:33 +01:00
parent c6b65f943a
commit cf36ced2a7
61 changed files with 782 additions and 324 deletions

View File

@@ -1,7 +1,6 @@
import React from 'react';
import EventBus from '../../../../modules/helpers/eventbus';
import SettingsFunctions from '../../../../modules/helpers/settings';
import CheckboxUI from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -15,10 +14,11 @@ export default class Checkbox extends React.PureComponent {
}
handleChange = () => {
SettingsFunctions.setItem(this.props.name);
const value = (this.state.checked === true) ? false : true;
localStorage.setItem(this.props.name, value);
this.setState({
checked: (this.state.checked === true) ? false : true
checked: value
});
window.stats.postEvent('setting', `${this.props.name} ${(this.state.checked === true) ? 'enabled' : 'disabled'}`);
@@ -45,7 +45,7 @@ export default class Checkbox extends React.PureComponent {
return (
<>
<FormControlLabel
control={<CheckboxUI name={this.props.name} color='primary' checked={this.state.checked} onChange={this.handleChange} />}
control={<CheckboxUI name={this.props.name} color='primary' className='checkbox' checked={this.state.checked} onChange={this.handleChange} />}
label={text}
/>
<br/>

View File

@@ -1,7 +1,6 @@
import React from 'react';
import EventBus from '../../../../modules/helpers/eventbus';
import SettingsFunctions from '../../../../modules/helpers/settings';
import SwitchUI from '@material-ui/core/Switch';
import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -15,10 +14,11 @@ export default class Switch extends React.PureComponent {
}
handleChange = () => {
SettingsFunctions.setItem(this.props.name);
const value = (this.state.checked === true) ? false : true;
localStorage.setItem(this.props.name, value);
this.setState({
checked: (this.state.checked === true) ? false : true
checked: value
});
window.stats.postEvent('setting', `${this.props.name} ${(this.state.checked === true) ? 'enabled' : 'disabled'}`);

View File

@@ -3,7 +3,7 @@ import React from 'react';
import Tooltip from '../../../../helpers/tooltip/Tooltip';
import EmailIcon from '@material-ui/icons/Email';
import TwitterIcon from '@material-ui/icons/Twitter';
import ForumIcon from '@material-ui/icons/Forum';
import ChatIcon from '@material-ui/icons/Chat';
import InstagramIcon from '@material-ui/icons/Instagram';
import FacebookIcon from '@material-ui/icons/Facebook';
@@ -96,7 +96,7 @@ export default class About extends React.PureComponent {
<a href='https://twitter.com/getmue' className='aboutIcon' target='_blank' rel='noopener noreferrer'><TwitterIcon/></a>
<a href='https://instagram.com/mue.tab' className='aboutIcon' target='_blank' rel='noopener noreferrer'><InstagramIcon/></a>
<a href='https://facebook.com/muetab' className='aboutIcon' target='_blank' rel='noopener noreferrer'><FacebookIcon/></a>
<a href='https://discord.gg/zv8C9F8' className='aboutIcon' target='_blank' rel='noopener noreferrer'><ForumIcon/></a>
<a href='https://discord.gg/zv8C9F8' className='aboutIcon' target='_blank' rel='noopener noreferrer'><ChatIcon/></a>
<h3>{this.language.support_mue}</h3>
<p>

View File

@@ -6,9 +6,8 @@ import Text from '../Text';
import Switch from '../Switch';
import ResetModal from '../ResetModal';
import SettingsFunctions from '../../../../../modules/helpers/settings';
import SettingsFunctions from '../../../../../modules/helpers/settings/modals';
import { toast } from 'react-toastify';
import Modal from 'react-modal';
export default class AdvancedSettings extends React.PureComponent {
@@ -20,17 +19,6 @@ export default class AdvancedSettings extends React.PureComponent {
this.language = window.language.modals.main.settings;
}
settingsImport(e) {
const content = JSON.parse(e.target.result);
Object.keys(content).forEach((key) => {
localStorage.setItem(key, content[key]);
});
toast(window.language.toasts.imported);
window.stats.postEvent('tab', 'Settings imported');
}
render() {
const { advanced } = this.language.sections;
@@ -43,7 +31,7 @@ export default class AdvancedSettings extends React.PureComponent {
<button className='reset' onClick={() => this.setState({ resetModal: true })}>{this.language.buttons.reset}</button>
<button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.language.buttons.export}</button>
<button className='import' onClick={() => document.getElementById('file-input').click()}>{this.language.buttons.import}</button>
<FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)}/>
<FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => SettingsFunctions.importSettings(e)}/>
<h3>{advanced.customisation}</h3>
<Text title={advanced.tab_name} name='tabName' default={window.language.tabname} category='other'/>

View File

@@ -53,7 +53,7 @@ export default class Changelog extends React.PureComponent {
lightboxImg: img.src
});
};
}
};
for (let link = 0; link < links.length; link++) {
links[link].target = '_blank';

View File

@@ -52,7 +52,6 @@ export default class OrderSettings extends React.PureComponent {
}
const newArray = [...array];
const target = newArray[oldIndex];
const inc = newIndex < oldIndex ? -1 : 1;
@@ -61,7 +60,6 @@ export default class OrderSettings extends React.PureComponent {
}
newArray[newIndex] = target;
return newArray;
}

View File

@@ -8,7 +8,7 @@ export default function QuickLinks() {
<>
<h2>{language.title}</h2>
<Switch name='quicklinksenabled' text={window.language.modals.main.settings.enabled} category='quicklinks' element='.quicklinks-container' />
<Checkbox name='quicklinksddgProxy' text={window.language.modals.main.settings.sections.background.ddg_proxy} element='.other' />
<Checkbox name='quicklinksddgProxy' text={window.language.modals.main.settings.sections.background.ddg_image_proxy} element='.other' />
<Checkbox name='quicklinksnewtab' text={language.open_new} category='quicklinks' />
<Checkbox name='quicklinkstooltip' text={language.tooltip} category='quicklinks' />
</>

View File

@@ -85,7 +85,6 @@ export default class SearchSettings extends React.PureComponent {
))}
<option value='custom'>{search.custom.split(' ')[0]}</option>
</Dropdown>
<ul style={{ display: this.state.customDisplay }}>
<br/>
<p style={{ marginTop: '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{language.buttons.reset}</span></p>

View File

@@ -153,7 +153,7 @@ export default class BackgroundSettings extends React.PureComponent {
<>
<h2>{background.title}</h2>
<Switch name='background' text={this.language.enabled} category='background' />
<Checkbox name='ddgProxy' text={background.ddg_proxy} />
<Checkbox name='ddgProxy' text={background.ddg_image_proxy} />
<Checkbox name='bgtransition' text={background.transition} />
<Checkbox name='photoInformation' text={background.photo_information} category='background' element='.other' />

View File

@@ -55,7 +55,7 @@ export default class ColourSettings extends React.PureComponent {
try {
gradientSettings = JSON.parse(hex);
} catch (e) {
// Disregard exception.
// Disregard exception
}
}