Finish welcome modal

This commit is contained in:
David Ralph 2020-11-04 12:19:12 +00:00
parent 3b52010213
commit f6d8ccf6e7
10 changed files with 36 additions and 21 deletions

View File

@ -3,7 +3,7 @@
"offline_enabled": true,
"name": "Mue",
"description": "Fast, open and free-to-use new tab page for most modern browsers.",
"version": "4.2.1",
"version": "5.0.0",
"browser_action": {
"default_icon": "icons/128x128.png"
},

View File

@ -2,7 +2,7 @@
"manifest_version": 2,
"name": "Mue",
"description": "Fast, open and free-to-use new tab page for most modern browsers.",
"version": "4.2.1",
"version": "5.0.0",
"browser_action": {
"default_icon": "icons/128x128.png"
},

View File

@ -2,7 +2,7 @@
"manifest_version": 2,
"name": "Mue",
"description": "Fast, open and free-to-use new tab page for most modern browsers.",
"version": "4.2.0",
"version": "5.0.0",
"browser_action": {
"default_icon": "icons/128x128.png"
},

View File

@ -13,7 +13,7 @@
"homepage": "https://muetab.com",
"bugs": "https://github.com/mue/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D",
"license": "BSD-3-Clause",
"version": "4.2.1",
"version": "5.0.0",
"dependencies": {
"@eartharoid/dtf": "^1.0.8",
"@material-ui/core": "4.11.0",

View File

@ -35,6 +35,12 @@ export default class App extends React.PureComponent {
componentDidMount() {
if (!localStorage.getItem('firstRun')) SettingsFunctions.setDefaultSettings();
if (localStorage.getItem('showWelcome') === 'true') this.setState({ welcomeModal: true });
}
closeWelcome() {
localStorage.setItem('showWelcome', false);
this.setState({ welcomeModal: false });
}
// Render all the components
@ -77,8 +83,8 @@ export default class App extends React.PureComponent {
language={language.update}
modalClose={() => this.setState({ updateModal: false })} />
</Modal>
<Modal onRequestClose={() => this.setState({ welcomeModal: false })} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}>
<Welcome modalClose={() => this.setState({ welcomeModal: false })} />
<Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}>
<Welcome modalClose={() => this.closeWelcome()} language={language.welcome} />
</Modal>
</React.Suspense>
</div>

View File

@ -1,5 +1,7 @@
import React from 'react';
import EmailIcon from '@material-ui/icons/Email';
import TwitterIcon from '@material-ui/icons/Twitter';
import ForumIcon from '@material-ui/icons/Forum';
export default class Welcome extends React.PureComponent {
render() {
@ -7,17 +9,17 @@ export default class Welcome extends React.PureComponent {
<div className='welcomeContent'>
<span className='closeModal' onClick={this.props.modalClose}>&times;</span>
<div className='welcomeModalText'>
<h2 className='subtitle'>Welcome to</h2>
<h2 className='subtitle'>{this.props.language.title}</h2>
<h1 className='welcometitle'>Mue Tab</h1>
<img alt='celebration' style={{ 'height': '200px', 'width': 'auto' }} src='./././icons/undraw_celebration.svg' />
<h2 className='subtitle'>Information</h2>
<p>Thank you for downloading Mue Tab,<br/> we hope you enjoy your time with our extension.</p>
<h2 className='subtitle'>Support</h2>
{/* <img alt='twitter' href='https://twitter.com/getmue' className='icon' src=''/>
<img alt='discord' href='https://discord.gg/kJsufA9' className='icon' src=''/> */}
<EmailIcon />
<img alt='celebration' style={{ 'height': '200px', 'width': 'auto' }} draggable={false} src='./././icons/undraw_celebration.svg' />
<h2 className='subtitle'>{this.props.language.information}</h2>
<p>{this.props.language.thankyoumessage1},<br/> {this.props.language.thankyoumessage2}</p>
<h2 className='subtitle'>{this.props.language.support}</h2>
<a href='mailto:hello@muetab.com' className='welcomeLink' target='_blank' rel='noreferrer'><EmailIcon/></a>
<a href='https://twitter.com/getmue' className='welcomeLink' target='_blank' rel='noreferrer'><TwitterIcon/></a>
<a href='https://discord.gg/zv8C9F8' className='welcomeLink' target='_blank' rel='noreferrer'><ForumIcon/></a>
<br/>
<button className='close' onClick={this.props.modalClose}>Close</button>
<button className='close' onClick={this.props.modalClose}>{this.props.language.close}</button>
</div>
</div>
);

View File

@ -25,11 +25,8 @@ export default class Settings extends React.PureComponent {
}
document.getElementById('file-input').onchange = (e) => { // import settings
const file = e.target.files[0];
if (file.type !== 'application/json') return console.error(`expected json, got ${file.type}`);
const reader = new FileReader();
reader.readAsText(file, 'UTF-8');
reader.readAsText(e.target.files[0], 'UTF-8');
reader.onload = (readerEvent) => {
const content = JSON.parse(readerEvent.target.result);
@ -82,7 +79,7 @@ export default class Settings extends React.PureComponent {
<LanguageSettings language={this.props.language} />
<button className='apply' onClick={() => SettingsFunctions.saveStuff(this.props.language.background.disabled)}>{this.props.language.apply}</button>
<button className='reset' onClick={() => SettingsFunctions.setDefaultSettings()}>{this.props.language.reset}</button>
<button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>{this.props.language.reset}</button>
<button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.props.language.export}</button>
<button className='import' onClick={() => document.getElementById('file-input').click()}>{this.props.language.import}</button>
<input id='file-input' type='file' name='name' className='hidden' accept='application/json' />

View File

@ -65,7 +65,7 @@ export default class SettingsFunctions {
window.location.reload();
}
static setDefaultSettings() {
static setDefaultSettings(reset) {
localStorage.clear();
defaultSettings.forEach((element) => localStorage.setItem(element.name, element.value));
@ -85,6 +85,8 @@ export default class SettingsFunctions {
document.documentElement.lang = browserLanguage;
} else localStorage.setItem('language', 'en');
if (reset) localStorage.setItem('showWelcome', false);
// Finally we set this to true so it doesn't run the function on every load
localStorage.setItem('firstRun', true);
window.location.reload();

View File

@ -86,5 +86,9 @@
{
"name": "favouriteQuoteEnabled",
"value": false
},
{
"name": "showWelcome",
"value": true
}
]

View File

@ -45,4 +45,8 @@
height: 24px;
width: auto;
}
}
.welcomeLink {
color: black !important;
}