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

fix: marketplace now works, more hot reload support and fixes

Browse Source 
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
2021-04-12 20:35:17 +01:00
parent b370de9ea3
commit 90a4696114
14 changed files with 52 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/App.jsx
View File

@@ -4,6 +4,7 @@ import Background from './components/widgets/background/Background';
import Widgets from './components/widgets/Widgets';
import Modals from './components/modals/Modals';
import EventBus from './modules/helpers/eventbus';
import SettingsFunctions from './modules/helpers/settings';
import { ToastContainer } from 'react-toastify';
@@ -15,6 +16,12 @@ export default class App extends React.PureComponent {
}
SettingsFunctions.loadSettings();
EventBus.on('refresh', (data) => {
if (data === 'other') {
SettingsFunctions.loadSettings(true);
}
});
}
render() {

2
src/components/modals/main/marketplace/sections/Marketplace.jsx
View File

@@ -55,7 +55,7 @@ export default class Marketplace extends React.PureComponent {
const installed = JSON.parse(localStorage.getItem('installed'));
if (installed.some(item => item.name === data)) {
if (installed.some(item => item.name === info.data.name)) {
button = this.buttons.uninstall;
}

1
src/components/modals/main/scss/index.scss
View File

@@ -16,7 +16,6 @@
opacity: 1;
z-index: -2;
padding: 25px;
transition: 0.6s;
transition-timing-function: ease-in;
border-radius: map-get($modal, 'border-radius');
-moz-user-select: none;

4
src/components/modals/main/settings/Dropdown.jsx
View File

@@ -1,5 +1,7 @@
import React from 'react';
import EventBus from '../../../../modules/helpers/eventbus';
export default class Dropdown extends React.PureComponent {
constructor(props) {
super(props);
@@ -26,6 +28,8 @@ export default class Dropdown extends React.PureComponent {
if (this.props.onChange) {
this.props.onChange(value);
}
EventBus.dispatch('refresh', this.props.category);
}
// todo: find a better way to do this

1
src/components/modals/main/settings/Slider.jsx
View File

@@ -31,6 +31,7 @@ export default class Slider extends React.PureComponent {
});
toast(this.language.toasts.reset);
EventBus.dispatch('refresh', this.props.category);
}
render() {

1
src/components/modals/main/settings/Text.jsx
View File

@@ -36,6 +36,7 @@ export default class Text extends React.PureComponent {
});
toast(this.language.toasts.reset);
EventBus.dispatch('refresh', this.props.category);
}
render() {

2
src/components/modals/main/settings/sections/Advanced.jsx
View File

@@ -46,7 +46,7 @@ export default class AdvancedSettings extends React.PureComponent {
<h3>{advanced.customisation}</h3>
<Text title={advanced.custom_js} name='customjs' textarea={true}/>
<Text title={advanced.custom_css} name='customcss' textarea={true}/>
<Text title={advanced.tab_name} name='tabName' default={window.language.tabname}/>
<Text title={advanced.tab_name} name='tabName' default={window.language.tabname} category='other'/>
<h3>{this.language.sections.experimental.title}</h3>
<p>{advanced.experimental_warning}</p>

2
src/components/modals/main/settings/sections/Appearance.jsx
View File

@@ -29,7 +29,7 @@ export default function AppearanceSettings() {
return (
<>
<h2>{appearance.title}</h2>
<Radio name='theme' title={appearance.theme.title} options={themeOptions} />
<Radio name='theme' title={appearance.theme.title} options={themeOptions} category='other' />
<h3>{appearance.navbar.title}</h3>
<Checkbox name='notesEnabled' text={appearance.navbar.notes} />

12
src/components/modals/main/settings/sections/background/Background.jsx
View File

@@ -30,7 +30,7 @@ export default class BackgroundSettings extends React.PureComponent {
toast(this.language.toasts.reset);
}
fileUpload(e) {
customBackground(e) {
localStorage.setItem('customBackground', e.target.result);
this.setState({
customBackground: e.target.result
@@ -58,10 +58,6 @@ export default class BackgroundSettings extends React.PureComponent {
}
}
componentDidUpdate() {
localStorage.setItem('customBackground', this.state.customBackground);
}
async getBackgroundCategories() {
const data = await (await fetch(window.constants.API_URL + '/images/categories')).json();
this.setState({
@@ -94,7 +90,7 @@ export default class BackgroundSettings extends React.PureComponent {
<br/>
<Radio title={background.source.api} options={apiOptions} name='backgroundAPI'/>
<br/>
<Dropdown label='Category' name='apiCategory'>
<Dropdown label={background.category} name='apiCategory'>
{this.state.backgroundCategories.map((category) => (
<option value={category} key={category}>{category.charAt(0).toUpperCase() + category.slice(1)}</option>
))}
@@ -106,9 +102,9 @@ export default class BackgroundSettings extends React.PureComponent {
<>
<ul>
<p>{background.source.custom_background} <span className='modalLink' onClick={this.resetCustom}>{this.language.buttons.reset}</span></p>
<input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>
<input type='text' value={this.state.customBackground} onChange={(e) => this.customBackground(e)}></input>
<span className='modalLink' onClick={() => document.getElementById('bg-input').click()}>{background.source.upload}</span>
<FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg' loadFunction={(e) => this.fileUpload(e)} />
<FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg' loadFunction={(e) => this.customBackground(e)} />
</ul>
{this.videoCustomSettings()}
</>

18
src/modules/helpers/eventbus.js
View File

@@ -1,17 +1,15 @@
const EventBus = {
on(event, callback) {
export default class EventBus {
static on(event, callback) {
document.addEventListener(event, (e) => callback(e.detail));
},
}
dispatch(event, data) {
static dispatch(event, data) {
document.dispatchEvent(new CustomEvent(event, {
detail: data
}));
},
}
remove(event, callback) {
static remove(event, callback) {
document.removeEventListener(event, callback);
},
};
export default EventBus;
}
}

1
src/modules/helpers/marketplace.js
View File

@@ -18,6 +18,7 @@ export default class MarketplaceFunctions {
localStorage.removeItem('quote_packs');
localStorage.removeItem('quoteAPI');
break;
case 'photos':
case 'photo_packs':
localStorage.removeItem('photo_packs');
localStorage.setItem('backgroundType', localStorage.getItem('oldBackgroundType'));

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

@@ -72,14 +72,15 @@ export default class SettingsFunctions {
window.location.reload();
}
static loadSettings() {
static loadSettings(noeasteregg) {
const css = localStorage.getItem('customcss');
if (css) {
document.head.insertAdjacentHTML('beforeend', '<style>' + css + '</style>');
}
if (localStorage.getItem('darkTheme') === 'true') {
document.getElementsByClassName('Toastify')[0].classList.add('dark');
const js = localStorage.getItem('customjs');
if (js) {
document.body.insertAdjacentHTML('beforeend', '<script>' + js + '</script>');
}
const font = localStorage.getItem('font');
@@ -118,24 +119,31 @@ export default class SettingsFunctions {
}
const widgetzoom = localStorage.getItem('widgetzoom');
// don't bother if it's default zoom
if (widgetzoom !== '100') {
document.getElementById('root').style.zoom = widgetzoom + '%';
}
document.getElementById('root').style.zoom = widgetzoom + '%';
const theme = localStorage.getItem('theme');
if (theme === 'dark') {
document.body.classList.add('dark');
} else if (theme === 'auto') {
// Set theme depending on user preferred
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
switch (theme) {
case 'dark':
document.body.classList.add('dark');
}
break;
case 'auto':
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
break;
default:
document.body.classList.remove('dark');
}
const tabName = localStorage.getItem('tabName');
if (tabName !== window.language.tabname) {
document.title = tabName;
} else {
document.title = window.language.tabname;
}
if (noeasteregg === true) {
return;
}
// easter egg

1
src/translations/de_DE.json
View File

@@ -1,4 +1,5 @@
{
"tabname": "Neuer Tab",
"widgets": {
"greeting": {
"morning": "Guten Morgen",

1
src/translations/en_GB.json
View File

@@ -122,6 +122,7 @@
"title": "Background",
"ddg_proxy": "Use DuckDuckGo image proxy",
"transition": "Fade-in transition",
"category": "Category",
"buttons": {
"title": "Buttons",
"view": "Maximise",