Skip to content

Commit

Permalink
fix(grid-list): avoid unnecessary calc declarations (#6745)
Browse files Browse the repository at this point in the history
For the cases where a tile's offset is 0, some of the `calc` expressions will always evaluate to 0. These changes make it so calc isn't used at all if it would evaluate to 0.
  • Loading branch information
crisbeto authored and jelbourn committed Sep 1, 2017
1 parent 1272f03 commit 255611b
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 2 deletions.
12 changes: 12 additions & 0 deletions src/lib/grid-list/grid-list.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,18 @@ describe('MdGridList', () => {
let footer = fixture.debugElement.query(By.directive(MdGridTileText));
expect(footer.nativeElement.classList.contains('mat-2-line')).toBe(true);
});

it('should not use calc() that evaluates to 0', () => {
const fixture = TestBed.createComponent(GirdListWithRowHeightRatio);

fixture.componentInstance.heightRatio = '4:1';
fixture.detectChanges();

const firstTile = fixture.debugElement.query(By.directive(MdGridTile)).nativeElement;

expect(firstTile.style.marginTop).toBe('0px');
expect(firstTile.style.left).toBe('0px');
});
});


Expand Down
4 changes: 2 additions & 2 deletions src/lib/grid-list/tile-styler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export abstract class TileStyler {
// edges, each tile only uses a fraction (gutterShare = numGutters / numCells) of the gutter
// size. (Imagine having one gutter per tile, and then breaking up the extra gutter on the
// edge evenly among the cells).
return `(${sizePercent}% - ( ${this._gutterSize} * ${gutterFraction} ))`;
return `(${sizePercent}% - (${this._gutterSize} * ${gutterFraction}))`;
}


Expand All @@ -64,7 +64,7 @@ export abstract class TileStyler {
getTilePosition(baseSize: string, offset: number): string {
// The position comes the size of a 1x1 tile plus gutter for each previous tile in the
// row/column (offset).
return calc(`(${baseSize} + ${this._gutterSize}) * ${offset}`);
return offset === 0 ? '0' : calc(`(${baseSize} + ${this._gutterSize}) * ${offset}`);
}


Expand Down

0 comments on commit 255611b

Please sign in to comment.