Backend logic, shake animation, and frontend draft for course notes #966
Conversation
|
[diff-counting] Significant lines: 434. |
|
Visit the preview URL for this PR (updated for commit 31c151c): https://cornelldti-courseplan-dev--pr966-shake-animation-and-l7lgqd5v.web.app (expires Thu, 02 Jan 2025 10:21:17 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 6d4e0437c4559ed895272bbd63991394f1e0e933 |
Destaq
changed the title
Destaq
changed the title
| this.isShaking = true; | ||
| setTimeout(() => { | ||
| this.isShaking = false; | ||
| }, 900); // 3 shakes * 0.3s = 0.9s |
There was a problem hiding this comment.
Have we confirmed the shake animation speed with Joanna yet? May need to change this
| return; | ||
| } | ||
|
|
||
| if (noteComponent.isDirty) { |
There was a problem hiding this comment.
Thanks for adding such clear comments for this! Makes it much easier to understand the animations with different states
| @@ -172,8 +190,11 @@ export default defineComponent({ | |||
| trashIcon: trashGrayIcon, // Default icon | |||
| courseCode: '', | |||
| isExpanded: false, | |||
| isNoteVisible: false, | |||
| expandNote: false, | |||
| // isNotVisible represents a small open 'portrusion' indicating that there is a note | |||
There was a problem hiding this comment.
Small typo - isNotVisible in comment instead of isNoteVisible. it's for a comment though so no big deal lol
| @@ -296,6 +390,30 @@ export default defineComponent({ | |||
| padding-bottom: 20px; | |||
| } | |||
|
|
|||
| // Emulates a slight side-to-side sway à la Figma micro-interaction. | |||
There was a problem hiding this comment.
Thank you so much for looking into this Simon! The shake effect looks awesome
Summary
Implemented backend logic and animations for persistent note storage on course cards, tied to
uniqueIDs, in addition to fixing some type issues and slimming down the code.Remaining TODOs:
z-index, etc. — itemized in the Slack as well)Test Plan
Can also try clicking on notes to expand them, clicking outside to hide, clicking outside when the form input is dirty to view the shaking animation, clicking on the note menu item again when already open to also see that there is a shaking animation, etc.