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

feat: navbar hot reload, quick links zoom, add example images to welcome modal, fixes

Browse Source
This commit is contained in:
David Ralph
2021-07-03 14:48:49 +01:00
parent ba9f2e01c8
commit 19bc802f09
14 changed files with 94 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/widgets/Widgets.jsx
View File

@@ -43,9 +43,9 @@ export default class Widgets extends React.PureComponent {
}
render() {
// don't hide when welcome is there
if (localStorage.getItem('showWelcome') === 'true') {
return <div id='widgets'></div>
// don't show when welcome is there
if (localStorage.getItem('showWelcome') !== 'false') {
return <div id='widgets'></div>;
}
// allow for re-ordering widgets
@@ -57,7 +57,7 @@ export default class Widgets extends React.PureComponent {
});
} else {
// prevent error
elements = ['greeting', 'time', 'quicklinks', 'quote', 'date'];
elements = [<Greeting/>, <Clock/>, <QuickLinks/>, <Quote/>, <Date/>];
}
return (

76
src/components/widgets/navbar/Navbar.jsx
View File

@@ -10,42 +10,54 @@ import Maximise from '../background/Maximise';
import Favourite from '../background/Favourite';
import Tooltip from '../../helpers/tooltip/Tooltip';
import EventBus from '../../../modules/helpers/eventbus';
import './scss/index.scss';
export default function Navbar(props) {
if (localStorage.getItem('showWelcome') === 'true') {
return null;
export default class Navbar extends React.Component {
componentDidMount() {
EventBus.on('refresh', (data) => {
if (data === 'navbar') {
this.forceUpdate();
}
});
}
const backgroundEnabled = (localStorage.getItem('background') === 'true');
return (
<div className='navbar-container'>
{(localStorage.getItem('view') === 'true' && backgroundEnabled) ? <Maximise/> : null}
{(localStorage.getItem('favouriteEnabled') === 'true' && backgroundEnabled) ? <Favourite/> : null}
render() {
if (localStorage.getItem('showWelcome') !== 'false') {
return null;
}
{(localStorage.getItem('notesEnabled') === 'true') ?
<div className='notes'>
<NotesIcon className='topicons'/>
<Notes/>
</div>
: null}
{(window.constants.BETA_VERSION === true) ?
<Tooltip title={window.language.widgets.navbar.tooltips.feedback}>
<Report className='topicons' onClick={() => props.openModal('feedbackModal')}/>
const backgroundEnabled = (localStorage.getItem('background') === 'true');
return (
<div className='navbar-container'>
{(localStorage.getItem('view') === 'true' && backgroundEnabled) ? <Maximise/> : null}
{(localStorage.getItem('favouriteEnabled') === 'true' && backgroundEnabled) ? <Favourite/> : null}
{(localStorage.getItem('notesEnabled') === 'true') ?
<div className='notes'>
<NotesIcon className='topicons'/>
<Notes/>
</div>
: null}
{(window.constants.BETA_VERSION === true) ?
<Tooltip title={window.language.widgets.navbar.tooltips.feedback}>
<Report className='topicons' onClick={() => this.props.openModal('feedbackModal')}/>
</Tooltip>
: null}
{(localStorage.getItem('refresh') === 'true') ?
<Tooltip title={window.language.widgets.navbar.tooltips.refresh}>
<RefreshIcon className='refreshicon topicons' onClick={() => window.location.reload()}/>
</Tooltip>
: null}
<Tooltip title={window.language.modals.main.navbar.settings}>
<Gear className='settings-icon topicons' onClick={() => this.props.openModal('mainModal')}/>
</Tooltip>
: null}
{(localStorage.getItem('refresh') === 'true') ?
<Tooltip title={window.language.widgets.navbar.tooltips.refresh}>
<RefreshIcon className='refreshicon topicons' onClick={() => window.location.reload()}/>
</Tooltip>
: null}
<Tooltip title={window.language.modals.main.navbar.settings}>
<Gear className='settings-icon topicons' onClick={() => props.openModal('mainModal')}/>
</Tooltip>
</div>
);
</div>
);
}
}

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

@@ -78,6 +78,13 @@ export default class QuickLinks extends React.PureComponent {
window.stats.postEvent('feature', 'Quicklink add');
this.toggleAdd();
// make sure image is correct size
const element = document.querySelector('.quicklinks-container');
const images = element.getElementsByTagName('img');
for (const img of images) {
img.style.height = `${0.87 * Number((localStorage.getItem('zoomQuicklinks') || 100) / 100)}em`;
};
}
toggleAdd = () => {
@@ -102,6 +109,12 @@ export default class QuickLinks extends React.PureComponent {
}
element.style.display = 'block';
const images = element.getElementsByTagName('img');
for (const img of images) {
img.style.height = `${0.87 * Number((localStorage.getItem('zoomQuicklinks') || 100) / 100)}em`;
};
element.querySelector('button').style.fontSize = `${1.15 * Number((localStorage.getItem('zoomQuicklinks') || 100) / 100)}em`;
this.setState({
items: JSON.parse(localStorage.getItem('quicklinks'))
});
@@ -117,6 +130,13 @@ export default class QuickLinks extends React.PureComponent {
e.preventDefault();
}
};
const element = document.querySelector('.quicklinks-container');
const images = element.getElementsByTagName('img');
for (const img of images) {
img.style.height = `${0.87 * Number((localStorage.getItem('zoomQuicklinks') || 100) / 100)}em`;
};
element.querySelector('button').style.fontSize = `${1.15 * Number((localStorage.getItem('zoomQuicklinks') || 100) / 100)}em`;
}
componentWillUnmount() {