ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/app/shared/shared.module.ts
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,

150
client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.html
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,77 +41,84 @@
</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-expansion-panel <mat-accordion class="os-card">
*ngFor="let statuteParagraph of this.statuteParagraphs" <mat-expansion-panel
(opened)="openId = statuteParagraph.id" *cdkVirtualFor="let statuteParagraph of statuteParagraphs"
(closed)="panelClosed(statuteParagraph)" (opened)="openId = statuteParagraph.id"
[expanded]="openId === statuteParagraph.id" (closed)="panelClosed(statuteParagraph)"
multiple="false" [expanded]="openId === statuteParagraph.id"
> multiple="false"
<mat-expansion-panel-header> >
<mat-panel-title> <mat-expansion-panel-header>
{{ statuteParagraph.title }} <mat-panel-title>
</mat-panel-title> {{ statuteParagraph.title }}
</mat-expansion-panel-header> </mat-panel-title>
<form [formGroup]="updateForm" *ngIf="editId === statuteParagraph.id" (keydown)="onKeyDownUpdate($event)"> </mat-expansion-panel-header>
<span translate>Edit statute paragraph:</span> <form [formGroup]="updateForm" *ngIf="editId === statuteParagraph.id" (keydown)="onKeyDownUpdate($event)">
<p> <span translate>Edit statute paragraph:</span>
<mat-form-field> <p>
<input formControlName="title" matInput placeholder="{{ 'Title' | translate }}" required /> <mat-form-field>
<mat-hint *ngIf="!updateForm.controls.title.valid"> <input formControlName="title" matInput placeholder="{{ 'Title' | translate }}" required />
<span translate>Required</span> <mat-hint *ngIf="!updateForm.controls.title.valid">
</mat-hint> <span translate>Required</span>
</mat-form-field> </mat-hint>
</p> </mat-form-field>
<span> </p>
<!-- The HTML Editor --> <span>
<h4>Statute paragraph</h4> <!-- The HTML Editor -->
<editor formControlName="text" [init]="tinyMceSettings"></editor> <h4>Statute paragraph</h4>
</span> <editor formControlName="text" [init]="tinyMceSettings"></editor>
</form> </span>
<ng-container *ngIf="editId !== statuteParagraph.id"> </form>
<mat-card> <ng-container *ngIf="editId !== statuteParagraph.id">
<mat-card-title>{{ statuteParagraph.title }}</mat-card-title> <mat-card>
<mat-card-content> <mat-card-title>{{ statuteParagraph.title }}</mat-card-title>
<div [innerHTML]="statuteParagraph.text"></div> <mat-card-content>
</mat-card-content> <div [innerHTML]="statuteParagraph.text"></div>
</mat-card> </mat-card-content>
</ng-container> </mat-card>
<mat-action-row> </ng-container>
<button <mat-action-row>
*ngIf="editId !== statuteParagraph.id" <button
mat-button *ngIf="editId !== statuteParagraph.id"
class="on-transition-fade" mat-button
(click)="onEditButton(statuteParagraph)" class="on-transition-fade"
mat-icon-button (click)="onEditButton(statuteParagraph)"
> mat-icon-button
<mat-icon>edit</mat-icon> >
</button> <mat-icon>edit</mat-icon>
<button </button>
*ngIf="editId === statuteParagraph.id" <button
mat-button *ngIf="editId === statuteParagraph.id"
class="on-transition-fade" mat-button
(click)="onCancelUpdate()" class="on-transition-fade"
mat-icon-button (click)="onCancelUpdate()"
> mat-icon-button
<mat-icon>close</mat-icon> >
</button> <mat-icon>close</mat-icon>
<button </button>
*ngIf="editId === statuteParagraph.id" <button
mat-button *ngIf="editId === statuteParagraph.id"
class="on-transition-fade" mat-button
(click)="onSaveButton(statuteParagraph)" class="on-transition-fade"
mat-icon-button (click)="onSaveButton(statuteParagraph)"
> mat-icon-button
<mat-icon>save</mat-icon> >
</button> <mat-icon>save</mat-icon>
<button mat-button class="on-transition-fade" (click)="onDeleteButton(statuteParagraph)" mat-icon-button> </button>
<mat-icon>delete</mat-icon> <button
</button> mat-button
</mat-action-row> class="on-transition-fade"
</mat-expansion-panel> (click)="onDeleteButton(statuteParagraph)"
</mat-accordion> mat-icon-button
>
<mat-icon>delete</mat-icon>
</button>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion>
</cdk-virtual-scroll-viewport>
<mat-card *ngIf="statuteParagraphs.length === 0"> <mat-card *ngIf="statuteParagraphs.length === 0">
<mat-card-content> <mat-card-content>

16
client/src/styles.scss
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 {