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>
<cdk-virtual-scroll-viewport [itemSize]="100" redactionHasScrollbar>
<cdk-virtual-scroll-viewport [itemSize]="85" redactionHasScrollbar>
<div
*cdkVirtualFor="let pw of displayedProjects | sortBy: sortingOption.order:sortingOption.column"
[class.pointer]="canOpenProject(pw)"
@ -87,6 +87,12 @@
<div class="table-item-title heading">
{{ pw.project.projectName }}
</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>
<mat-icon svgIcon="red:document"></mat-icon>
@ -108,10 +114,6 @@
<mat-icon svgIcon="red:lightning"></mat-icon>
{{ pw.project.dueDate | date: 'mediumDate' }}
</div>
<div>
<mat-icon svgIcon="red:template"></mat-icon>
{{ getRuleSet(pw).name }}
</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 {
> div {
height: 100px;
height: 85px;
padding: 0 24px;
}
@ -18,9 +18,9 @@
}
}
.stats-subtitle {
margin-top: 6px;
}
//.stats-subtitle {
// margin-top: 6px;
//}
}
&.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 { debounce } from './debounce';
@Directive({
selector: '[redactionHasScrollbar]',
@ -14,10 +13,8 @@ export class HasScrollbarDirective implements AfterContentChecked {
this._process();
}
@debounce(10)
_process() {
const newClass = this.hasScrollbar ? 'has-scrollbar' : '';
if (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';
@Directive({
selector: '[redactionSyncWidth]',
exportAs: 'redactionSyncWidth'
})
export class SyncWidthDirective implements AfterViewChecked {
export class SyncWidthDirective implements AfterViewInit {
@Input()
redactionSyncWidth: string;
constructor(private el: ElementRef) {}
ngAfterViewChecked() {
this.matchWidth();
}
private get _sampleRow(): { tableRow: Element; length: number } {
const tableRows = document.getElementsByClassName(this.redactionSyncWidth);
let length = 0;
@ -58,4 +54,8 @@ export class SyncWidthDirective implements AfterViewChecked {
onResize() {
this.matchWidth();
}
ngAfterViewInit(): void {
this.matchWidth();
}
}