experimental(navbar): Move to new navbar system

This commit is contained in:
alexsparkes 2024-03-23 01:04:58 +00:00
parent ff48319c42
commit 35e90225b0
8 changed files with 113 additions and 8 deletions

View File

@ -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 />

View File

@ -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);
}
}
}
}

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",