extras
/
mue
mirror of https://github.com/mue/mue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: new sideload addons tab and hot reload for more widgets

This commit is contained in:
David Ralph 2021-04-13 11:47:12 +01:00
parent 5c638ec355
commit a5b5ee1912
13 changed files with 111 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/modals/main/marketplace/sections/Added.jsx
View File

@ -3,7 +3,6 @@ import React from 'react';
import LocalMallIcon from '@material-ui/icons/LocalMall';
import Item from '../Item';
import Items from '../Items';
import FileUpload from '../../settings/FileUpload';
import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
@ -117,8 +116,6 @@ export default class Added extends React.PureComponent {
return (
<>
<div id='marketplace'>
<FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.manage('install', JSON.parse(e.target.result))} />
{/*<button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>Sideload</button>*/}
{content}
</div>
<Item data={this.state.item_data} button={this.state.button} toggleFunction={() => this.toggle()} />

30
src/components/modals/main/marketplace/sections/Sideload.jsx Normal file
View File

@ -0,0 +1,30 @@
import React from 'react';
import FileUpload from '../../settings/FileUpload';
import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
import { toast } from 'react-toastify';
export default function Sideload() {
const manage = (type, input) => {
switch (type) {
case 'install':
MarketplaceFunctions.install(input.type, input);
break;
default:
break;
}
toast(window.language.toasts[type + 'ed']);
}
return (
<>
<div id='marketplace'>
<FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => manage('install', JSON.parse(e.target.result))} />
<button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{window.language.modals.main.addons.sideload}</button>
</div>
</>
);
}

16
src/components/modals/main/settings/sections/Greeting.jsx
View File

