mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-16 13:34:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
David Ralph
2020-09-19 14:53:33 +01:00
parent ed38bc2cbb
commit f50c32778c
8 changed files with 154 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/modals/Settings.jsx
View File

@@ -29,7 +29,10 @@ export default class Settings extends React.PureComponent {
document.getElementById('brightnessRange').value = 100;
document.getElementById('brightnessAmount').innerText = '100';
break;
case 'customSearchEngine': document.getElementById('searchEngine').value = 'DuckDuckGo'; break;
case 'customSearchEngine':
localStorage.removeItem('customSearchEngine');
document.getElementById('searchEngine').value = 'DuckDuckGo';
break;
default: toast('resetItem requires a key!');
}
toast(this.props.toastLanguage.reset);
@@ -37,28 +40,8 @@ export default class Settings extends React.PureComponent {
updateCurrent() {
document.getElementById('greetingName').value = localStorage.getItem('greetingName');
document.getElementById('customBackground').value = localStorage.getItem('customBackground');
document.getElementById('backgroundAPI').value = localStorage.getItem('backgroundAPI');
document.getElementById('language').value = localStorage.getItem('language');
document.getElementById('searchEngine').value = localStorage.getItem('searchEngine');
// document.getElementById('backgroundImage').style.backgroundUrl = localStorage.getItem('customBackground');
for (const key of Object.keys(localStorage)) {
const value = localStorage.getItem(key);
if (key === 'blur') {
document.getElementById('blurAmount').innerText = value;
document.getElementById('blurRange').value = value;
}
if (key === 'brightness') {
document.getElementById('brightnessAmount').innerText = value;
document.getElementById('brightnessRange').value = value;
}
const tag = document.getElementById(`${key}Status`);
if (tag) tag.checked = (value === 'true');
}
if (localStorage.getItem('darkTheme') === 'true') {
document.getElementById('blurRange').style.background = '#535c68';
@@ -104,7 +87,8 @@ export default class Settings extends React.PureComponent {
// let expandClassList = '';
//if (localStorage.getItem('animations') === 'true') expandClassList = 'all 0.5 ease 0s';
return <div className='content'>
return (
<div className='content'>
<span className='closeModal' onClick={this.props.modalClose}>&times;</span>
<h1>{this.props.modalLanguage.title}</h1>
<div className='tab'>
@@ -114,49 +98,50 @@ export default class Settings extends React.PureComponent {
</div>
<br/>
<div className='columns'>
<Section title={this.props.language.time.title} name='time'>
<div className='columns'>
<Section title={this.props.language.time.title} name='time'>
<Checkbox name='seconds' text={this.props.language.time.seconds} />
<Checkbox name='24hour' text={this.props.language.time.twentyfourhour} />
<Checkbox name='ampm' text={this.props.language.time.ampm} />
<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} />
<ul>
<p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetItem('greetingName')}>{this.props.language.reset}</span></p>
<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='Tweet Button' />
</Section>
<Section title={this.props.language.background.title} name='background'>
<BackgroundSettings language={this.props.language} resetItem={(item) => this.resetItem(item)}/>
</Section>
<Section title={this.props.language.searchbar.title} name='searchBar'>
<SearchSettings language={this.props.language} resetItem={(item) => this.resetItem(item)}/>
</Section>
<div className='section'>
<h4>{this.props.language.offline}</h4>
<Slider name='offlineMode'/>
</div>
<div className='section'>
<h4>{this.props.language.experimental.dark}</h4>
<Slider name='darkTheme'/>
</div>
<ExperimentalSettings language={this.props.language} />
<LanguageSettings language={this.props.language} />
</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} />
<ul>
<p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetItem('greetingName')}>{this.props.language.reset}</span></p>
<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='Tweet Button' />
</Section>
<Section title={this.props.language.background.title} name='background'>
<BackgroundSettings language={this.props.language} resetItem={(item) => this.resetItem(item)}/>
</Section>
<Section title={this.props.language.searchbar.title} name='searchBar'>
<SearchSettings language={this.props.language} resetItem={(item) => this.resetItem(item)}/>
</Section>
<div className='section'>
<h4>{this.props.language.offline}</h4>
<Slider name='offlineMode'/>
</div>
<div className='section'>
<h4>{this.props.language.experimental.dark}</h4>
<Slider name='darkTheme'/>
</div>
<ExperimentalSettings language={this.props.language} />
<LanguageSettings language={this.props.language} />
<button className='apply' onClick={() => SettingsFunctions.saveStuff()}>{this.props.language.apply}</button>
<button className='reset' onClick={() => this.props.setDefaultSettings()}>{this.props.language.reset}</button>
<button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.props.language.export}</button>
<button className='import' onClick={() => document.getElementById('file-input').click()}>{this.props.language.import}</button>
<input id='file-input' type='file' name='name' className='hidden' />
<button className='apply' onClick={() => SettingsFunctions.saveStuff()}>{this.props.language.apply}</button>
<button className='reset' onClick={() => this.props.setDefaultSettings()}>{this.props.language.reset}</button>
<button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.props.language.export}</button>
<button className='import' onClick={() => document.getElementById('file-input').click()}>{this.props.language.import}</button>
<input id='file-input' type='file' name='name' className='hidden' />
</div>
</div>
</div>;
);
}
}

6
src/components/modals/settings/Checkbox.jsx
View File

