From 76eeaffd4aa273e351d9306d4660df196380b275 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Beye?= Date: Sun, 10 Oct 2021 19:44:38 +0200 Subject: [PATCH] feat(ui): Add Valetudo logo to bottom sheet --- frontend/src/HomePage.tsx | 2 +- frontend/src/components/ValetudoAppBar.tsx | 10 ++++-- frontend/src/controls/ControlsBottomSheet.tsx | 34 +++++++++++++++---- .../icons/valetudo_logo_with_name.svg | 20 +++++++++++ 4 files changed, 56 insertions(+), 10 deletions(-) create mode 100644 frontend/src/controls/icons/valetudo_logo_with_name.svg diff --git a/frontend/src/HomePage.tsx b/frontend/src/HomePage.tsx index 6575b741a88..48df95a8930 100644 --- a/frontend/src/HomePage.tsx +++ b/frontend/src/HomePage.tsx @@ -15,7 +15,7 @@ const HomePage = (): JSX.Element => { if (mobileView) { return ( // Padding set to height of the header of the bottom controls sheet - + diff --git a/frontend/src/components/ValetudoAppBar.tsx b/frontend/src/components/ValetudoAppBar.tsx index 6266fe9515e..efac6d17d61 100644 --- a/frontend/src/components/ValetudoAppBar.tsx +++ b/frontend/src/components/ValetudoAppBar.tsx @@ -51,7 +51,7 @@ const menuTree: Array = [ { kind: "MenuEntry", routeMatch: "/", - title: "", + title: "Home", menuIcon: HomeIcon, menuText: "Home" }, @@ -132,10 +132,14 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal const currentTab = routeMatch?.path; const pageTitle = React.useMemo(() => { - let ret = "Valetudo"; + let ret = ""; menuTree.forEach((value) => { if (value.kind === "MenuEntry" && value.routeMatch === currentTab && value.title) { - ret += " — " + value.title; + if (ret !== "") { + ret += " — "; + } + + ret += value.title; } }); return ret; diff --git a/frontend/src/controls/ControlsBottomSheet.tsx b/frontend/src/controls/ControlsBottomSheet.tsx index fe36b992630..d8f7c78a8cb 100644 --- a/frontend/src/controls/ControlsBottomSheet.tsx +++ b/frontend/src/controls/ControlsBottomSheet.tsx @@ -1,12 +1,14 @@ -import { Box, Divider, Grid, styled, Typography } from "@mui/material"; +import { Box, Divider, Grid, styled } from "@mui/material"; import { BottomSheet } from "react-spring-bottom-sheet"; import ControlsBody from "./ControlsBody"; import "react-spring-bottom-sheet/dist/style.css"; +import {ReactComponent as Logo} from "./icons/valetudo_logo_with_name.svg"; +import React, {useRef} from "react"; const StyledBottomSheet = styled(BottomSheet)(({ theme }) => { return { "--rsbs-bg": theme.palette.background.paper, - "--rsbs-handle-bg": "hsla(0, 0%, 100%, 0.14)", + "--rsbs-handle-bg": "hsla(0, 0%, 100%, 0.10)", "--rsbs-max-w": "auto", "--rsbs-ml": "env(safe-area-inset-left)", "--rsbs-mr": "env(safe-area-inset-right)", @@ -28,6 +30,8 @@ const Sheet = styled(Box)(({ theme }) => { }); const ControlsBottomSheet = (): JSX.Element => { + const sheetRef = useRef(); + return ( { snapPoints={({ maxHeight, headerHeight }) => { return [ headerHeight, - maxHeight * 0.2, - maxHeight * 0.5, maxHeight * 0.8, ]; }} + onSpringStart={(event) => { + switch (event.type) { + case "OPEN": + // This is an ugly hack to ensure that the control bottom sheet always starts scrolled to the top + // I have no idea why this is necessary + // TODO + setTimeout(() => { + requestAnimationFrame (() => { + sheetRef.current.parentElement.parentElement.scrollTop = 0; + }); + }, 200); + + break; + } + }} header={ <> - Controls + @@ -53,7 +75,7 @@ const ControlsBottomSheet = (): JSX.Element => { } > - + diff --git a/frontend/src/controls/icons/valetudo_logo_with_name.svg b/frontend/src/controls/icons/valetudo_logo_with_name.svg new file mode 100644 index 00000000000..cc33e08a514 --- /dev/null +++ b/frontend/src/controls/icons/valetudo_logo_with_name.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + +