-
-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Remove hard-coded grid size specifications to allow buttons to shift and fit more dynamically. Restore small Combine icon for narrow windows, as it's the only way to get back to the ProjectScreen without logging out and back in again. Fix max height of app-bar to prevent vertical stretching when "DATA ENTRY" or "DATA CLEANUP" overflow to third line in localization. To save space on narrow windows, move Statistics button from large "DATA STATISTICS" nav button to small stats-icon button next to project settings.
- Loading branch information
1 parent
73b92db
commit 3178d80
Showing
15 changed files
with
293 additions
and
157 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,89 +1,47 @@ | ||
| import { Button } from "@mui/material"; | ||
| import React, { ReactElement, useState } from "react"; | ||
| import { ReactElement } from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
|
|
||
| import { Permission } from "api"; | ||
| import * as backend from "backend"; | ||
| import * as LocalStorage from "backend/localStorage"; | ||
| import history, { Path } from "browserHistory"; | ||
| import { openTreeAction } from "components/TreeView/TreeViewActions"; | ||
| import { useAppDispatch } from "types/hooks"; | ||
| import { appBarHeight } from "components/AppBar/AppBarComponent"; | ||
| import { tabColor } from "types/theme"; | ||
|
|
||
| interface NavigationButtonsProps { | ||
| currentTab: Path; | ||
| } | ||
|
|
||
| export async function getIsAdminOrOwner(): Promise<boolean> { | ||
| const user = LocalStorage.getCurrentUser(); | ||
| if (user?.isAdmin) { | ||
| return true; | ||
| } else { | ||
| const projectId = LocalStorage.getProjectId(); | ||
| const userRoleID = user?.projectRoles[projectId]; | ||
| if (userRoleID) { | ||
| return backend.getUserRole(userRoleID).then((role) => { | ||
| return role.permissions.includes(Permission.Owner); | ||
| }); | ||
| } | ||
| } | ||
| return false; | ||
| } | ||
|
|
||
| /** A button that redirects to the home page */ | ||
| export default function NavigationButtons( | ||
| props: NavigationButtonsProps | ||
| ): ReactElement { | ||
| const dispatch = useAppDispatch(); | ||
| const { t } = useTranslation(); | ||
| const [isAdminOrOwner, setIsAdminOrOwner] = useState<boolean>(false); | ||
|
|
||
| getIsAdminOrOwner().then(setIsAdminOrOwner); | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| <> | ||
| <Button | ||
| id="data-entry" | ||
| onClick={() => { | ||
| dispatch(openTreeAction()); | ||
| history.push(Path.DataEntry); | ||
| }} | ||
| id={"data-entry"} | ||
| onClick={() => history.push(Path.DataEntry)} | ||
| color="inherit" | ||
| style={{ | ||
| width: "fit-content", | ||
| background: tabColor(props.currentTab, Path.DataEntry), | ||
| maxHeight: appBarHeight, | ||
| width: "min-content", | ||
| }} | ||
| > | ||
| {t("appBar.dataEntry")} | ||
| </Button> | ||
| <Button | ||
| id="goals" | ||
| onClick={() => { | ||
| history.push(Path.Goals); | ||
| }} | ||
| id={"data-cleanup"} | ||
| onClick={() => history.push(Path.Goals)} | ||
| color="inherit" | ||
| style={{ | ||
| width: "fit-content", | ||
| background: tabColor(props.currentTab, Path.Goals), | ||
| maxHeight: appBarHeight, | ||
| width: "min-content", | ||
| }} | ||
| > | ||
| {t("appBar.dataCleanup")} | ||
| </Button> | ||
| {isAdminOrOwner && ( | ||
| <Button | ||
| id="statistics" | ||
| onClick={() => { | ||
| history.push(Path.Statistics); | ||
| }} | ||
| color="inherit" | ||
| style={{ | ||
| width: "min-content", | ||
| background: tabColor(props.currentTab, Path.Statistics), | ||
| }} | ||
| > | ||
| {t("appBar.statistics")} | ||
| </Button> | ||
| )} | ||
| </React.Fragment> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import { BarChart, Settings } from "@mui/icons-material"; | ||
| import { Button, Hidden, Tooltip, Typography } from "@mui/material"; | ||
| import { ReactElement, useEffect, useState } from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { useSelector } from "react-redux"; | ||
|
|
||
| import { Permission } from "api/models"; | ||
| import { getUserRole } from "backend"; | ||
| import { getCurrentUser, getProjectId } from "backend/localStorage"; | ||
| import history, { Path } from "browserHistory"; | ||
| import { StoreState } from "types"; | ||
| import { tabColor } from "types/theme"; | ||
|
|
||
| interface ProjectButtonsProps { | ||
| currentTab: Path; | ||
| } | ||
|
|
||
| export async function getIsAdminOrOwner(): Promise<boolean> { | ||
| const user = getCurrentUser(); | ||
| if (!user) { | ||
| return false; | ||
| } | ||
| if (user.isAdmin) { | ||
| return true; | ||
| } | ||
| const userRoleID = user.projectRoles[getProjectId()]; | ||
| if (userRoleID) { | ||
| const role = await getUserRole(userRoleID); | ||
| return role.permissions.includes(Permission.Owner); | ||
| } | ||
| return false; | ||
| } | ||
|
|
||
| /** A button that redirects to the project settings */ | ||
| export default function ProjectButtons( | ||
| props: ProjectButtonsProps | ||
| ): ReactElement { | ||
| const projectName = useSelector( | ||
| (state: StoreState) => state.currentProjectState.project.name | ||
| ); | ||
| const [isAdminOrOwner, setIsAdminOrOwner] = useState<boolean>(false); | ||
| const { t } = useTranslation(); | ||
|
|
||
| useEffect(() => { | ||
| getIsAdminOrOwner().then(setIsAdminOrOwner); | ||
| }, [setIsAdminOrOwner]); | ||
|
|
||
| return ( | ||
| <> | ||
| {isAdminOrOwner && ( | ||
| <Tooltip title={t("appBar.statistics")}> | ||
| <Button | ||
| id="project-statistics" | ||
| onClick={() => history.push(Path.Statistics)} | ||
| color="inherit" | ||
| style={{ | ||
| background: tabColor(props.currentTab, Path.Statistics), | ||
| minWidth: 0, | ||
| }} | ||
| > | ||
| <BarChart /> | ||
| </Button> | ||
| </Tooltip> | ||
| )} | ||
| <Tooltip title={t("appBar.projectSettings")}> | ||
| <Button | ||
| id="project-settings" | ||
| onClick={() => history.push(Path.ProjSettings)} | ||
| color="inherit" | ||
| style={{ | ||
| background: tabColor(props.currentTab, Path.ProjSettings), | ||
| minWidth: 0, | ||
| }} | ||
| > | ||
| <Settings /> | ||
| </Button> | ||
| </Tooltip> | ||
| <Hidden smDown> | ||
| <Typography display="inline" style={{ margin: 5 }}> | ||
| {projectName} | ||
| </Typography> | ||
| </Hidden> | ||
| </> | ||
| ); | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.