Notes Basic Frontend #960

nidhi-mylavarapu · 2024-11-07T06:01:29Z

Summary

This pull request is the first step towards implementing the Notes Feature!

Added notes option to Course Card Menu with appropriate icon
Created Note component and added note for every course card that slides out on selection and slides back in after clicking on arrow icon

Remaining TODOs:

Align the Note text + note icon in the course card menu
Get correct color mapping for course card color + lighter note color
I think Joanna was looking at alternative icons for notes so we may need to replace the current one.
Add the sliding note card only when the note option is selected from the menu
Adjust shadows / CIS to it's more exact - I don't think the margins are exactly the same as the Figma (but also the actual Course Cards are different dimensions in the designs so not sure what to change)
expanded note card should make everything under it shift downward
add arrow hover state

Test Plan

Add a course card and select the note that peeks out from under the card. Type something, click the arrow to slide the note back under the card.

make sure that the course card has a peeking note under it that is a lighter version of the course card color.
if you change the color of the course card, the note changes color too
after the note is expanded, it can only collapse after clicking the arrow icon (ask Joanna about all ways to expand the note + collapse note)

d filter for pastel note

dti-github-bot · 2024-11-07T06:01:43Z

[diff-counting] Significant lines: 215.

github-actions · 2024-11-07T06:02:56Z

Visit the preview URL for this PR (updated for commit ba9c44d):

https://cornelldti-courseplan-dev--pr960-nidhi-notes-basic-fr-54t1r1qe.web.app

_{(expires Sat, 14 Dec 2024 16:59:23 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 6d4e0437c4559ed895272bbd63991394f1e0e933}

on and option to course card menu

plumshum · 2024-11-11T17:24:04Z

src/components/Modals/CourseMenu.vue

+        <div class="courseMenu-left">
+          <img
+            class="courseMenu-icon"
+            src="@/assets/images/noteIconSmall.svg"


I know we might change the image, but I believe the icon is a bit bigger than the other icons so it looks unaligned

Yes that is the case, we'd have to rearrange all the icons sidebar style to be centered not right-aligned and have a grid or dynamic offset calculation otherwise — I'd just find a new icon honestly.

Destaq

Nice work! A couple smaller issues, but should be good to branch off of for additional fixes and animations.

Destaq · 2024-11-14T17:11:10Z

src/assets/images/notes/arrow.svg

We might want to make a transparent version of this SVG that then gets filled with the color appropriate for that course note color, as otherwise would need a set of half-a-dozen-plus various arrow SVG icons for all the possible course colors.

Destaq · 2024-11-14T17:16:22Z

src/components/Course/Course.vue

-      @close-edit-color="closeEditColorModal"
-      v-if="isEditColorOpen"
-    />
+  <div class="course-container">


I know it was my suggestion to rearrange, but I would just be careful with the class names here post-reshuffling. It looks like the CSS logic for some of the z-indices gets in a kerfuffle on account of this change, causing the modal to be hidden under the next course card.

An easy fix would be to reduce the z-index from 1 to 0 for the course card. Can be a part of the scope of frontend fixes branched off this PR.

Destaq · 2024-11-14T17:17:48Z

src/components/Course/Course.vue

            <course-caution
-              v-if="!isReqCourse && compact"
+              v-if="!isReqCourse && !isSchedGenCourse"


Just for reference could you explain what this change was motivated by? Doesn't look immediately relevant to the notes feature.

Destaq · 2024-11-14T17:18:23Z

src/components/Course/Course.vue

-      @open-save-course-modal="openSaveCourseModal"
-      :getCreditRange="getCreditRange || []"
-      v-click-outside="closeMenuIfOpen"
+    <Note


Wow great work figuring out all of this tricky CSS stuff!

Destaq · 2024-11-14T17:20:01Z

src/components/Course/Course.vue

 .course {
+  box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.055);
+  position: relative;
+  z-index: 1;


This is the z-index I was referencing previously — seems to mess with the course menu dropdown precedence.

Destaq · 2024-11-14T17:21:19Z

src/components/Modals/CourseMenu.vue

+        <div class="courseMenu-left">
+          <img
+            class="courseMenu-icon"
+            src="@/assets/images/noteIconSmall.svg"


Yes that is the case, we'd have to rearrange all the icons sidebar style to be centered not right-aligned and have a grid or dynamic offset calculation otherwise — I'd just find a new icon honestly.

Destaq · 2024-11-14T17:22:00Z

src/components/Modals/CourseMenu.vue

@@ -250,6 +260,9 @@ export default defineComponent({
      }
      return creditArray;
    },
+    openNoteModal(courseCode: string) {
+      this.$emit('open-note-modal');


NB: checks not relevant as this will be used in later PRs.

Destaq · 2024-11-14T17:23:16Z

src/components/Notes/Note.vue

+      <img
+        src="@/assets/images/notes/arrow.svg"
+        alt="Arrow icon"
+        class="note-icon"


Might want to change the naming for this to be more semantic, since we do already have a note icon in the menu dropdown.

nidhi-mylavarapu added 5 commits November 6, 2024 23:37

initial attempt of sliding with rectangle

4cfb81b

moved shifting Note to a separate component

d05304d

sliding notes with lighter color matching course

1d2e4a3

adde

ff34593

d filter for pastel note

added arrow

dd90cba

nidhi-mylavarapu added 3 commits November 7, 2024 02:13

using input but wrong styles

bec8497

note component setup

6ed0d7c

added note ic

d73a1fc

on and option to course card menu

nidhi-mylavarapu marked this pull request as ready for review November 7, 2024 17:54

nidhi-mylavarapu requested a review from a team as a code owner November 7, 2024 17:54

nidhi-mylavarapu added 2 commits November 7, 2024 12:55

notes icon in course card menu

03dd540

note shows up after clicking note option in course menu

7f398e6

plumshum reviewed Nov 11, 2024

View reviewed changes

lighter colors for notes

ba9c44d

Destaq approved these changes Nov 14, 2024

View reviewed changes

Destaq merged commit 478b155 into notes-feature Nov 15, 2024
10 of 11 checks passed

Destaq deleted the nidhi/notes-basic-frontend branch November 15, 2024 20:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Notes Basic Frontend #960

Notes Basic Frontend #960

nidhi-mylavarapu commented Nov 7, 2024 •

edited

Loading

dti-github-bot commented Nov 7, 2024 •

edited

Loading

github-actions bot commented Nov 7, 2024 •

edited

Loading

plumshum Nov 11, 2024

Destaq Nov 14, 2024

Destaq left a comment

Destaq Nov 14, 2024

Destaq Nov 14, 2024

Destaq Nov 14, 2024

Destaq Nov 14, 2024

Destaq Nov 14, 2024

Destaq Nov 14, 2024

Destaq Nov 14, 2024

Destaq Nov 14, 2024

Notes Basic Frontend #960

Notes Basic Frontend #960

Conversation

nidhi-mylavarapu commented Nov 7, 2024 • edited Loading

Summary

Test Plan

dti-github-bot commented Nov 7, 2024 • edited Loading

github-actions bot commented Nov 7, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Destaq left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nidhi-mylavarapu commented Nov 7, 2024 •

edited

Loading

dti-github-bot commented Nov 7, 2024 •

edited

Loading

github-actions bot commented Nov 7, 2024 •

edited

Loading