From 35e90225b04b3953ebbeb1edfcb25fb0c196868d Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Sat, 23 Mar 2024 01:04:58 +0000 Subject: [PATCH] experimental(navbar): Move to new navbar system --- src/features/navbar/options/NavbarOptions.jsx | 64 ++++++++++++++++++- src/features/navbar/scss/index.scss | 45 +++++++++++++ src/i18n/locales/bn.json | 2 +- src/i18n/locales/en_GB.json | 2 +- src/i18n/locales/en_US.json | 2 +- src/i18n/locales/fr.json | 2 +- src/i18n/locales/nl.json | 2 +- src/i18n/locales/no.json | 2 +- 8 files changed, 113 insertions(+), 8 deletions(-) diff --git a/src/features/navbar/options/NavbarOptions.jsx b/src/features/navbar/options/NavbarOptions.jsx index d31aad1f..af921ba2 100644 --- a/src/features/navbar/options/NavbarOptions.jsx +++ b/src/features/navbar/options/NavbarOptions.jsx @@ -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" /> + + + ); + }; + + const NavbarOptions = () => { + return ( + <> + + + +
+
+ + {variables.getMessage(`${NAVBAR_SECTION}.notes`)} +
+
+ + + {variables.getMessage('modals.main.settings.sections.background.buttons.view')} + +
+
+ + + {variables.getMessage(`${NAVBAR_SECTION}.refresh`)} + +
+
+ + + {variables.getMessage('widgets.navbar.todo.title')} + +
+
+ + + {variables.getMessage('widgets.navbar.apps.title')} + +
+
+ + + {/* + + - + */} + ); }; @@ -234,6 +293,7 @@ function NavbarOptions() { zoomCategory="navbar" /> + diff --git a/src/features/navbar/scss/index.scss b/src/features/navbar/scss/index.scss index f3180a11..a8391f3f 100644 --- a/src/features/navbar/scss/index.scss +++ b/src/features/navbar/scss/index.scss @@ -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); + } + } + } +} diff --git a/src/i18n/locales/bn.json b/src/i18n/locales/bn.json index e21a851c..a2582fc4 100644 --- a/src/i18n/locales/bn.json +++ b/src/i18n/locales/bn.json @@ -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", diff --git a/src/i18n/locales/en_GB.json b/src/i18n/locales/en_GB.json index 705674a5..4fd80866 100644 --- a/src/i18n/locales/en_GB.json +++ b/src/i18n/locales/en_GB.json @@ -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", diff --git a/src/i18n/locales/en_US.json b/src/i18n/locales/en_US.json index a0710beb..398db862 100644 --- a/src/i18n/locales/en_US.json +++ b/src/i18n/locales/en_US.json @@ -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", diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json index 5daeb083..765e1cb7 100644 --- a/src/i18n/locales/fr.json +++ b/src/i18n/locales/fr.json @@ -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", diff --git a/src/i18n/locales/nl.json b/src/i18n/locales/nl.json index 3981d804..cc300dda 100644 --- a/src/i18n/locales/nl.json +++ b/src/i18n/locales/nl.json @@ -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", diff --git a/src/i18n/locales/no.json b/src/i18n/locales/no.json index 660f63ff..1461c263 100644 --- a/src/i18n/locales/no.json +++ b/src/i18n/locales/no.json @@ -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",