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

fix(navbar): improve handling of display on hover and widgets hot reloading

Browse Source
This commit is contained in:
alexsparkes
2026-01-24 14:33:13 +00:00
parent b2087f4733
commit 17bbdeb7b9
1 changed files with 42 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/features/navbar/Navbar.jsx
View File

@@ -10,64 +10,60 @@ import EventBus from 'utils/eventbus';
import './scss/index.scss';
const getRefreshText = () => {
switch (localStorage.getItem('refreshOption')) {
case 'background':
return variables.getMessage('modals.main.settings.sections.background.title');
case 'quote':
return variables.getMessage('modals.main.settings.sections.quote.title');
case 'quotebackground':
return (
variables.getMessage('modals.main.settings.sections.quote.title') +
' ' +
variables.getMessage('modals.main.settings.sections.background.title')
);
default:
return variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_options.page',
);
}
};
const getZoomFontSize = () => {
return Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + 'rem';
};
const Navbar = ({ openModal }) => {
const navbarContainer = useRef();
const [classList] = useState(
localStorage.getItem('widgetStyle') === 'legacy' ? 'navbar old' : 'navbar new',
);
const [refreshText, setRefreshText] = useState('');
const [refreshText, setRefreshText] = useState(getRefreshText());
const [refreshEnabled, setRefreshEnabled] = useState(localStorage.getItem('refresh'));
const [refreshOption, setRefreshOption] = useState(localStorage.getItem('refreshOption') || '');
const [appsOpen, setAppsOpen] = useState(false);
const [zoomFontSize, setZoomFontSize] = useState('1.2rem');
const setZoom = () => {
setZoomFontSize(Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + 'rem');
};
const updateRefreshText = () => {
let refreshText;
switch (localStorage.getItem('refreshOption')) {
case 'background':
refreshText = variables.getMessage('modals.main.settings.sections.background.title');
break;
case 'quote':
refreshText = variables.getMessage('modals.main.settings.sections.quote.title');
break;
case 'quotebackground':
refreshText =
variables.getMessage('modals.main.settings.sections.quote.title') +
' ' +
variables.getMessage('modals.main.settings.sections.background.title');
break;
default:
refreshText = variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_options.page',
);
break;
}
setRefreshText(refreshText);
};
const [zoomFontSize, setZoomFontSize] = useState(getZoomFontSize());
const [navbarHover, setNavbarHover] = useState(localStorage.getItem('navbarHover') === 'true');
const [viewEnabled, setViewEnabled] = useState(localStorage.getItem('view') === 'true');
const [notesEnabled, setNotesEnabled] = useState(localStorage.getItem('notesEnabled') === 'true');
const [todoEnabled, setTodoEnabled] = useState(localStorage.getItem('todoEnabled') === 'true');
const [appsEnabled, setAppsEnabled] = useState(localStorage.getItem('appsEnabled') === 'true');
useEffect(() => {
const handleRefresh = (data) => {
if (data === 'navbar' || data === 'background') {
setRefreshEnabled(localStorage.getItem('refresh'));
setRefreshOption(localStorage.getItem('refreshOption'));
try {
updateRefreshText();
setZoom();
} catch {
// Ignore errors
}
setNavbarHover(localStorage.getItem('navbarHover') === 'true');
setViewEnabled(localStorage.getItem('view') === 'true');
setNotesEnabled(localStorage.getItem('notesEnabled') === 'true');
setTodoEnabled(localStorage.getItem('todoEnabled') === 'true');
setAppsEnabled(localStorage.getItem('appsEnabled') === 'true');
setRefreshText(getRefreshText());
setZoomFontSize(getZoomFontSize());
}
};
updateRefreshText();
setZoom();
EventBus.on('refresh', handleRefresh);
return () => {
EventBus.off('refresh');
@@ -93,12 +89,12 @@ const Navbar = ({ openModal }) => {
const navbar = (
<div className="navbar-container">
<div className={classList}>
{localStorage.getItem('view') === 'true' && backgroundEnabled ? (
{viewEnabled && backgroundEnabled ? (
<Maximise fontSize={zoomFontSize} />
) : null}
{localStorage.getItem('notesEnabled') === 'true' && <Notes fontSize={zoomFontSize} />}
{localStorage.getItem('todoEnabled') === 'true' && <Todo fontSize={zoomFontSize} />}
{localStorage.getItem('appsEnabled') === 'true' && <Apps fontSize={zoomFontSize} />}
{notesEnabled && <Notes fontSize={zoomFontSize} />}
{todoEnabled && <Todo fontSize={zoomFontSize} />}
{appsEnabled && <Apps fontSize={zoomFontSize} />}
{refreshEnabled !== 'false' && <Refresh fontSize={zoomFontSize} />}
@@ -122,7 +118,7 @@ const Navbar = ({ openModal }) => {
</div>
);
return localStorage.getItem('navbarHover') === 'true' ? (
return navbarHover ? (
<div className="navbar-hover">{navbar}</div>
) : (
navbar