mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-11 18:31:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

fixes

Browse Source
This commit is contained in:
David Ralph
2020-09-22 15:43:09 +01:00
parent 2dd0e9150b
commit 66414461c4
6 changed files with 68 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/modals/Addons.jsx
View File

@@ -147,11 +147,7 @@ export default class Addons extends React.PureComponent {
}
render() {
let content = <div id='marketplace'>
<input id='file-input' type='file' name='name' className='hidden' />
<button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.props.language.sideload}</button>
<h1>{this.props.language.added}</h1>
<div className='items'>
let content = <div className='items'>
{this.state.installed.map((item) =>
<div className='item' onClick={() => this.toggle('item', item.type, item.name)}>
<img alt='icon' src={item.content.data.icon_url} />
@@ -160,23 +156,17 @@ export default class Addons extends React.PureComponent {
<p>{item.content.data.author}</p>
</div>
</div>)}
</div>
</div>;
</div>;
if (this.state.installed.length === 0) {
content = <div id='marketplace'>
<input id='file-input' type='file' name='name' className='hidden' />
<button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.props.language.sideload}</button>
<h1>{this.props.language.added}</h1>
<div className='items'>
content = <div className='items'>
<div className='emptyMessage'>
<LocalMallIcon />
<h1>{this.props.language.empty.title}</h1>
<p className='description'>{this.props.language.empty.description}</p>
<button className='goToMarket' onClick={this.props.openMarketplace}>{this.props.language.empty.button}</button>
</div>
</div>
</div>;
</div>;
}
return <div className='content'>
@@ -187,7 +177,12 @@ export default class Addons extends React.PureComponent {
<button className='tablinks' id='active'>{this.props.modalLanguage.addons}</button>
<button className='tablinks' onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
</div>
{content}
<div id='marketplace'>
<input id='file-input' type='file' name='name' className='hidden' />
<button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.props.language.sideload}</button>
<h1>{this.props.language.added}</h1>
{content}
</div>
<Item button={this.state.button} data={this.state.item_data} function={() => this.toggle()} language={this.props.marketplaceLanguage.product} />
</div>;
}

2
src/components/modals/Marketplace.jsx
View File

