mirror of https://github.com/mue/mue.git
experimental(navbar): Move to new navbar system
This commit is contained in:
parent
ff48319c42
commit
35e90225b0
|
@ -3,7 +3,14 @@ import variables from 'config/variables';
|
|||
import { useState, memo } from 'react';
|
||||
|
||||
import Modal from 'react-modal';
|
||||
import { MdAddLink } from 'react-icons/md';
|
||||
import {
|
||||
MdAddLink,
|
||||
MdAssignment,
|
||||
MdCropFree,
|
||||
MdRefresh,
|
||||
MdChecklist,
|
||||
MdOutlineApps,
|
||||
} from 'react-icons/md';
|
||||
|
||||
import { AddModal } from 'components/Elements/AddModal';
|
||||
|
||||
|
@ -128,6 +135,57 @@ function NavbarOptions() {
|
|||
text={variables.getMessage(`${NAVBAR_SECTION}.hover`)}
|
||||
category="navbar"
|
||||
/>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
const NavbarOptions = () => {
|
||||
return (
|
||||
<>
|
||||
<Row>
|
||||
<Content title="Navbar Options" />
|
||||
<Action>
|
||||
<div className="navbarButtonOptions">
|
||||
<div className="navbarButtonOption disabled">
|
||||
<MdAssignment />
|
||||
<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>
|
||||
</Action>
|
||||
</Row>
|
||||
{/*<Row final={false}>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.navbar.additional',
|
||||
)}
|
||||
/>
|
||||
<Action>
|
||||
<Checkbox
|
||||
name="notesEnabled"
|
||||
text={variables.getMessage(`${NAVBAR_SECTION}.notes`)}
|
||||
|
@ -157,7 +215,8 @@ function NavbarOptions() {
|
|||
onChange={setAppsEnabled}
|
||||
/>
|
||||
</Action>
|
||||
</Row>
|
||||
</Row>*/}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -234,6 +293,7 @@ function NavbarOptions() {
|
|||
zoomCategory="navbar"
|
||||
/>
|
||||
<AdditionalSettings />
|
||||
<NavbarOptions />
|
||||
<RefreshOptions />
|
||||
<AppsOptions />
|
||||
|
||||
|
|
|
@ -88,3 +88,48 @@
|
|||
background: t($modal-sidebarActive);
|
||||
}
|
||||
}
|
||||
|
||||
.navbarButtonOptions {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 10px;
|
||||
.navbarButtonOption {
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
}
|
||||
svg {
|
||||
background: linear-gradient(238.7deg, #ff5c25 13.8%, #d21a11 49.49%, #ff456e 87.48%);
|
||||
padding: 5px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 10px;
|
||||
@include themed {
|
||||
border-radius: t($borderRadius);
|
||||
box-shadow: 0 0 0 1px t($color);
|
||||
}
|
||||
}
|
||||
.disabled {
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
box-shadow: 0 0 0 1px t($modal-sidebarActive);
|
||||
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
}
|
||||
svg {
|
||||
@include themed {
|
||||
background-image: t($slightGradient);
|
||||
box-shadow: t($boxShadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -364,7 +364,7 @@
|
|||
"navbar": {
|
||||
"title": "Navbar",
|
||||
"notes": "Notes",
|
||||
"refresh": "Refresh Button",
|
||||
"refresh": "Refresh",
|
||||
"refresh_subtitle": "Choose what is refreshed when you click the refresh button",
|
||||
"hover": "Only display on hover",
|
||||
"additional": "Modify navbar style and which buttons you want to display",
|
||||
|
|
|
@ -364,7 +364,7 @@
|
|||
"navbar": {
|
||||
"title": "Navbar",
|
||||
"notes": "Notes",
|
||||
"refresh": "Refresh Button",
|
||||
"refresh": "Refresh",
|
||||
"refresh_subtitle": "Choose what is refreshed when you click the refresh button",
|
||||
"hover": "Only display on hover",
|
||||
"additional": "Modify navbar style and which buttons you want to display",
|
||||
|
|
|
@ -364,7 +364,7 @@
|
|||
"navbar": {
|
||||
"title": "Navbar",
|
||||
"notes": "Notes",
|
||||
"refresh": "Refresh Button",
|
||||
"refresh": "Refresh",
|
||||
"refresh_subtitle": "Choose what is refreshed when you click the refresh button",
|
||||
"hover": "Only display on hover",
|
||||
"additional": "Modify navbar style and which buttons you want to display",
|
||||
|
|
|
@ -364,7 +364,7 @@
|
|||
"navbar": {
|
||||
"title": "Navbar",
|
||||
"notes": "Notes",
|
||||
"refresh": "Refresh Button",
|
||||
"refresh": "Refresh",
|
||||
"refresh_subtitle": "Choose what is refreshed when you click the refresh button",
|
||||
"hover": "Only display on hover",
|
||||
"additional": "Modify navbar style and which buttons you want to display",
|
||||
|
|
|
@ -364,7 +364,7 @@
|
|||
"navbar": {
|
||||
"title": "Navbar",
|
||||
"notes": "Notes",
|
||||
"refresh": "Refresh Button",
|
||||
"refresh": "Refresh",
|
||||
"refresh_subtitle": "Kies wat vernieuwd wordt als je op de vernieuw knop klikt",
|
||||
"hover": "Only display on hover",
|
||||
"additional": "Bewerk de navigatiebalk stijl en welke knoppen worden laten zien",
|
||||
|
|
|
@ -364,7 +364,7 @@
|
|||
"navbar": {
|
||||
"title": "Navbar",
|
||||
"notes": "Notes",
|
||||
"refresh": "Refresh Button",
|
||||
"refresh": "Refresh",
|
||||
"refresh_subtitle": "Choose what is refreshed when you click the refresh button",
|
||||
"hover": "Only display on hover",
|
||||
"additional": "Modify navbar style and which buttons you want to display",
|
||||
|
|
Loading…
Reference in New Issue