mirror of https://github.com/mue/mue.git
fix: import settings on welcome, progress bar, custom js etc
This commit is contained in:
parent
19bc802f09
commit
44fc24951f
|
@ -43,7 +43,7 @@ export default class WelcomeModal extends React.PureComponent {
|
||||||
this.setState({
|
this.setState({
|
||||||
currentTab: tab,
|
currentTab: tab,
|
||||||
image: this.images[tab],
|
image: this.images[tab],
|
||||||
buttonText: this.language.buttons.next
|
buttonText: (tab !== this.state.finalTab + 1) ? this.language.buttons.next : this.language.buttons.close
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,17 +9,23 @@ import LightModeIcon from '@material-ui/icons/LightMode';
|
||||||
import DarkModeIcon from '@material-ui/icons/DarkMode';
|
import DarkModeIcon from '@material-ui/icons/DarkMode';
|
||||||
|
|
||||||
import SettingsFunctions from '../../../modules/helpers/settings';
|
import SettingsFunctions from '../../../modules/helpers/settings';
|
||||||
|
import SettingsFunctionsModal from '../../../modules/helpers/settings/modals';
|
||||||
|
|
||||||
const languages = require('../../../modules/languages.json');
|
const languages = require('../../../modules/languages.json');
|
||||||
|
const default_settings = require('../../../modules/default_settings.json');
|
||||||
|
|
||||||
export default class WelcomeSections extends React.Component {
|
export default class WelcomeSections extends React.Component {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
this.state = {
|
this.state = {
|
||||||
|
// themes
|
||||||
autoClass: 'toggle auto active',
|
autoClass: 'toggle auto active',
|
||||||
lightClass: 'toggle lightTheme',
|
lightClass: 'toggle lightTheme',
|
||||||
darkClass: 'toggle darkTheme',
|
darkClass: 'toggle darkTheme',
|
||||||
welcomeImage: 0
|
// welcome
|
||||||
|
welcomeImage: 0,
|
||||||
|
// final
|
||||||
|
importedSettings: []
|
||||||
};
|
};
|
||||||
this.changeWelcomeImg = this.changeWelcomeImg.bind(this);
|
this.changeWelcomeImg = this.changeWelcomeImg.bind(this);
|
||||||
this.welcomeImages = ['./welcome-images/example1.webp', './welcome-images/example2.webp', './welcome-images/example3.webp', './welcome-images/example4.webp'];
|
this.welcomeImages = ['./welcome-images/example1.webp', './welcome-images/example2.webp', './welcome-images/example3.webp', './welcome-images/example4.webp'];
|
||||||
|
@ -42,8 +48,33 @@ export default class WelcomeSections extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
importSettings(e) {
|
importSettings(e) {
|
||||||
SettingsFunctions.importSettings(e);
|
SettingsFunctionsModal.importSettings(e);
|
||||||
this.props.switchTab(4);
|
|
||||||
|
let settings = [];
|
||||||
|
const data = JSON.parse(e.target.result);
|
||||||
|
Object.keys(data).forEach((setting) => {
|
||||||
|
if (setting === 'language' || setting === 'theme'|| setting === 'firstRun' || setting === 'showWelcome' || setting === 'showReminder') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultSetting = default_settings.find((i) => i.name === setting);
|
||||||
|
if (defaultSetting !== undefined) {
|
||||||
|
if (data[setting] === String(defaultSetting.value)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
settings.push({
|
||||||
|
name: setting,
|
||||||
|
value: data[setting]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
importedSettings: settings
|
||||||
|
});
|
||||||
|
|
||||||
|
this.props.switchTab(5);
|
||||||
}
|
}
|
||||||
|
|
||||||
changeWelcomeImg() {
|
changeWelcomeImg() {
|
||||||
|
@ -58,9 +89,16 @@ export default class WelcomeSections extends React.Component {
|
||||||
this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000);
|
this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
// cancel welcome image timer if not on welcome tab
|
||||||
if (this.timeout) {
|
componentDidUpdate() {
|
||||||
clearTimeout(this.timeout);
|
if (this.props.currentTab !== 0) {
|
||||||
|
if (this.timeout) {
|
||||||
|
clearTimeout(this.timeout);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (!this.timeout) {
|
||||||
|
this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -88,6 +126,8 @@ export default class WelcomeSections extends React.Component {
|
||||||
);
|
);
|
||||||
|
|
||||||
const { appearance } = window.language.modals.main.settings.sections;
|
const { appearance } = window.language.modals.main.settings.sections;
|
||||||
|
const languageSettings = window.language.modals.main.settings.sections.language;
|
||||||
|
|
||||||
const theme = (
|
const theme = (
|
||||||
<>
|
<>
|
||||||
<h1>{language.sections.theme.title}</h1>
|
<h1>{language.sections.theme.title}</h1>
|
||||||
|
@ -142,8 +182,9 @@ export default class WelcomeSections extends React.Component {
|
||||||
<h3 className='quicktip'>{language.sections.final.changes}</h3>
|
<h3 className='quicktip'>{language.sections.final.changes}</h3>
|
||||||
<p>{language.sections.final.changes_description}</p>
|
<p>{language.sections.final.changes_description}</p>
|
||||||
<div className='themesToggleArea'>
|
<div className='themesToggleArea'>
|
||||||
<div className='toggle' onClick={() => this.props.switchTab(1)}>Language: {languages.find((i) => i.value === localStorage.getItem('language')).name}</div>
|
<div className='toggle' onClick={() => this.props.switchTab(1)}>{languageSettings.title}: {languages.find((i) => i.value === localStorage.getItem('language')).name}</div>
|
||||||
<div className='toggle' onClick={() => this.props.switchTab(3)}>Theme: {this.getSetting('theme')}</div>
|
<div className='toggle' onClick={() => this.props.switchTab(3)}>{appearance.theme.title}: {this.getSetting('theme')}</div>
|
||||||
|
{(this.state.importedSettings.length !== 0) ? <div className='toggle' onClick={() => this.props.switchTab(2)}>Imported {this.state.importedSettings.length} settings</div> : null}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -215,10 +215,6 @@
|
||||||
"name": "backgroundFilter",
|
"name": "backgroundFilter",
|
||||||
"value": "grayscale"
|
"value": "grayscale"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "navbarHover",
|
|
||||||
"value": false
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "apiQuality",
|
"name": "apiQuality",
|
||||||
"value": "high"
|
"value": "high"
|
||||||
|
|
|
@ -92,8 +92,12 @@ export default class SettingsFunctions {
|
||||||
|
|
||||||
const js = localStorage.getItem('customjs');
|
const js = localStorage.getItem('customjs');
|
||||||
if (js) {
|
if (js) {
|
||||||
// eslint-disable-next-line no-eval
|
try {
|
||||||
eval(js);
|
// eslint-disable-next-line no-eval
|
||||||
|
eval(js);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to run custom JS: ', e);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (localStorage.getItem('experimental') === 'true') {
|
if (localStorage.getItem('experimental') === 'true') {
|
||||||
|
|
Loading…
Reference in New Issue