feat(ui): Add Valetudo logo to bottom sheet

Hypfer · Oct 10, 2021 · 76eeaff · 76eeaff
1 parent 32de2b8
commit 76eeaff
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 10 deletions.
diff --git 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
-            <Box paddingBottom="52px" width={1} height={1}>
+            <Box paddingBottom="68px" width={1} height={1}>
                 <LiveMapPage/>
                 <ControlsBottomSheet/>
             </Box>

diff --git a/frontend/src/components/ValetudoAppBar.tsx b/frontend/src/components/ValetudoAppBar.tsx
@@ -51,7 +51,7 @@ const menuTree: Array<MenuEntry | MenuSubheader> = [
     {
         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
@@ -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,32 +30,52 @@ const Sheet = styled(Box)(({ theme }) => {
 });
 
 const ControlsBottomSheet = (): JSX.Element => {
+    const sheetRef = useRef<any>();
+
     return (
         <StyledBottomSheet
             open
             blocking={false}
             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={
                 <>
                     <Grid container>
                         <Grid item>
                             <Box px={2} pt={2} pb={1}>
-                                <Typography variant="subtitle1">Controls</Typography>
+                                <Logo
+                                    style={{
+                                    }}
+                                    width={200}
+                                    height={36}
+                                />
                             </Box>
                         </Grid>
                     </Grid>
                     <Divider />
                 </>
             }
         >
-            <Sheet p={1}>
+            <Sheet p={1} ref={sheetRef}>
                 <ControlsBody />
             </Sheet>
         </StyledBottomSheet>

diff --git a/frontend/src/controls/icons/valetudo_logo_with_name.svg b/frontend/src/controls/icons/valetudo_logo_with_name.svg