From cd954cfe797516e0eae9cfaaa6254879fed8e3c2 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Fri, 1 Apr 2022 00:35:41 +0600 Subject: [PATCH 1/3] app nav ready --- .../src/Components/Layouts/AppNav.tsx | 46 ++++++++++++------- 1 file changed, 30 insertions(+), 16 deletions(-) diff --git a/packages/files-ui/src/Components/Layouts/AppNav.tsx b/packages/files-ui/src/Components/Layouts/AppNav.tsx index a2a934e929..fc83b69651 100644 --- a/packages/files-ui/src/Components/Layouts/AppNav.tsx +++ b/packages/files-ui/src/Components/Layouts/AppNav.tsx @@ -1,6 +1,6 @@ import { useFiles } from "../../Contexts/FilesContext" import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme" -import React, { useCallback } from "react" +import React, { useCallback, useMemo } from "react" import clsx from "clsx" import { Link, @@ -13,7 +13,8 @@ import { DeleteSvg, UserShareSvg, MenuDropdown, - ScrollbarWrapper + ScrollbarWrapper, + useLocation } from "@chainsafe/common-components" import { ROUTE_LINKS } from "../FilesRoutes" import { Trans } from "@lingui/macro" @@ -147,10 +148,11 @@ const useStyles = makeStyles( flexDirection: "row", alignItems: "center", cursor: "pointer", - padding: `${constants.generalUnit * 1.5}px 0`, + margin: `${constants.generalUnit * 0.5}px 0`, + padding: `${constants.generalUnit}px ${constants.generalUnit * 1.5}px`, + borderRadius: "4px", transitionDuration: `${animation.transform}ms`, "& span": { - transitionDuration: `${animation.transform}ms`, [breakpoints.up("md")]: { color: constants.nav.itemColor }, @@ -162,7 +164,6 @@ const useStyles = makeStyles( "& path": { fill: constants.nav.headingColor }, - transitionDuration: `${animation.transform}ms`, width: Number(constants.svgWidth), marginRight: constants.generalUnit * 2, [breakpoints.up("md")]: { @@ -173,17 +174,15 @@ const useStyles = makeStyles( } }, "&:hover": { - "& span": { - color: constants.nav.itemColorHover - }, - "& svg": { - fill: constants.nav.itemIconColorHover - } + backgroundColor: palette.additional["gray"][5] + }, + "&.selected": { + backgroundColor: palette.additional["gray"][5] } }, navItemText: { [breakpoints.down("md")]: { - color: palette.additional["gray"][3] + color: palette.additional["gray"][4] } }, menuItem: { @@ -245,6 +244,8 @@ interface IAppNav { setNavOpen: (state: boolean) => void } +type AppNavTab = "home" | "shared" | "bin" | "settings" + const AppNav = ({ navOpen, setNavOpen }: IAppNav) => { const { desktop } = useThemeSwitcher() const classes = useStyles() @@ -252,6 +253,7 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => { const { isLoggedIn, secured } = useFilesApi() const { publicKey, isNewDevice, shouldInitializeAccount, logout } = useThresholdKey() const { removeUser, getProfileTitle, profile } = useUser() + const location = useLocation() const signOut = useCallback(() => { logout() @@ -266,6 +268,18 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => { const profileTitle = getProfileTitle() + const appNavTab: AppNavTab | undefined = useMemo(() => { + const firstPathParam = location.pathname.split("/")[1] + switch(firstPathParam) { + case "drive": return "home" + case "shared": return "shared" + case "shared-overview": return "shared" + case "bin": return "bin" + case "settings": return "settings" + default: return + } + }, [location]) + return (
{ @@ -355,7 +369,7 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => { @@ -369,7 +383,7 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => { @@ -388,7 +402,7 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => { From 05aa58cfc675af1819e1e23e17bfcecb470eb00a Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Fri, 1 Apr 2022 00:56:44 +0600 Subject: [PATCH 2/3] dark and mobile --- .../src/Components/Layouts/AppNav.tsx | 24 ++++++++++--------- packages/files-ui/src/Themes/Constants.ts | 1 + packages/files-ui/src/Themes/DarkTheme.ts | 3 ++- packages/files-ui/src/Themes/LightTheme.ts | 5 ++-- 4 files changed, 19 insertions(+), 14 deletions(-) diff --git a/packages/files-ui/src/Components/Layouts/AppNav.tsx b/packages/files-ui/src/Components/Layouts/AppNav.tsx index fc83b69651..f6e863b4bb 100644 --- a/packages/files-ui/src/Components/Layouts/AppNav.tsx +++ b/packages/files-ui/src/Components/Layouts/AppNav.tsx @@ -174,15 +174,21 @@ const useStyles = makeStyles( } }, "&:hover": { - backgroundColor: palette.additional["gray"][5] + backgroundColor: palette.additional["gray"][5], + [breakpoints.down("md")]: { + color: constants.nav.backgroundColor + } }, "&.selected": { - backgroundColor: palette.additional["gray"][5] - } - }, - navItemText: { - [breakpoints.down("md")]: { - color: palette.additional["gray"][4] + backgroundColor: palette.additional["gray"][5], + [breakpoints.down("md")]: { + "& span": { + color: constants.nav.mobileSelectedBackground + }, + "& svg": { + fill: constants.nav.mobileSelectedBackground + } + } } }, menuItem: { @@ -361,7 +367,6 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => { Home @@ -375,7 +380,6 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => { Shared @@ -389,7 +393,6 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => { Bin @@ -408,7 +411,6 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => { Settings diff --git a/packages/files-ui/src/Themes/Constants.ts b/packages/files-ui/src/Themes/Constants.ts index 5ae9fd8019..1396e76477 100644 --- a/packages/files-ui/src/Themes/Constants.ts +++ b/packages/files-ui/src/Themes/Constants.ts @@ -61,6 +61,7 @@ export interface CsfColors extends IConstants { itemColorHover: string itemIconColor: string itemIconColorHover: string + mobileSelectedBackground: string profileButtonShadow: string } createFolder: { diff --git a/packages/files-ui/src/Themes/DarkTheme.ts b/packages/files-ui/src/Themes/DarkTheme.ts index 17f07a86e2..d4bec80484 100644 --- a/packages/files-ui/src/Themes/DarkTheme.ts +++ b/packages/files-ui/src/Themes/DarkTheme.ts @@ -373,9 +373,10 @@ export const darkTheme = createTheme({ mobileBackgroundColor: "var(--gray2)", headingColor: "var(--gray9)", itemColor: "var(--gray9)", - itemColorHover: "var(--gray9)", itemIconColor: "var(--gray9)", + itemColorHover: "var(--gray9)", itemIconColorHover: "var(--gray9)", + mobileSelectedBackground: "var(--gray9)", profileButtonShadow: "0px 1px 2px rgba(0, 0, 0, 0.25)" }, createFolder: { diff --git a/packages/files-ui/src/Themes/LightTheme.ts b/packages/files-ui/src/Themes/LightTheme.ts index 41acea571c..367c2e71ca 100644 --- a/packages/files-ui/src/Themes/LightTheme.ts +++ b/packages/files-ui/src/Themes/LightTheme.ts @@ -63,9 +63,10 @@ export const lightTheme = createTheme({ mobileBackgroundColor: "var(--gray9)", headingColor: "inherit", itemColor: "inherit", - itemColorHover: "var(--gray7)", itemIconColor: "inherit", - itemIconColorHover: "var(--gray7)", + itemColorHover: "var(--gray6)", + itemIconColorHover: "var(--gray6)", + mobileSelectedBackground: "var(--gray9)", profileButtonShadow: "0px 1px 2px rgba(0, 0, 0, 0.25)" }, createFolder: { From 7be0c24be2b2a64a2662122a4a1ceca7253a040e Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Fri, 1 Apr 2022 01:11:06 +0600 Subject: [PATCH 3/3] storage nav --- .../src/Components/Layouts/AppNav.tsx | 78 +++++++++---------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/packages/storage-ui/src/Components/Layouts/AppNav.tsx b/packages/storage-ui/src/Components/Layouts/AppNav.tsx index 8cb8224cb8..3fb78fe4a2 100644 --- a/packages/storage-ui/src/Components/Layouts/AppNav.tsx +++ b/packages/storage-ui/src/Components/Layouts/AppNav.tsx @@ -3,7 +3,7 @@ import { makeStyles, useThemeSwitcher } from "@chainsafe/common-theme" -import React, { useCallback } from "react" +import React, { useCallback, useMemo } from "react" import clsx from "clsx" import { Link, @@ -16,7 +16,8 @@ import { SettingSvg, DocumentSvg, Button, - PowerDownIcon + PowerDownIcon, + useLocation } from "@chainsafe/common-components" import { ROUTE_LINKS } from "../StorageRoutes" import { Trans } from "@lingui/macro" @@ -137,43 +138,37 @@ const useStyles = makeStyles( flexDirection: "row", alignItems: "center", cursor: "pointer", - padding: `${constants.generalUnit * 1.5}px 0`, + margin: `${constants.generalUnit * 0.5}px 0`, + padding: `${constants.generalUnit}px ${constants.generalUnit * 1.5}px`, + borderRadius: "4px", transitionDuration: `${animation.transform}ms`, "& span": { - transitionDuration: `${animation.transform}ms`, - [breakpoints.up("md")]: { - color: constants.nav.itemColor - }, + color: constants.nav.itemColor, [breakpoints.down("md")]: { - color: constants.nav.itemColorHover + color: palette.additional["gray"][3] } }, "& svg": { - transitionDuration: `${animation.transform}ms`, width: Number(constants.svgWidth), marginRight: constants.generalUnit * 2, - [breakpoints.up("md")]: { - fill: constants.nav.itemIconColor - }, + fill: constants.nav.itemIconColor, [breakpoints.down("md")]: { - fill: constants.nav.itemIconColorHover + fill: palette.additional["gray"][3] } }, "&:hover": { - "& span": { - color: constants.nav.itemColorHover - }, - "& svg": { - fill: constants.nav.itemIconColorHover - } + backgroundColor: palette.additional["gray"][5] }, - [breakpoints.down("md")]: { - minWidth: Number(constants.mobileNavWidth) - } - }, - navItemText: { - [breakpoints.down("md")]: { - color: palette.additional["gray"][3] + "&.selected": { + backgroundColor: palette.additional["gray"][5], + [breakpoints.down("md")]: { + "& span": { + color: palette.additional["gray"][9] + }, + "& svg": { + fill: palette.additional["gray"][9] + } + } } }, menuItem: { @@ -202,15 +197,15 @@ interface IAppNav { setNavOpen: (state: boolean) => void } +type AppNavTab = "buckets" | "cids" | "settings" + const AppNav: React.FC = ({ navOpen, setNavOpen }: IAppNav) => { const { desktop } = useThemeSwitcher() const classes = useStyles() - + const location = useLocation() const { storageSummary } = useStorage() - const { isLoggedIn, logout } = useStorageApi() - const signOut = useCallback(() => { logout() }, [logout]) @@ -221,6 +216,17 @@ const AppNav: React.FC = ({ navOpen, setNavOpen }: IAppNav) => { } }, [desktop, navOpen, setNavOpen]) + const appNavTab: AppNavTab | undefined = useMemo(() => { + const firstPathParam = location.pathname.split("/")[1] + switch(firstPathParam) { + case "cids": return "cids" + case "buckets": return "buckets" + case "bucket": return "buckets" + case "settings": return "settings" + default: return + } + }, [location]) + return (
= ({ navOpen, setNavOpen }: IAppNav) => { Buckets { - handleOnClick() - }} - className={classes.navItem} + onClick={handleOnClick} + className={clsx(classes.navItem, appNavTab === "cids" && "selected")} to={ROUTE_LINKS.Cids} > CIDs @@ -281,13 +283,12 @@ const AppNav: React.FC = ({ navOpen, setNavOpen }: IAppNav) => { Settings @@ -302,7 +303,6 @@ const AppNav: React.FC = ({ navOpen, setNavOpen }: IAppNav) => { Docs