From eaebdd210bdff760186dc50aaa5761c33a5ff308 Mon Sep 17 00:00:00 2001 From: Scott Hyndman Date: Wed, 23 Sep 2015 14:31:23 -0700 Subject: [PATCH 1/3] fix(gridList): Fixes "fit" mode Closes #2012 --- src/components/gridList/grid-list.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/gridList/grid-list.js b/src/components/gridList/grid-list.js index 7f4fe334113..5e701cd7f0a 100644 --- a/src/components/gridList/grid-list.js +++ b/src/components/gridList/grid-list.js @@ -319,14 +319,12 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia) { } function getGridStyle(colCount, rowCount, gutter, rowMode, rowHeight) { - var style = { - height: '', - paddingBottom: '' - }; + var style = {}; switch(rowMode) { case 'fixed': style.height = DIMENSION({ unit: rowHeight, span: rowCount, gutter: gutter }); + style.paddingBottom = ''; break; case 'ratio': @@ -336,6 +334,7 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia) { vShare = hShare * (1 / rowHeight), vUnit = UNIT({ share: vShare, gutterShare: hGutterShare, gutter: gutter }); + style.height = ''; style.paddingBottom = DIMENSION({ unit: vUnit, span: rowCount, gutter: gutter}); break; From 719961accc40bf24e4130a4596b97eff0c70dcda Mon Sep 17 00:00:00 2001 From: Scott Hyndman Date: Wed, 23 Sep 2015 14:50:54 -0700 Subject: [PATCH 2/3] fix(gridList): Changes to md-gutter will now trigger reflows Closes #3029. --- src/components/gridList/grid-list.js | 2 +- src/core/util/media.js | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/gridList/grid-list.js b/src/components/gridList/grid-list.js index 5e701cd7f0a..88ffcc3bb8c 100644 --- a/src/components/gridList/grid-list.js +++ b/src/components/gridList/grid-list.js @@ -124,7 +124,7 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia) { .addListener(invalidateLayout); } return $mdMedia.watchResponsiveAttributes( - ['md-cols', 'md-row-height'], attrs, layoutIfMediaMatch); + ['md-cols', 'md-row-height', 'md-gutter'], attrs, layoutIfMediaMatch); } function unwatchMedia() { diff --git a/src/core/util/media.js b/src/core/util/media.js index 4cf200efcfb..6aef51911ca 100644 --- a/src/core/util/media.js +++ b/src/core/util/media.js @@ -98,18 +98,17 @@ function mdMediaFactory($mdConstant, $rootScope, $window) { var unwatchFns = []; attrNames.forEach(function(attrName) { var normalizedName = getNormalizedName(attrs, attrName); - if (attrs[normalizedName]) { + if (angular.isDefined(attrs[normalizedName])) { unwatchFns.push( attrs.$observe(normalizedName, angular.bind(void 0, watchFn, null))); } for (var mediaName in $mdConstant.MEDIA) { normalizedName = getNormalizedName(attrs, attrName + '-' + mediaName); - if (!attrs[normalizedName]) { - return; + if (angular.isDefined(attrs[normalizedName])) { + unwatchFns.push( + attrs.$observe(normalizedName, angular.bind(void 0, watchFn, mediaName))); } - - unwatchFns.push(attrs.$observe(normalizedName, angular.bind(void 0, watchFn, mediaName))); } }); From 5cef1ce9ef1fe37145cc82697db5062951ff74f3 Mon Sep 17 00:00:00 2001 From: Scott Hyndman Date: Wed, 23 Sep 2015 17:01:33 -0700 Subject: [PATCH 3/3] fix(gridList): Animated tile removal now triggers appropriate layout Closes #1559 --- src/components/gridList/grid-list.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/gridList/grid-list.js b/src/components/gridList/grid-list.js index 88ffcc3bb8c..9bde240fcc3 100644 --- a/src/components/gridList/grid-list.js +++ b/src/components/gridList/grid-list.js @@ -348,7 +348,7 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia) { function getTileElements() { return [].filter.call(element.children(), function(ele) { - return ele.tagName == 'MD-GRID-TILE'; + return ele.tagName == 'MD-GRID-TILE' && !ele.$$mdDestroyed; }); } @@ -722,6 +722,9 @@ function GridTileDirective($mdMedia) { // Tile registration/deregistration gridCtrl.invalidateTiles(); scope.$on('$destroy', function() { + // Mark the tile as destroyed so it is no longer considered in layout, + // even if the DOM element sticks around (like during a leave animation) + element.$$mdDestroyed = true; unwatchAttrs(); gridCtrl.invalidateLayout(); });