Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hover, selected states for App navigation #2063

Merged
merged 8 commits into from
Apr 1, 2022
Merged

Hover, selected states for App navigation #2063

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
cd954cf
app nav ready
tanmoyAtb Mar 31, 2022
05aa58c
dark and mobile
tanmoyAtb Mar 31, 2022
1d36196
Merge branch 'dev' into mnt/focus-hover-styles-1678
tanmoyAtb Mar 31, 2022
7be0c24
storage nav
tanmoyAtb Mar 31, 2022
6f11fca
Merge branch 'mnt/focus-hover-styles-1678' of github.com:ChainSafe/ui…
tanmoyAtb Mar 31, 2022
42a1e04
Merge branch 'dev' into mnt/focus-hover-styles-1678
Tbaut Apr 1, 2022
72fb4ed
Merge branch 'dev' into mnt/focus-hover-styles-1678
Tbaut Apr 1, 2022
4638993
Merge branch 'dev' into mnt/focus-hover-styles-1678
Tbaut Apr 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 39 additions & 23 deletions packages/files-ui/src/Components/Layouts/AppNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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"
Expand Down Expand Up @@ -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
},
Expand All @@ -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")]: {
Expand All @@ -173,17 +174,21 @@ const useStyles = makeStyles(
}
},
"&:hover": {
"& span": {
color: constants.nav.itemColorHover
},
"& svg": {
fill: constants.nav.itemIconColorHover
backgroundColor: palette.additional["gray"][5],
[breakpoints.down("md")]: {
color: constants.nav.backgroundColor
}
},
"&.selected": {
backgroundColor: palette.additional["gray"][5],
[breakpoints.down("md")]: {
"& span": {
color: constants.nav.mobileSelectedBackground
},
"& svg": {
fill: constants.nav.mobileSelectedBackground
}
}
}
},
navItemText: {
[breakpoints.down("md")]: {
color: palette.additional["gray"][3]
}
},
menuItem: {
Expand Down Expand Up @@ -245,13 +250,16 @@ interface IAppNav {
setNavOpen: (state: boolean) => void
}

type AppNavTab = "home" | "shared" | "bin" | "settings"

const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
const { desktop } = useThemeSwitcher()
const classes = useStyles()
const { storageSummary } = useFiles()
const { isLoggedIn, secured } = useFilesApi()
const { publicKey, isNewDevice, shouldInitializeAccount, logout } = useThresholdKey()
const { removeUser, getProfileTitle, profile } = useUser()
const location = useLocation()

const signOut = useCallback(() => {
logout()
Expand All @@ -266,6 +274,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 (
<ScrollbarWrapper className={classes.scrollRoot}>
<section
Expand Down Expand Up @@ -341,41 +361,38 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
<Link
data-cy="link-home"
onClick={handleOnClick}
className={classes.navItem}
className={clsx(classes.navItem, appNavTab === "home" && "selected")}
to={ROUTE_LINKS.Drive("/")}
>
<DatabaseSvg />
<Typography
variant="h5"
className={classes.navItemText}
>
<Trans>Home</Trans>
</Typography>
</Link>
<Link
data-cy="link-shared"
onClick={handleOnClick}
className={classes.navItem}
className={clsx(classes.navItem, appNavTab === "shared" && "selected")}
to={ROUTE_LINKS.SharedFolders}
>
<UserShareSvg />
<Typography
variant="h5"
className={classes.navItemText}
>
<Trans>Shared</Trans>
</Typography>
</Link>
<Link
data-cy="link-bin"
onClick={handleOnClick}
className={classes.navItem}
className={clsx(classes.navItem, appNavTab === "bin" && "selected")}
to={ROUTE_LINKS.Bin("/")}
>
<DeleteSvg />
<Typography
variant="h5"
className={classes.navItemText}
>
<Trans>Bin</Trans>
</Typography>
Expand All @@ -388,13 +405,12 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
<Link
data-cy="link-settings"
onClick={handleOnClick}
className={classes.navItem}
className={clsx(classes.navItem, appNavTab === "settings" && "selected")}
to={ROUTE_LINKS.SettingsDefault}
>
<SettingSvg />
<Typography
variant="h5"
className={classes.navItemText}
>
<Trans>Settings</Trans>
</Typography>
Expand Down
1 change: 1 addition & 0 deletions packages/files-ui/src/Themes/Constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export interface CsfColors extends IConstants {
itemColorHover: string
itemIconColor: string
itemIconColorHover: string
mobileSelectedBackground: string
profileButtonShadow: string
}
createFolder: {
Expand Down
3 changes: 2 additions & 1 deletion packages/files-ui/src/Themes/DarkTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,9 +373,10 @@ export const darkTheme = createTheme<CsfColors>({
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: {
Expand Down
5 changes: 3 additions & 2 deletions packages/files-ui/src/Themes/LightTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,10 @@ export const lightTheme = createTheme<CsfColors>({
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: {
Expand Down
78 changes: 39 additions & 39 deletions packages/storage-ui/src/Components/Layouts/AppNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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"
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -202,15 +197,15 @@ interface IAppNav {
setNavOpen: (state: boolean) => void
}

type AppNavTab = "buckets" | "cids" | "settings"

const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
const { desktop } = useThemeSwitcher()
const classes = useStyles()

const location = useLocation()
const { storageSummary } = useStorage()

const { isLoggedIn, logout } = useStorageApi()


const signOut = useCallback(() => {
logout()
}, [logout])
Expand All @@ -221,6 +216,17 @@ const AppNav: React.FC<IAppNav> = ({ 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 (
<section
className={clsx(classes.root, {
Expand Down Expand Up @@ -249,29 +255,25 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
<Link
data-cy="buckets-nav"
onClick={handleOnClick}
className={classes.navItem}
className={clsx(classes.navItem, appNavTab === "buckets" && "selected")}
to={ROUTE_LINKS.Buckets}
>
<FolderSvg />
<Typography
variant="h5"
className={classes.navItemText}
>
<Trans>Buckets</Trans>
</Typography>
</Link>
<Link
data-cy="cids-nav"
onClick={() => {
handleOnClick()
}}
className={classes.navItem}
onClick={handleOnClick}
className={clsx(classes.navItem, appNavTab === "cids" && "selected")}
to={ROUTE_LINKS.Cids}
>
<DatabaseSvg />
<Typography
variant="h5"
className={classes.navItemText}
>
<Trans>CIDs</Trans>
</Typography>
Expand All @@ -281,13 +283,12 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
<Link
data-cy="settings-nav"
onClick={handleOnClick}
className={classes.navItem}
className={clsx(classes.navItem, appNavTab === "settings" && "selected")}
to={ROUTE_LINKS.SettingsRoot}
>
<SettingSvg />
<Typography
variant="h5"
className={classes.navItemText}
>
<Trans>Settings</Trans>
</Typography>
Expand All @@ -302,7 +303,6 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
<DocumentSvg />
<Typography
variant="h5"
className={classes.navItemText}
>
<Trans>Docs</Trans>
</Typography>
Expand Down