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 { useState, memo } from 'react';
|
||||||
|
|
||||||
import Modal from 'react-modal';
|
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';
|
import { AddModal } from 'components/Elements/AddModal';
|
||||||
|
|
||||||
|
@ -128,6 +135,57 @@ function NavbarOptions() {
|
||||||
text={variables.getMessage(`${NAVBAR_SECTION}.hover`)}
|
text={variables.getMessage(`${NAVBAR_SECTION}.hover`)}
|
||||||
category="navbar"
|
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
|
<Checkbox
|
||||||
name="notesEnabled"
|
name="notesEnabled"
|
||||||
text={variables.getMessage(`${NAVBAR_SECTION}.notes`)}
|
text={variables.getMessage(`${NAVBAR_SECTION}.notes`)}
|
||||||
|
@ -157,7 +215,8 @@ function NavbarOptions() {
|
||||||
onChange={setAppsEnabled}
|
onChange={setAppsEnabled}
|
||||||
/>
|
/>
|
||||||
</Action>
|
</Action>
|
||||||
</Row>
|
</Row>*/}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -234,6 +293,7 @@ function NavbarOptions() {
|
||||||
zoomCategory="navbar"
|
zoomCategory="navbar"
|
||||||
/>
|
/>
|
||||||
<AdditionalSettings />
|
<AdditionalSettings />
|
||||||
|
<NavbarOptions />
|
||||||
<RefreshOptions />
|
<RefreshOptions />
|
||||||
<AppsOptions />
|
<AppsOptions />
|
||||||
|
|
||||||
|
|
|
@ -88,3 +88,48 @@
|
||||||
background: t($modal-sidebarActive);
|
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": {
|
"navbar": {
|
||||||
"title": "Navbar",
|
"title": "Navbar",
|
||||||
"notes": "Notes",
|
"notes": "Notes",
|
||||||
"refresh": "Refresh Button",
|
"refresh": "Refresh",
|
||||||
"refresh_subtitle": "Choose what is refreshed when you click the refresh button",
|
"refresh_subtitle": "Choose what is refreshed when you click the refresh button",
|
||||||
"hover": "Only display on hover",
|
"hover": "Only display on hover",
|
||||||
"additional": "Modify navbar style and which buttons you want to display",
|
"additional": "Modify navbar style and which buttons you want to display",
|
||||||
|
|
|
@ -364,7 +364,7 @@
|
||||||
"navbar": {
|
"navbar": {
|
||||||
"title": "Navbar",
|
"title": "Navbar",
|
||||||
"notes": "Notes",
|
"notes": "Notes",
|
||||||
"refresh": "Refresh Button",
|
"refresh": "Refresh",
|
||||||
"refresh_subtitle": "Choose what is refreshed when you click the refresh button",
|
"refresh_subtitle": "Choose what is refreshed when you click the refresh button",
|
||||||
"hover": "Only display on hover",
|
"hover": "Only display on hover",
|
||||||
"additional": "Modify navbar style and which buttons you want to display",
|
"additional": "Modify navbar style and which buttons you want to display",
|
||||||
|
|
|
@ -364,7 +364,7 @@
|
||||||
"navbar": {
|
"navbar": {
|
||||||
"title": "Navbar",
|
"title": "Navbar",
|
||||||
"notes": "Notes",
|
"notes": "Notes",
|
||||||
"refresh": "Refresh Button",
|
"refresh": "Refresh",
|
||||||
"refresh_subtitle": "Choose what is refreshed when you click the refresh button",
|
"refresh_subtitle": "Choose what is refreshed when you click the refresh button",
|
||||||
"hover": "Only display on hover",
|
"hover": "Only display on hover",
|
||||||
"additional": "Modify navbar style and which buttons you want to display",
|
"additional": "Modify navbar style and which buttons you want to display",
|
||||||
|
|
|
@ -364,7 +364,7 @@
|
||||||
"navbar": {
|
"navbar": {
|
||||||
"title": "Navbar",
|
"title": "Navbar",
|
||||||
"notes": "Notes",
|
"notes": "Notes",
|
||||||
"refresh": "Refresh Button",
|
"refresh": "Refresh",
|
||||||
"refresh_subtitle": "Choose what is refreshed when you click the refresh button",
|
"refresh_subtitle": "Choose what is refreshed when you click the refresh button",
|
||||||
"hover": "Only display on hover",
|
"hover": "Only display on hover",
|
||||||
"additional": "Modify navbar style and which buttons you want to display",
|
"additional": "Modify navbar style and which buttons you want to display",
|
||||||
|
|
|
@ -364,7 +364,7 @@
|
||||||
"navbar": {
|
"navbar": {
|
||||||
"title": "Navbar",
|
"title": "Navbar",
|
||||||
"notes": "Notes",
|
"notes": "Notes",
|
||||||
"refresh": "Refresh Button",
|
"refresh": "Refresh",
|
||||||
"refresh_subtitle": "Kies wat vernieuwd wordt als je op de vernieuw knop klikt",
|
"refresh_subtitle": "Kies wat vernieuwd wordt als je op de vernieuw knop klikt",
|
||||||
"hover": "Only display on hover",
|
"hover": "Only display on hover",
|
||||||
"additional": "Bewerk de navigatiebalk stijl en welke knoppen worden laten zien",
|
"additional": "Bewerk de navigatiebalk stijl en welke knoppen worden laten zien",
|
||||||
|
|
|
@ -364,7 +364,7 @@
|
||||||
"navbar": {
|
"navbar": {
|
||||||
"title": "Navbar",
|
"title": "Navbar",
|
||||||
"notes": "Notes",
|
"notes": "Notes",
|
||||||
"refresh": "Refresh Button",
|
"refresh": "Refresh",
|
||||||
"refresh_subtitle": "Choose what is refreshed when you click the refresh button",
|
"refresh_subtitle": "Choose what is refreshed when you click the refresh button",
|
||||||
"hover": "Only display on hover",
|
"hover": "Only display on hover",
|
||||||
"additional": "Modify navbar style and which buttons you want to display",
|
"additional": "Modify navbar style and which buttons you want to display",
|
||||||
|
|
Loading…
Reference in New Issue