bitwarden/desktop
1
0
Fork 0
mirror of https://github.com/bitwarden/desktop synced 2026-01-10 12:33:13 +00:00
Code Issues Releases Wiki Activity

Use cdk-virtual-scroll for long cipher lists (#1001)

Browse Source 
* Use cdk-virtual-scroll for cipher lists

* add trackBy, reorder dom

* Undo merge conflict error

* Fix layout, increase scrolling buffer

* fix linting

* Remove unused infinite-scroll directives for Send

* Add back refresh method

* Update jslib

* Fix itemSize and min/maxBufferPx directives

* Move refresh() into base class

* Use cipherListVirtualScroll strategy

* fix linting

* Update to use latest virtual-scroll strategy

* Update jslib
This commit is contained in:
Thomas Rittson
2021-08-11 13:00:04 +10:00
committed by GitHub
parent 157d9478d4
commit 816249a48a
6 changed files with 38 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/vault/ciphers.component.html
View File

@@ -6,13 +6,11 @@
</div>
</div>
<div class="content">
<ng-container *ngIf="(isPaging() ? pagedCiphers : ciphers) as filteredCiphers">
<div class="list" *ngIf="filteredCiphers.length" infiniteScroll [infiniteScrollDistance]="1"
[infiniteScrollContainer]="'#items .content'" [fromRoot]="true" [infiniteScrollDisabled]="!isPaging()"
(scrolled)="loadMore()">
<a *ngFor="let c of filteredCiphers" appStopClick (click)="selectCipher(c)"
<cdk-virtual-scroll-viewport itemSize="42" minBufferPx="400" maxBufferPx="600" *ngIf="ciphers.length">
<div class="list">
<a *cdkVirtualFor="let c of ciphers; trackBy: trackByFn" appStopClick (click)="selectCipher(c)"
(contextmenu)="rightClickCipher(c)" href="#" title="{{'viewItem' | i18n}}"
[ngClass]="{'active': c.id === activeCipherId}" class="flex-list-item">
[ngClass]="{'active': c.id === activeCipherId}" class="flex-list-item virtual-scroll-item">
<app-vault-icon [cipher]="c"></app-vault-icon>
<div class="flex-cipher-list-item">
<span class="text">
@@ -30,15 +28,15 @@
</div>
</a>
</div>
<div class="no-items" *ngIf="!filteredCiphers.length">
<i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded" aria-hidden="true"></i>
<ng-container *ngIf="loaded">
<i class="fa fa-frown-o fa-4x" aria-hidden="true"></i>
<p>{{'noItemsInList' | i18n}}</p>
<button (click)="addCipher()" class="btn block primary link">{{'addItem' | i18n}}</button>
</ng-container>
</div>
</ng-container>
</cdk-virtual-scroll-viewport>
<div class="no-items" *ngIf="!ciphers.length">
<i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded" aria-hidden="true"></i>
<ng-container *ngIf="loaded">
<i class="fa fa-frown-o fa-4x" aria-hidden="true"></i>
<p>{{'noItemsInList' | i18n}}</p>
<button (click)="addCipher()" class="btn block primary link">{{'addItem' | i18n}}</button>
</ng-container>
</div>
</div>
<div class="footer">
<button appBlurClick (click)="addCipher()" (contextmenu)="addCipherOptions()"