mirror of https://github.com/mue/mue.git
refactor(navbar): Move to component folder
This commit is contained in:
parent
3e1ac0cfbb
commit
ebb5e922bc
|
@ -1,11 +1,14 @@
|
|||
import variables from 'config/variables';
|
||||
import { PureComponent, createRef } from 'react';
|
||||
|
||||
import { MdRefresh, MdSettings } from 'react-icons/md';
|
||||
import { MdSettings } from 'react-icons/md';
|
||||
|
||||
// import Notes from './buttons/Notes';
|
||||
// import Todo from './buttons/Todo';
|
||||
// import Apps from './buttons/Apps';
|
||||
|
||||
import { Notes, Todo, Apps, Refresh } from './components';
|
||||
|
||||
import Notes from './Notes';
|
||||
import Todo from './Todo';
|
||||
import Apps from './Apps';
|
||||
import Maximise from '../background/Maximise';
|
||||
import { Tooltip } from 'components/Elements';
|
||||
import EventBus from 'utils/eventbus';
|
||||
|
@ -113,20 +116,7 @@ class Navbar extends PureComponent {
|
|||
<Apps fontSize={this.state.zoomFontSize} />
|
||||
)}
|
||||
|
||||
{this.refreshEnabled !== 'false' && (
|
||||
<Tooltip
|
||||
title={variables.getMessage('widgets.navbar.tooltips.refresh')}
|
||||
subtitle={this.state.refreshText}
|
||||
>
|
||||
<button
|
||||
onClick={() => this.refresh()}
|
||||
style={{ fontSize: this.state.zoomFontSize }}
|
||||
aria-label={variables.getMessage('widgets.navbar.tooltips.refresh')}
|
||||
>
|
||||
<MdRefresh className="refreshicon topicons" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
{this.refreshEnabled !== 'false' && <Refresh fontSize={this.state.zoomFontSize} />}
|
||||
|
||||
<Tooltip
|
||||
title={variables.getMessage('modals.main.navbar.settings', {
|
||||
|
|
|
@ -151,4 +151,5 @@ function AppsWrapper() {
|
|||
);
|
||||
}
|
||||
|
||||
export default memo(AppsWrapper);
|
||||
const MemoizedAppsWrapper = memo(AppsWrapper);
|
||||
export { MemoizedAppsWrapper as default, MemoizedAppsWrapper as Apps };
|
|
@ -170,4 +170,5 @@ function NotesWrapper() {
|
|||
);
|
||||
}
|
||||
|
||||
export default memo(NotesWrapper);
|
||||
const MemoizedNotesWrapper = memo(NotesWrapper);
|
||||
export { MemoizedNotesWrapper as default, MemoizedNotesWrapper as Notes };
|
|
@ -0,0 +1,73 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import variables from 'config/variables';
|
||||
import { MdRefresh } from 'react-icons/md';
|
||||
import { Tooltip } from 'components/Elements';
|
||||
import EventBus from 'utils/eventbus';
|
||||
|
||||
function Refresh() {
|
||||
const [refreshText, setRefreshText] = useState('');
|
||||
const [refreshOption, setRefreshOption] = useState(localStorage.getItem('refreshOption') || '');
|
||||
|
||||
useEffect(() => {
|
||||
EventBus.on('refresh', (data) => {
|
||||
if (data === 'navbar' || data === 'background') {
|
||||
setRefreshOption(localStorage.getItem('refreshOption'));
|
||||
updateRefreshText();
|
||||
}
|
||||
});
|
||||
|
||||
updateRefreshText();
|
||||
}, []);
|
||||
|
||||
function updateRefreshText() {
|
||||
let text;
|
||||
switch (localStorage.getItem('refreshOption')) {
|
||||
case 'background':
|
||||
text = variables.getMessage('modals.main.settings.sections.background.title');
|
||||
break;
|
||||
case 'quote':
|
||||
text = variables.getMessage('modals.main.settings.sections.quote.title');
|
||||
break;
|
||||
case 'quotebackground':
|
||||
text =
|
||||
variables.getMessage('modals.main.settings.sections.quote.title') +
|
||||
' ' +
|
||||
variables.getMessage('modals.main.settings.sections.background.title');
|
||||
break;
|
||||
default:
|
||||
text = variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.navbar.refresh_options.page',
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
setRefreshText(text);
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
switch (refreshOption) {
|
||||
case 'background':
|
||||
return EventBus.emit('refresh', 'backgroundrefresh');
|
||||
case 'quote':
|
||||
return EventBus.emit('refresh', 'quoterefresh');
|
||||
case 'quotebackground':
|
||||
EventBus.emit('refresh', 'quoterefresh');
|
||||
return EventBus.emit('refresh', 'backgroundrefresh');
|
||||
default:
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip title={variables.getMessage('widgets.navbar.tooltips.refresh')} subtitle={refreshText}>
|
||||
<button
|
||||
onClick={refresh}
|
||||
aria-label={variables.getMessage('widgets.navbar.tooltips.refresh')}
|
||||
>
|
||||
<MdRefresh className="refreshicon topicons" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
export { Refresh as default, Refresh };
|
|
@ -254,4 +254,5 @@ function TodoWrapper() {
|
|||
);
|
||||
}
|
||||
|
||||
export default memo(TodoWrapper);
|
||||
const MemoizedTodoWrapper = memo(TodoWrapper);
|
||||
export { MemoizedTodoWrapper as default, MemoizedTodoWrapper as Todo };
|
|
@ -0,0 +1,4 @@
|
|||
export * from './Apps';
|
||||
export * from './Notes';
|
||||
export * from './Todo';
|
||||
export * from './Refresh';
|
Loading…
Reference in New Issue