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

crisbeto · 2017-11-16T20:21:35Z

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.

mmalerba · 2017-11-16T22:22:39Z

src/lib/sidenav/drawer.ts

+  private _margins = {left: 0, right: 0};
+
+  /** Used for debouncing reflows. */
+  private _debouncer = new Subject<void>();


maybe call it _doCheckSubject?

mmalerba · 2017-11-16T22:23:18Z

src/lib/sidenav/drawer.ts

    });
+
+    this._debouncer.pipe(
+      debounceTime(10), // Arbitrary debounce time, less than a frame at 60fps


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

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.

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

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

mmalerba · 2017-11-16T22:26:12Z

src/lib/sidenav/drawer.ts

-  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,


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 · 2017-11-16T22:32:35Z

src/lib/sidenav/sidenav.md

+issues.
+
+```html
+<mat-sidenav-container [autosize]="true">


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

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.

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

Alright, I've added a live example.

crisbeto · 2017-11-17T16:10:45Z

Addressed the code-related feedback @mmalerba.

mmalerba · 2017-11-17T19:13:15Z

src/material-examples/sidenav-autosize/sidenav-autosize-example.html

@@ -0,0 +1,16 @@
+<mat-sidenav-container class="example-container" autosize>


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

mmalerba

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

tinayuangao · 2017-11-28T02:09:14Z

@crisbeto please rebase. Thanks!

crisbeto · 2017-11-28T18:07:05Z

Rebased @tinayuangao.

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.

angular-automatic-lock-bot · 2019-09-07T21:02:09Z

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.}

crisbeto added the pr: needs review label Nov 16, 2017

crisbeto assigned mmalerba Nov 16, 2017

crisbeto requested a review from mmalerba as a code owner November 16, 2017 20:21

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Nov 16, 2017

mmalerba reviewed Nov 16, 2017

View reviewed changes

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 force-pushed the 6743/drawer-autosize branch from 8da8c0b to 1c685f4 Compare November 17, 2017 16:10

crisbeto force-pushed the 6743/drawer-autosize branch from 1c685f4 to 8947aec Compare November 17, 2017 18:49

crisbeto requested review from amcdnl and jelbourn as code owners November 17, 2017 18:49

mmalerba reviewed Nov 17, 2017

View reviewed changes

mmalerba added pr: lgtm and removed pr: needs review labels Nov 17, 2017

mmalerba approved these changes Nov 17, 2017

View reviewed changes

crisbeto force-pushed the 6743/drawer-autosize branch from 8947aec to 08fa7d0 Compare November 17, 2017 19:56

crisbeto added the action: merge The PR is ready for merge by the caretaker label Nov 17, 2017

jelbourn added this to the 5.0 milestone Nov 19, 2017

tinayuangao added the pr: needs rebase label Nov 28, 2017

crisbeto force-pushed the 6743/drawer-autosize branch from 08fa7d0 to 61783b6 Compare November 28, 2017 18:06

crisbeto removed the pr: needs rebase label Nov 28, 2017

mmalerba mentioned this pull request Nov 28, 2017

Md-Sidenav open mode bootstrap animation #6865

Closed

crisbeto force-pushed the 6743/drawer-autosize branch from 61783b6 to 1436eee Compare December 4, 2017 21:25

crisbeto force-pushed the 6743/drawer-autosize branch from 1436eee to ae04fcf Compare December 4, 2017 21:29

mmalerba merged commit e7b412a into angular:master Dec 5, 2017

Melanie-M mentioned this pull request Dec 15, 2017

Navigation drawer - Mini variant behavior #1728

Open

tlmader mentioned this pull request Jan 31, 2018

Fix page overflow cerberus-org/cerberus-app#222

Merged

5 tasks

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019

		@@ -0,0 +1,16 @@
		<mat-sidenav-container class="example-container" autosize>

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

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

Uh oh!

Conversation

crisbeto commented Nov 16, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

crisbeto commented Nov 17, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mmalerba left a comment

Choose a reason for hiding this comment

Uh oh!

tinayuangao commented Nov 28, 2017

Uh oh!

crisbeto commented Nov 28, 2017

Uh oh!

angular-automatic-lock-bot bot commented Sep 7, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants