Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yumnazaheed wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a58e4b6
modified course search tab width
Sep 29, 2025
43a80ee
aligned undo, redo, delete buttons with mytimetable
Sep 29, 2025
92e3094
reduced spacing between drop-down buttons
Sep 29, 2025
4f13293
Apply suggestions from code review
yumnazaheed Oct 8, 2025
02f8e0b
improve tab and history button spacing
Oct 14, 2025
0574862
reduced space between timetable tabs and history buttons
Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 32 additions & 57 deletions client/src/components/controls/Controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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; // Align all controls to the bottom
Copy link
Copy Markdown
Contributor

@mark-trann mark-trann Oct 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove comment 🪓

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; // Remove any margin that could misalign
Copy link
Copy Markdown
Contributor

@mark-trann mark-trann Oct 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here 🪓

`;

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; // Wider search bar
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; // Reduced gap between buttons
margin-bottom: 0;
`;

const Controls: React.FC<ControlsProps> = ({
Expand All @@ -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;
Comment thread
yumnazaheed marked this conversation as resolved.
130 changes: 69 additions & 61 deletions client/src/components/timetableTabs/TimetableTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
} from '../../styles/TimetableTabStyles';
import storage from '../../utils/storage';
import TimetableTabContextMenu from './TimetableTabContextMenu';
import History from '../controls/History';

const TimetableTabs: React.FC = () => {
const TIMETABLE_LIMIT = 13;
Expand Down Expand Up @@ -160,67 +161,74 @@ const TimetableTabs: React.FC = () => {
setAnchorElement({ x: event.clientX, y: event.clientY });
};


return (
<TabsSection>
<TabsWrapper tabTheme={tabTheme} id="tabs-wrapper">
<DragDropContext onDragEnd={handleSortTabs}>
<Droppable droppableId="tabs" direction="horizontal">
{(props) => (
<StyledTabs ref={props.innerRef} {...props.droppableProps}>
{Object.keys(displayTimetables).length > 0 && term && displayTimetables[term]
? displayTimetables[term]?.map((timetable: TimetableData, index: number) => (
<Draggable draggableId={index.toString()} index={index} key={index}>
{(props) => {
if (props.draggableProps.style?.transform) {
const horizShift = props.draggableProps.style?.transform.match(/(-?\d+)/g)?.map(Number)![0];
// forcing horizontal movement
props.draggableProps.style.transform = `translate(${horizShift ? horizShift : 0}px, 0)`;
}
return (
<Box
onMouseDown={() => {
handleSwitchTimetables(displayTimetables[term], index);
}}
onContextMenu={(e) => {
handleRightTabClick(e, index);
}}
ref={props.innerRef}
{...props.draggableProps}
{...props.dragHandleProps}
sx={TabStyle(index, selectedTimetable)}
>
{displayTimetables[term][index].isPrimary && (
<Tooltip title="A primary timetable is the timetable for social features.">
<Star fontSize="small" className="pr-1.5"></Star>
</Tooltip>
)}
{timetable.name}
{selectedTimetable === index ? (
<StyledSpan onClick={handleMenuClick}>
<MoreHoriz />
</StyledSpan>
) : (
<></>
)}
</Box>
);
}}
</Draggable>
))
: null}
{props.placeholder}
</StyledTabs>
)}
</Droppable>
</DragDropContext>
<TimetableTabContextMenu anchorElement={anchorElement} setAnchorElement={setAnchorElement} />
<Tooltip title={addTimetabletip}>
<StyledIconButton tabTheme={tabTheme} id="create-timetables-button" onClick={handleCreateTimetable}>
<Add />
</StyledIconButton>
</Tooltip>
</TabsWrapper>
</TabsSection>
<Box sx={{ display: 'flex', alignItems: 'center', width: '100%', mt: 2, pr: `${16 + 16}px` }}>
Comment thread
yumnazaheed marked this conversation as resolved.
Outdated
{/* Tabs section (left) */}
<TabsSection sx={{ flexGrow: 1 }}>
<TabsWrapper tabTheme={tabTheme} id="tabs-wrapper">
<DragDropContext onDragEnd={handleSortTabs}>
<Droppable droppableId="tabs" direction="horizontal">
{(props) => (
<StyledTabs ref={props.innerRef} {...props.droppableProps}>
{Object.keys(displayTimetables).length > 0 && term && displayTimetables[term]
? displayTimetables[term]?.map((timetable: TimetableData, index: number) => (
<Draggable draggableId={index.toString()} index={index} key={index}>
{(props) => {
if (props.draggableProps.style?.transform) {
const horizShift = props.draggableProps.style?.transform.match(/(-?\d+)/g)?.map(Number)![0];
props.draggableProps.style.transform = `translate(${horizShift ? horizShift : 0}px, 0)`;
}
return (
<Box
onMouseDown={() => {
handleSwitchTimetables(displayTimetables[term], index);
}}
onContextMenu={(e) => {
handleRightTabClick(e, index);
}}
ref={props.innerRef}
{...props.draggableProps}
{...props.dragHandleProps}
sx={TabStyle(index, selectedTimetable)}
>
{displayTimetables[term][index].isPrimary && (
<Tooltip title="A primary timetable is the timetable for social features.">
<Star fontSize="small" className="pr-1.5"></Star>
</Tooltip>
)}
{timetable.name}
{selectedTimetable === index ? (
<StyledSpan onClick={handleMenuClick}>
<MoreHoriz />
</StyledSpan>
) : (
<></>
)}
</Box>
);
}}
</Draggable>
))
: null}
{props.placeholder}
</StyledTabs>
)}
</Droppable>
</DragDropContext>
<TimetableTabContextMenu anchorElement={anchorElement} setAnchorElement={setAnchorElement} />
<Tooltip title={addTimetabletip}>
<StyledIconButton tabTheme={tabTheme} id="create-timetables-button" onClick={handleCreateTimetable}>
<Add />
</StyledIconButton>
</Tooltip>
</TabsWrapper>
</TabsSection>
{/* History buttons (right) */}
<Box sx={{ ml: 2 }}>
<History />
</Box>
</Box>
);
};
export { TimetableTabs };
export { TimetableTabs };
Comment thread
yumnazaheed marked this conversation as resolved.
Outdated