From a9ab8246f9738125c0ae326b44882a3ce2f91226 Mon Sep 17 00:00:00 2001 From: Evan Date: Mon, 5 Feb 2024 17:14:36 -0500 Subject: [PATCH 01/11] add switchers, update favicon --- src/app/AppLayout/AppLayout.tsx | 118 +++++++++++++++++++++++++------- src/favicon.png | Bin 4542 -> 1022 bytes 2 files changed, 95 insertions(+), 23 deletions(-) diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx index b2d3e7c6..4c49349b 100644 --- a/src/app/AppLayout/AppLayout.tsx +++ b/src/app/AppLayout/AppLayout.tsx @@ -2,21 +2,32 @@ import * as React from 'react'; import { NavLink, useLocation } from 'react-router-dom'; import { Button, + Icon, Masthead, MastheadBrand, + MastheadContent, MastheadMain, MastheadToggle, - Nav, + Nav, NavExpandable, NavItem, - NavList, - Page, - PageSidebar, + NavList, + Page, + PageSidebar, PageSidebarBody, - SkipToContent + SkipToContent, + Switch, + ToggleGroup, + ToggleGroupItem, + Toolbar, + ToolbarContent, + ToolbarItem, + ToolbarGroup, } from '@patternfly/react-core'; import { IAppRoute, IAppRouteGroup, routes } from '@app/routes'; import { BarsIcon } from '@patternfly/react-icons'; +import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon'; +import SunIcon from '@patternfly/react-icons/dist/esm/icons/sun-icon'; interface IAppLayout { children: React.ReactNode; @@ -24,6 +35,15 @@ interface IAppLayout { const AppLayout: React.FunctionComponent = ({ children }) => { const [sidebarOpen, setSidebarOpen] = React.useState(true); + const [isDarkTheme, setIsDarkTheme] = React.useState(false); + const [isRTL, setIsRTL] = React.useState(false); + + const toggleDarkTheme = (_evt, selected) => { + const darkThemeToggleClicked = !selected === isDarkTheme; + document.querySelector('html').classList.toggle('pf-v5-theme-dark', darkThemeToggleClicked); + setIsDarkTheme(darkThemeToggleClicked); + }; + const Header = ( @@ -42,7 +62,11 @@ const AppLayout: React.FunctionComponent = ({ children }) => { - + @@ -55,14 +79,64 @@ const AppLayout: React.FunctionComponent = ({ children }) => { - - - + + + + + + + + + + + + + } + isSelected={!isDarkTheme} + onChange={toggleDarkTheme} + /> + + + + } + isSelected={isDarkTheme} + onChange={toggleDarkTheme} + /> + + + + setIsRTL((isRTL) => !isRTL)} + /> + + + + + ); @@ -91,7 +165,7 @@ const AppLayout: React.FunctionComponent = ({ children }) => { @@ -99,29 +173,27 @@ const AppLayout: React.FunctionComponent = ({ children }) => { const Sidebar = ( - - {Navigation} - + {Navigation} ); const pageId = 'primary-app-container'; const PageSkipToContent = ( - { - event.preventDefault(); - const primaryContentContainer = document.getElementById(pageId); - primaryContentContainer && primaryContentContainer.focus(); - }} href={`#${pageId}`}> + { + event.preventDefault(); + const primaryContentContainer = document.getElementById(pageId); + primaryContentContainer && primaryContentContainer.focus(); + }} + href={`#${pageId}`} + > Skip to Content ); + return ( - + {children} ); diff --git a/src/favicon.png b/src/favicon.png index f2e3f56403711d4c648efd8f81a9e289fb8e3511..9dad8a368b35bcc737aedad9508bb4e456fb481e 100644 GIT binary patch delta 1001 zcmV=v|MMt=s{&2y`Z@hn8sLQC=D7B5?;*YqE3*ehV=x zDma-aeieFBRpL4|KtYRGzD+nmoVdLvPwaC5Xt9vc;*k`#9i>%??8pgbx);J3;c|fu zMOE|_Hh;fKXjPAdron$sFzIT;iNHBEwm_AUfEJ&|O@Y@l(%+vHMpUMWJJ|qKMMd3W zjhZe>t49+fpx?n^crfkDLIdzSNfm8S6&*CSp%xgim3V*bcZ_7I87?YG70pd)5sb)~ zz5qFa8&R>}Ms~t`hK#2t8|1K>^IQ6PM9x5>SmA;VrI1QLkG)$wXEF>G^P7*G)Q zS$|Wffsx#ZXK=1G)E2=P3RK{h3@Vx7yD6#}m9LR<>Y%cpK*2bPD=#CZ#)BK%e#gr^ zFf(y`QS*1V2G|TLcVhtbR_~#3tzTv#`aRMK<{f^-rft}O1 zzMb9%6E0>a#C!~%-%{r+JSMJhx!!oY458$Uzz+esu6Job7u^1j%m;7|dWA35{t7Sv XJ4UQ$&nGyV00000NkvXXu0mjfs^Gpx literal 4542 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 From 574fd12d5cfbb9bfa95bd21786c7402334047db9 Mon Sep 17 00:00:00 2001 From: Evan Date: Mon, 5 Feb 2024 21:50:37 -0500 Subject: [PATCH 02/11] updated masthead to match website --- src/app/AppLayout/AppLayout.tsx | 22 +++++++++++++--------- src/app/app.css | 6 ++++++ 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx index 4c49349b..b91afc7a 100644 --- a/src/app/AppLayout/AppLayout.tsx +++ b/src/app/AppLayout/AppLayout.tsx @@ -36,7 +36,6 @@ interface IAppLayout { const AppLayout: React.FunctionComponent = ({ children }) => { const [sidebarOpen, setSidebarOpen] = React.useState(true); const [isDarkTheme, setIsDarkTheme] = React.useState(false); - const [isRTL, setIsRTL] = React.useState(false); const toggleDarkTheme = (_evt, selected) => { const darkThemeToggleClicked = !selected === isDarkTheme; @@ -44,8 +43,14 @@ const AppLayout: React.FunctionComponent = ({ children }) => { setIsDarkTheme(darkThemeToggleClicked); }; + const toggleRTL = () => { + const html = document.querySelector('html'); + const curDir = html.dir; + html.dir = curDir !== 'rtl' ? 'rtl' : 'ltr'; + }; + const Header = ( - +