From 8e0bdc451aea6d009687ef066e3581513e9492f4 Mon Sep 17 00:00:00 2001 From: "D. Ror" Date: Mon, 22 Feb 2021 11:06:09 -0500 Subject: [PATCH 1/5] Minor visual improvements. --- src/components/AppBar/AppBarComponent.tsx | 10 ++++------ src/components/AppBar/NavigationButtons.tsx | 2 ++ src/components/GoalTimeline/GoalList.tsx | 2 +- src/components/GoalTimeline/GoalTimelineComponent.tsx | 11 ++++------- 4 files changed, 11 insertions(+), 14 deletions(-) diff --git a/src/components/AppBar/AppBarComponent.tsx b/src/components/AppBar/AppBarComponent.tsx index 9d8f2b6293..1356edf427 100644 --- a/src/components/AppBar/AppBarComponent.tsx +++ b/src/components/AppBar/AppBarComponent.tsx @@ -26,21 +26,19 @@ export default function AppBarComponent(props: AppBarComponentProps) { spacing={2} alignItems="center" > - + {getProjectId() !== "" && ( )} + - + {getProjectId() !== "" && ( )} - - - - + diff --git a/src/components/AppBar/NavigationButtons.tsx b/src/components/AppBar/NavigationButtons.tsx index 95aeb67799..2e09fde45b 100644 --- a/src/components/AppBar/NavigationButtons.tsx +++ b/src/components/AppBar/NavigationButtons.tsx @@ -20,6 +20,7 @@ export default function NavigationButtons(props: NavigationButtonsProps) { }} color="inherit" style={{ + width: "min-content", background: tabColor(props.currentTab, Path.DataEntry), }} > @@ -32,6 +33,7 @@ export default function NavigationButtons(props: NavigationButtonsProps) { }} color="inherit" style={{ + width: "min-content", background: tabColor(props.currentTab, Path.Goals), }} > diff --git a/src/components/GoalTimeline/GoalList.tsx b/src/components/GoalTimeline/GoalList.tsx index 4e729713a1..23b30880ce 100644 --- a/src/components/GoalTimeline/GoalList.tsx +++ b/src/components/GoalTimeline/GoalList.tsx @@ -77,7 +77,7 @@ function buttonStyle(orientation: Orientation, size: number): CSSProperties { case "vertical": return { height: size + "vw", - padding: "2vw", + padding: "1vw", width: "100%", }; } diff --git a/src/components/GoalTimeline/GoalTimelineComponent.tsx b/src/components/GoalTimeline/GoalTimelineComponent.tsx index 1d9ce247fb..456fb87f3c 100644 --- a/src/components/GoalTimeline/GoalTimelineComponent.tsx +++ b/src/components/GoalTimeline/GoalTimelineComponent.tsx @@ -38,7 +38,6 @@ interface GoalTimelineProps { interface GoalTimelineState { portrait: boolean; - reducedLandScape: boolean; } /** @@ -54,7 +53,6 @@ export default class GoalTimeline extends React.Component< super(props); this.state = { portrait: window.innerWidth < window.innerHeight, - reducedLandScape: (window.innerWidth * 7) / 10 < window.innerHeight, }; this.handleChange = this.handleChange.bind(this); } @@ -66,7 +64,6 @@ export default class GoalTimeline extends React.Component< handleWindowSizeChange = () => { this.setState({ portrait: window.innerWidth < window.innerHeight, - reducedLandScape: (window.innerWidth * 7) / 10 < window.innerHeight, }); }; @@ -156,9 +153,9 @@ export default class GoalTimeline extends React.Component< renderLandscape() { return ( - + {/* Alternatives */} - +
@@ -174,7 +171,7 @@ export default class GoalTimeline extends React.Component< {/* Recommendation */} - + @@ -182,7 +179,7 @@ export default class GoalTimeline extends React.Component< {/* History */} - +
From c4fb6c3e10d66a95a9356aedf341bb45180862e2 Mon Sep 17 00:00:00 2001 From: "D. Ror" Date: Mon, 22 Feb 2021 13:46:45 -0500 Subject: [PATCH 2/5] More by-size adjustments. --- src/components/AppBar/AppBarComponent.tsx | 10 +++---- src/components/AppBar/Logo.tsx | 14 +++++----- src/components/AppBar/ProjectNameButton.tsx | 30 ++++++++++++--------- src/components/AppBar/UserMenu.tsx | 14 +++++++--- 4 files changed, 40 insertions(+), 28 deletions(-) diff --git a/src/components/AppBar/AppBarComponent.tsx b/src/components/AppBar/AppBarComponent.tsx index 1356edf427..b4f80f2390 100644 --- a/src/components/AppBar/AppBarComponent.tsx +++ b/src/components/AppBar/AppBarComponent.tsx @@ -26,20 +26,20 @@ export default function AppBarComponent(props: AppBarComponentProps) { spacing={2} alignItems="center" > - + {getProjectId() !== "" && ( )} - - + {getProjectId() !== "" && ( )} + - - + + diff --git a/src/components/AppBar/Logo.tsx b/src/components/AppBar/Logo.tsx index cf057cca28..4bb8dafbc0 100644 --- a/src/components/AppBar/Logo.tsx +++ b/src/components/AppBar/Logo.tsx @@ -1,4 +1,4 @@ -import { Button } from "@material-ui/core"; +import { Button, Hidden } from "@material-ui/core"; import React from "react"; import history, { Path } from "browserHistory"; @@ -13,12 +13,12 @@ export default function Logo() { history.push(Path.ProjScreen); }} > - Logo + + Logo + + + Logo + ); } diff --git a/src/components/AppBar/ProjectNameButton.tsx b/src/components/AppBar/ProjectNameButton.tsx index f61579bf06..bee0c7b946 100644 --- a/src/components/AppBar/ProjectNameButton.tsx +++ b/src/components/AppBar/ProjectNameButton.tsx @@ -1,4 +1,5 @@ -import { Button } from "@material-ui/core"; +import { Button, Hidden } from "@material-ui/core"; +import { Settings } from "@material-ui/icons"; import React from "react"; import { useSelector } from "react-redux"; @@ -14,17 +15,20 @@ export default function ProjectNameButton(props: ProjectNameButtonProps) { const projectName = useSelector((state: any) => state.currentProject.name); return ( - + + + ); } diff --git a/src/components/AppBar/UserMenu.tsx b/src/components/AppBar/UserMenu.tsx index ae8bf7b37a..6be6d5ff28 100644 --- a/src/components/AppBar/UserMenu.tsx +++ b/src/components/AppBar/UserMenu.tsx @@ -1,4 +1,4 @@ -import { Avatar, Button, Menu, MenuItem } from "@material-ui/core"; +import { Avatar, Button, Hidden, Menu, MenuItem } from "@material-ui/core"; import { ExitToApp, Help, @@ -11,7 +11,7 @@ import { Translate } from "react-localize-redux"; import { getUser } from "backend"; import * as LocalStorage from "backend/localStorage"; import history, { Path } from "browserHistory"; -import theme from "types/theme"; +import theme, { tabColor } from "types/theme"; export async function getIsAdmin(): Promise { const userId = LocalStorage.getUserId(); @@ -22,10 +22,14 @@ export async function getIsAdmin(): Promise { return false; } +interface UserMenuProps { + currentTab: Path; +} + /** * Avatar in appbar with dropdown UserMenu */ -export default function UserMenu() { +export default function UserMenu(props: UserMenuProps) { const [anchorElement, setAnchorElement] = useState(null); const avatar = LocalStorage.getAvatar(); const [isAdmin, setIsAdmin] = useState(false); @@ -47,7 +51,11 @@ export default function UserMenu() { aria-haspopup="true" onClick={handleClick} color="secondary" + style={{ + background: tabColor(props.currentTab, Path.UserSettings), + }} > + {LocalStorage.getCurrentUser()?.username} {avatar ? ( ) : ( From d262efac8d65fb147e0e417363d3c6bdcdcb423b Mon Sep 17 00:00:00 2001 From: "D. Ror" Date: Mon, 22 Feb 2021 14:02:32 -0500 Subject: [PATCH 3/5] Fix tests. --- src/components/AppBar/tests/UserMenu.test.tsx | 6 +++-- .../AppBarComponent.test.tsx.snap | 27 +++++++++++++++++-- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/src/components/AppBar/tests/UserMenu.test.tsx b/src/components/AppBar/tests/UserMenu.test.tsx index e3eb4853aa..b9909f4992 100644 --- a/src/components/AppBar/tests/UserMenu.test.tsx +++ b/src/components/AppBar/tests/UserMenu.test.tsx @@ -2,6 +2,7 @@ import { Button, MenuItem } from "@material-ui/core"; import React from "react"; import renderer, { ReactTestRenderer } from "react-test-renderer"; +import { Path } from "browserHistory"; import UserMenu, { getIsAdmin, UserMenuList } from "components/AppBar/UserMenu"; import { User } from "types/user"; @@ -13,8 +14,9 @@ jest.mock("backend", () => { jest.mock("backend/localStorage", () => { return { - getUserId: () => mockGetUserId(), getAvatar: jest.fn(), + getCurrentUser: jest.fn(), + getUserId: () => mockGetUserId(), }; }); @@ -39,7 +41,7 @@ beforeEach(() => { describe("UserMenu", () => { it("renders without crashing", () => { renderer.act(() => { - testRenderer = renderer.create(); + testRenderer = renderer.create(); }); expect(testRenderer.root.findAllByType(Button).length).toEqual(1); }); diff --git a/src/components/AppBar/tests/__snapshots__/AppBarComponent.test.tsx.snap b/src/components/AppBar/tests/__snapshots__/AppBarComponent.test.tsx.snap index 9c22e78051..eaed7a7fd7 100644 --- a/src/components/AppBar/tests/__snapshots__/AppBarComponent.test.tsx.snap +++ b/src/components/AppBar/tests/__snapshots__/AppBarComponent.test.tsx.snap @@ -21,6 +21,7 @@ Array [ style={ Object { "background": "inherit", + "width": "min-content", } } tabIndex={0} @@ -51,6 +52,7 @@ Array [ style={ Object { "background": "#1976d2", + "width": "min-content", } } tabIndex={0} @@ -93,7 +95,16 @@ exports[`NavigationButtons has only one tab shaded 2`] = ` - Project + + + - Project + + + + `; From cf642ce14bec8309329342f592258c2502e19fb7 Mon Sep 17 00:00:00 2001 From: "D. Ror" Date: Mon, 22 Feb 2021 14:09:19 -0500 Subject: [PATCH 4/5] Add tooltip. --- src/components/AppBar/ProjectNameButton.tsx | 31 +++++++++++---------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/src/components/AppBar/ProjectNameButton.tsx b/src/components/AppBar/ProjectNameButton.tsx index bee0c7b946..619f1636e6 100644 --- a/src/components/AppBar/ProjectNameButton.tsx +++ b/src/components/AppBar/ProjectNameButton.tsx @@ -1,6 +1,7 @@ -import { Button, Hidden } from "@material-ui/core"; +import { Button, Hidden, Tooltip } from "@material-ui/core"; import { Settings } from "@material-ui/icons"; import React from "react"; +import { Translate } from "react-localize-redux"; import { useSelector } from "react-redux"; import history, { Path } from "browserHistory"; @@ -16,19 +17,21 @@ export default function ProjectNameButton(props: ProjectNameButtonProps) { return ( - + }> + + ); } From 209bc8d58f043f6a320f9a4e5b47da1c3d7c7d84 Mon Sep 17 00:00:00 2001 From: "D. Ror" Date: Mon, 22 Feb 2021 14:14:36 -0500 Subject: [PATCH 5/5] Update test snapshots. --- .../tests/__snapshots__/AppBarComponent.test.tsx.snap | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/AppBar/tests/__snapshots__/AppBarComponent.test.tsx.snap b/src/components/AppBar/tests/__snapshots__/AppBarComponent.test.tsx.snap index eaed7a7fd7..a4879a1c7b 100644 --- a/src/components/AppBar/tests/__snapshots__/AppBarComponent.test.tsx.snap +++ b/src/components/AppBar/tests/__snapshots__/AppBarComponent.test.tsx.snap @@ -69,6 +69,7 @@ Array [ exports[`NavigationButtons has only one tab shaded 2`] = `