From 6459d3fe34087f12292674c0846d2702386533ca Mon Sep 17 00:00:00 2001 From: Grace Date: Tue, 29 Oct 2024 10:48:35 +0000 Subject: [PATCH 1/7] Remove percentage meter zIndex ticks --- src/components/PercentageMeter.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/PercentageMeter.tsx b/src/components/PercentageMeter.tsx index 6139c433a..c366a951f 100644 --- a/src/components/PercentageMeter.tsx +++ b/src/components/PercentageMeter.tsx @@ -50,7 +50,6 @@ const PercentageMeter = ({ bgColor={i === 0 || i === numTicks + 1 ? undefined : "white"} w={0.5} h={height} - zIndex={1} /> )) } From 90d34c0217485e629b4c0c9240d86a83372964fd Mon Sep 17 00:00:00 2001 From: Grace Date: Tue, 29 Oct 2024 10:55:01 +0000 Subject: [PATCH 2/7] Update viewport To keep action bar sticky for mobile --- index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index b6d4c830c..7cdf8d195 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,10 @@ - + <%= appNameFull %> From ff9ff4368013efe9bcb400081a4585a616575d27 Mon Sep 17 00:00:00 2001 From: Grace Date: Tue, 29 Oct 2024 12:20:27 +0000 Subject: [PATCH 3/7] Make toolbar responsive for mobile home page --- src/components/ActionBar.tsx | 11 +++- src/components/AppLogo.tsx | 17 ++--- src/components/DefaultPageLayout.tsx | 27 +++++++- src/components/HelpMenu.tsx | 91 ++++---------------------- src/components/HelpMenuItems.tsx | 95 ++++++++++++++++++++++++++++ src/components/ToolbarMenu.tsx | 8 +-- 6 files changed, 150 insertions(+), 99 deletions(-) create mode 100644 src/components/HelpMenuItems.tsx diff --git a/src/components/ActionBar.tsx b/src/components/ActionBar.tsx index d8ed539ff..106184ec8 100644 --- a/src/components/ActionBar.tsx +++ b/src/components/ActionBar.tsx @@ -1,16 +1,18 @@ -import { BoxProps, HStack } from "@chakra-ui/react"; +import { BoxProps, HStack, StackProps } from "@chakra-ui/react"; import { ReactNode } from "react"; export interface ActionBarProps extends BoxProps { itemsLeft?: ReactNode; itemsCenter?: ReactNode; itemsRight?: ReactNode; + itemsLeftProps?: StackProps; } const ActionBar = ({ itemsLeft, itemsCenter, itemsRight, + itemsLeftProps, ...rest }: ActionBarProps) => { return ( @@ -20,10 +22,15 @@ const ActionBar = ({ justifyContent="space-between" bgColor="brand2.500" h="64px" + gap={0} minH="64px" {...rest} > - + {itemsLeft} {itemsCenter && {itemsCenter}} diff --git a/src/components/AppLogo.tsx b/src/components/AppLogo.tsx index 559715961..6af0b277c 100644 --- a/src/components/AppLogo.tsx +++ b/src/components/AppLogo.tsx @@ -1,22 +1,19 @@ -import { As, Divider, HStack } from "@chakra-ui/react"; +import { Divider, HStack, StackProps } from "@chakra-ui/react"; import { useDeployment } from "../deployment"; -const AppLogo = ({ - color = "#FFF", - as, -}: { +interface AppLogoProps extends StackProps { color?: string; - beta?: boolean; - as?: As; -}) => { +} + +const AppLogo = ({ color = "#FFF", ...props }: AppLogoProps) => { const { AppLogo, OrgLogo } = useDeployment(); return ( {OrgLogo && ( <> diff --git a/src/components/DefaultPageLayout.tsx b/src/components/DefaultPageLayout.tsx index 7d0e1f172..cc2e355b0 100644 --- a/src/components/DefaultPageLayout.tsx +++ b/src/components/DefaultPageLayout.tsx @@ -34,6 +34,7 @@ import ProjectDropTarget from "./ProjectDropTarget"; import SaveDialogs from "./SaveDialogs"; import SettingsMenu from "./SettingsMenu"; import ToolbarMenu from "./ToolbarMenu"; +import HelpMenuItems from "./HelpMenuItems"; interface DefaultPageLayoutProps { titleId?: string; @@ -96,6 +97,7 @@ const DefaultPageLayout = ({ {showPageTitle && ( @@ -105,21 +107,40 @@ const DefaultPageLayout = ({ )} } - itemsLeft={toolbarItemsLeft || } + itemsLeft={ + toolbarItemsLeft || ( + + ) + } + itemsLeftProps={{ width: { base: 0, sm: undefined } }} itemsRight={ <> {toolbarItemsRight} - + + + {menuItems} + + {menuItems} + + } diff --git a/src/components/HelpMenu.tsx b/src/components/HelpMenu.tsx index d13b3dcd4..81dd9bc92 100644 --- a/src/components/HelpMenu.tsx +++ b/src/components/HelpMenu.tsx @@ -1,42 +1,32 @@ import { Box, + BoxProps, IconButton, Menu, MenuButton, - MenuDivider, - MenuItem, MenuList, Portal, useDisclosure, } from "@chakra-ui/react"; import { useRef } from "react"; -import { MdOutlineCookie } from "react-icons/md"; -import { - RiExternalLinkLine, - RiFeedbackLine, - RiInformationLine, - RiQuestionLine, -} from "react-icons/ri"; -import { FormattedMessage, useIntl } from "react-intl"; -import FeedbackForm from "./FeedbackForm"; -import { useDeployment } from "../deployment"; +import { RiQuestionLine } from "react-icons/ri"; +import { useIntl } from "react-intl"; import AboutDialog from "./AboutDialog"; +import FeedbackForm from "./FeedbackForm"; +import HelpMenuItems from "./HelpMenuItems"; -interface HelpMenuProps { - isMobile?: boolean; -} +interface HelpMenuProps extends BoxProps {} /** * A help button that triggers a drop-down menu with actions. */ -const HelpMenu = ({ isMobile, ...rest }: HelpMenuProps) => { +const HelpMenu = ({ ...rest }: HelpMenuProps) => { const aboutDialogDisclosure = useDisclosure(); const feedbackDisclosure = useDisclosure(); const intl = useIntl(); const MenuButtonRef = useRef(null); - const deployment = useDeployment(); return ( - + { onClose={feedbackDisclosure.onClose} finalFocusRef={MenuButtonRef} /> - + { /> - {deployment.supportLinks.main && ( - <> - } - > - - - } - onClick={feedbackDisclosure.onOpen} - > - - - - - )} - {deployment.termsOfUseLink && ( - } - > - - - )} - {deployment.privacyPolicyLink && ( - } - > - - - )} - {deployment.compliance.manageCookies && ( - } - > - - - )} - {(deployment.privacyPolicyLink || - deployment.compliance.manageCookies || - deployment.termsOfUseLink) && } - } - onClick={aboutDialogDisclosure.onOpen} - > - - + diff --git a/src/components/HelpMenuItems.tsx b/src/components/HelpMenuItems.tsx new file mode 100644 index 000000000..04ff25f88 --- /dev/null +++ b/src/components/HelpMenuItems.tsx @@ -0,0 +1,95 @@ +import { MenuDivider, MenuItem, useDisclosure } from "@chakra-ui/react"; +import { useRef } from "react"; +import { MdOutlineCookie } from "react-icons/md"; +import { + RiExternalLinkLine, + RiFeedbackLine, + RiInformationLine, +} from "react-icons/ri"; +import { FormattedMessage } from "react-intl"; +import { useDeployment } from "../deployment"; +import AboutDialog from "./AboutDialog"; +import FeedbackForm from "./FeedbackForm"; + +const HelpMenuItems = () => { + const aboutDialogDisclosure = useDisclosure(); + const feedbackDisclosure = useDisclosure(); + const MenuButtonRef = useRef(null); + const deployment = useDeployment(); + return ( + <> + + + {deployment.supportLinks.main && ( + <> + } + > + + + } + onClick={feedbackDisclosure.onOpen} + > + + + + + )} + {deployment.termsOfUseLink && ( + } + > + + + )} + {deployment.privacyPolicyLink && ( + } + > + + + )} + {deployment.compliance.manageCookies && ( + } + > + + + )} + {(deployment.privacyPolicyLink || + deployment.compliance.manageCookies || + deployment.termsOfUseLink) && } + } + onClick={aboutDialogDisclosure.onOpen} + > + + + + ); +}; + +export default HelpMenuItems; diff --git a/src/components/ToolbarMenu.tsx b/src/components/ToolbarMenu.tsx index 9a4b0a797..c363558c8 100644 --- a/src/components/ToolbarMenu.tsx +++ b/src/components/ToolbarMenu.tsx @@ -1,5 +1,6 @@ import { Box, + BoxProps, IconButton, Menu, MenuButton, @@ -9,9 +10,8 @@ import { import { ReactNode } from "react"; import { RiMenuLine } from "react-icons/ri"; -interface ToolbarMenuProps { +interface ToolbarMenuProps extends BoxProps { label: string; - isMobile?: boolean; children: ReactNode; icon?: JSX.Element; variant?: ThemeTypings["components"]["Menu"]["variants"]; @@ -22,12 +22,12 @@ const ToolbarMenu = ({ label, icon, children, - isMobile, variant, onDarkBackground = true, + ...props }: ToolbarMenuProps) => { return ( - + Date: Tue, 29 Oct 2024 12:24:10 +0000 Subject: [PATCH 4/7] Add comment --- src/components/DefaultPageLayout.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/DefaultPageLayout.tsx b/src/components/DefaultPageLayout.tsx index cc2e355b0..5c991e3a6 100644 --- a/src/components/DefaultPageLayout.tsx +++ b/src/components/DefaultPageLayout.tsx @@ -132,6 +132,7 @@ const DefaultPageLayout = ({ {menuItems} + {/* Toolbar items when sm window size. */} Date: Tue, 29 Oct 2024 12:25:56 +0000 Subject: [PATCH 5/7] Tweak --- src/components/DefaultPageLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DefaultPageLayout.tsx b/src/components/DefaultPageLayout.tsx index 5c991e3a6..495fc5d80 100644 --- a/src/components/DefaultPageLayout.tsx +++ b/src/components/DefaultPageLayout.tsx @@ -114,7 +114,7 @@ const DefaultPageLayout = ({ /> ) } - itemsLeftProps={{ width: { base: 0, sm: undefined } }} + itemsLeftProps={{ width: 0 }} itemsRight={ <> From c0b1572721994816a1c44c442b3bf5268d302877 Mon Sep 17 00:00:00 2001 From: Grace Date: Tue, 29 Oct 2024 13:37:28 +0000 Subject: [PATCH 6/7] Remove zIndex for new page --- src/pages/NewPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/NewPage.tsx b/src/pages/NewPage.tsx index 1b6e2bd46..1b8cd1a26 100644 --- a/src/pages/NewPage.tsx +++ b/src/pages/NewPage.tsx @@ -72,7 +72,7 @@ const NewPage = () => { > - + From 0b6de843fa8a4d8d407e940211b820967aa4dcd9 Mon Sep 17 00:00:00 2001 From: Grace Date: Tue, 29 Oct 2024 13:37:41 +0000 Subject: [PATCH 7/7] Increase zIndex for action bar container --- src/components/DefaultPageLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DefaultPageLayout.tsx b/src/components/DefaultPageLayout.tsx index 495fc5d80..fc2015208 100644 --- a/src/components/DefaultPageLayout.tsx +++ b/src/components/DefaultPageLayout.tsx @@ -94,7 +94,7 @@ const DefaultPageLayout = ({ spacing={0} bgColor="whitesmoke" > - +