mirror of
https://github.com/bitwarden/browser.git
synced 2024-08-21 22:23:52 +02:00
Use cdk-virtual-scroll for long cipher lists (#1001)
* 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:
parent
157d9478d4
commit
816249a48a
2
jslib
2
jslib
|
@ -1 +1 @@
|
|||
Subproject commit 23309d33e2a335574ed898d6543040372d41526a
|
||||
Subproject commit c70c8ecc247cb92e1f867630031fd5cdf124bcd3
|
|
@ -1,12 +1,12 @@
|
|||
import 'zone.js/dist/zone';
|
||||
|
||||
import { ToasterModule } from 'angular2-toaster';
|
||||
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { ServicesModule } from './services.module';
|
||||
|
||||
import { DragDropModule } from '@angular/cdk/drag-drop';
|
||||
import { ScrollingModule } from '@angular/cdk/scrolling';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
|
@ -36,6 +36,7 @@ import { ApiActionDirective } from 'jslib-angular/directives/api-action.directiv
|
|||
import { AutofocusDirective } from 'jslib-angular/directives/autofocus.directive';
|
||||
import { BlurClickDirective } from 'jslib-angular/directives/blur-click.directive';
|
||||
import { BoxRowDirective } from 'jslib-angular/directives/box-row.directive';
|
||||
import { CipherListVirtualScroll } from 'jslib-angular/directives/cipherListVirtualScroll.directive';
|
||||
import { FallbackSrcDirective } from 'jslib-angular/directives/fallback-src.directive';
|
||||
import { SelectCopyDirective } from 'jslib-angular/directives/select-copy.directive';
|
||||
import { StopClickDirective } from 'jslib-angular/directives/stop-click.directive';
|
||||
|
@ -164,10 +165,10 @@ registerLocaleData(localeZhTw, 'zh-TW');
|
|||
BrowserModule,
|
||||
DragDropModule,
|
||||
FormsModule,
|
||||
InfiniteScrollModule,
|
||||
ReactiveFormsModule,
|
||||
ServicesModule,
|
||||
ToasterModule.forRoot(),
|
||||
ScrollingModule,
|
||||
],
|
||||
declarations: [
|
||||
A11yTitleDirective,
|
||||
|
@ -179,6 +180,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
|
|||
BlurClickDirective,
|
||||
BoxRowDirective,
|
||||
CalloutComponent,
|
||||
CipherListVirtualScroll,
|
||||
CiphersComponent,
|
||||
CollectionsComponent,
|
||||
ColorPasswordPipe,
|
||||
|
|
|
@ -39,8 +39,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="list" *ngIf="filteredSends.length" infiniteScroll [infiniteScrollDistance]="1"
|
||||
[infiniteScrollContainer]="'#items .content'" [fromRoot]="true" (scrolled)="loadMore()">
|
||||
<div class="list" *ngIf="filteredSends.length">
|
||||
<a *ngFor="let s of filteredSends" appStopClick (click)="selectSend(s.id)"
|
||||
title="{{'viewItem' | i18n}}" (contextmenu)="viewSendMenu(s)"
|
||||
[ngClass]="{'active': s.id === sendId}" class="flex-list-item">
|
||||
|
|
|
@ -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()"
|
||||
|
|
|
@ -1,16 +1,15 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
import { SearchService } from 'jslib-common/abstractions/search.service';
|
||||
|
||||
import { CiphersComponent as BaseCiphersComponent } from 'jslib-angular/components/ciphers.component';
|
||||
|
||||
import { CipherView } from 'jslib-common/models/view/cipherView';
|
||||
|
||||
@Component({
|
||||
selector: 'app-vault-ciphers',
|
||||
templateUrl: 'ciphers.component.html',
|
||||
})
|
||||
export class CiphersComponent extends BaseCiphersComponent {
|
||||
constructor(searchService: SearchService) {
|
||||
super(searchService);
|
||||
this.pageSize = 250;
|
||||
trackByFn(index: number, c: CipherView) {
|
||||
return c.id;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -79,16 +79,16 @@ textarea {
|
|||
resize: vertical;
|
||||
}
|
||||
|
||||
div:not(.modal)::-webkit-scrollbar {
|
||||
div:not(.modal)::-webkit-scrollbar, .cdk-virtual-scroll-viewport::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
div:not(.modal)::-webkit-scrollbar-track {
|
||||
div:not(.modal)::-webkit-scrollbar-track, .cdk-virtual-scroll-viewport::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
div:not(.modal)::-webkit-scrollbar-thumb {
|
||||
div:not(.modal)::-webkit-scrollbar-thumb, .cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
margin-right: 1px;
|
||||
|
||||
|
@ -102,3 +102,15 @@ div:not(.modal)::-webkit-scrollbar-thumb {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// cdk-virtual-scroll
|
||||
.cdk-virtual-scroll-viewport {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.cdk-virtual-scroll-content-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user