Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

dummy patch virtual scroll

Browse Source
This commit is contained in:
Timo 2021-02-11 10:18:01 +02:00
parent 4fa57130fd
commit 2c203eeb91
4 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
View File

@ -76,7 +76,7 @@
<div *ngIf="noData" class="no-data heading-l" translate="project-listing.no-projects-match"></div> <div *ngIf="noData" class="no-data heading-l" translate="project-listing.no-projects-match"></div>
<cdk-virtual-scroll-viewport [itemSize]="100" redactionHasScrollbar> <cdk-virtual-scroll-viewport [itemSize]="85" redactionHasScrollbar>
<div <div
*cdkVirtualFor="let pw of displayedProjects | sortBy: sortingOption.order:sortingOption.column" *cdkVirtualFor="let pw of displayedProjects | sortBy: sortingOption.order:sortingOption.column"
[class.pointer]="canOpenProject(pw)" [class.pointer]="canOpenProject(pw)"
@ -87,6 +87,12 @@
<div class="table-item-title heading"> <div class="table-item-title heading">
{{ pw.project.projectName }} {{ pw.project.projectName }}
</div> </div>
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:template"></mat-icon>
{{ getRuleSet(pw).name }}
</div>
</div>
<div class="small-label stats-subtitle"> <div class="small-label stats-subtitle">
<div> <div>
<mat-icon svgIcon="red:document"></mat-icon> <mat-icon svgIcon="red:document"></mat-icon>
@ -108,10 +114,6 @@
<mat-icon svgIcon="red:lightning"></mat-icon> <mat-icon svgIcon="red:lightning"></mat-icon>
{{ pw.project.dueDate | date: 'mediumDate' }} {{ pw.project.dueDate | date: 'mediumDate' }}
</div> </div>
<div>
<mat-icon svgIcon="red:template"></mat-icon>
{{ getRuleSet(pw).name }}
</div>
</div> </div>
</div> </div>
<div> <div>

8
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
View File

@ -8,7 +8,7 @@
.table-item { .table-item {
> div { > div {
height: 100px; height: 85px;
padding: 0 24px; padding: 0 24px;
} }
@ -18,9 +18,9 @@
} }
} }
.stats-subtitle { //.stats-subtitle {
margin-top: 6px; // margin-top: 6px;
} //}
} }
&.has-scrollbar:hover { &.has-scrollbar:hover {

3
apps/red-ui/src/app/utils/has-scrollbar.directive.ts
View File

@ -1,5 +1,4 @@
import { AfterContentChecked, Directive, ElementRef, HostBinding } from '@angular/core'; import { AfterContentChecked, Directive, ElementRef, HostBinding } from '@angular/core';
import { debounce } from './debounce';
@Directive({ @Directive({
selector: '[redactionHasScrollbar]', selector: '[redactionHasScrollbar]',
@ -14,10 +13,8 @@ export class HasScrollbarDirective implements AfterContentChecked {
this._process(); this._process();
} }
@debounce(10)
_process() { _process() {
const newClass = this.hasScrollbar ? 'has-scrollbar' : ''; const newClass = this.hasScrollbar ? 'has-scrollbar' : '';
if (this.class !== newClass) { if (this.class !== newClass) {
this.class = newClass; this.class = newClass;
} }

12
apps/red-ui/src/app/utils/sync-width.directive.ts
View File

@ -1,20 +1,16 @@
import { AfterViewChecked, Directive, ElementRef, HostListener, Input } from '@angular/core'; import { AfterViewChecked, AfterViewInit, Directive, ElementRef, HostListener, Input } from '@angular/core';
import { debounce } from './debounce'; import { debounce } from './debounce';
@Directive({ @Directive({
selector: '[redactionSyncWidth]', selector: '[redactionSyncWidth]',
exportAs: 'redactionSyncWidth' exportAs: 'redactionSyncWidth'
}) })
export class SyncWidthDirective implements AfterViewChecked { export class SyncWidthDirective implements AfterViewInit {
@Input() @Input()
redactionSyncWidth: string; redactionSyncWidth: string;
constructor(private el: ElementRef) {} constructor(private el: ElementRef) {}
ngAfterViewChecked() {
this.matchWidth();
}
private get _sampleRow(): { tableRow: Element; length: number } { private get _sampleRow(): { tableRow: Element; length: number } {
const tableRows = document.getElementsByClassName(this.redactionSyncWidth); const tableRows = document.getElementsByClassName(this.redactionSyncWidth);
let length = 0; let length = 0;
@ -58,4 +54,8 @@ export class SyncWidthDirective implements AfterViewChecked {
onResize() { onResize() {
this.matchWidth(); this.matchWidth();
} }
ngAfterViewInit(): void {
this.matchWidth();
}
} }