mirror of
https://github.com/mue/mue.git
synced 2026-07-09 13:35:35 +02:00
fix: Reset modal now works, widget order has reset button etc
This commit is contained in:
@@ -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;
|
||||
}
|
||||
@@ -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}>×</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>
|
||||
);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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)}>
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -138,5 +138,9 @@
|
||||
{
|
||||
"name": "timeformat",
|
||||
"value": "twentyfourhour"
|
||||
},
|
||||
{
|
||||
"name": "experimental",
|
||||
"value": false
|
||||
}
|
||||
]
|
||||
|
||||
@@ -142,6 +142,7 @@
|
||||
"milliseconds": "milliseconds"
|
||||
}
|
||||
},
|
||||
"order": "Widget Order",
|
||||
"advanced": {
|
||||
"title": "Advanced",
|
||||
"offline_mode": "Offline Mode",
|
||||
|
||||
Reference in New Issue
Block a user