@@ -175,7 +175,7 @@ export default class Marketplace extends React.PureComponent {
render() {
if (navigator.onLine === false) return this.offlineHTML;
if (this.state.done === false) {
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'>

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

@@ -11,47 +11,16 @@ import SearchSettings from './settings/sections/SearchSettings';
import LanguageSettings from './settings/sections/LanguageSettings';
export default class Settings extends React.PureComponent {
resetItem(key) {
switch (key) {
case 'greetingName': document.getElementById('greetingName').value = ''; break;
case 'customBackgroundColour':
localStorage.setItem('customBackgroundColour', '');
document.getElementById('customBackgroundHex').textContent = 'Disabled';
break;
case 'customBackground': document.getElementById('customBackground').value = ''; break;
case 'blur':
localStorage.setItem('blur', 0);
document.getElementById('blurRange').value = 0;
document.getElementById('blurAmount').innerText = '0';
break;
case 'brightness':
localStorage.setItem('brightness', 100);
document.getElementById('brightnessRange').value = 100;
document.getElementById('brightnessAmount').innerText = '100';
break;
case 'customSearchEngine':
localStorage.removeItem('customSearchEngine');
document.getElementById('searchEngine').value = 'DuckDuckGo';
break;
default: toast('resetItem requires a key!');
}
resetGreeting() {
document.getElementById('greetingName').value = '';
toast(this.props.toastLanguage.reset);
}
updateCurrent() {
document.getElementById('greetingName').value = localStorage.getItem('greetingName');
document.getElementById('language').value = localStorage.getItem('language');
if (localStorage.getItem('darkTheme') === 'true') {
document.getElementById('blurRange').style.background = '#535c68';
document.getElementById('brightnessRange').style.background = '#535c68';
document.getElementById('customBackground').style.color = 'white';
document.getElementById('backgroundAPI').style.color = 'white';
document.getElementById('searchEngine').style.color = 'white';
document.getElementById('language').style.color = 'white';
document.getElementById('greetingName').style.color = 'white';
document.getElementById('customSearchEngine').style.color = 'white';
const choices = document.getElementsByClassName('choices');
for (let i = 0; i < choices.length; i++) choices[i].style.backgroundColor = '#2f3542';
}
@@ -84,9 +53,6 @@ export default class Settings extends React.PureComponent {
}
render() {
// let expandClassList = '';
//if (localStorage.getItem('animations') === 'true') expandClassList = 'all 0.5 ease 0s';
return (
<div className='content'>
<span className='closeModal' onClick={this.props.modalClose}>&times;</span>
@@ -110,7 +76,7 @@ export default class Settings extends React.PureComponent {
<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>
<p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetGreeting()}>{this.props.language.reset}</span></p>
<input type='text' id='greetingName'></input>
</ul>
</Section>
@@ -119,10 +85,10 @@ export default class Settings extends React.PureComponent {
<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)}/>
<BackgroundSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
</Section>
<Section title={this.props.language.searchbar.title} name='searchBar'>
<SearchSettings language={this.props.language} resetItem={(item) => this.resetItem(item)}/>
<SearchSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
</Section>
<div className='section'>
<h4>{this.props.language.offline}</h4>

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

@@ -2,6 +2,28 @@ import React from 'react';
import { toast } from 'react-toastify';
export default class BackgroundSettings extends React.PureComponent {
resetItem(key) {
switch (key) {
case 'customBackgroundColour':
localStorage.setItem('customBackgroundColour', '');
document.getElementById('customBackgroundHex').textContent = 'Disabled';
break;
case 'customBackground': document.getElementById('customBackground').value = ''; break;
case 'blur':
localStorage.setItem('blur', 0);
document.getElementById('blurRange').value = 0;
document.getElementById('blurAmount').innerText = '0';
break;
case 'brightness':
localStorage.setItem('brightness', 100);
document.getElementById('brightnessRange').value = 100;
document.getElementById('brightnessAmount').innerText = '100';
break;
default: toast('resetItem requires a key!');
}
toast(this.props.toastLanguage.reset);
}
componentDidMount() {
document.getElementById('bg-input').onchange = (e) => {
const reader = new FileReader();
@@ -50,24 +72,24 @@ 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.props.resetItem('blur')}>{this.props.language.reset}</span></p>
<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} />
</ul>
<ul>
<p>{this.props.language.background.brightness} (<span id='brightnessAmount'></span>%) <span className='modalLink' onClick={() => this.props.resetItem('brightness')}>{this.props.language.reset}</span></p>
<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} />
</ul>
<ul>
<p>{this.props.language.background.customURL} <span className='modalLink' onClick={() => this.props.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<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.props.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<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/svg+xml, image/jpeg, image/png, image/webp, image/webm, image/gif' />
</ul>
<ul>
<p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.props.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
<p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
<input name='colour' type='color' id='customBackgroundColour' onChange={() => document.getElementById('customBackgroundHex').innerText = document.getElementById('customBackgroundColour').value}></input>
<label htmlFor='colour' id='customBackgroundHex'>#00000</label>
</ul>

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

@@ -1,8 +1,16 @@
import React from 'react';
import SettingsFunctions from '../../../../modules/settingsFunctions';
import { toast } from 'react-toastify';
const searchEngines = require('../../../../modules/searchEngines.json');
export default class SearchSettings extends React.PureComponent {
resetSearch() {
localStorage.removeItem('customSearchEngine');
document.getElementById('customSearchEngine').value = '';
toast(this.props.toastLanguage.reset);
}
componentDidMount() {
if (localStorage.getItem('searchEngine') === 'custom') {
const input = document.getElementById('searchEngineInput');
@@ -27,7 +35,7 @@ export default class SearchSettings extends React.PureComponent {
</select>
</ul>
<ul id='searchEngineInput' style={{ display: 'none' }}>
<p style={{"marginTop": "0px"}}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.props.resetItem('customSearchEngine')}>{this.props.language.reset}</span></p>
<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>