Skip to content
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

Minor layout redesign + prereg button #98

Merged
merged 20 commits into from
Dec 13, 2024
Merged

Minor layout redesign + prereg button #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
3a23ca8
Put schedule switcher buttons behind menu
psvenk Dec 9, 2024
5eec9d2
Rearrange some things
psvenk Dec 9, 2024
58cc9a9
Make "maintained by SIPB" no longer a button
psvenk Dec 10, 2024
806b15b
Add prereg button
psvenk Dec 10, 2024
caced65
Run Prettier
psvenk Dec 10, 2024
a147d04
simplify button text
dtemkin1 Dec 10, 2024
fff6dcb
fix class table row border
dtemkin1 Dec 10, 2024
910ce3e
Make menu buttons functional
psvenk Dec 10, 2024
7185e1f
Use save icon when schedule loaded from URL
psvenk Dec 10, 2024
bc9f563
Import State
psvenk Dec 10, 2024
bb746b6
make rename input nicer
dtemkin1 Dec 10, 2024
e3adca3
event flashing... undo this again :/
dtemkin1 Dec 12, 2024
c7d42b4
autofocus activity inputs here too
dtemkin1 Dec 12, 2024
cd43680
fix rename schedule not putting name initially
dtemkin1 Dec 12, 2024
bf60f77
use simple fuzzball
dtemkin1 Dec 13, 2024
22f3656
make buttons nicer...
dtemkin1 Dec 13, 2024
7b15e43
add favicon (temp)
dtemkin1 Dec 13, 2024
3615297
reword about, make privacy policy into a dialog
dtemkin1 Dec 13, 2024
7f77597
fix variable names, typo
dtemkin1 Dec 13, 2024
ef9affc
improve button accessibility
dtemkin1 Dec 13, 2024
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
1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<title>Hydrant</title>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/hydrant.svg" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

If anyone has thoughts on changing this, lmk! I just put this here cause I think we should have a favicon in general (fixes #31) but we can replace this once @tangluna makes some assets :)

<meta
name="description"
content="Hydrant is a class planner for MIT students."
Expand Down
28 changes: 28 additions & 0 deletions public/hydrant.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 0 additions & 24 deletions public/privacy.html
View file
Open in desktop

This file was deleted.

Binary file added src/assets/simple-fuzzball.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 17 additions & 1 deletion src/components/ActivityButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ function ActivityColor(props: {
<Flex direction="row" gap={2}>
<ColorPickerRoot value={color} onValueChange={(e) => setColor(e.value)}>
<ColorPickerControl>
<ColorPickerInput />
<ColorPickerInput autoFocus />
<ColorPickerTrigger />
</ColorPickerControl>
<ColorPickerContent>
Expand Down Expand Up @@ -382,6 +382,14 @@ export function NonClassButtons(props: { activity: NonClass; state: State }) {
onChange={(e) => setName(e.target.value)}
fontWeight="bold"
placeholder="New Activity"
autoFocus
onKeyUp={(e) => {
if (e.key === "Enter") {
onConfirmRename();
} else if (e.key === "Escape") {
onCancelRename();
}
}}
/>
);
} else if (isRelocating) {
Expand All @@ -390,6 +398,14 @@ export function NonClassButtons(props: { activity: NonClass; state: State }) {
value={room}
onChange={(e) => setRoom(e.target.value)}
placeholder="W20-557"
autoFocus
onKeyUp={(e) => {
if (e.key === "Enter") {
onConfirmRelocating();
} else if (e.key === "Escape") {
onCancelRelocating();
}
}}
/>
);
} else {
Expand Down
40 changes: 23 additions & 17 deletions src/components/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,13 @@ import { Header } from "./Header";
import { ScheduleOption } from "./ScheduleOption";
import { ScheduleSwitcher } from "./ScheduleSwitcher";
import { SelectedActivities } from "./SelectedActivities";
import { TermSwitcher } from "./TermSwitcher";

import "@fontsource-variable/inter/index.css";
import { MatrixLink } from "./MatrixLink";
import { PreregLink } from "./PreregLink";
import { useICSExport } from "../lib/gapi";
import { LuCalendar } from "react-icons/lu";
import { SIPBLogo } from "./SIPBLogo";

// import calendarButtonImg from "../assets/calendar-button.svg";

Expand Down Expand Up @@ -85,7 +86,8 @@ function useHydrant(): {
}
};
hydrant?.updateState();
}, [colorMode, hydrant, loading, toggleColorMode]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [colorMode, hydrant, loading]);

