bitgapp/eqMac
1
1
Fork 0
mirror of https://github.com/bitgapp/eqMac.git synced 2024-11-22 13:07:26 +03:00
Code Issues Projects Releases Wiki Activity

added virtual scroll to select box to handle large amount of items

Browse Source
This commit is contained in:
Nodeful 2021-03-09 18:20:20 +02:00
parent 4bd4a27b31
commit 1e1e714aab
2 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/app/modules/eqmac-components/components/select-box/select-box.component.html
View File

@ -1,5 +1,7 @@
<eqm-container class="container" #container>
<div *ngFor="let item of items" [class]="'item' + (item == selectedItem ? ' selected' : '')" (click)="selectItem(item)" [style.height.px]="itemHeight - 6">
<eqm-container class="container" #container>
<cdk-virtual-scroll-viewport [itemSize]="itemHeight" style="height: 100%; width: 100%" >
<div *cdkVirtualFor="let item of items" [class]="'item' + (item == selectedItem ? ' selected' : '')" (click)="selectItem(item)" [style.height.px]="itemHeight - 6">
<eqm-icon *ngIf="item.icon" [name]="item.icon" class="icon"></eqm-icon><eqm-label>{{item[labelParam]}}</eqm-label>
</div>
</eqm-container>
</cdk-virtual-scroll-viewport>
</eqm-container>

4
ui/src/app/modules/eqmac-components/eqmac-components.module.ts
View File

@ -46,6 +46,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { CarouselComponent, CarouselItemDirective, CarouselItemElement } from './components/carousel/carousel.component'
import { QuestionComponent } from './components/question/question.component'
import { ClickedOutsideDirective } from './directives/clicked-outside.directive'
import { ScrollingModule } from '@angular/cdk/scrolling'
@NgModule({
imports: [
@ -53,7 +54,8 @@ import { ClickedOutsideDirective } from './directives/clicked-outside.directive'
FormsModule,
HttpClientModule,
PipesModule,
BrowserAnimationsModule
BrowserAnimationsModule,
ScrollingModule
],
declarations: [
ClickedOutsideDirective,