inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2765] Fix for the gallery view in datatable component (#3470)

Browse Source 
* [ADF-2765] Fix for the gallery view in datatable component

* [ADF-2765] Fixed lint errors

* [ADF-2765] Changed maximum columns per row number

* [ADF-2765] Removed trailing whitespace
This commit is contained in:
davidcanonieto 2018-07-05 00:36:21 +02:00 committed by Eugenio Romano
parent 23403076a9
commit edf82d9c05
3 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/core/datatable/components/datatable/datatable.component.html
View File

@ -42,7 +42,6 @@
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="adf-datatable-body">
@ -191,6 +190,9 @@
<ng-content select="adf-empty-list"></ng-content>
</div>
</div>
<div *ngFor="let row of fakeRows"
class="adf-datatable-row adf-datatable-row-empty-card">
</div>
</ng-container>
<div *ngIf="!loading && noPermission"
[class.adf-datatable-row]="display === 'list'"

17
lib/core/datatable/components/datatable/datatable.component.scss
View File

@ -29,13 +29,10 @@
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-between;
&:after {
content: "";
flex: auto;
}
justify-content: space-evenly;
align-content: flex-start;
align-items: flex-start;
.adf-datatable-row {
transition: all 0.3s ease;
@ -58,6 +55,14 @@
@include mat-overridable-elevation(2);
}
.adf-datatable-row-empty-card {
height: 0 !important;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.is-selected {
background: mat-color($primary, 100);
padding-bottom: 31px;

20
lib/core/datatable/components/datatable/datatable.component.ts
View File

@ -161,6 +161,9 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
isSelectAllChecked: boolean = false;
selection = new Array<DataRow>();
/** This array of fake rows fix the flex layout for the gallery view */
fakeRows = [];
private clickObserver: Observer<DataRowEvent>;
private click$: Observable<DataRowEvent>;
@ -188,6 +191,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
})
);
}
this.datatableLayoutFix();
this.setTableSchema();
}
@ -220,6 +224,10 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
if (this.isPropertyChanged(changes['sorting'])) {
this.setTableSorting(changes['sorting'].currentValue);
}
if (this.isPropertyChanged(changes['display'])) {
this.datatableLayoutFix();
}
}
ngDoCheck() {
@ -654,4 +662,16 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
this.dataRowsChanged = null;
}
}
datatableLayoutFix() {
const maxGalleryRows = 25;
if (this.display === 'gallery') {
for (let i = 0; i < maxGalleryRows; i++) {
this.fakeRows.push('');
}
} else {
this.fakeRows = [];
}
}
}