Merge pull request #4795 from tsiegleauq/vlist-refinements

Refine Virtual Scrolling Tables
This commit is contained in:
Emanuel Schütze 2019-06-19 08:10:56 +02:00 committed by GitHub
commit c67ad7f41d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 35 additions and 6 deletions

View File

@ -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 })
])
])
]);

View File

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

View File

@ -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 -->

View File

@ -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'

View File

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

View File

@ -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';
}

View File

@ -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 */