@ -1,5 +1,7 @@
import React from 'react';
import EventBus from '../../../../../modules/helpers/eventbus';
import Checkbox from '../Checkbox';
import Switch from '../Switch';
import Text from '../Text';
@ -22,6 +24,8 @@ export default class GreetingSettings extends React.PureComponent {
this.setState({
birthday: data
});
EventBus.dispatch('refresh', 'greeting');
}
render() {
@ -30,14 +34,14 @@ export default class GreetingSettings extends React.PureComponent {
return (
<>
<h2>{greeting.title}</h2>
<Switch name='greeting' text={this.language.enabled}/>
<Checkbox name='events' text={greeting.events}/>
<Checkbox name='defaultGreetingMessage' text={greeting.default}/>
<Text title={greeting.name} name='greetingName'/>
<Switch name='greeting' text={this.language.enabled} category='greeting'/>
<Checkbox name='events' text={greeting.events} category='greeting'/>
<Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting'/>
<Text title={greeting.name} name='greetingName' category='greeting'/>
<h3>{greeting.birthday}</h3>
<Switch name='birthdayenabled' text={this.language.enabled}/>
<Checkbox name='birthdayage' text={greeting.birthday_age}/>
<Switch name='birthdayenabled' text={this.language.enabled} category='greeting'/>
<Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting'/>
<p>{greeting.birthday_date}</p>
<DayPickerInput onDayChange={this.changeDate} value={this.state.birthday}/>
</>

34
src/components/modals/main/settings/sections/Time.jsx
View File

@ -34,21 +34,21 @@ export default class TimeSettings extends React.PureComponent {
const digitalSettings = (
<>
<h3>{time.digital.title}</h3>
<Radio title={time.format} name='timeformat' options={digitalOptions} smallTitle={true} />
<Radio title={time.format} name='timeformat' options={digitalOptions} smallTitle={true} category='clock' />
<br/>
<Checkbox name='seconds' text={time.digital.seconds} />
<Checkbox name='zero' text={time.digital.zero} />
<Checkbox name='seconds' text={time.digital.seconds} category='clock' />
<Checkbox name='zero' text={time.digital.zero} category='clock' />
</>
);
const analogSettings = (
<>
<h3>{time.analogue.title}</h3>
<Checkbox name='secondHand' text={time.analogue.second_hand} />
<Checkbox name='minuteHand' text={time.analogue.minute_hand} />
<Checkbox name='hourHand' text={time.analogue.hour_hand} />
<Checkbox name='hourMarks' text={time.analogue.hour_marks} />
<Checkbox name='minuteMarks' text={time.analogue.minute_marks} />
<Checkbox name='secondHand' text={time.analogue.second_hand} category='clock' />
<Checkbox name='minuteHand' text={time.analogue.minute_hand} category='clock' />
<Checkbox name='hourHand' text={time.analogue.hour_hand} category='clock' />
<Checkbox name='hourMarks' text={time.analogue.hour_marks} category='clock' />
<Checkbox name='minuteMarks' text={time.analogue.minute_marks} category='clock' />
</>
);
@ -62,21 +62,21 @@ export default class TimeSettings extends React.PureComponent {
const longSettings = (
<>
<Checkbox name='dayofweek' text={time.date.day_of_week} />
<Checkbox name='datenth' text={time.date.datenth} />
<Checkbox name='dayofweek' text={time.date.day_of_week} category='date' />
<Checkbox name='datenth' text={time.date.datenth} category='date' />
</>
);
const shortSettings = (
<>
<br/>
<Dropdown label={time.date.short_format} name='dateFormat'>
<Dropdown label={time.date.short_format} name='dateFormat' category='date'>
<option value='DMY'>DMY</option>
<option value='MDY'>MDY</option>
<option value='YMD'>YMD</option>
</Dropdown>
<br/><br/>
<Dropdown label={time.date.short_separator.title} name='shortFormat'>
<Dropdown label={time.date.short_separator.title} name='shortFormat' category='date'>
<option value='dots'>{time.date.short_separator.dots}</option>
<option value='dash'>{time.date.short_separator.dash}</option>
<option value='gaps'>{time.date.short_separator.gaps}</option>
@ -94,8 +94,8 @@ export default class TimeSettings extends React.PureComponent {
return (
<>
<h2>{time.title}</h2>
<Switch name='time' text={this.language.enabled} />
<Dropdown label={time.type} name='timeType' onChange={(value) => this.setState({ timeType: value })}>
<Switch name='time' text={this.language.enabled} category='clock' />
<Dropdown label={time.type} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock'>
<option value='digital'>{time.digital.title}</option>
<option value='analogue'>{time.analogue.title}</option>
<option value='percentageComplete'>{time.percentage_complete}</option>
@ -103,13 +103,13 @@ export default class TimeSettings extends React.PureComponent {
{timeSettings}
<h3>{time.date.title}</h3>
<Switch name='date' text={this.language.enabled} />
<Dropdown label={time.type} name='dateType' onChange={(value) => this.setState({ dateType: value })}>
<Switch name='date' text={this.language.enabled} category='date' />
<Dropdown label={time.type} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date'>
<option value='long'>{time.date.type.long}</option>
<option value='short'>{time.date.type.short}</option>
</Dropdown>
<br/>
<Checkbox name='weeknumber' text={time.date.week_number}/>
<Checkbox name='weeknumber' text={time.date.week_number} category='date'/>
{dateSettings}
</>
);

3
src/components/modals/main/tabs/Addons.jsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import Added from '../marketplace/sections/Added';
import Sideload from '../marketplace/sections/Sideload';
import Tabs from './backend/Tabs';
@ -10,7 +11,7 @@ export default function Addons() {
return (
<Tabs>
<div label={addons.added}><Added/></div>
<div label={addons.sideload}></div>
<div label={addons.sideload}><Sideload/></div>
</Tabs>
);
}

2
src/components/widgets/background/Favourite.jsx
View File

@ -36,6 +36,6 @@ export default class Favourite extends React.PureComponent {
return null;
}
return <Tooltip title='Favourite' placement='top'>{this.state.favourited}</Tooltip>;
return <Tooltip title={window.language.modals.main.settings.sections.background.buttons.favourite}>{this.state.favourited}</Tooltip>;
}
}

2
src/components/widgets/background/Maximise.jsx
View File

@ -48,7 +48,7 @@ export default class View extends React.PureComponent {
render() {
return (
<Tooltip title={window.language.modals.main.settings.sections.background.buttons.view} placement='top'>
<Tooltip title={window.language.modals.main.settings.sections.background.buttons.view}>
<FullscreenIcon onClick={this.maximise} className='topicons' />
</Tooltip>
);

13
src/components/widgets/greeting/Greeting.jsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import EventBus from '../../../modules/helpers/eventbus';
import dtf from '../../../modules/helpers/date';
import './greeting.scss';
@ -101,6 +102,18 @@ export default class Greeting extends React.PureComponent {
}
componentDidMount() {
EventBus.on('refresh', (data) => {
if (data === 'greeting') {
const element = document.querySelector('.greeting');
if (localStorage.getItem('greeting') === 'false') {
return element.style.display = 'none';
}
element.style.display = 'block';
}
});
this.getGreeting(0);
}

10
src/components/widgets/quicklinks/QuickLinks.jsx
View File

@ -87,10 +87,10 @@ export default class QuickLinks extends React.PureComponent {
const tooltipEnabled = localStorage.getItem('quicklinkstooltip');
const quickLink = (item) => {
const quickLink = (item, index) => {
const link = (
<a key={item.name} onContextMenu={(e) => this.deleteLink(item.name, e)} href={item.url} target={target} rel={rel}>
<img src={'https://icons.duckduckgo.com/ip2/' + item.url.replace('https://', '').replace('http://', '') + '.ico'} alt={item.name}/>
<a key={index} onContextMenu={(e) => this.deleteLink(item.name, e)} href={item.url} target={target} rel={rel} draggable={false}>
<img src={'https://icons.duckduckgo.com/ip2/' + item.url.replace('https://', '').replace('http://', '') + '.ico'} alt={item.name} draggable={false}/>
</a>
);
@ -103,8 +103,8 @@ export default class QuickLinks extends React.PureComponent {
return (
<div className='quicklinks-container'>
{this.state.items.map((item) => (
quickLink(item)
{this.state.items.map((item, index) => (
quickLink(item, index)
))}
<button className='quicklinks' onClick={this.toggleAdd}>+</button>
<span className='quicklinkscontainer' style={{'visibility': this.state.showAddLink}}>

4
src/components/widgets/quote/Quote.jsx
View File

@ -178,10 +178,6 @@ export default class Quote extends React.PureComponent {
this.init();
}
componentWillUnmount() {
EventBus.remove('refresh');
}
render() {
return (
<div className='quotediv'>

18
src/components/widgets/time/Clock.jsx
View File

@ -1,5 +1,7 @@
import React from 'react';
import EventBus from '../../../modules/helpers/eventbus';
import './clock.scss';
const Analog = React.lazy(() => import('react-clock'));
@ -86,11 +88,23 @@ export default class Clock extends React.PureComponent {
}
componentDidMount() {
EventBus.on('refresh', (data) => {
if (data === 'clock') {
const element = document.querySelector('.clock-container');
if (localStorage.getItem('time') === 'false') {
return element.style.display = 'none';
}
element.style.display = 'block';
}
});
this.startTime(0);
}
render() {
let clockHTML = <h1 className='clock'>{this.state.time}<span className='ampm'>{this.state.ampm}</span></h1>;
let clockHTML = <h1 className='clock clock-container'>{this.state.time}<span className='ampm'>{this.state.ampm}</span></h1>;
const enabled = (setting) => {
return (localStorage.getItem(setting) === 'true');
@ -100,7 +114,7 @@ export default class Clock extends React.PureComponent {
clockHTML = (
<React.Suspense fallback={renderLoader()}>
<Analog
className='analogclock'
className='analogclock clock-container'
value={this.state.time}
renderHourMarks={enabled('hourMarks')}
renderMinuteMarks={enabled('minuteMarks')}

15
src/components/widgets/time/Date.jsx
View File

@ -1,5 +1,7 @@
import React from 'react';
import EventBus from '../../../modules/helpers/eventbus';
import dtf from '../../../modules/helpers/date';
import './date.scss';
@ -95,6 +97,19 @@ export default class DateWidget extends React.PureComponent {
}
componentDidMount() {
EventBus.on('refresh', (data) => {
if (data === 'date') {
const element = document.querySelector('.date');
if (localStorage.getItem('date') === 'false') {
return element.style.display = 'none';
}
element.style.display = 'block';
this.getDate();
}
});
this.getDate();
}

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

@ -60,6 +60,7 @@ export default class MarketplaceFunctions {
input.settings.forEach(element => localStorage.setItem(element.name, element.value));
break;
case 'photos':
case 'photo_packs':
localStorage.setItem('photo_packs', JSON.stringify(input.photos));
localStorage.setItem('oldBackgroundType', localStorage.getItem('backgroundType'));