skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(grid): fix mat-grid-tile position (#12980)

Browse Source 
refresh gapStartIndex and gapEndIndex after move to a new row. Otherwise, they become out of sync and causes wrong calculation.
This commit is contained in:
vivian-hu
2018-09-21 10:07:30 -07:00
committed by mmalerba
parent 590d2949d1
commit 966cf5f089
3 changed files with 129 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo-app/grid-list/grid-list-demo.html
+40
View File
@@ -11,6 +11,46 @@
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title>Grid with 1 cell at the beginning of a new row</mat-card-title>
<mat-card-content class="demo-basic-list">
<mat-grid-list [cols]="6" gutterSize="20px" rowHeight="20px">
<mat-grid-tile [colspan]="3" [rowspan]="4"
class="mat-elevation-z15">
</mat-grid-tile>
<mat-grid-tile [colspan]="3" [rowspan]="4"
class="mat-elevation-z15">
</mat-grid-tile>
<mat-grid-tile [colspan]="1" [rowspan]="2"
class="mat-elevation-z15">
</mat-grid-tile>
</mat-grid-list>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title>Grid with col-span</mat-card-title>
<mat-card-content class="demo-basic-list">
<mat-grid-list [cols]="10" gutterSize="20px" rowHeight="20px">
<mat-grid-tile [colspan]="4" [rowspan]="4"
class="mat-elevation-z15">
</mat-grid-tile>
<mat-grid-tile [colspan]="2" [rowspan]="2"
class="mat-elevation-z15">
</mat-grid-tile>
<mat-grid-tile [colspan]="4" [rowspan]="4"
class="mat-elevation-z15">
</mat-grid-tile>
<mat-grid-tile [colspan]="4" [rowspan]="4"
class="mat-elevation-z15">
</mat-grid-tile>
<mat-grid-tile [colspan]="4" [rowspan]="4"
class="mat-elevation-z15">
</mat-grid-tile>
</mat-grid-list>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title>Fixed-height grid list</mat-card-title>
<mat-card-content>
src/lib/grid-list/grid-list.spec.ts
+82
View File
@@ -246,6 +246,65 @@ describe('MatGridList', () => {
expect(getStyle(tiles[3], 'top')).toBe('101px');
});
it('should lay out tiles correctly', () => {
const fixture = createComponent(GridListWithLayout);
fixture.detectChanges();
const tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile'));
expect(getStyle(tiles[0], 'width')).toBe('40px');
expect(getStyle(tiles[0], 'height')).toBe('40px');
expect(getComputedLeft(tiles[0])).toBe(0);
expect(getStyle(tiles[0], 'top')).toBe('0px');
expect(getStyle(tiles[1], 'width')).toBe('20px');
expect(getStyle(tiles[1], 'height')).toBe('20px');
expect(getComputedLeft(tiles[1])).toBe(40);
expect(getStyle(tiles[1], 'top')).toBe('0px');
expect(getStyle(tiles[2], 'width')).toBe('40px');
expect(getStyle(tiles[2], 'height')).toBe('40px');
expect(getComputedLeft(tiles[2])).toBe(60);
expect(getStyle(tiles[2], 'top')).toBe('0px');
expect(getStyle(tiles[3], 'width')).toBe('40px');
expect(getStyle(tiles[3], 'height')).toBe('40px');
expect(getComputedLeft(tiles[3])).toBe(0);
expect(getStyle(tiles[3], 'top')).toBe('40px');
expect(getStyle(tiles[4], 'width')).toBe('40px');
expect(getStyle(tiles[4], 'height')).toBe('40px');
expect(getComputedLeft(tiles[4])).toBe(40);
expect(getStyle(tiles[4], 'top')).toBe('40px');
});
it('should lay out tiles correctly when single cell to be placed at the beginning',
() => {
const fixture = createComponent(GridListWithSingleCellAtBeginning);
fixture.detectChanges();
const tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile'));
expect(getStyle(tiles[0], 'width')).toBe('40px');
expect(getStyle(tiles[0], 'height')).toBe('40px');
expect(getComputedLeft(tiles[0])).toBe(0);
expect(getStyle(tiles[0], 'top')).toBe('0px');
expect(getStyle(tiles[1], 'width')).toBe('20px');
expect(getStyle(tiles[1], 'height')).toBe('40px');
expect(getComputedLeft(tiles[1])).toBe(40);
expect(getStyle(tiles[1], 'top')).toBe('0px');
expect(getStyle(tiles[2], 'width')).toBe('40px');
expect(getStyle(tiles[2], 'height')).toBe('40px');
expect(getComputedLeft(tiles[2])).toBe(60);
expect(getStyle(tiles[2], 'top')).toBe('0px');
expect(getStyle(tiles[3], 'height')).toBe('20px');
expect(getComputedLeft(tiles[3])).toBe(0);
expect(getStyle(tiles[3], 'top')).toBe('40px');
});
it('should add not add any classes to footers without lines', () => {
const fixture = createComponent(GridListWithFootersWithoutLines);
fixture.detectChanges();
@@ -486,6 +545,29 @@ class GridListWithComplexLayout {
tiles: any[];
}
@Component({template: `
<div style="width:100px">
<mat-grid-list [cols]="10" gutterSize="0px" rowHeight="10px">
<mat-grid-tile [colspan]="4" [rowspan]="4"></mat-grid-tile>
<mat-grid-tile [colspan]="2" [rowspan]="2"></mat-grid-tile>
<mat-grid-tile [colspan]="4" [rowspan]="4"></mat-grid-tile>
<mat-grid-tile [colspan]="4" [rowspan]="4"></mat-grid-tile>
<mat-grid-tile [colspan]="4" [rowspan]="4"></mat-grid-tile>
</mat-grid-list>
</div>`})
class GridListWithLayout {}
@Component({template: `
<div style="width:100px">
<mat-grid-list [cols]="10" gutterSize="0px" rowHeight="10px">
<mat-grid-tile [colspan]="4" [rowspan]="4"></mat-grid-tile>
<mat-grid-tile [colspan]="2" [rowspan]="4"></mat-grid-tile>
<mat-grid-tile [colspan]="4" [rowspan]="4"></mat-grid-tile>
<mat-grid-tile [colspan]="1" [rowspan]="2"></mat-grid-tile>
</mat-grid-list>
</div>`})
class GridListWithSingleCellAtBeginning {}
@Component({template: `
<mat-grid-list cols="1">
<mat-grid-tile>
src/lib/grid-list/tile-coordinator.ts
+7 -2
View File
@@ -91,6 +91,8 @@ export class TileCoordinator {
// If we've reached the end of the row, go to the next row.
if (this.columnIndex + tileCols > this.tracker.length) {
this._nextRow();
gapStartIndex = this.tracker.indexOf(0, this.columnIndex);
gapEndIndex = this._findGapEndIndex(gapStartIndex);
continue;
}
@@ -99,6 +101,8 @@ export class TileCoordinator {
// If there are no more empty spaces in this row at all, move on to the next row.
if (gapStartIndex == -1) {
this._nextRow();
gapStartIndex = this.tracker.indexOf(0, this.columnIndex);
gapEndIndex = this._findGapEndIndex(gapStartIndex);
continue;
}
@@ -108,8 +112,9 @@ export class TileCoordinator {
// gap on the next iteration.
this.columnIndex = gapStartIndex + 1;
// Continue iterating until we find a gap wide enough for this tile.
} while (gapEndIndex - gapStartIndex < tileCols);
// Continue iterating until we find a gap wide enough for this tile. Since gapEndIndex is
// exclusive, gapEndIndex is 0 means we didn't find a gap and should continue.
} while ((gapEndIndex - gapStartIndex < tileCols) || (gapEndIndex == 0));
// If we still didn't manage to find a gap, ensure that the index is
// at least zero so the tile doesn't get pulled out of the grid.