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

cleanup

Browse Source
This commit is contained in:
David Ralph
2020-10-15 15:50:03 +01:00
parent 917f99ff13
commit aa16b7cffa
33 changed files with 88 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.jsx
View File

@@ -16,7 +16,7 @@ import Modal from 'react-modal';
import merge from 'lodash.merge';
import RoomIcon from '@material-ui/icons/Room';
// Modals are lazy loaded as a user won't use them every time they open a tab
// Modals are lazy loaded as the user won't use them every time they open a tab
const MainModal = React.lazy(() => import('./components/modals/MainModal'));
const Update = React.lazy(() => import('./components/modals/Update'));
//const Welcome = React.lazy(() => import('./components/modals/Welcome'));

5
src/components/modals/settings/Section.jsx
View File

@@ -22,7 +22,7 @@ export default class Section extends React.PureComponent {
}
render() {
let extraHTML, expandMore, slider;
let extraHTML, expandMore, slider, noDropdown;
if (this.props.children) {
extraHTML = <li className='extraSettings'>{this.props.children}</li>
expandMore = <ExpandMore
@@ -33,10 +33,11 @@ export default class Section extends React.PureComponent {
}
if (this.props.slider !== false) slider = <Slider name={this.props.name} />;
if (this.props.noDropdown) noDropdown = 'nodropdown';
return (
<div className='section'>
<h4 onClick={() => this.toggleSection()}>{this.props.title}</h4>
<h4 className={noDropdown} onClick={() => this.toggleSection()}>{this.props.title}</h4>
{expandMore}
{slider}
<div style={{display: this.state.display}}>

79
src/components/modals/settings/sections/BackgroundSettings.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { toast } from 'react-toastify';
import Checkbox from '../Checkbox';
import Section from '../Section';
export default class BackgroundSettings extends React.PureComponent {
DefaultGradientSettings = { "angle": "180", "gradient": [{ "colour": this.props.language.background.disabled, "stop": 0 }], "type": "linear" };
@@ -151,44 +152,46 @@ export default class BackgroundSettings extends React.PureComponent {
}
return (
<div>
<ul>
<Checkbox name='view' text={this.props.language.background.view} />
<Checkbox name='favouriteEnabled' text={this.props.language.background.favourite} />
<Checkbox name='refresh' text={this.props.language.background.refresh} />
</ul>
<ul>
<label htmlFor='backgroundapi'>{this.props.language.background.API} </label>
<label className='dropdown'>
<select className='select-css' name='backgroundapi' id='backgroundAPI' onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
<option className='choices' value='mue'>Mue</option>
<option className='choices' value='unsplash'>Unsplash</option>
</select>
</label>
</ul>
<ul>
<p>{this.props.language.background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
<input className='range' type='range' min='0' max='100' id='blurRange' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
</ul>
<ul>
<p>{this.props.language.background.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
<input className='range' type='range' min='0' max='100' id='brightnessRange' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
</ul>
<ul>
<p>{this.props.language.background.customURL} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<input type='text' id='customBackground'></input>
</ul>
<ul>
<p>{this.props.language.background.custombackground} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.background.upload}</button>
<input id='bg-input' type='file' name='name' className='hidden' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' />
</ul>
<ul>
<p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
<input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
{colourSettings}
</ul>
</div>
<React.Fragment>
<Section title={this.props.language.background.title} name='background'>
<ul>
<Checkbox name='view' text={this.props.language.background.view} />
<Checkbox name='favouriteEnabled' text={this.props.language.background.favourite} />
<Checkbox name='refresh' text={this.props.language.background.refresh} />
</ul>
<ul>
<label htmlFor='backgroundapi'>{this.props.language.background.API} </label>
<label className='dropdown'>
<select className='select-css' name='backgroundapi' id='backgroundAPI' onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
<option className='choices' value='mue'>Mue</option>
<option className='choices' value='unsplash'>Unsplash</option>
</select>
</label>
</ul>
<ul>
<p>{this.props.language.background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
<input className='range' type='range' min='0' max='100' id='blurRange' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
</ul>
<ul>
<p>{this.props.language.background.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
<input className='range' type='range' min='0' max='100' id='brightnessRange' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
</ul>
<ul>
<p>{this.props.language.background.customURL} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<input type='text' id='customBackground'></input>
</ul>
<ul>
<p>{this.props.language.background.custombackground} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.background.upload}</button>
<input id='bg-input' type='file' name='name' className='hidden' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' />
</ul>
<ul>
<p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
<input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
{colourSettings}
</ul>
</Section>
</React.Fragment>
);
}
}

33
src/components/modals/settings/sections/SearchSettings.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import SettingsFunctions from '../../../../modules/settingsFunctions';
import { toast } from 'react-toastify';
import Section from '../Section';
const searchEngines = require('../../../../modules/searchEngines.json');
@@ -24,21 +25,23 @@ export default class SearchSettings extends React.PureComponent {
render() {
return (
<div>
<ul>
<label htmlFor='searchEngine'>{this.props.language.searchbar.searchengine} </label>
<select className='select-css' name='searchEngine' id='searchEngine' onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}>
{searchEngines.map((engine) =>
<option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
)}
<option className='choices' value='custom'>Custom</option>
</select>
</ul>
<ul id='searchEngineInput' style={{ display: 'none' }}>
<p style={{"marginTop": "0px"}}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
<input type='text' id='customSearchEngine'></input>
</ul>
</div>
<React.Fragment>
<Section title={this.props.language.searchbar.title} name='searchBar'>
<ul>
<label htmlFor='searchEngine'>{this.props.language.searchbar.searchengine} </label>
<select className='select-css' name='searchEngine' id='searchEngine' onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}>
{searchEngines.map((engine) =>
<option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
)}
<option className='choices' value='custom'>Custom</option>
</select>
</ul>
<ul id='searchEngineInput' style={{ display: 'none' }}>
<p style={{"marginTop": "0px"}}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
<input type='text' id='customSearchEngine'></input>
</ul>
</Section>
</React.Fragment>
);
}
}

28
src/components/modals/tabs/Settings.jsx
View File

@@ -1,7 +1,6 @@
import React from 'react';
import SettingsFunctions from '../../../modules/settingsFunctions';
import Checkbox from '../settings/Checkbox';
import Slider from '../settings/Slider';
import Section from '../settings/Section';
import { toast } from 'react-toastify';
@@ -50,6 +49,7 @@ export default class Settings extends React.PureComponent {
<Checkbox name='zero' text={this.props.language.time.zero} />
<Checkbox name='analog' text={this.props.language.time.analog} />
</Section>
<Section title={this.props.language.greeting.title} name='greeting'>
<Checkbox name='events' text={this.props.language.greeting.events} />
<Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
@@ -58,31 +58,27 @@ export default class Settings extends React.PureComponent {
<input type='text' id='greetingName'></input>
</ul>
</Section>
<Section title={this.props.language.quote.title} name='quote'>
<Checkbox name='copyButton' text={this.props.language.quote.copy} />
<Checkbox name='tweetButton' text={this.props.language.quote.tweet} />
<Checkbox name='favouriteQuoteEnabled' text={this.props.language.experimental.favourite} />
</Section>
<Section title={this.props.language.background.title} name='background'>
<BackgroundSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
</Section>
<Section title={this.props.language.searchbar.title} name='searchBar'>
<SearchSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
</Section>
<div className='section'>
<h4 className='nodropdown'>{this.props.language.offline}</h4>
<Slider name='offlineMode'/>
</div>
<div className='section'>
<h4 className='nodropdown'>{this.props.language.experimental.dark}</h4>
<Slider name='darkTheme'/>
</div>
<BackgroundSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
<SearchSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
<Section title={this.props.language.offline} name='offlineMode' noDropdown={true} />
<Section title={this.props.language.dark} name='darkTheme' noDropdown={true} />
<Section title={this.props.language.experimental.title} name='experimental' slider={false}>
<Checkbox name='webp' text={this.props.language.experimental.webp} />
<Checkbox name='animations' text={this.props.language.experimental.animations} />
<Checkbox name='voiceSearch' text={this.props.language.experimental.voicesearch} newFeature={true} />
<Checkbox name='brightnessTime' text='Automatic Night Mode' newFeature={true} />
<Checkbox name='brightnessTime' text={this.props.language.experimental.nightmode} newFeature={true} />
</Section>
<LanguageSettings language={this.props.language} />
<button className='apply' onClick={() => SettingsFunctions.saveStuff(this.props.language.background.disabled)}>{this.props.language.apply}</button>

7
src/components/widgets/Background.jsx
View File

@@ -25,14 +25,13 @@ export default class Background extends React.PureComponent {
localStorage.setItem('customBackgroundColour', JSON.stringify(gradientSettings));
}
}
const background = typeof gradientSettings === 'object' && gradientSettings !== null ? this.gradientStyleBuilder(gradientSettings) : `background-image: url(${url});`;
const background = typeof gradientSettings === 'object' && gradientSettings !== null ? this.gradientStyleBuilder(gradientSettings) : `background-image: url(${url})`;
let brightness = localStorage.getItem('brightness');
if (localStorage.getItem('brightnessTime') && new Date().getHours() > 18) brightness = 75;
document.querySelector('#backgroundImage').setAttribute(
'style',
`${background};
-webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
`${background}; -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
);
if (credit === 'false') document.querySelector('#credits').style.display = 'none'; // Hide the credit
@@ -52,7 +51,7 @@ export default class Background extends React.PureComponent {
const randomImage = offlineImages[photographer].photo[
Math.floor(Math.random() * offlineImages[photographer].photo.length)
]; // Select a random image
const url = `../offline-images/${randomImage}.jpeg`;
const url = `../offline-images/${randomImage}.jpg`;
this.setBackground(url);
this.setCredit(photographer);

1
src/components/widgets/Maximise.jsx
View File

@@ -27,6 +27,7 @@ export default class View extends React.PureComponent {
return;
}
});
if (this.state.hidden === false) {
this.setState({ hidden: true });
this.setAttribute(0, 100);

5
src/translations/en.json
View File

@@ -57,12 +57,13 @@
"custom": "Custom Search URL"
},
"offline": "Offline Mode",
"dark": "Dark Theme",
"experimental": {
"title": "Experimental",
"webp": "Enable WebP",
"dark": "Dark Theme",
"animations": "Animations",
"voicesearch": "Voice Search"
"voicesearch": "Voice Search",
"nightmode": "Automatic Night Mode"
},
"language": "Language",
"apply": "Apply",

2
src/translations/fr.json
View File

@@ -56,10 +56,10 @@
"custom": "URL de recherche personnalisée"
},
"offline": "Mode Hors-Ligne",
"dark": "Thème sombre",
"experimental": {
"title": "Expérimental",
"webp": "Activer WebP",
"dark": "Thème sombre",
"animations": "Animations",
"favourite": "Bouton Ajouter aux favoris",
"voicesearch": "Recherche vocale"

2
src/translations/nl.json
View File

@@ -49,10 +49,10 @@
"searchengine": "Zoekmachine"
},
"offline": "Offline Modus",
"dark": "Donker Thema",
"experimental": {
"title": "Experimenteel",
"webp": "WebP Gebruiken",
"dark": "Donker Thema",
"animations": "Animaties"
},
"language": "Taal",

2
src/translations/no.json
View File

@@ -48,10 +48,10 @@
"searchengine": "Søkemotor"
},
"offline": "Frakoblet Modus",
"dark": "Mørkt tema",
"experimental": {
"title": "Eksperimental",
"webp": "Skru på WebP",
"dark": "Mørkt tema",
"animations": "Animasjoner"
},
"language": "Språk",

2
src/translations/ru.json
View File

@@ -50,10 +50,10 @@
"searchengine": "Поисковый движок"
},
"offline": "Офлайн режим",
"dark": "Тёмная тема",
"experimental": {
"title": "Экспериментальные настройки",
"webp": "Включить WebP",
"dark": "Тёмная тема",
"animations": "Анимации"
},
"language": "Язык",