Cleanup things and style custom background gradient

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
2020-10-11 16:54:07 +01:00
parent 840917d123
commit 201e3382f4
15 changed files with 57 additions and 60 deletions

View File

@@ -14,7 +14,7 @@ export default class Update extends React.PureComponent {
}
async getUpdate() {
let supportText = `<br/><p>${this.props.language.contactsupport}: <a target='_blank' class='modalLink' href='https://muetab.xyz/contact.html'</a>https://muetab.xyz/contact</p>`;
const supportText = `<br/><p>${this.props.language.contactsupport}: <a target='_blank' class='modalLink' href='https://muetab.xyz/contact.html'</a>https://muetab.xyz/contact</p>`;
if (localStorage.getItem('offlineMode') === 'true') return this.setState({
title: this.props.language.offline.title,
@@ -27,6 +27,7 @@ export default class Update extends React.PureComponent {
title: this.props.language.error.title,
html: this.props.language.error.description + supportText
});
this.setState({
title: data.title,
date: data.published,

View File

@@ -12,10 +12,8 @@ export default class Section extends React.PureComponent {
}
toggleSection() {
let display = 'none';
if (this.state.display === 'none') display = 'block';
let transform = 'rotate(0)';
if (this.state.transform === 'rotate(0)') transform = 'rotate(-180deg)';
const display = (this.state.display === 'none') ? 'block': 'none';
const transform = (this.state.transform === 'rotate(0)') ? 'rotate(-180deg)' : 'rotate(0)';
this.setState({
display: display,
@@ -31,7 +29,7 @@ export default class Section extends React.PureComponent {
style={{ 'transition': 'all 0.5s ease 0s', 'transform': this.state.transform }}
className={`expandIcons`}
onClick={() => this.toggleSection()}
/>
/>;
}
if (this.props.slider !== false) slider = <Slider name={this.props.name} />;

View File

@@ -51,6 +51,7 @@ export default class BackgroundSettings extends React.PureComponent {
const hex = localStorage.getItem('customBackgroundColour');
let gradientSettings = undefined;
if (hex !== '') {
try {
gradientSettings = JSON.parse(hex);
@@ -58,15 +59,14 @@ export default class BackgroundSettings extends React.PureComponent {
//Disregard exception.
}
}
if (gradientSettings === undefined) {
gradientSettings = this.DefaultGradientSettings
}
if (gradientSettings === undefined) gradientSettings = this.DefaultGradientSettings;
this.setState({
blur: localStorage.getItem('blur'),
brightness: localStorage.getItem('brightness'),
gradientSettings
})
});
document.getElementById('customBackground').value = localStorage.getItem('customBackground');
document.getElementById('backgroundAPI').value = localStorage.getItem('backgroundAPI');
@@ -124,7 +124,7 @@ export default class BackgroundSettings extends React.PureComponent {
gradient: [...this.state.gradientSettings.gradient.map(g => { return { ...g, stop: clampNumber(+g.stop, 0, 100) } })].sort((a, b) => (a.stop > b.stop) ? 1 : -1)
});
}
return "Disabled";
return 'Disabled';
}
render() {
@@ -134,10 +134,10 @@ export default class BackgroundSettings extends React.PureComponent {
const gradientHasMoreThanOneColour = this.state.gradientSettings.gradient.length > 1;
return (
<div key={i}>
{gradientHasMoreThanOneColour ? (<button type="button" className="remove" onClick={() => this.removeColour(i)}>x</button>) : null}
{gradientHasMoreThanOneColour ? (<button type='button' className='remove' onClick={() => this.removeColour(i)}>×</button>) : null}
<input id={'colour_' + i} type='color' name='colour' className="colour" onChange={(event) => this.onGradientChange(event, i)} value={g.colour}></input>
<label htmlFor={'colour_' + i} className="customBackgroundHex">{g.colour}</label>
{gradientHasMoreThanOneColour ? (
{gradientHasMoreThanOneColour ? (
<input type="number" name='stop' className='stop' min={0} max={100} value={g.stop} onChange={(event) => this.onGradientChange(event, i)} />
) : null}
</div>);

View File

@@ -17,11 +17,8 @@ export default class Clock extends React.PureComponent {
const now = new Date();
// Analog clock
if (localStorage.getItem('analog') === 'true') {
this.setState({
time: now
});
} else {
if (localStorage.getItem('analog') === 'true') this.setState({ time: now });
else {
let sec = '';
// Extra 0
@@ -35,11 +32,9 @@ export default class Clock extends React.PureComponent {
if (localStorage.getItem('24hour') === 'true') {
let time = '';
if (zero === 'false') time = `${now.getHours()}:${now.getMinutes()}${sec}`;
else time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
this.setState({
time: time
});
this.setState({ time: time });
} else {
// 12 hour support
let hours = now.getHours();

View File

@@ -32,7 +32,7 @@ export default class Greeting extends React.PureComponent {
// Events
message = this.doEvents(now, message);
let custom = localStorage.getItem('defaultGreetingMessage');
const custom = localStorage.getItem('defaultGreetingMessage');
if (custom === 'false') message = '';
// Name

View File

@@ -22,7 +22,7 @@ export default class View extends React.PureComponent {
const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time'];
elements.forEach((element) => {
try {
(this.state.hidden === false) ? document.querySelector(element).style.display = 'none' : document.querySelector(element).style.display = 'block';
(this.state.hidden === false) ? document.querySelector(element).style.display = 'none' : document.querySelector(element).style.display = 'block';
} catch (e) {
return;
}

View File

@@ -41,8 +41,7 @@ export default class Quote extends React.PureComponent {
if (quotePackAPI) {
try {
const data = await (await fetch(quotePackAPI.url)).json();
let author = data[quotePackAPI.author];
if (quotePackAPI.authorOverride) author = quotePackAPI.authorOverride;
const author = quotePackAPI.authorOverride || data[quotePackAPI.author];
return this.setState({
quote: '"' + data[quotePackAPI.quote] + '"',
author: author
@@ -77,11 +76,9 @@ export default class Quote extends React.PureComponent {
}
render() {
let copy = <FileCopy className='copyButton' onClick={() => this.copyQuote()}></FileCopy>;
if (localStorage.getItem('copyButton') === 'false') copy = null;
let tweet = <TwitterIcon className='copyButton' onClick={() => window.open(`https://twitter.com/intent/tweet?text=${this.state.quote} - ${this.state.author} on @getmue`, '_blank').focus()}/>
if (localStorage.getItem('tweetButton') === 'false') tweet = null;
const copy = (localStorage.getItem('copyButton') === 'false') ? null : <FileCopy className='copyButton' onClick={() => this.copyQuote()}></FileCopy>;
const tweet = (localStorage.getItem('tweetButton') === 'false') ? null :
<TwitterIcon className='copyButton' onClick={() => window.open(`https://twitter.com/intent/tweet?text=${this.state.quote} - ${this.state.author} on @getmue`, '_blank').focus()}/>;
return (
<div className='quotediv'>

View File

@@ -20,8 +20,7 @@ export default class Search extends React.PureComponent {
if (custom) url = custom;
const searchButton = () => {
let value = document.getElementById('searchtext').value;
if (!value) value = 'mue fast';
const value = document.getElementById('searchtext').value || 'mue fast';
window.location.href = url + `?${query}=` + value;
};