From 6c84121d9178115a15ddc42a2d473861065ec4f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= Date: Fri, 28 Jun 2024 09:36:55 +0300 Subject: [PATCH 1/2] Fixed multiple visible drawers --- frontend/src/components/App.tsx | 13 -- .../AvailableRoomList/AvailableRoomList.tsx | 25 ++-- .../BookingDrawer/BookingDrawer.tsx | 11 +- .../components/BottomDrawer/BottomDrawer.tsx | 125 ++++++++++++++++++ .../SwipeableEdgeDrawer.tsx | 58 ++++---- 5 files changed, 171 insertions(+), 61 deletions(-) create mode 100644 frontend/src/components/BottomDrawer/BottomDrawer.tsx diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx index 55d33600..e6ea484e 100644 --- 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() - ); - if (window.innerWidth > 600) { - svgString = encodeURIComponent( - renderToStaticMarkup() - ); - } - return ( diff --git a/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx b/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx index 9bee7e95..1ed3ff90 100644 --- 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} /> - - setExpandTimePickerDrawer(newOpen) - } - startingTime={startingTime} - setStartingTime={setStartingTime} - setExpandTimePickerDrawer={setExpandTimePickerDrawer} - /> + { + + setExpandTimePickerDrawer(newOpen) + } + startingTime={startingTime} + setStartingTime={setStartingTime} + setExpandTimePickerDrawer={setExpandTimePickerDrawer} + /> + }
{ }; return ( - { - + ); }; diff --git a/frontend/src/components/BottomDrawer/BottomDrawer.tsx b/frontend/src/components/BottomDrawer/BottomDrawer.tsx new file mode 100644 index 00000000..5c8e4d83 --- /dev/null +++ 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 ( + + + .MuiPaper-root': { + overflow: 'visible' + } + }} + /> + + {children} + + + ); +}; + +export default BottomDrawer; diff --git a/frontend/src/components/SwipeableEdgeDrawer/SwipeableEdgeDrawer.tsx b/frontend/src/components/SwipeableEdgeDrawer/SwipeableEdgeDrawer.tsx index 2d64c8c5..07fb0b4e 100644 --- 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' }} > - - - {left} - - {title} - {filters} - - + - {right} - - - + {left} + {title} + {filters} + + {right} + + + + ) : ( + '' + )} {children} From 98c791adb98257dffddba7a659a74012ef9b9593 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= Date: Fri, 28 Jun 2024 09:41:46 +0300 Subject: [PATCH 2/2] Removed not needed new drawer --- .../BookingDrawer/BookingDrawer.tsx | 9 +- .../components/BottomDrawer/BottomDrawer.tsx | 125 ------------------ 2 files changed, 5 insertions(+), 129 deletions(-) delete mode 100644 frontend/src/components/BottomDrawer/BottomDrawer.tsx diff --git a/frontend/src/components/BookingDrawer/BookingDrawer.tsx b/frontend/src/components/BookingDrawer/BookingDrawer.tsx index 0cca6e7f..0c2dda1b 100644 --- a/frontend/src/components/BookingDrawer/BookingDrawer.tsx +++ b/frontend/src/components/BookingDrawer/BookingDrawer.tsx @@ -4,11 +4,12 @@ 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 { DrawerContent } from '../SwipeableEdgeDrawer/SwipeableEdgeDrawer'; +import SwipeableEdgeDrawer, { + 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; @@ -287,7 +288,7 @@ const BookingDrawer = (props: Props) => { }; return ( - { - + ); }; diff --git a/frontend/src/components/BottomDrawer/BottomDrawer.tsx b/frontend/src/components/BottomDrawer/BottomDrawer.tsx deleted file mode 100644 index 5c8e4d83..00000000 --- a/frontend/src/components/BottomDrawer/BottomDrawer.tsx +++ /dev/null @@ -1,125 +0,0 @@ -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 ( - - - .MuiPaper-root': { - overflow: 'visible' - } - }} - /> - - {children} - - - ); -}; - -export default BottomDrawer;