Skip to content
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.

Sign up for GitHub

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

Jump to bottom

fix(drawer): allow for drawer container to auto-resize while open #8488

Merged
merged 1 commit into from
Dec 5, 2017
Merged

fix(drawer): allow for drawer container to auto-resize while open #8488

merged 1 commit into from
Dec 5, 2017

Conversation

crisbeto
Copy link
Member

Adds the autosize input that allows users to opt-in to drawers that auto-resize, similarly to the behavior before #6189. The behavior is off by default, because it's unnecessary for most use cases and can cause performance issues.

Fixes #6743.

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Nov 16, 2017
mmalerba
mmalerba reviewed Nov 16, 2017
View reviewed changes
src/lib/sidenav/drawer.ts Outdated
private _margins = {left: 0, right: 0};

/** Used for debouncing reflows. */
private _debouncer = new Subject<void>();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe call it _doCheckSubject?

src/lib/sidenav/drawer.ts Outdated
@@ -462,9 +490,15 @@ export class MatDrawerContainer implements AfterContentInit, OnDestroy {

this._changeDetectorRef.markForCheck();
});

this._debouncer.pipe(
debounceTime(10), // Arbitrary debounce time, less than a frame at 60fps
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is debounce what we want, doesn't audit make more sense here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd say so. audit just throttles the events, but what we want is to only measure once if multiple events happen very close to each other.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the drawer were animating open, wouldn't it just keep denouncing until the animation is over and then jump?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AFAIK animations don't trigger change detection. ngDoCheck runs for every change detection cycle.

src/lib/sidenav/drawer.ts Outdated
constructor(@Optional() private _dir: Directionality, private _element: ElementRef,
private _renderer: Renderer2, private _ngZone: NgZone,
constructor(@Optional() private _dir: Directionality,
@Inject(MAT_DRAWER_DEFAULT_AUTOSIZE) defaultAutosize: boolean,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we move this to the end of the parameter list and make it optional it won't be breaking for users who are extending this class

mmalerba
mmalerba reviewed Nov 16, 2017
View reviewed changes
src/lib/sidenav/sidenav.md Outdated
issues.

```html
<mat-sidenav-container [autosize]="true">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we make this an embedded example? (#7775 will make the rest of these embedded examples as well).

Maybe also add an example to the demo app so we can manually test

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure what an embedded example would look like in this case, aside from a sidenav that resizes in a setTimeout, but that's not very representative of a real use case.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could have an icon drawer that expands to show full labels when the user hovers or clicks a button.

Or just have a button that toggles itself between shorter and longer width when clicked, not a practical use case but demonstrates how to use the feature and lets us manually test it

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright, I've added a live example.

@mmalerba mmalerba added the P1 Impacts a large percentage of users; if a workaround exists it is partial or overly painful label Nov 16, 2017
@crisbeto
Copy link
Member Author

Addressed the code-related feedback @mmalerba.

mmalerba
mmalerba reviewed Nov 17, 2017
View reviewed changes
src/material-examples/sidenav-autosize/sidenav-autosize-example.html Outdated
@@ -0,0 +1,16 @@
<mat-sidenav-container class="example-container" autosize>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you change these to the drawer variants? I only want people to use sidenav for fullscreen layouts

mmalerba
mmalerba approved these changes Nov 17, 2017
View reviewed changes
Copy link
Contributor

@mmalerba mmalerba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, just 1 nit. Feel free to add merge-ready after

@crisbeto crisbeto added the action: merge The PR is ready for merge by the caretaker label Nov 17, 2017
@jelbourn jelbourn added this to the 5.0 milestone Nov 19, 2017
@tinayuangao
Copy link
Contributor

@crisbeto please rebase. Thanks!

@crisbeto
Copy link
Member Author

Rebased @tinayuangao.

@mmalerba mmalerba mentioned this pull request Nov 28, 2017
Closed
@crisbeto
fix(drawer): allow for drawer container to auto-resize while open
ae04fcf 
Adds the `autosize` input that allows users to opt-in to drawers that auto-resize, similarly to the behavior before angular#6189. The behavior is off by default, because it's unnecessary for most use cases and can cause performance issues.

Fixes angular#6743.
@mmalerba mmalerba merged commit e7b412a into angular:master Dec 5, 2017
@Melanie-M Melanie-M mentioned this pull request Dec 15, 2017
Open
@tlmader tlmader mentioned this pull request Jan 31, 2018
Merged
5 tasks
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@mmalerba mmalerba mmalerba approved these changes

@amcdnl amcdnl Awaiting requested review from amcdnl

@jelbourn jelbourn Awaiting requested review from jelbourn

Assignees

@mmalerba mmalerba

Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement P1 Impacts a large percentage of users; if a workaround exists it is partial or overly painful
Projects
None yet
Milestone
5.0
Development

Successfully merging this pull request may close these issues.

[MdSidenav] - Sidenav Resizing Regression
5 participants
@crisbeto @tinayuangao @mmalerba @jelbourn @googlebot