Fixed multiple visible drawers

Vincit · Jun 28, 2024 · 6c84121 · 6c84121
1 parent 27ebe5c
commit 6c84121
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 61 deletions.
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
@@ -5,24 +5,11 @@ import { SnackbarProvider } from 'notistack';
 import MainView from './MainView/MainView';
 import LoginView from './login/LoginView';
 import { CssBaseline, Divider, styled, ThemeProvider } from '@mui/material';
-import { renderToStaticMarkup } from 'react-dom/server';
-import { DesktopBackground, MobileBackground } from './images/svgImages';
 import { theme_2024 } from '../theme_2024';
 
 export const GarApp = styled(Divider)(() => ({}));
 
 const App = () => {
-    // Basic solution for differentiating between desktop and mobile. Switch from desktop to mobile resolution requires a page refresh
-    // to show background correctly.
-    let svgString = encodeURIComponent(
-        renderToStaticMarkup(<MobileBackground />)
-    );
-    if (window.innerWidth > 600) {
-        svgString = encodeURIComponent(
-            renderToStaticMarkup(<DesktopBackground />)
-        );
-    }
-
     return (
         <ThemeProvider theme={theme_2024}>
             <CssBaseline />

diff --git a/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx b/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx
@@ -1,15 +1,16 @@
 import { useState } from 'react';
-import { List, Typography, Box, ToggleButton } from '@mui/material';
+import { Box, List, ToggleButton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { makeBooking } from '../../services/bookingService';
-import { Booking, BookingDetails, Room, Preferences } from '../../types';
+import { Booking, BookingDetails, Preferences, Room } from '../../types';
 import { DateTime, Duration } from 'luxon';
 import useCreateNotification from '../../hooks/useCreateNotification';
 import RoomCard from '../RoomCard/RoomCard';
 import NoRoomsCard from '../RoomCard/NoRoomsCard';
 import BookingDrawer from '../BookingDrawer/BookingDrawer';
 import TimePickerDrawer from '../TimePickerDrawer/TimePickerDrawer';
+
 const SKIP_CONFIRMATION = true;
 
 const TimePickerButton = styled(ToggleButton)(() => ({
@@ -277,15 +278,17 @@ const AvailableRoomList = (props: BookingListProps) => {
                     onAddTimeUntilNext={handleUntilNextDurationChange}
                     startingTime={startingTime}
                 />
-                <TimePickerDrawer
-                    open={expandTimePickerDrawer}
-                    toggle={(newOpen: any) =>
-                        setExpandTimePickerDrawer(newOpen)
-                    }
-                    startingTime={startingTime}
-                    setStartingTime={setStartingTime}
-                    setExpandTimePickerDrawer={setExpandTimePickerDrawer}
-                />
+                {
+                    <TimePickerDrawer
+                        open={expandTimePickerDrawer}
+                        toggle={(newOpen: any) =>
+                            setExpandTimePickerDrawer(newOpen)
+                        }
+                        startingTime={startingTime}
+                        setStartingTime={setStartingTime}
+                        setExpandTimePickerDrawer={setExpandTimePickerDrawer}
+                    />
+                }
             </div>
             <div
                 id="available-booking-typography"

diff --git a/frontend/src/components/BookingDrawer/BookingDrawer.tsx b/frontend/src/components/BookingDrawer/BookingDrawer.tsx
@@ -1,15 +1,14 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Box, Button, Typography } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
 import { DateTime } from 'luxon';
 import { styled } from '@mui/material/styles';
-import SwipeableEdgeDrawer, {
-    DrawerContent
-} from '../SwipeableEdgeDrawer/SwipeableEdgeDrawer';
+import { DrawerContent } from '../SwipeableEdgeDrawer/SwipeableEdgeDrawer';
 import { Room } from '../../types';
 import { getTimeLeft, getTimeLeftMinutes2 } from '../util/TimeLeft';
 import { theme } from '../../theme';
+import BottomDrawer from '../BottomDrawer/BottomDrawer';
 
 const MIN_DURATION = 15;
 
@@ -288,7 +287,7 @@ const BookingDrawer = (props: Props) => {
     };
 
     return (
-        <SwipeableEdgeDrawer
+        <BottomDrawer
             headerTitle={getName(room)}
             iconLeft={'AccessTime'}
             iconRight={'Close'}
@@ -381,7 +380,7 @@ const BookingDrawer = (props: Props) => {
                     </Row>
                 </DrawerContent>
             </Box>
-        </SwipeableEdgeDrawer>
+        </BottomDrawer>
     );
 };
 

diff --git a/frontend/src/components/BottomDrawer/BottomDrawer.tsx b/frontend/src/components/BottomDrawer/BottomDrawer.tsx
@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { Global } from '@emotion/react';
+import { styled } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { grey } from '@mui/material/colors';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import SwipeableDrawer from '@mui/material/SwipeableDrawer';
+
+export const drawerBleeding = 88;
+
+const Root = styled('div')(({ theme }) => ({
+    height: '100%',
+    backgroundColor:
+        theme.palette.mode === 'light'
+            ? grey[100]
+            : theme.palette.background.default
+}));
+
+const Puller = styled(Box)(({ theme }) => ({
+    width: '30%',
+    height: 4,
+    backgroundColor: theme.palette.mode === 'light' ? '#F6F5F5' : grey[900],
+    borderRadius: 3
+}));
+
+const DrawerHeader = styled(Box)(({ theme }) => ({
+    padding: '24px',
+    display: 'flex',
+    justifyContent: 'center',
+    position: 'absolute',
+    top: -drawerBleeding,
+    borderTopLeftRadius: 40,
+    borderTopRightRadius: 40,
+    visibility: 'visible',
+    right: 0,
+    left: 0,
+    boxShadow: '0px -2px 4px rgba(205, 197, 197, 0.25)',
+    backgroundColor: '#fff'
+}));
+
+const FilterCounter = styled(Box)(({ theme }) => ({
+    borderRadius: 50,
+    display: 'flex',
+    width: '20px',
+    height: '20px',
+    fontstyle: 'normal',
+    fontWeight: 700,
+    fontSize: '14px',
+    textAlign: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: '0 4px',
+    color: '#F6F5F5',
+    backgroundColor: '#CE3B20'
+}));
+
+const DrawerTitle = styled(Typography)(({ theme }) => ({
+    fontStyle: 'normal',
+    fontWeight: 'bold',
+    fontSize: '24px',
+    lineHeight: '24px',
+    whiteSpace: 'nowrap'
+}));
+
+export const DrawerContent = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    margin: '0 24px 24px 24px',
+    width: 'calc(100% - 48px)',
+    maxWidth: '1000px'
+}));
+
+interface Props {
+    children: React.ReactChild;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    filterCount?: number;
+    headerTitle: String | undefined;
+    isOpen: boolean;
+    toggle: (open: boolean) => void;
+    disableSwipeToOpen: boolean;
+    mounted?: boolean;
+}
+
+const BottomDrawer = (props: Props) => {
+    const { children, isOpen, toggle, mounted } = props;
+
+    const toggleDrawer = (newOpen: boolean) => () => {
+        toggle(newOpen);
+    };
+
+    return (
+        <Root>
+            <CssBaseline />
+            <Global
+                styles={{
+                    '.MuiDrawer-root > .MuiPaper-root': {
+                        overflow: 'visible'
+                    }
+                }}
+            />
+            <SwipeableDrawer
+                data-testid="BookingDrawer"
+                anchor="bottom"
+                open={isOpen}
+                onClose={toggleDrawer(false)}
+                onOpen={toggleDrawer(true)}
+                swipeAreaWidth={drawerBleeding}
+                disableSwipeToOpen={true}
+                keepMounted={mounted}
+                style={{
+                    position: 'relative',
+                    width: '100%',
+                    maxWidth: '1000px'
+                }}
+            >
+                {children}
+            </SwipeableDrawer>
+        </Root>
+    );
+};
+
+export default BottomDrawer;
diff --git a/frontend/src/components/SwipeableEdgeDrawer/SwipeableEdgeDrawer.tsx b/frontend/src/components/SwipeableEdgeDrawer/SwipeableEdgeDrawer.tsx
@@ -14,6 +14,7 @@ import Person from '@mui/icons-material/Person';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { COLORS } from '../../theme_2024';
 
 export const drawerBleeding = 88;
 
@@ -25,13 +26,6 @@ const Root = styled('div')(({ theme }) => ({
             : theme.palette.background.default
 }));
 
-const Puller = styled(Box)(({ theme }) => ({
-    width: '30%',
-    height: 4,
-    backgroundColor: theme.palette.mode === 'light' ? '#F6F5F5' : grey[900],
-    borderRadius: 3
-}));
-
 const DrawerHeader = styled(Box)(({ theme }) => ({
     padding: '24px',
     display: 'flex',
@@ -59,8 +53,8 @@ const FilterCounter = styled(Box)(({ theme }) => ({
     alignItems: 'center',
     justifyContent: 'center',
     margin: '0 4px',
-    color: '#F6F5F5',
-    backgroundColor: '#CE3B20'
+    color: COLORS.TEXT_PRIMARY,
+    backgroundColor: COLORS.ACCENT_BLUE
 }));
 
 const DrawerTitle = styled(Typography)(({ theme }) => ({
@@ -183,29 +177,31 @@ const SwipeableEdgeDrawer = (props: Props) => {
                     maxWidth: '1000px'
                 }}
             >
-                <DrawerHeader onClick={handleHeaderClick}>
-                    <Box
-                        style={{
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            alignItems: 'center',
-                            width: '100%',
-                            maxWidth: '1000px'
-                        }}
-                    >
-                        {left}
-                        <Puller />
-                        {title}
-                        {filters}
-                        <Puller />
-                        <IconButton
-                            onClick={toggleDrawer(false)}
-                            aria-label={label}
+                {!disableSwipeToOpen ? (
+                    <DrawerHeader onClick={handleHeaderClick}>
+                        <Box
+                            style={{
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                width: '100%',
+                                maxWidth: '1000px'
+                            }}
                         >
-                            {right}
-                        </IconButton>
-                    </Box>
-                </DrawerHeader>
+                            {left}
+                            {title}
+                            {filters}
+                            <IconButton
+                                onClick={toggleDrawer(false)}
+                                aria-label={label}
+                            >
+                                {right}
+                            </IconButton>
+                        </Box>
+                    </DrawerHeader>
+                ) : (
+                    ''
+                )}
                 {children}
             </SwipeableDrawer>
         </Root>