mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-14 04:24:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

Settings! (Almost finished)

Browse Source 
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
Co-authored-by: Wessel Tip <discord@go2it.eu>
This commit is contained in:
David Ralph
2020-07-15 21:06:21 +01:00
parent da5a4da97b
commit 0c6022aa2d
13 changed files with 341 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Background.jsx
View File

@@ -53,6 +53,8 @@ export default class Background extends React.Component {
}
componentDidMount() {
const enabled = localStorage.getItem('background');
if (enabled === 'false') return;
this.setBackground();
}

2
src/components/Clock.jsx
View File

@@ -26,6 +26,8 @@ export default class Clock extends React.Component {
}
componentDidMount() {
const enabled = localStorage.getItem('time');
if (enabled === 'false') return;
this.startTime();
}

2
src/components/Greeting.jsx
View File

@@ -33,6 +33,8 @@ export default class Greeting extends React.Component {
}
componentDidMount() {
const enabled = localStorage.getItem('greeting');
if (enabled === 'false') return;
this.getGreeting();
}

6
src/components/Navbar.jsx
View File

@@ -1,6 +1,6 @@
//* Imports
import RefreshIcon from '@material-ui/icons/Refresh';
import LocalPizzaIcon from '@material-ui/icons/LocalPizza';
import Gear from '@material-ui/icons/Settings';
import React from 'react';
export default class Navbar extends React.Component {
@@ -8,10 +8,10 @@ export default class Navbar extends React.Component {
return (
<div className='navbar-container'>
<div className='navbar1'>
<RefreshIcon className='locationicon'/>
<Gear className='settings-icon' onClick={this.props.modalOpen} />
</div>
<div className='navbar2'>
<LocalPizzaIcon className='pizzaicon'/>
<RefreshIcon className='refreshicon' onClick={() => window.location.reload()} />
</div>
</div>
);

10
src/components/Quote.jsx
View File

@@ -18,30 +18,32 @@ export default class Quote extends React.Component {
if (data.statusCode === 429) { // If we hit the ratelimit, we fallback to local quotes
const quote = Quotes.random(); // Get a random quote from our local package
return this.setState({
quote: quote.quote,
quote: '"' + quote.quote + '"',
author: quote.author
}); // Set the quote
}
this.setState({
quote: data.quote,
quote: '"' + data.quote + '"',
author: data.author
});
} catch (e) { // ..and if that fails we load one locally
const quote = Quotes.random(); // Get a random quote from our local package
this.setState({
quote: quote.quote,
quote: '"' + quote.quote + '"',
author: quote.author
}); // Set the quote
}
}
componentDidMount() {
const enabled = localStorage.getItem('quote');
if (enabled === 'false') return;
this.getQuote();
}
render() {
return [
<h1 className='quote'>{`"${this.state.quote}"`}</h1>,
<h1 className='quote'>{`${this.state.quote}`}</h1>,
// <i class="material-icons">perm_identity</i>,
<h1 className='quoteauthor'>{`${this.state.author}`}</h1>,
];

81
src/components/Settings.jsx Normal file
View File

@@ -0,0 +1,81 @@
import React from 'react';
export default class Settings extends React.Component {
setItem(key, value) {
let old = localStorage.getItem(key);
let val = true;
if (old !== null && !value) {
if (old === 'true') val = false;
if (old === 'false') val = true;
}
localStorage.setItem(key, val);
document.getElementById(`${key}Status`).innerHTML = val === true ? 'ON' : 'OFF';
console.log(`[DEBUG] setItem(${key}, ${old} -> ${val})`);
}
render() {
return <div className="content">
<a class="closeModal" onClick={this.props.modalClose}>&times;</a>
<h1>Settings</h1>
<p>Edit different components to make Mue your new tab.</p>
<div className='columns'>
<div className='section'>
<h4>Time</h4>
<label class="switch">
<input type="checkbox" />
<span class="slider round"></span>
</label>
</div>
<div className='section'>
<h4>Quote</h4>
<label class="switch">
<input type="checkbox" />
<span class="slider"></span>
</label>
</div>
<div className='section'>
<h4>Background</h4>
<label class="switch">
<input type="checkbox" />
<span class="slider"></span>
</label>
</div>
<button class="apply">Apply</button>
<p>You need to refresh the page to see your changes!</p>
{/*
<h4 style={{ flex: 2 }}>Time <span id="timeStatus">{localStorage.getItem('time') === 'true' ? 'ON' : 'OFF'}</span>
</h4>
<button onClick={()=>this.setItem('time')}>Toggle Time</button>
<h4 style={{ flex: 2 }}>Search Bar</h4>
<button onClick={()=>this.setItem('searchbar')}>Toggle Searchbar</button>
<h4 style={{ flex: 2 }}>Greeting <span id="greetingStatus">{localStorage.getItem('greeting') === 'true' ? 'ON' :
'OFF'}</span></h4>
<button onClick={()=>this.setItem('greeting')}>Greeting Toggle</button>
<h4 style={{ flex: 2 }}>Quote <span id="quoteStatus">{localStorage.getItem('quote') === 'true' ? 'ON' :
'OFF'}</span> <button onClick={()=>this.setItem('quote')}>Quote Toggle</button>
</h4>
<h4 style={{ flex: 2 }}>Background <span id="backgroundStatus">{localStorage.getItem('background') === 'true' ? 'ON'
: 'OFF'}</span></h4>
<button onClick={()=> this.setItem('background')}>Background Toggle</button>
<label class="switch">
<input type="checkbox" />
<span class="slider round"></span>
</label>
<label class="switch">
<input type="checkbox" checked />
<span class="slider round"></span>
</label>
{/* <label className="switch">
<input type="checkbox" checked></input>
<span className="slider round"></span>
</label> */}
</div>
</div>;
}
}