fix: Reset modal now works, widget order has reset button etc

This commit is contained in:
David Ralph
2021-03-31 12:21:37 +01:00
parent 353fa85cba
commit 5f9bc4a94b
11 changed files with 75 additions and 29 deletions

View File

@@ -325,3 +325,13 @@ li {
border-radius: 50%;
padding-right: 5px;
}
.resetmodal {
min-height: 300px !important;
max-width: 300px !important;
}
.resetfooter {
position: absolute;
bottom: 20px;
}

View File

@@ -1,13 +1,16 @@
import React from 'react';
import SettingsFunctions from '../../../../modules/helpers/settings';
export default function ResetModal(props) {
return (
<div className='welcomeContent'>
<span className='closeModal' onClick={props.modalClose}>&times;</span>
<div className='welcomeModalText'>
reset text
<button className='close' onClick={props.modalClose}>yes</button>
<button className='close' onClick={props.modalClose}>no</button>
<div className='resetmodal'>
<h3 style={{'textAlign': 'center'}}>WARNING</h3>
<h4>Do you want to reset Mue?</h4>
<p>This will delete all data. If you want to keep your data and preferences, please export first.</p>
<div className='resetfooter'>
<button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>Reset</button>
<button className='import' onClick={props.modalClose}>Cancel</button>
</div>
</div>
);

View File

@@ -18,10 +18,19 @@ export default class About extends React.PureComponent {
}
async getGitHubData() {
const contributors = await (await fetch('https://api.github.com/repos/mue/mue/contributors')).json();
const { sponsors } = await (await fetch(window.constants.SPONSORS_URL + '/list')).json();
let contributors, sponsors, versionData;
try {
contributors = await (await fetch(window.constants.GITHUB_URL + '/repos/mue/mue/contributors')).json();
sponsors = (await (await fetch(window.constants.SPONSORS_URL + '/list')).json()).sponsors;
versionData = await (await fetch(window.constants.GITHUB_URL + '/repos/mue/mue/releases')).json();
} catch (e) {
return this.setState({
update: 'Failed to get update information',
loading: 'An error occurred'
});
}
const versionData = await (await fetch('https://api.github.com/repos/mue/mue/releases')).json();
const newVersion = versionData[0].tag_name;
let updateMsg = this.language.version.no_update;

View File

@@ -52,7 +52,7 @@ export default class AdvancedSettings extends React.PureComponent {
<p>{advanced.experimental_warning}</p>
<Checkbox name='experimental' text={this.language.enabled} />
<Modal onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className={'modal'} overlayClassName={'Overlay'} ariaHideApp={false}>
<Modal onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className={'Modal resetmodal'} overlayClassName={'Overlay'} ariaHideApp={false}>
<ResetModal modalClose={() => this.setState({ resetModal: false })} />
</Modal>
</>

View File

@@ -26,7 +26,14 @@ export default class OrderSettings extends React.PureComponent {
this.setState(({items}) => ({
items: arrayMove(items, oldIndex, newIndex)
}));
};
}
reset = () => {
localStorage.setItem('order', JSON.stringify(['greeting', 'time', 'quote', 'date']));
this.setState({
items: JSON.parse(localStorage.getItem('order'))
});
}
componentDidUpdate() {
localStorage.setItem('order', JSON.stringify(this.state.items));
@@ -36,6 +43,7 @@ export default class OrderSettings extends React.PureComponent {
return (
<>
<h2>Order</h2>
<span className='modalLink' onClick={this.reset}>Reset</span>
<SortableContainer onSortEnd={this.onSortEnd}>
{this.state.items.map((value, index) => (
<SortableItem key={`item-${value}`} index={index} value={value} />

View File

@@ -11,6 +11,7 @@ import Background from '../settings/sections/background/Background';
import Advanced from '../settings/sections/Advanced';
import Changelog from '../settings/sections/Changelog';
import Order from '../settings/sections/Order';
import Experimental from '../settings/sections/Experimental';
import Tabs from './backend/Tabs';
@@ -25,10 +26,10 @@ export default function Settings() {
<div label={language.background.title}><Background/></div>
<div label={language.search.title}><Search/></div>
<div label={language.appearance.title}><Appearance/></div>
<div label='Order'><Order/></div>
<div label={language.order}><Order/></div>
<div label={language.language.title}><Language/></div>
<div label={language.advanced.title}><Advanced/></div>
<div label='Experimental'></div>
<div label={language.experimental.title}><Experimental/></div>
<div label={language.changelog}><Changelog/></div>
<div label={language.about.title}><About/></div>
</Tabs>

View File

@@ -34,26 +34,29 @@ export default function Tab(props) {
}
}
const language = window.language.modals.main.settings.sections;
const navbarlanguage = window.language.modals.main.navbar;
let icon, divider;
switch (props.label) {
// Navbar
case 'Settings': icon = <Settings/>; break;
case 'My Add-ons': icon = <Addons/>; break;
case 'Marketplace': icon = <Marketplace/>; break;
case navbarlanguage.settings: icon = <Settings/>; break;
case navbarlanguage.addons: icon = <Addons/>; break;
case navbarlanguage.marketplace: icon = <Marketplace/>; break;
// Settings
case 'Time': icon = <Time/>; break;
case 'Greeting': icon = <Greeting/>; break;
case 'Quote': icon = <Quote/>; break;
case 'Background': icon = <Background/>; break;
case 'Search': icon = <Search/>; break;
case 'Appearance': icon = <Appearance/>; break;
case 'Order': icon = <Order/>; break;
case 'Language': icon = <Language/>; divider = true; break;
case 'Advanced': icon = <Settings/>; break;
case 'Experimental': icon = <Experimental/>; divider = true; break;
case 'Change Log': icon = <Changelog/>; break;
case 'About': icon = <About/>; break;
case language.time.title: icon = <Time/>; break;
case language.greeting.title: icon = <Greeting/>; break;
case language.quote.title: icon = <Quote/>; break;
case language.background.title: icon = <Background/>; break;
case language.search.title: icon = <Search/>; break;
case language.appearance.title: icon = <Appearance/>; break;
case language.order: icon = <Order/>; break;
case language.language.title: icon = <Language/>; divider = true; break;
case language.advanced.title: icon = <Settings/>; break;
case language.experimental.title: icon = <Experimental/>; divider = true; break;
case language.changelog: icon = <Changelog/>; break;
case language.about.title: icon = <About/>; break;
// Store
case 'Photo Packs': icon = <Background/>; break;
@@ -63,6 +66,12 @@ export default function Tab(props) {
default: break;
}
if (props.label === language.experimental.title) {
if (localStorage.getItem('experimental') === 'false') {
return <hr/>;
}
}
return (
<>
<li className={className} onClick={() => props.onClick(props.label)}>

View File

@@ -21,7 +21,7 @@ export default class Tabs extends React.PureComponent {
render() {
let className = 'sidebar';
let tabClass = 'tab-content';
let optionsText = (<h1>Options</h1>);
let optionsText = (<h1>{window.language.modals.main.title}</h1>);
if (this.props.navbar) {
className = 'modalNavbar';

View File

@@ -3,6 +3,7 @@ export const UNSPLASH_URL = 'https://unsplash.muetab.com';
export const MARKETPLACE_URL = 'http://127.0.0.1:8080';
export const WEBSITE_URL = 'https://muetab.com';
export const SPONSORS_URL = 'https://sponsors.muetab.com';
export const GITHUB_URL = 'https://api.github.com'
export const OFFLINE_IMAGES = 20;
export const BETA_VERSION = false;
export const VERSION = '5.0';

View File

@@ -138,5 +138,9 @@
{
"name": "timeformat",
"value": "twentyfourhour"
},
{
"name": "experimental",
"value": false
}
]

View File

@@ -142,6 +142,7 @@
"milliseconds": "milliseconds"
}
},
"order": "Widget Order",
"advanced": {
"title": "Advanced",
"offline_mode": "Offline Mode",