mirror of https://github.com/mue/mue.git
Finish welcome modal
This commit is contained in:
parent
3b52010213
commit
f6d8ccf6e7
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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",
|
||||
|
|
10
src/App.jsx
10
src/App.jsx
|
@ -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>
|
||||
|
|
|
@ -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}>×</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>
|
||||
);
|
||||
|
|
|
@ -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' />
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -86,5 +86,9 @@
|
|||
{
|
||||
"name": "favouriteQuoteEnabled",
|
||||
"value": false
|
||||
},
|
||||
{
|
||||
"name": "showWelcome",
|
||||
"value": true
|
||||
}
|
||||
]
|
|
@ -45,4 +45,8 @@
|
|||
height: 24px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.welcomeLink {
|
||||
color: black !important;
|
||||
}
|
Loading…
Reference in New Issue