Build cdk viewport back into amendment create wizard

OpenSlides · Sep 12, 2023 · 30cc138 · 30cc138
1 parent 633fc25
commit 30cc138
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 30 deletions.
diff --git a/...s/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html b/...s/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html
@@ -36,35 +36,42 @@ <h2>{{ 'New amendment' | translate }}</h2>
             <mat-step [completed]="contentForm.value.selectedParagraphs.length > 0">
                 <ng-template matStepLabel>{{ 'Select paragraphs' | translate }}</ng-template>
                 <div class="amendment-create-wizard-wrapper spacer-bottom-20">
-                    <section
-                        *ngFor="let paragraph of paragraphs; let i = index"
-                        class="paragraph-row background-hover"
-                        [class.outlined-hover]="isParagraphSelected(paragraph)"
-                        (click)="onParagraphClicked(paragraph)"
+                    <cdk-virtual-scroll-viewport
+                        itemSize="90"
+                        minBufferPx="400"
+                        maxBufferPx="600"
+                        class="paragraph-scroll"
                     >
-                        <mat-checkbox
-                            *ngIf="multipleParagraphsAllowed"
-                            class="flex-center paragraph-select"
-                            [checked]="isParagraphSelected(paragraph)"
-                            (click)="checkboxClicked($event)"
-                        ></mat-checkbox>
-                        <mat-radio-button
-                            *ngIf="!multipleParagraphsAllowed"
-                            class="flex-center paragraph-select"
-                            [checked]="isParagraphSelected(paragraph)"
-                        ></mat-radio-button>
-                        <div class="paragraph-text motion-text">
-                            <div>
-                                <i *ngIf="paragraph.lineFrom >= paragraph.lineTo" class="line-number">
-                                    {{ 'Line' | translate }} {{ paragraph.lineFrom }}:
-                                </i>
-                                <i *ngIf="paragraph.lineFrom < paragraph.lineTo" class="line-number">
-                                    {{ 'Line' | translate }} {{ paragraph.lineFrom }} - {{ paragraph.lineTo }}:
-                                </i>
+                        <section
+                            *ngFor="let paragraph of paragraphs; let i = index"
+                            class="paragraph-row background-hover"
+                            [class.outlined-hover]="isParagraphSelected(paragraph)"
+                            (click)="onParagraphClicked(paragraph)"
+                        >
+                            <mat-checkbox
+                                *ngIf="multipleParagraphsAllowed"
+                                class="flex-center paragraph-select"
+                                [checked]="isParagraphSelected(paragraph)"
+                                (click)="checkboxClicked($event)"
+                            ></mat-checkbox>
+                            <mat-radio-button
+                                *ngIf="!multipleParagraphsAllowed"
+                                class="flex-center paragraph-select"
+                                [checked]="isParagraphSelected(paragraph)"
+                            ></mat-radio-button>
+                            <div class="paragraph-text motion-text">
+                                <div>
+                                    <i *ngIf="paragraph.lineFrom >= paragraph.lineTo" class="line-number">
+                                        {{ 'Line' | translate }} {{ paragraph.lineFrom }}:
+                                    </i>
+                                    <i *ngIf="paragraph.lineFrom < paragraph.lineTo" class="line-number">
+                                        {{ 'Line' | translate }} {{ paragraph.lineFrom }} - {{ paragraph.lineTo }}:
+                                    </i>
+                                </div>
+                                <div [innerHTML]="getParagraphPreview(i) | trust : 'html'"></div>
                             </div>
-                            <div [innerHTML]="getParagraphPreview(i) | trust : 'html'"></div>
-                        </div>
-                    </section>
+                        </section>
+                    </cdk-virtual-scroll-viewport>
                 </div>
             </mat-step>
             <mat-step>

diff --git a/...s/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.scss b/...s/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.scss
@@ -1,6 +1,13 @@
 .amendment-create-wizard-wrapper {
     .paragraph-scroll {
-        height: calc(100vh - 245px);
+        height: calc(
+            100vh -
+                (
+                    var(--global-headbar-height) + var(--view-headbar-height) // Offset for the headbars
+                    + 96px // Offset for the stepper
+                    + 20px // Offset for the bottom spacer
+                )
+        );
     }
 
     .paragraph-row {

diff --git a/client/src/app/ui/modules/head-bar/components/head-bar/head-bar.component.scss b/client/src/app/ui/modules/head-bar/components/head-bar/head-bar.component.scss
@@ -9,7 +9,7 @@
     top: 0;
     z-index: 1000;
     position: sticky;
-    height: 50px !important;
+    height: var(--view-headbar-height) !important;
 
     .toolbar-left {
         display: flex;

diff --git a/client/src/styles.scss b/client/src/styles.scss
@@ -25,6 +25,7 @@
 
 :root {
     --global-headbar-height: 28px;
+    --view-headbar-height: 50px;
 }
 
 /**
@@ -530,7 +531,7 @@ button.mat-menu-item.selected {
 
 .content-container {
     margin: 0 25px;
-    
+
     h1 {
         font-size: 30px;
     }