-
-
Notifications
You must be signed in to change notification settings - Fork 3.6k
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.
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
Feature: Add animations to foldable section #2202
Feature: Add animations to foldable section #2202
Conversation
@johnfewell is attempting to deploy a commit to the Quivr-app Team on Vercel. A member of the Team first needs to authorize it. |
} | ||
|
||
.contentExpanded { | ||
max-height: 200px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This max-height 200 px will cause some bugs if we have bigger foldable section :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done.
classname={`${styles.iconRotate} ${ | ||
folded ? styles.iconRotateDown : styles.iconRotateUp | ||
}`} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you change this to keep the previous icon behaviour ? :)
Chevron right when it's open and down when it's close :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done.
@@ -11,6 +11,19 @@ | |||
overflow: hidden; | |||
font-size: Typography.$small; | |||
|
|||
.contentWrapper { | |||
overflow: hidden; | |||
transition: max-height 0.3s cubic-bezier(0.65, 0.05, 0.36, 1); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you create a transition scss module where you store this cubic bezier thing ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done.
Nice work :) |
@Zewed Thank you for your feedback; the issues have been addressed. |
🤖 I have created a release *beep* *boop* --- ## 0.0.208 (2024-02-21) ## What's Changed * feat: Add pricing calculation method to GPT4Brain class and update user usage in chat controller by @StanGirard in #2216 * Enable Porter Application quivr by @porter-deployment-app in #2220 * Delete Porter Application quivr by @porter-deployment-app in #2221 * Enable Porter Application preview-quivr by @porter-deployment-app in #2222 * Enable Porter Application prod-quivr by @porter-deployment-app in #2223 * feat(brains): added description by @StanGirard in #2224 * feat: Add integration_logo_url to MinimalUserBrainEntity by @StanGirard in #2225 * Add Redis configuration to celery_config.py by @StanGirard in #2227 * Remove unused 'model' variable and logging statements by @StanGirard in #2228 * feat: Add max_files attribute to MinimalUserBrainEntity and BrainsUsers repository by @StanGirard in #2229 * Feature: Add animations to foldable section by @johnfewell in #2202 * feat(frontend): first custom brain live by @Zewed in #2226 * fix(frontend): legacy on foldable section animation pr by @Zewed in #2230 * Fix: API endpoint for getting integration brains by @StanGirard in #2231 * feat: Update dependencies and remove unnecessary logging statements by @StanGirard in #2232 * feat: implement elasticache by @StanGirard in #2234 * fix(frontend): ellipsis overflow on large brain or prompt names by @Zewed in #2233 ## New Contributors * @porter-deployment-app made their first contribution in #2220 * @johnfewell made their first contribution in #2202 **Full Changelog**: v0.0.207...v0.0.208 --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please).
Description
Refactored the foldable section. The design is inspired by Material Design's expansion panel. The existing design has the chevron alternating from pointing down to pointing right. This is misleading because there is no subordinate information to the right. Also, this PR animates the arrow and foldable section, creating a delightful experience.
Checklist before requesting a review
Screenshots (if appropriate):
expansion.webm
Update
expansion2.webm