mirror of https://github.com/mue/mue.git
fix(navbar): Add functionality to new navbar button options
This commit is contained in:
parent
35e90225b0
commit
d76e93481f
|
@ -1,6 +1,6 @@
|
||||||
import variables from 'config/variables';
|
import variables from 'config/variables';
|
||||||
|
|
||||||
import { useState, memo } from 'react';
|
import { useState, memo, useEffect } from 'react';
|
||||||
|
|
||||||
import Modal from 'react-modal';
|
import Modal from 'react-modal';
|
||||||
import {
|
import {
|
||||||
|
@ -16,6 +16,7 @@ import { AddModal } from 'components/Elements/AddModal';
|
||||||
|
|
||||||
import { Checkbox, Dropdown } from 'components/Form';
|
import { Checkbox, Dropdown } from 'components/Form';
|
||||||
import { Button } from 'components/Elements';
|
import { Button } from 'components/Elements';
|
||||||
|
import EventBus from 'utils/eventbus';
|
||||||
|
|
||||||
import { Row, Content, Action } from 'components/Layout/Settings';
|
import { Row, Content, Action } from 'components/Layout/Settings';
|
||||||
import { Header } from 'components/Layout/Settings';
|
import { Header } from 'components/Layout/Settings';
|
||||||
|
@ -141,40 +142,66 @@ function NavbarOptions() {
|
||||||
};
|
};
|
||||||
|
|
||||||
const NavbarOptions = () => {
|
const NavbarOptions = () => {
|
||||||
|
const NavbarButton = ({ icon, messageKey, settingName }) => {
|
||||||
|
const [isDisabled, setIsDisabled] = useState(localStorage.getItem(settingName) === 'false');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
localStorage.setItem(settingName, isDisabled ? 'false' : 'true');
|
||||||
|
}, [isDisabled]);
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
setIsDisabled(!isDisabled);
|
||||||
|
variables.stats.postEvent(
|
||||||
|
'setting',
|
||||||
|
`${settingName} ${!isDisabled === true ? 'enabled' : 'disabled'}`,
|
||||||
|
);
|
||||||
|
EventBus.emit('refresh', 'navbar');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={handleClick}
|
||||||
|
className={`navbarButtonOption ${isDisabled ? 'disabled' : ''}`}
|
||||||
|
>
|
||||||
|
{icon}
|
||||||
|
<span className="subtitle">{variables.getMessage(messageKey)}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const buttons = [
|
||||||
|
{
|
||||||
|
icon: <MdAssignment />,
|
||||||
|
settingName: 'notesEnabled',
|
||||||
|
messageKey: `${NAVBAR_SECTION}.notes`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <MdCropFree />,
|
||||||
|
settingName: 'view',
|
||||||
|
messageKey: 'modals.main.settings.sections.background.buttons.view',
|
||||||
|
},
|
||||||
|
{ icon: <MdRefresh />, settingName: 'refresh', messageKey: `${NAVBAR_SECTION}.refresh` },
|
||||||
|
{
|
||||||
|
icon: <MdChecklist />,
|
||||||
|
settingName: 'todoEnabled',
|
||||||
|
messageKey: 'widgets.navbar.todo.title',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <MdOutlineApps />,
|
||||||
|
settingName: 'appsEnabled',
|
||||||
|
messageKey: 'widgets.navbar.apps.title',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Row>
|
<Row>
|
||||||
<Content title="Navbar Options" />
|
<Content title="Navbar Options" />
|
||||||
<Action>
|
<Action>
|
||||||
<div className="navbarButtonOptions">
|
<div className="navbarButtonOptions">
|
||||||
<div className="navbarButtonOption disabled">
|
{buttons.map((button, index) => (
|
||||||
<MdAssignment />
|
<NavbarButton key={index} {...button} />
|
||||||
<span className="subtitle">{variables.getMessage(`${NAVBAR_SECTION}.notes`)}</span>
|
))}
|
||||||
</div>
|
|
||||||
<div className="navbarButtonOption">
|
|
||||||
<MdCropFree />
|
|
||||||
<span className="subtitle">
|
|
||||||
{variables.getMessage('modals.main.settings.sections.background.buttons.view')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="navbarButtonOption">
|
|
||||||
<MdRefresh />
|
|
||||||
<span className="subtitle">
|
|
||||||
{variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="navbarButtonOption">
|
|
||||||
<MdChecklist />
|
|
||||||
<span className="subtitle">
|
|
||||||
{variables.getMessage('widgets.navbar.todo.title')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="navbarButtonOption">
|
|
||||||
<MdOutlineApps />
|
|
||||||
<span className="subtitle">
|
|
||||||
{variables.getMessage('widgets.navbar.apps.title')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</Action>
|
</Action>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
|
@ -101,8 +101,15 @@
|
||||||
background: linear-gradient(238.7deg, #ff5c25 13.8%, #d21a11 49.49%, #ff456e 87.48%);
|
background: linear-gradient(238.7deg, #ff5c25 13.8%, #d21a11 49.49%, #ff456e 87.48%);
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
|
@include themed {
|
||||||
|
color: t($color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
width: 70px;
|
cursor: pointer;
|
||||||
|
width: 70px !important;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
margin-top: 0 !important;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -112,8 +119,12 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
@include themed {
|
@include themed {
|
||||||
|
background: t($modal-sidebarActive);
|
||||||
border-radius: t($borderRadius);
|
border-radius: t($borderRadius);
|
||||||
box-shadow: 0 0 0 1px t($color);
|
box-shadow: 0 0 0 1px t($btn-backgroundHover);
|
||||||
|
&:hover {
|
||||||
|
background: t($modal-sidebar);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.disabled {
|
.disabled {
|
||||||
|
|
Loading…
Reference in New Issue