Refine Virtual Scrolling Tables

- Enabled Word Wrapping
- Fixed an error where the projection dialog did not apear in the agenda
- Better promise handling to decide between motion table and tiles
- Fixed a projector permission bug
- disabled mat-row stagger animation
- Exchanged ngrid-grey theme with OpenSlides mat-card background. Looks cleaner

client/src/app/shared/animations.ts

@@ -43,7 +43,7 @@ export const pageTransition = trigger('pageTransition', [
         group([
             /** Staggered appearing = "one after another" */
             query(':enter mat-card', stagger(50, fadeMoveIn), { optional: true }),
-            query(':enter mat-row', stagger(30, fadeMoveIn), { optional: true })
+            query(':enter mat-row', fadeMoveIn, { optional: true })
         ])
     ])
 ]);

client/src/app/shared/components/head-bar/head-bar.component.scss

@@ -1,5 +1,6 @@
 .head-button {
     position: fixed;
+    z-index: 10; // should always be in top of everything else
     right: 25px;
     bottom: 25px;
 }

client/src/app/shared/components/list-view-table/list-view-table.component.html

@@ -11,7 +11,6 @@
     <!-- vScrollFixed="110" -->
     <!-- vScrollAuto () -->
     <pbl-ngrid
-        class="pbl-ngrid-cell-ellipsis"
         [ngClass]="showFilterBar ? 'virtual-scroll-with-head-bar' : 'virtual-scroll-full-page'"
         cellTooltip
         showHeader="!showFilterBar"
@@ -27,7 +26,7 @@
 
         <!-- Projector column -->
         <div *pblNgridCellDef="'projector'; row as viewModel" class="fill">
-            <os-projector-button class="projector-button" [object]="viewModel"></os-projector-button>
+            <os-projector-button class="projector-button" [object]="getProjectable(viewModel)"></os-projector-button>
         </div>
 
         <!-- Slot transclusion for the individual cells -->

client/src/app/shared/components/list-view-table/list-view-table.component.ts

@@ -11,7 +11,9 @@ import {
 } from '@angular/core';
 
 import { BaseViewModel } from 'app/site/base/base-view-model';
+import { BaseProjectableViewModel } from 'app/site/base/base-projectable-view-model';
 import { BaseSortListService } from 'app/core/ui-services/base-sort-list.service';
+import { BaseViewModelWithContentObject } from 'app/site/base/base-view-model-with-content-object';
 import { PblDataSource, columnFactory, PblNgridComponent, createDS } from '@pebula/ngrid';
 import { BaseFilterListService } from 'app/core/ui-services/base-filter-list.service';
 import { Observable } from 'rxjs';
@@ -196,7 +198,7 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
             }
         ];
 
-        if (this.allowProjector && this.operator.hasPerms('projector.can_manage_projector')) {
+        if (this.allowProjector && this.operator.hasPerms('core.can_manage_projector')) {
             columns.push({
                 prop: 'projector',
                 label: '',
@@ -317,6 +319,22 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
         }
     }
 
+    /**
+     * Depending on the view, the view model in the row can either be a
+     * `BaseViewModelWithContentObject` or a `BaseViewModelWithContentObject`.
+     * In the first case, we want to get the content object rather than
+     * the object itself for the projection button.
+     *
+     * @param viewModel The model of the table
+     * @returns a view model that can be projected
+     */
+    public getProjectable(
+        viewModel: BaseViewModelWithContentObject | BaseProjectableViewModel
+    ): BaseProjectableViewModel {
+        const withContent = viewModel as BaseViewModelWithContentObject;
+        return !!withContent.contentObject ? withContent.contentObject : viewModel;
+    }
+
     /**
      * Central search/filter function. Can be extended and overwritten by a filterPredicate.
      * Functions for that are usually called 'setFulltextFilter'

client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.scss

@@ -26,6 +26,7 @@ $text-margin-top: 10px;
 
 .column-identifier {
     margin-top: $text-margin-top;
+    word-break: break-all;
 }
 
 .column-title {

client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.ts

@@ -210,7 +210,6 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion> imple
      */
     public async ngOnInit(): Promise<void> {
         super.setTitle('Motions');
-        const storedView = await this.storage.get<string>('motionListView');
 
         this.configService
             .get<boolean>('motions_statutes_enabled')
@@ -227,7 +226,9 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion> imple
         this.categoryRepo.getViewModelListObservable().subscribe(cats => {
             this.categories = cats;
             if (cats.length > 0) {
-                this.selectedView = storedView || 'tiles';
+                this.storage.get<string>('motionListView').then(savedView => {
+                    this.selectedView = savedView ? savedView : 'tiles';
+                });
             } else {
                 this.selectedView = 'list';
             }

client/src/styles.scss

@@ -69,6 +69,11 @@
             display: inherit;
         }
     }
+
+    /** Custom themes for NGrid. Could be an own file if it gets more */
+    .pbl-ngrid-container {
+        background: mat-color($background, card);
+    }
 }
 
 .openslides-dark-theme,
@@ -647,6 +652,10 @@ button.mat-menu-item.selected {
     .virtual-scroll-full-page {
         height: calc(100vh - 64px);
     }
+
+    .virtual-scroll-with-head-bar {
+        height: calc(100vh - 125px);
+    }
 }
 
 /* medium */