Merge pull request #4627 from tsiegleauq/virtual-scroll-statute

Add virtual scrolling to statute list
This commit is contained in:
Emanuel Schütze 2019-04-28 13:57:30 +02:00 committed by GitHub
commit 3584dd5646
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 99 additions and 74 deletions

View File

@ -42,6 +42,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select'; import { MatSelectModule } from '@angular/material/select';
import { DragDropModule } from '@angular/cdk/drag-drop'; import { DragDropModule } from '@angular/cdk/drag-drop';
import { CdkTreeModule } from '@angular/cdk/tree'; import { CdkTreeModule } from '@angular/cdk/tree';
import { ScrollingModule } from '@angular/cdk/scrolling';
// ngx-translate // ngx-translate
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
@ -139,7 +140,8 @@ import { PrecisionPipe } from './pipes/precision.pipe';
NgxMatSelectSearchModule, NgxMatSelectSearchModule,
FileDropModule, FileDropModule,
EditorModule, EditorModule,
CdkTreeModule CdkTreeModule,
ScrollingModule
], ],
exports: [ exports: [
FormsModule, FormsModule,
@ -203,7 +205,8 @@ import { PrecisionPipe } from './pipes/precision.pipe';
OwlNativeDateTimeModule, OwlNativeDateTimeModule,
CountdownTimeComponent, CountdownTimeComponent,
MediaUploadContentComponent, MediaUploadContentComponent,
PrecisionPipe PrecisionPipe,
ScrollingModule
], ],
declarations: [ declarations: [
PermsDirective, PermsDirective,

View File

@ -12,7 +12,6 @@
</div> </div>
</os-head-bar> </os-head-bar>
<div class="head-spacer"></div>
<mat-card *ngIf="statuteParagraphToCreate"> <mat-card *ngIf="statuteParagraphToCreate">
<mat-card-title translate>New statute paragraph</mat-card-title> <mat-card-title translate>New statute paragraph</mat-card-title>
<mat-card-content> <mat-card-content>
@ -42,9 +41,10 @@
</mat-card-actions> </mat-card-actions>
</mat-card> </mat-card>
<mat-accordion class="os-card"> <cdk-virtual-scroll-viewport itemSize="50" class="virtual-scroll-full-page">
<mat-accordion class="os-card">
<mat-expansion-panel <mat-expansion-panel
*ngFor="let statuteParagraph of this.statuteParagraphs" *cdkVirtualFor="let statuteParagraph of statuteParagraphs"
(opened)="openId = statuteParagraph.id" (opened)="openId = statuteParagraph.id"
(closed)="panelClosed(statuteParagraph)" (closed)="panelClosed(statuteParagraph)"
[expanded]="openId === statuteParagraph.id" [expanded]="openId === statuteParagraph.id"
@ -107,12 +107,18 @@
> >
<mat-icon>save</mat-icon> <mat-icon>save</mat-icon>
</button> </button>
<button mat-button class="on-transition-fade" (click)="onDeleteButton(statuteParagraph)" mat-icon-button> <button
mat-button
class="on-transition-fade"
(click)="onDeleteButton(statuteParagraph)"
mat-icon-button
>
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</mat-action-row> </mat-action-row>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>
</cdk-virtual-scroll-viewport>
<mat-card *ngIf="statuteParagraphs.length === 0"> <mat-card *ngIf="statuteParagraphs.length === 0">
<mat-card-content> <mat-card-content>

View File

@ -469,8 +469,24 @@ button.mat-menu-item.selected {
margin: 0 65px; margin: 0 65px;
} }
/**
* cdk-virtual-scroll-viewport requires a hight, otherwise it would always be 0
* Depending in mobile-mode and desktop mode we need to subtract different values
* from 100vh
*/
.virtual-scroll-full-page {
height: calc(100vh - 128px);
}
/** media queries */ /** media queries */
/* medium to small */
@media only screen and (max-width: 960px) {
.virtual-scroll-full-page {
height: calc(100vh - 64px);
}
}
/* medium */ /* medium */
@media only screen and (min-width: 500px) and (max-width: 960px) { @media only screen and (min-width: 500px) and (max-width: 960px) {
.content-container { .content-container {