@@ -7,7 +7,7 @@ export default class Checkbox extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
checked: true
checked: (localStorage.getItem(this.props.name) === 'true')
};
}
@@ -16,10 +16,6 @@ export default class Checkbox extends React.PureComponent {
this.setState({ checked: (this.state.checked === true) ? false : true });
}
componentDidMount() {
this.setState({ checked: (localStorage.getItem(this.props.name) === 'true') });
}
render() {
return (
<React.Fragment>

21
src/components/modals/settings/Slider.jsx
View File

@@ -2,12 +2,27 @@ import React from 'react';
import SettingsFunctions from '../../../modules/settingsFunctions';
export default class Slider extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
checked: true
};
}
handleChange(name) {
SettingsFunctions.setItem(name);
this.setState({ checked: (this.state.checked === true) ? false : true });
}
componentDidMount() {
this.setState({ checked: (localStorage.getItem(this.props.name) === 'true') });
}
render() {
let setText = this.props.name;
if (this.props.override) setText = this.props.override;
let setText = (this.props.override) ? this.props.name : this.props.override;
return (
<label className='switch'>
<input type='checkbox' onClick={() => SettingsFunctions.setItem(setText)} id={this.props.name + 'Status'} />
<input type='checkbox' checked={this.state.checked} onChange={() => this.handleChange(setText)} />
<span className='slider'></span>
</label>
);

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

@@ -3,26 +3,38 @@ import { toast } from 'react-toastify';
export default class BackgroundSettings extends React.PureComponent {
componentDidMount() {
document.getElementById('bg-input').onchange = (e) => {
const reader = new FileReader();
const file = e.target.files[0];
document.getElementById('bg-input').onchange = (e) => {
const reader = new FileReader();
const file = e.target.files[0];
if (file.size > 2000000) return toast('File is over 2MB', '#ff0000', '#ffffff');
if (file.size > 2000000) return toast('File is over 2MB', '#ff0000', '#ffffff');
reader.addEventListener('load', (e) => {
localStorage.setItem('customBackground', e.target.result);
document.getElementById('customBackground').src = e.target.result;
document.getElementById('customBackground').value = e.target.result;
});
reader.addEventListener('load', (e) => {
localStorage.setItem('customBackground', e.target.result);
document.getElementById('customBackground').src = e.target.result;
document.getElementById('customBackground').value = e.target.result;
});
reader.readAsDataURL(file);
};
reader.readAsDataURL(file);
};
const hex = localStorage.getItem('customBackgroundColour');
if (hex !== '') {
document.getElementById('customBackgroundColour').value = hex;
document.getElementById('customBackgroundHex').innerText = hex;
} else document.getElementById('customBackgroundHex').innerText = 'Disabled';
const hex = localStorage.getItem('customBackgroundColour');
if (hex !== '') {
document.getElementById('customBackgroundColour').value = hex;
document.getElementById('customBackgroundHex').innerText = hex;
} else document.getElementById('customBackgroundHex').innerText = 'Disabled';
const blur = localStorage.getItem('blur');
const brightness = localStorage.getItem('brightness');
document.getElementById('blurAmount').innerText = blur;
document.getElementById('blurRange').value = blur;
document.getElementById('brightnessAmount').innerText = brightness;
document.getElementById('brightnessRange').value = brightness;
document.getElementById('customBackground').value = localStorage.getItem('customBackground');
document.getElementById('backgroundAPI').value = localStorage.getItem('backgroundAPI');
}
render() {

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

@@ -1,5 +1,6 @@
import React from 'react';
import SettingsFunctions from '../../../../modules/settingsFunctions';
const searchEngines = require('../../../../modules/searchEngines.json');
export default class SearchSettings extends React.PureComponent {
componentDidMount() {
@@ -9,23 +10,19 @@ export default class SearchSettings extends React.PureComponent {
input.enabled = 'true';
document.getElementById('customSearchEngine').value = localStorage.getItem('customSearchEngine');
} else localStorage.removeItem('customSearchEngine');
document.getElementById('searchEngine').value = localStorage.getItem('searchEngine');
}
render() {
return (
<div>
<ul>
<label htmlFor='4'>{this.props.language.searchbar.searchengine} </label>
<select className='select-css' name='4' id='searchEngine' onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}>
<option className='choices' value='duckduckgo'>DuckDuckGo</option>
<option className='choices' value='google'>Google</option>
<option className='choices' value='bing'>Bing</option>
<option className='choices' value='yahoo'>Yahoo</option>
<option className='choices' value='ecosia'>Ecosia</option>
<option className='choices' value='yandex'>Yandex</option>
<option className='choices' value='qwant'>Qwant</option>
<option className='choices' value='ask'>Ask</option>
<option className='choices' value='startpage'>Startpage</option>
<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 className='choices' value={engine.settingsName}>{engine.name}</option>
)}
<option className='choices' value='custom'>Custom</option>
</select>
</ul>

17
src/components/widgets/Search.jsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import SearchIcon from '@material-ui/icons/Search';
const searchEngines = require('../../modules/searchEngines.json');
export default class Search extends React.PureComponent {
render() {
@@ -8,18 +9,10 @@ export default class Search extends React.PureComponent {
let url;
let query = 'q';
switch (localStorage.getItem('searchEngine')) {
case 'duckduckgo': url = 'https://duckduckgo.com'; break;
case 'google': url = 'https://google.com/search'; break;
case 'bing': url = 'https://bing.com/search'; break;
case 'yahoo': url ='https://search.yahoo.com/search'; break;
case 'ecosia': url = 'https://ecosia.org/search'; break;
case 'yandex': url = 'https://yandex.ru/search'; query = 'text'; break;
case 'qwant': url = 'https://www.qwant.com/'; break;
case 'ask': url = 'https://ask.com/web'; break;
case 'startpage': url = 'https://www.startpage.com/sp/search'; break;
default: url = 'https://duckduckgo.com'; break;
}
const setting = localStorage.getItem('searchEngine');
const info = searchEngines.find(i => i.settingsName === setting);
url = info.url;
if (info.query) query = info.query;
const custom = localStorage.getItem('customSearchEngine');
if (custom) url = custom;