return { hydrant, state };
}
Expand Down Expand Up @@ -170,11 +172,16 @@ function HydrantApp() {
<LeftFooter state={hydrant} />
</Flex>
<Flex direction="column" w={{ base: "100%", lg: "50%" }} gap={6}>
<ScheduleSwitcher
saveId={state.saveId}
saves={state.saves}
state={hydrant}
/>
<Center>
<Group wrap="wrap" justifyContent="center" gap={2}>
<TermSwitcher state={hydrant} />
<ScheduleSwitcher
saveId={state.saveId}
saves={state.saves}
state={hydrant}
/>
</Group>
</Center>
<Center>
<Group wrap="wrap" justifyContent="center" gap={2}>
{/* <Tooltip
Expand All @@ -190,25 +197,24 @@ function HydrantApp() {
<Image src={calendarButtonImg} alt="Sign in with Google" />
)}
</Tooltip> */}
<Tooltip
content={
isExporting
? "Loading..."
: "Currently, only manually exporting to an .ics file is supported. "
}
>
<Tooltip content="Currently, only manually exporting to an .ics file is supported.">
<Button
colorPalette="blue"
variant="solid"
size="sm"
onClick={onICSExport}
loading={isExporting}
loadingText="Loading..."
onClick={() => {
setIsExporting(true);
onICSExport();
}}
>
<LuCalendar />
{isExporting ? <Spinner m={3} /> : "Import to my calendar"}
Export calendar
</Button>
</Tooltip>
<PreregLink selectedActivities={state.selectedActivities} />
<MatrixLink selectedActivities={state.selectedActivities} />
<SIPBLogo />
</Group>
</Center>
<SelectedActivities
Expand Down
4 changes: 4 additions & 0 deletions src/components/ClassTable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
.ag-cell-wrapper {
cursor: pointer;
padding: 8px 5px;
}

.ag-row {
border-bottom-width: 1px;
}

Expand Down Expand Up @@ -34,4 +37,5 @@
}
.ag-header-viewport {
background-color: var(--chakra-colors-bg-subtle);
border-bottom-width: 1px;
}
65 changes: 57 additions & 8 deletions src/components/Footers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
DialogActionTrigger,
} from "./ui/dialog";
import { Button } from "./ui/button";

Expand All @@ -21,7 +22,11 @@ function AboutDialog() {
<Link onClick={() => setVisible(true)} colorPalette="blue">
About
</Link>
<DialogRoot open={visible} onOpenChange={() => setVisible(false)}>
<DialogRoot
lazyMount
open={visible}
onOpenChange={() => setVisible(false)}
>
<DialogContent>
<DialogHeader>
<DialogTitle>Hydrant</DialogTitle>
Expand All @@ -42,16 +47,17 @@ function AboutDialog() {
href="https://github.com/sipb/hydrant"
colorPalette="blue"
>
Github
GitHub
</Link>
, or come to a SIPB meeting and ask how to help.
</Text>
<Text>
We'd like to thank Edward Fan for creating{" "}
We'd like to thank CJ Quines '23 for creating Hydrant and Edward
Fan '19 for creating{" "}
<Link href="https://firehose.guide/" colorPalette="blue">
Firehose
</Link>
, the basis for Hydrant, and the{" "}
, the basis for Hydrant. We'd also like to thank the{" "}
<Link href="https://fireroad.mit.edu/" colorPalette="blue">
FireRoad
</Link>{" "}
Expand All @@ -60,7 +66,52 @@ function AboutDialog() {
</Flex>
</DialogBody>
<DialogFooter>
<Button onClick={() => setVisible(false)}>Close</Button>
<DialogActionTrigger asChild>
<Button>Close</Button>
</DialogActionTrigger>
</DialogFooter>
</DialogContent>
</DialogRoot>
</>
);
}

function PrivacyPolicyDialog() {
const [visible, setVisible] = useState(false);

return (
<>
<Link onClick={() => setVisible(true)} colorPalette="blue">
Privacy Policy
</Link>
<DialogRoot
lazyMount
open={visible}
onOpenChange={() => setVisible(false)}
>
<DialogContent>
<DialogHeader>
<DialogTitle>Privacy Policy</DialogTitle>
</DialogHeader>
<DialogBody>
<Flex direction="column" gap={4}>
<Text>
Copy link
Collaborator

Choose a reason for hiding this comment

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

I just copy-pasted this from what was previously in privacy.html, but most of it isn't really applicable since we don't currently have GCal integration. Still, good to leave in for whenever we fix it I suppose

Hydrant does not store any of your data outside of your browser.
Data is only transmitted upstream when you export to Google
Calendar. When you export to Google Calendar, Hydrant sends
calendar information to Google to place into your calendar.
</Text>
<Text>
No data is transmitted otherwise. That means that our servers do
not store your class or calendar information. If you never
export to Google Calendar we never send your data anywhere else.
</Text>
</Flex>
</DialogBody>
<DialogFooter>
<DialogActionTrigger asChild>
<Button>Close</Button>
</DialogActionTrigger>
</DialogFooter>
</DialogContent>
</DialogRoot>
Expand All @@ -80,9 +131,7 @@ export function LeftFooter(props: { state: State }) {
<Link href="mailto:sipb-hydrant@mit.edu" colorPalette="blue">
Contact
</Link>
<Link href="privacy.html" colorPalette="blue">
Privacy Policy
</Link>
<PrivacyPolicyDialog />
</Flex>
</Flex>
);
Expand Down
Loading
Loading