feat(core): Add Web UI Animations to components #69
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
I did all what Juan Hoyos mentioned in the email. Creating some text animations was extremely hard to achieve. I was willing to make it animate like the button itself, but that was way too hard! The simple transition already does a great job!
Created a very elegant sliding animation once a new option is selected. Moreover, once hovering, a minor change was added to the bim-option's background to give users a hint of the mouse position.
Using a mouse down event different from the touch was problematic. Instead, a pointer down event was triggered that works for both touch screens and mouse clicks.
Changed the way pseudo-elements (before/after) were animated. Instead of transforming it using the transform and top properties, a clip-path was used to match the same effect. This was applied to both the button elements and the checkboxes.
Created a button like effect for all tab switchers
Note: the bim-label had its overflow set to hidden which resulted in bugs in teh selection dropdown animation if the label was put alone. I entirly deleted it and tested the app if any bug is presented in the tables, grids, taps, and found nothing.
Once animated, the text without any icon was getting back to have a small line height creating a strange text shift. Moreover, the tooltips of the buttons were scalling down with the button once the button is clicked. Both are fixed now
Note: A minor animation was added to the selection's expand/collapse icon to trigger the user to click on that element once hovered
Note: the bim-label had its overflow set to hidden which resulted in bugs in the section dropdown animation if the label was put alone. I entirly deleted it and tested the app if any bug is presented in the tables, grids, taps, etc, and found nothing.
Once animated, the text without any icon was getting back to have a small line height creating a strange text shift. Moreover, the tooltips of the buttons were scalling down with the button once the button is clicked. Both are fixed now
Note: A minor animation was added to the selection's expand/collapse icon to trigger the user to click on that element once hovered
After committing, I realized so many bugs. I fixed most of them except the ones that have bottom set to true, yet I will fix them on the next commit with the taps transition animations.
Note: there was countless bugs found in the switcher's animation once I was trying to animate the tabs. All noticeable bugs were fixed.
Note: This also works on dropdown elements and all are working well
Moreover, panels animation was improved.
Note: The tabs had so many problems since I changed how they used to be positioned. I added a grid templates to them create a bug in how they used to funciton. Now, it works just as it used to be, but the animations are different a bit.
Moreover, tooltips now shrink until they reach zero so there won't be any UI overlaps.
The previous fix was for the buttons example, now this works even on the nested context menues in the grid example.
In the pervious commit, they kept some space on the UI since their display wasn't set to none.
Note: It's added in a new function in the core Manager file. You can call it like the init() function. You can see it in the grid example.
This was the best option I was able to come up with! The BUI Manager was also changed so that users can rely on one function call.
I have also made sure the timing of the animation is controllable, too!
I have also made the transition a bit more dynamic so changing one variable makes everything work well!
I just realized that the floating tabs used to have an all rounded corners after they were closed. Now, they look just like they used to be.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Most web UI elements have been animated to enhance the visual experience and user feedback. Subtle yet engaging visual cues are provided for various interactions and state changes of the components. The performance impact of these animations has been carefully considered and is negligible.
Additional context
What is the purpose of this pull request?
Before submitting the PR, please make sure you do the following:
feat(examples): add hello-world example).fixes #123).