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

various fixes and optimisations

Browse Source
This commit is contained in:
David Ralph
2020-09-26 14:47:47 +01:00
parent 8e921e3c12
commit 4b27532ac6
10 changed files with 73 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Navbar.jsx
View File

@@ -12,11 +12,11 @@ export default class Navbar extends React.PureComponent {
return (
<div className='navbar-container'>
<div className='navbar1'>
<Gear className='settings-icon' onClick={this.props.settingsModalOpen} />
<Gear className='settingsicon' onClick={this.props.settingsModalOpen} />
</div>
{refreshHTML}
<div className={refresh === 'false' ? 'navbar2' : 'navbar3'}>
<NewReleases className='refreshicon' onClick={this.props.updateModalOpen} />
<NewReleases className='updateicon' onClick={this.props.updateModalOpen} />
</div>
</div>
);

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

@@ -6,7 +6,6 @@ import Section from './settings/Section';
import { toast } from 'react-toastify';
import BackgroundSettings from './settings/sections/BackgroundSettings';
import ExperimentalSettings from './settings/sections/ExperimentalSettings';
import SearchSettings from './settings/sections/SearchSettings';
import LanguageSettings from './settings/sections/LanguageSettings';
@@ -98,7 +97,13 @@ export default class Settings extends React.PureComponent {
<h4 class='nodropdown'>{this.props.language.experimental.dark}</h4>
<Slider name='darkTheme'/>
</div>
<ExperimentalSettings language={this.props.language} />
<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='view' text={this.props.language.experimental.view} />
<Checkbox name='favouriteEnabled' text={this.props.language.experimental.favourite} />
<Checkbox name='refresh' text={this.props.language.experimental.refresh} />
</Section>
<LanguageSettings language={this.props.language} />
<button className='apply' onClick={() => SettingsFunctions.saveStuff()}>{this.props.language.apply}</button>

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

@@ -1,25 +1,49 @@
import React from 'react';
import SettingsFunctions from '../../../modules/settingsFunctions';
import Slider from './Slider';
import ExpandMore from '@material-ui/icons/ExpandMore';
export default class Section extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
display: 'none',
transform: 'rotate(0)'
};
}
toggleSection() {
let display = 'none';
if (this.state.display === 'none') display = 'block';
let transform = 'rotate(0)';
if (this.state.transform === 'rotate(0)') transform = 'rotate(-180deg)';
this.setState({
display: display,
transform: transform
});
}
render() {
let extraHTML, expandMore;
let extraHTML, expandMore, slider;
if (this.props.children) {
extraHTML = <li className={'extraSettings ' + this.props.title}>{this.props.children}</li>
extraHTML = <li className='extraSettings'>{this.props.children}</li>
expandMore = <ExpandMore
style={{ 'transition': 'all 0.5s ease 0s' }}
className={`expandIcons expand${this.props.title}`}
onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName(this.props.title)[0], document.getElementsByClassName('expand' + this.props.title)[0])}
/>
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} />;
return (
<div className='section'>
<h4 onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName(this.props.title)[0], document.getElementsByClassName('expand' + this.props.title)[0])}>{this.props.title}</h4>
<h4 onClick={() => this.toggleSection()}>{this.props.title}</h4>
{expandMore}
<Slider name={this.props.name} />
{extraHTML}
{slider}
<div style={{display: this.state.display}}>
{extraHTML}
</div>
</div>
);
}

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

@@ -2,6 +2,14 @@ import React from 'react';
import { toast } from 'react-toastify';
export default class BackgroundSettings extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
blur: 0,
brightness: 100
};
}
resetItem(key) {
switch (key) {
case 'customBackgroundColour':
@@ -11,13 +19,11 @@ export default class BackgroundSettings extends React.PureComponent {
case 'customBackground': document.getElementById('customBackground').value = ''; break;
case 'blur':
localStorage.setItem('blur', 0);
document.getElementById('blurRange').value = 0;
document.getElementById('blurAmount').innerText = '0';
this.setState({ blur: 0 });
break;
case 'brightness':
localStorage.setItem('brightness', 100);
document.getElementById('brightnessRange').value = 100;
document.getElementById('brightnessAmount').innerText = '100';
this.setState({ blur: 100 });
break;
default: toast('resetItem requires a key!');
}
@@ -46,14 +52,10 @@ export default class BackgroundSettings extends React.PureComponent {
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;
this.setState({
blur: localStorage.getItem('blur'),
brightness: localStorage.getItem('brightness')
})
document.getElementById('customBackground').value = localStorage.getItem('customBackground');
document.getElementById('backgroundAPI').value = localStorage.getItem('backgroundAPI');
@@ -72,12 +74,12 @@ export default class BackgroundSettings extends React.PureComponent {
</label>
</ul>
<ul>
<p>{this.props.language.background.blur} (<span id='blurAmount'></span>%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
<input className='range' type='range' min='0' max='100' id='blurRange' onInput={() => document.getElementById('blurAmount').innerText = document.getElementById('blurRange').value} />
<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} (<span id='brightnessAmount'></span>%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
<input className='range' type='range' min='0' max='100' id='brightnessRange' onInput={() => document.getElementById('brightnessAmount').innerText = document.getElementById('brightnessRange').value} />
<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>

22
src/components/modals/settings/sections/ExperimentalSettings.jsx
View File

@@ -1,22 +0,0 @@
import React from 'react';
import Checkbox from '../Checkbox';
import ExpandMore from '@material-ui/icons/ExpandMore';
import SettingsFunctions from '../../../../modules/settingsFunctions';
export default class ExperimentalSettings extends React.PureComponent {
render() {
return (
<div className='section'>
<h4 onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[5], document.getElementsByClassName('expandIcons')[5])}>{this.props.language.experimental.title}</h4>
<ExpandMore style={{ 'transition': 'all 0.5s ease 0s' }} className='expandIcons' onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[5], document.getElementsByClassName('expandIcons')[5])} />
<li className='extraSettings'>
<Checkbox name='webp' text={this.props.language.experimental.webp} />
<Checkbox name='animations' text={this.props.language.experimental.animations} />
<Checkbox name='view' text={this.props.language.experimental.view} />
<Checkbox name='favouriteEnabled' text={this.props.language.experimental.favourite} />
<Checkbox name='refresh' text={this.props.language.experimental.refresh} />
</li>
</div>
);
}
}

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

@@ -8,8 +8,7 @@ export default class Background extends React.PureComponent {
document.querySelector('#backgroundImage').setAttribute(
'style',
`${background};
-webkit-filter: blur(${localStorage.getItem('blur')}px);
-webkit-filter: brightness(${localStorage.getItem('brightness')}%);`
-webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%);`
);
if (credit === 'false') document.querySelector('#credits').style.display = 'none'; // Hide the credit