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 { DragDropModule } from '@angular/cdk/drag-drop';
import { CdkTreeModule } from '@angular/cdk/tree';
import { ScrollingModule } from '@angular/cdk/scrolling';
// ngx-translate
import { TranslateModule } from '@ngx-translate/core';
@ -139,7 +140,8 @@ import { PrecisionPipe } from './pipes/precision.pipe';
NgxMatSelectSearchModule,
FileDropModule,
EditorModule,
CdkTreeModule
CdkTreeModule,
ScrollingModule
],
exports: [
FormsModule,
@ -203,7 +205,8 @@ import { PrecisionPipe } from './pipes/precision.pipe';
OwlNativeDateTimeModule,
CountdownTimeComponent,
MediaUploadContentComponent,
PrecisionPipe
PrecisionPipe,
ScrollingModule
],
declarations: [
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>
</os-head-bar>
<div class="head-spacer"></div>
<mat-card *ngIf="statuteParagraphToCreate">
<mat-card-title translate>New statute paragraph</mat-card-title>
<mat-card-content>
@ -42,77 +41,84 @@
</mat-card-actions>
</mat-card>
<mat-accordion class="os-card">
<mat-expansion-panel
*ngFor="let statuteParagraph of this.statuteParagraphs"
(opened)="openId = statuteParagraph.id"
(closed)="panelClosed(statuteParagraph)"
[expanded]="openId === statuteParagraph.id"
multiple="false"
>
<mat-expansion-panel-header>
<mat-panel-title>
{{ statuteParagraph.title }}
</mat-panel-title>
</mat-expansion-panel-header>
<form [formGroup]="updateForm" *ngIf="editId === statuteParagraph.id" (keydown)="onKeyDownUpdate($event)">
<span translate>Edit statute paragraph:</span>
<p>
<mat-form-field>
<input formControlName="title" matInput placeholder="{{ 'Title' | translate }}" required />
<mat-hint *ngIf="!updateForm.controls.title.valid">
<span translate>Required</span>
</mat-hint>
</mat-form-field>
</p>
<span>
<!-- The HTML Editor -->
<h4>Statute paragraph</h4>
<editor formControlName="text" [init]="tinyMceSettings"></editor>
</span>
</form>
<ng-container *ngIf="editId !== statuteParagraph.id">
<mat-card>
<mat-card-title>{{ statuteParagraph.title }}</mat-card-title>
<mat-card-content>
<div [innerHTML]="statuteParagraph.text"></div>
</mat-card-content>
</mat-card>
</ng-container>
<mat-action-row>
<button
*ngIf="editId !== statuteParagraph.id"
mat-button
class="on-transition-fade"
(click)="onEditButton(statuteParagraph)"
mat-icon-button
>
<mat-icon>edit</mat-icon>
</button>
<button
*ngIf="editId === statuteParagraph.id"
mat-button
class="on-transition-fade"
(click)="onCancelUpdate()"
mat-icon-button
>
<mat-icon>close</mat-icon>
</button>
<button
*ngIf="editId === statuteParagraph.id"
mat-button
class="on-transition-fade"
(click)="onSaveButton(statuteParagraph)"
mat-icon-button
>
<mat-icon>save</mat-icon>
</button>
<button mat-button class="on-transition-fade" (click)="onDeleteButton(statuteParagraph)" mat-icon-button>
<mat-icon>delete</mat-icon>
</button>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion>
<cdk-virtual-scroll-viewport itemSize="50" class="virtual-scroll-full-page">
<mat-accordion class="os-card">
<mat-expansion-panel
*cdkVirtualFor="let statuteParagraph of statuteParagraphs"
(opened)="openId = statuteParagraph.id"
(closed)="panelClosed(statuteParagraph)"
[expanded]="openId === statuteParagraph.id"
multiple="false"
>
<mat-expansion-panel-header>
<mat-panel-title>
{{ statuteParagraph.title }}
</mat-panel-title>
</mat-expansion-panel-header>
<form [formGroup]="updateForm" *ngIf="editId === statuteParagraph.id" (keydown)="onKeyDownUpdate($event)">
<span translate>Edit statute paragraph:</span>
<p>
<mat-form-field>
<input formControlName="title" matInput placeholder="{{ 'Title' | translate }}" required />
<mat-hint *ngIf="!updateForm.controls.title.valid">
<span translate>Required</span>
</mat-hint>
</mat-form-field>
</p>
<span>
<!-- The HTML Editor -->
<h4>Statute paragraph</h4>
<editor formControlName="text" [init]="tinyMceSettings"></editor>
</span>
</form>
<ng-container *ngIf="editId !== statuteParagraph.id">
<mat-card>
<mat-card-title>{{ statuteParagraph.title }}</mat-card-title>
<mat-card-content>
<div [innerHTML]="statuteParagraph.text"></div>
</mat-card-content>
</mat-card>
</ng-container>
<mat-action-row>
<button
*ngIf="editId !== statuteParagraph.id"
mat-button
class="on-transition-fade"
(click)="onEditButton(statuteParagraph)"
mat-icon-button
>
<mat-icon>edit</mat-icon>
</button>
<button
*ngIf="editId === statuteParagraph.id"
mat-button
class="on-transition-fade"
(click)="onCancelUpdate()"
mat-icon-button
>
<mat-icon>close</mat-icon>
</button>
<button
*ngIf="editId === statuteParagraph.id"
mat-button
class="on-transition-fade"
(click)="onSaveButton(statuteParagraph)"
mat-icon-button
>
<mat-icon>save</mat-icon>
</button>
<button
mat-button
class="on-transition-fade"
(click)="onDeleteButton(statuteParagraph)"
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-content>

16
client/src/styles.scss
View File

@ -469,8 +469,24 @@ button.mat-menu-item.selected {
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 */
/* medium to small */
@media only screen and (max-width: 960px) {
.virtual-scroll-full-page {
height: calc(100vh - 64px);
}
}
/* medium */
@media only screen and (min-width: 500px) and (max-width: 960px) {
.content-container {