fix(menus): Fix menu positioning/animation #6588
Merged
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
Since v3.0.0-rc.21, the column/grid menu animation slides down from above the grid, but it is visible the entire time. This causes the animation to appear clunky. This has been resolved by setting `overflow: hidden` on the menu. Fixes angular-ui#3436, angular-ui#3921, angular-ui#3978. Showing/hiding the menu can seem slow. The menu animation has been sped up as well, and when it is hidden, the animation is now twice as fast. Previously, to calculate the menu position, the width of the menu needed to be calculated, which meant calling `repositionMenu` twice - once when first opening the menu, and again after the menu is visible to allow the width of the menu to be determined. This also meant there was always a "shift" when the menu was first opened (as a default width of 170px was used until the actual width of the menu could be determined. This implements the CSS trick `right: 100%` so the width is not needed when determining the menu's position, meaning the menu can be opened much more smoothly and without needing to call `repositionMenu` twice. Fixes angular-ui#6587. remove lastMenuWidth from tests no message
|
@mportuga Thanks for merging this! I just realized, though, that I got the animation classes mixed up (it's 0.04s to hide and 0.02s to show - I meant it to be the opposite). Obviously not a huge difference maker, but let me know if you want me to submit another PR. |
caseyjhol
added a commit
to snapappointments/ui-grid
that referenced
this pull request
Mar 8, 2018
Menu width calculation was removed in angular-ui#6588. Menu width needs to be calculated in order to properly position the menu (if there is not enough room to the left of the column). repositionMenu is now always called in the 'menu-shown' event listener to ensure the width can be properly calculated. The style attribute is removed from $elm in the 'menu-hidden' event listener to prevent the menu from appearing to slide from the left or right when opening another column menu while one is already open. Menu animation speed was changed in angular-ui#6588 to have different add/remove speeds. 0.04s has been chosen as a happy medium, and the $timeout duration has been changed to reflect the new transition duration (to reduce delay when hiding the menu). `position: relative` has been removed from .ui-grid-header-cell-row to ensure consistent calculation of offsetParent across browsers. Fixes angular-ui#5396, angular-ui#5990, angular-ui#6085.
caseyjhol
added a commit
to snapappointments/ui-grid
that referenced
this pull request
Mar 8, 2018
Menu width calculation was removed in angular-ui#6588. Menu width needs to be calculated in order to properly position the menu (if there is not enough room to the left of the column). repositionMenu is now always called in the 'menu-shown' event listener to ensure the width can be properly calculated. The style attribute is removed from $elm in the 'menu-hidden' event listener to prevent the menu from appearing to slide from the left or right when opening another column menu while one is already open. Menu animation speed was changed in angular-ui#6588 to have different add/remove speeds. 0.04s has been chosen as a happy medium, and the $timeout duration has been changed to reflect the new transition duration (to reduce delay when hiding the menu). `position: relative` has been removed from .ui-grid-header-cell-row to ensure consistent calculation of offsetParent across browsers. Fixes angular-ui#5396, angular-ui#5990, angular-ui#6085.
mportuga
pushed a commit
that referenced
this pull request
Mar 11, 2018
Menu width calculation was removed in #6588. Menu width needs to be calculated in order to properly position the menu (if there is not enough room to the left of the column). repositionMenu is now always called in the 'menu-shown' event listener to ensure the width can be properly calculated. The style attribute is removed from $elm in the 'menu-hidden' event listener to prevent the menu from appearing to slide from the left or right when opening another column menu while one is already open. Menu animation speed was changed in #6588 to have different add/remove speeds. 0.04s has been chosen as a happy medium, and the $timeout duration has been changed to reflect the new transition duration (to reduce delay when hiding the menu). `position: relative` has been removed from .ui-grid-header-cell-row to ensure consistent calculation of offsetParent across browsers. Fixes #5396, #5990, #6085.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Current behavior: https://plnkr.co/edit/Sr45hW2zhXcbPxvzEBTB?p=preview
New behavior: https://plnkr.co/edit/mSNHjvbSVCRklVrawk6m?p=preview
Since v3.0.0-rc.21, the column/grid menu animation slides down from
above the grid, but it is visible the entire time. This causes the
animation to appear clunky. This has been resolved by setting
overflow: hiddenon the menu.Fixes #3436, #3921, #3978.
Showing/hiding the menu can seem slow. The menu animation has been sped
up as well, and when it is hidden, the animation is now twice as fast.
Previously, to calculate the menu position, the width of the menu needed
to be calculated, which meant calling
repositionMenutwice - once whenfirst opening the menu, and again after the menu is visible to allow the
width of the menu to be determined. This also meant there was always a
"shift" when the menu was first opened (as a default width of 170px was
used until the actual width of the menu could be determined. This
implements the CSS trick
right: 100%so the width is not needed whendetermining the menu's position, meaning the menu can be opened much
more smoothly and without needing to call
repositionMenutwice.Fixes #6587.
lastMenuWidthhas been removed as well, as it is no longer needed.Looking forward to hearing your feedback.