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 variables from 'config/variables';
|
||||||
import { PureComponent, createRef } from 'react';
|
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 Maximise from '../background/Maximise';
|
||||||
import { Tooltip } from 'components/Elements';
|
import { Tooltip } from 'components/Elements';
|
||||||
import EventBus from 'utils/eventbus';
|
import EventBus from 'utils/eventbus';
|
||||||
|
@ -113,20 +116,7 @@ class Navbar extends PureComponent {
|
||||||
<Apps fontSize={this.state.zoomFontSize} />
|
<Apps fontSize={this.state.zoomFontSize} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{this.refreshEnabled !== 'false' && (
|
{this.refreshEnabled !== 'false' && <Refresh fontSize={this.state.zoomFontSize} />}
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Tooltip
|
<Tooltip
|
||||||
title={variables.getMessage('modals.main.navbar.settings', {
|
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