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

finish the new settings stuff

Browse Source
This commit is contained in:
David Ralph
2021-02-26 12:29:57 +00:00
parent e3fb5140be
commit 2664fcab19
6 changed files with 36 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,7 +10,6 @@ import hexToRgb from '../../../../modules/helpers/background/hexToRgb';
import rgbToHex from '../../../../modules/helpers/background/rgbToHex';
import { toast } from 'react-toastify';
import { Beforeunload } from 'react-beforeunload';
import 'react-color-gradient-picker/dist/index.css';
import '../../../../scss/react-color-picker-gradient-picker-custom-styles.scss';
@@ -177,10 +176,14 @@ export default class BackgroundSettings extends React.PureComponent {
});
}
beforeUnload() {
componentDidUpdate() {
localStorage.setItem('blur', this.state.blur);
localStorage.setItem('brightness', this.state.brightness);
localStorage.setItem('customBackground', this.state.customBackground);
if (document.getElementById('customBackgroundHex').value !== this.props.backgroundDisabled) {
localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);
}
}
render() {
@@ -264,7 +267,6 @@ export default class BackgroundSettings extends React.PureComponent {
{this.state.shown && colourSettings}
</ul>
</Section>
<Beforeunload onBeforeunload={() => this.beforeUnload()}/>
</React.Fragment>
);
}

4
src/components/modals/settings/sections/GreetingSettings.jsx
View File

@@ -5,7 +5,6 @@ import Checkbox from '../Checkbox';
import DatePicker from 'react-date-picker';
import { toast } from 'react-toastify';
import { Beforeunload } from 'react-beforeunload';
export default class GreetingSettings extends React.PureComponent {
constructor(...args) {
@@ -36,7 +35,7 @@ export default class GreetingSettings extends React.PureComponent {
});
}
beforeUnload() {
componentDidUpdate() {
localStorage.setItem('greetingName', this.state.greetingName);
}
@@ -54,7 +53,6 @@ export default class GreetingSettings extends React.PureComponent {
<p>{this.props.language.greeting.birthday_date}</p>
<DatePicker onChange={(data) => this.changeDate(data)} value={this.state.birthday}/>
</ul>
<Beforeunload onBeforeunload={() => this.beforeUnload()}/>
</Section>
);
}

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

@@ -1,7 +1,5 @@
import React from 'react';
import SettingsFunctions from '../../../../modules/helpers/settings';
import { toast } from 'react-toastify';
import Section from '../Section';
@@ -35,6 +33,28 @@ export default class SearchSettings extends React.PureComponent {
document.getElementById('searchEngine').value = searchEngine;
}
componentDidUpdate() {
if (document.getElementById('searchEngineInput').enabled === 'true') {
const input = document.getElementById('customSearchEngine').value;
if (input) {
localStorage.setItem('searchEngine', 'custom');
localStorage.setItem('customSearchEngine', input);
}
}
}
setSearchEngine(input) {
const searchEngineInput = document.getElementById('searchEngineInput');
if (input === 'custom') {
searchEngineInput.enabled = 'true';
searchEngineInput.style.display = 'block';
} else {
searchEngineInput.style.display = 'none';
searchEngineInput.enabled = 'false';
localStorage.setItem('searchEngine', input);
}
}
render() {
return (
<Section title={this.props.language.searchbar.title} name='searchBar'>
@@ -43,7 +63,7 @@ export default class SearchSettings extends React.PureComponent {
<Dropdown label={this.props.language.searchbar.search_engine}
name='searchEngine'
id='searchEngine'
onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)} >
onChange={() => this.setSearchEngine(document.getElementById('searchEngine').value)} >
{searchEngines.map((engine) =>
<option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
)}

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

@@ -42,6 +42,10 @@ export default class Settings extends React.PureComponent {
toast(this.props.toastLanguage.imported);
}
componentWillUnmount() {
localStorage.setItem('customcss', document.getElementById('customcss').value);
}
render() {
return (
<div className='columns'>
@@ -81,7 +85,7 @@ export default class Settings extends React.PureComponent {
</Dropdown>
</Section>
<BackgroundSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
<BackgroundSettings language={this.props.language} toastLanguage={this.props.toastLanguage} backgroundDisabled={this.props.language.background.disabled} />
<SearchSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
<Section title={this.props.language.offline} name='offlineMode' dropdown={false} />
@@ -97,7 +101,7 @@ export default class Settings extends React.PureComponent {
<LanguageSettings language={this.props.language} />
<button className='apply' onClick={() => SettingsFunctions.saveStuff(this.props.language.background.disabled)}>{this.props.language.apply}</button>
<button className='apply' onClick={() => window.location.reload()}>{this.props.language.apply}</button>
<button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>{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>

32
src/modules/helpers/settings.js
View File

@@ -43,36 +43,6 @@ export default class SettingsFunctions {
localStorage.setItem(key, val);
}
static setSearchEngine(input) {
const searchEngineInput = document.getElementById('searchEngineInput');
if (input === 'custom') {
searchEngineInput.enabled = 'true';
searchEngineInput.style.display = 'block';
} else {
searchEngineInput.style.display = 'none';
searchEngineInput.enabled = 'false';
localStorage.setItem('searchEngine', input);
}
}
static saveStuff(hexDisabled) {
localStorage.setItem('customcss', document.getElementById('customcss').value);
if (document.getElementById('customBackgroundHex').value !== hexDisabled) {
localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);
}
if (document.getElementById('searchEngineInput').enabled === 'true') {
const input = document.getElementById('customSearchEngine').value;
if (input) {
localStorage.setItem('searchEngine', 'custom');
localStorage.setItem('customSearchEngine', input);
}
}
window.location.reload();
}
static setDefaultSettings(reset) {
localStorage.clear();
defaultSettings.forEach((element) => localStorage.setItem(element.name, element.value));
@@ -85,7 +55,7 @@ export default class SettingsFunctions {
}
// Languages
const languages = ['nl', 'no', 'fr', 'ru', 'es'];
const languages = ['es', 'fr', 'nl', 'no', 'ru'];
const browserLanguage = (navigator.languages && navigator.languages[0]) || navigator.language;
if (languages.includes(browserLanguage)) {