feat(panel): allow transform to be animated on an offset panel #11390
Conversation
|
So there's good news and bad news. 👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there. 😕 The bad news is that it appears that one or more commits were authored or co-authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that here in the pull request. Note to project maintainer: This is a terminal state, meaning the |
googlebot
added
the
cla: no
Splaktar
added
in progress
|
@crisbeto can you please confirm to make @googlebot happy? |
Splaktar
added
needs: manual testing
|
I don't think it's down to confirmation, but rather that there are two people on the commit. |
|
@crisbeto right, that causes the warning. Part of the process is just for you to post here
When the Googler goes to merge this, they just need to check that you are OK with your commits being checked into the project. I'm sure that's not a problem in this case 😁 |
|
I signed it! |
Splaktar
added
the
g3: reported
Splaktar
force-pushed
the
panel-offset-animation
branch
from
93d6572 to
7ef555e
Compare
Previously, if a panel had a position with an offset (e.g. `$mdPanel.newPanelPosition().center()`), the positioning would break any `transform` animations on the panel. This was due to the fact that `mdPanel` uses inline `transform` styles to do the offsetting. These changes introduce a wrapper around the panel (`.md-panel-inner-wrapper`), which will handle all of the positioning, allowing for any animations to be applied to the `.md-panel` itself. Relates to #9641. Fixes #9905.
Splaktar
removed
- Breaking Change
in progress
…nel change - `md-panel` changed from `position: fixed` to `relative` - that resulted in the tooltip's `height` style not having any effect
Splaktar
force-pushed
the
panel-offset-animation
branch
from
7ef555e to
da05a55
Compare
| @@ -1321,26 +1321,32 @@ MdPanelService.prototype._wrapTemplate = function(origTemplate) { | |||
| // height and width for positioning. | |||
| return '' + | |||
| '<div class="md-panel-outer-wrapper">' + | |||
| ' <div class="md-panel _md-panel-offscreen">' + template + '</div>' + | |||
| '<div class="md-panel-inner-wrapper" style="left: -9999px;">' + | |||
There was a problem hiding this comment.
This inline style (style="left: -9999px;") triggers a CSP violation for unsafe-inline.
| var wrapper = angular.element('<div class="md-panel-outer-wrapper">'); | ||
| var outerWrapper = angular.element( | ||
| '<div class="md-panel-outer-wrapper">' + | ||
| '<div class="md-panel-inner-wrapper" style="left: -9999px;"></div>' + |
There was a problem hiding this comment.
This inline style (style="left: -9999px;") triggers a CSP violation for unsafe-inline.
PR Checklist
Please check that your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Previously, if a panel had a position with an offset (e.g.
$mdPanel.newPanelPosition().center()), the positioning would break anytransformanimations on the panel. This was due to the fact thatmdPaneluses inlinetransformstyles to do the offsetting.Issue Number:
Relates to #9641.
Fixes #9905.
What is the new behavior?
These changes introduce a wrapper around the panel (
.md-panel-inner-wrapper), which will handle all of the positioning, allowing for any animations to be applied to the.md-panelitself.Does this PR introduce a breaking change?
Other information
Moving this over from #9941 so that rebasing can happen and some additional clean up can be completed. This already went through a couple rounds of reviews in that PR.
TODO