Undo/Clear Timetable Buttons: Move Position to Make Room for Dropdown UI (#1074)

client/src/App.tsx

@@ -2,7 +2,7 @@ import { Box, Button, GlobalStyles, StyledEngineProvider, ThemeProvider } from '
 import { styled } from '@mui/system';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 
 import getCourseInfo from './api/getCourseInfo';
@@ -99,6 +99,8 @@ const ICSButton = styled(Button)`
 `;
 
 const App: React.FC = () => {
+
+  const [collapsed, setCollapsed] = useState(false);
   const {
     themeObject,
     currentTheme,
@@ -638,7 +640,7 @@ const App: React.FC = () => {
           <GlobalStyles styles={globalStyle} />
           <StyledApp>
             <Container>
-              <Sidebar />
+              <Sidebar collapsed={collapsed} setCollapsed={setCollapsed} />
               <ContentWrapper>
                 <Content>
                   <Controls
@@ -650,7 +652,7 @@ const App: React.FC = () => {
                   <Outlet />
                   {groupsSidebarCollapsed ? (
                     <>
-                      <TimetableTabs />
+                      <TimetableTabs collapsed={collapsed} />
                       <Timetable assignedColors={decodedAssignedColors} handleSelectClass={handleSelectClass} />
                     </>
                   ) : (

client/src/components/controls/Controls.tsx

@@ -1,49 +1,34 @@
-import { Box, Grid } from '@mui/material';
+import { Box } from '@mui/material';
 import { styled } from '@mui/system';
 import React from 'react';
 
 import { ControlsProps } from '../../interfaces/PropTypes';
 import Autotimetabler from './Autotimetabler';
 import CourseSelect from './CourseSelect';
 import CustomEvents from './CustomEvent';
-import History from './History';
 import TermSelect from './TermSelect';
+const ControlsBar = styled(Box)`
+  display: flex;
+  align-items: flex-end;
+  padding-left: 66px;
+  gap: 12px;
+`;
 
 const TermSelectWrapper = styled(Box)`
-  flex: 0 0 auto;
-  margin-top: 20px;
-  margin-right: 10px;
   min-width: 140px;
-  display: flex;
-  align-items: flex-start;
+  margin-bottom: 0;
 `;
 
 const SelectWrapper = styled(Box)`
-  display: flex;
-  flex-direction: row;
-  grid-column: 1 / -1;
-  grid-row: 1;
-  padding-top: 20px;
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: 0;
+  flex-grow: 2;
+  min-width: 600px;
+  margin-bottom: 0;
 `;
 
-const AutotimetablerWrapper = styled(Box)`
-  flex: 1;
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    flex: none;
-  }
-`;
-
-const CustomEventsWrapper = styled(Box)`
-  flex: 1;
-`;
-
-const HistoryWrapper = styled(Box)`
-  margin-top: 20px;
-  margin-left: 3px;
+const ButtonRow = styled(Box)`
+  display: flex;
+  gap: 8px;
+  margin-bottom: 0;
 `;
 
 const Controls: React.FC<ControlsProps> = ({
@@ -53,33 +38,23 @@ const Controls: React.FC<ControlsProps> = ({
   handleRemoveCourse,
 }) => {
   return (
-    <Grid container sx={{ paddingLeft: '66px' }} spacing={2}>
-      <Grid item container xs={12} md={6.5} direction="row">
-        <TermSelectWrapper>
-          <TermSelect />
-        </TermSelectWrapper>
-
-        <SelectWrapper minWidth={'296px'}>
-          <CourseSelect
-            assignedColors={assignedColors}
-            handleSelect={handleSelectCourse}
-            handleRemove={handleRemoveCourse}
-          />
-        </SelectWrapper>
-      </Grid>
-      <Grid item container direction="row" alignItems="center" justifyContent="space-between" xs={12} md={5.5}>
-        <CustomEventsWrapper>
-          <CustomEvents />
-        </CustomEventsWrapper>
-        <AutotimetablerWrapper>
-          <Autotimetabler handleSelectClass={handleSelectClass} />
-        </AutotimetablerWrapper>
-        <HistoryWrapper>
-          <History />
-        </HistoryWrapper>
-      </Grid>
-    </Grid>
+    <ControlsBar>
+      <TermSelectWrapper>
+        <TermSelect />
+      </TermSelectWrapper>
+      <SelectWrapper>
+        <CourseSelect
+          assignedColors={assignedColors}
+          handleSelect={handleSelectCourse}
+          handleRemove={handleRemoveCourse}
+        />
+      </SelectWrapper>
+      <ButtonRow>
+        <CustomEvents />
+        <Autotimetabler handleSelectClass={handleSelectClass} />
+      </ButtonRow>
+    </ControlsBar>
   );
 };
 
-export default Controls;
+export default Controls;

client/src/components/controls/History.tsx

@@ -1,5 +1,6 @@
 import { Delete, Redo, Undo } from '@mui/icons-material';
 import { IconButton, Tooltip } from '@mui/material';
+import { Box } from '@mui/material';
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 
 import { AppContext } from '../../context/AppContext';
@@ -31,7 +32,7 @@ const History: React.FC = () => {
     useContext(CourseContext);
   const { isDrag, setIsDrag, selectedTimetable, setSelectedTimetable, displayTimetables, setDisplayTimetables, term } =
     useContext(AppContext);
-  const { user } = useContext(UserContext);
+  const { user, groupsSidebarCollapsed } = useContext(UserContext);
 
   const timetableActions = useRef<TimetableActions>({});
   const actionsPointer = useRef<ActionsPointer>({});
@@ -332,46 +333,52 @@ const History: React.FC = () => {
         disableConfirm={disableReset.all}
         confirmButtonId="confirm-delete-button"
       />
-      <Tooltip title={clearTooltip}>
-        <IconButton
-          disabled={disableReset.all}
-          color="inherit"
-          onClick={() => {
-            setClearOpen(true);
-          }}
-          size="large"
-        >
-          <Delete />
-        </IconButton>
-      </Tooltip>
-      <Tooltip title={undoTooltip}>
-        <span>
+      <Box sx={{
+        display: 'flex',
+        gap: !groupsSidebarCollapsed ? '6px' : '6px',
+        alignItems: 'center',
+      }}>
+        <Tooltip title={clearTooltip}>
           <IconButton
-            disabled={disableLeft}
+            disabled={disableReset.all}
             color="inherit"
             onClick={() => {
-              changeHistory(-1);
+              setClearOpen(true);
             }}
-            size="large"
+            size={!groupsSidebarCollapsed ? 'small' : 'large'}
           >
-            <Undo />
+            <Delete />
           </IconButton>
-        </span>
-      </Tooltip>
-      <Tooltip title={redoTooltip}>
-        <span>
-          <IconButton
-            disabled={disableRight}
-            color="inherit"
-            onClick={() => {
-              changeHistory(1);
-            }}
-            size="large"
-          >
-            <Redo />
-          </IconButton>
-        </span>
-      </Tooltip>
+        </Tooltip>
+        <Tooltip title={undoTooltip}>
+          <span>
+            <IconButton
+              disabled={disableLeft}
+              color="inherit"
+              onClick={() => {
+                changeHistory(-1);
+              }}
+              size={!groupsSidebarCollapsed ? 'small' : 'large'}
+            >
+              <Undo />
+            </IconButton>
+          </span>
+        </Tooltip>
+        <Tooltip title={redoTooltip}>
+          <span>
+            <IconButton
+              disabled={disableRight}
+              color="inherit"
+              onClick={() => {
+                changeHistory(1);
+              }}
+              size={!groupsSidebarCollapsed ? 'small' : 'large'}
+            >
+              <Redo />
+            </IconButton>
+          </span>
+        </Tooltip>
+      </Box>
     </>
   );
 };

client/src/components/sidebar/Sidebar.tsx

@@ -169,21 +169,23 @@ const modalData = [
   },
 ];
 
-const Sidebar: React.FC = () => {
+interface SidebarProps {
+  collapsed: boolean;
+  setCollapsed: (val: boolean) => void;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ collapsed, setCollapsed }) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const collapsedWidth = useMemo(() => (isMobile ? 0 : 80), [isMobile]);
   const isWide = useMediaQuery(theme.breakpoints.only('xl'));
 
   const [currLogo, setCurrLogo] = useState(notanglesLogo);
-  const [collapsed, setCollapsed] = useState(() => !isWide);
   const { groupsSidebarCollapsed } = useContext(UserContext);
 
   const handleCollapse = (val: boolean) => {
     setCollapsed(val);
-    // forces window resize event upon sidebar state changing to adjust position of cards
-    // Not currently used, but here is how you would do it if needed
-    // setTimeout(() => window.dispatchEvent(new Event('resize')), 120);
+
   };
 
   const modalComponents = useMemo(