mirror of
https://github.com/bitwarden/browser.git
synced 2024-12-17 15:37:57 +01:00
use virtual scroll for favorite ciphers
This commit is contained in:
Thomas Rittson
parent
8151d5bcac
commit
081bda255c
@ -23,131 +23,135 @@
|
|||||||
</ng-container>
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
<ng-container *ngIf="ciphers && ciphers.length && !showSearching()">
|
<ng-container *ngIf="ciphers && ciphers.length && !showSearching()">
|
||||||
<div class="box list" *ngIf="favoriteCiphers">
|
<cdk-virtual-scroll-viewport itemSize="46">
|
||||||
<div class="box-header">
|
<div class="box list" *ngIf="favoriteCiphers">
|
||||||
{{'favorites' | i18n}}
|
<div class="box-header">
|
||||||
<span class="flex-right">{{favoriteCiphers.length}}</span>
|
{{'favorites' | i18n}}
|
||||||
|
<span class="flex-right">{{favoriteCiphers.length}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="box-content">
|
||||||
|
<app-cipher-row *cdkVirtualFor="let c of favoriteCiphers" [cipher]="c" title="{{'viewItem' | i18n}}"
|
||||||
|
(onSelected)="selectCipher($event)" (launchEvent)="launchCipher($event)"></app-cipher-row>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content">
|
<div class="box list">
|
||||||
<app-ciphers-list [ciphers]="favoriteCiphers" title="{{'viewItem' | i18n}}"
|
<div class="box-header">
|
||||||
(onSelected)="selectCipher($event)" (launchEvent)="launchCipher($event)"></app-ciphers-list>
|
{{'types' | i18n}}
|
||||||
</div>
|
<span class="flex-right">4</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="box list">
|
<div class="box-content single-line">
|
||||||
<div class="box-header">
|
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
|
||||||
{{'types' | i18n}}
|
<div class="row-main">
|
||||||
<span class="flex-right">4</span>
|
<div class="icon"><i class="fa fa-fw fa-lg fa-globe"></i></div>
|
||||||
</div>
|
<span class="text">{{'typeLogin' | i18n}}</span>
|
||||||
<div class="box-content single-line">
|
|
||||||
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
|
|
||||||
<div class="row-main">
|
|
||||||
<div class="icon"><i class="fa fa-fw fa-lg fa-globe"></i></div>
|
|
||||||
<span class="text">{{'typeLogin' | i18n}}</span>
|
|
||||||
</div>
|
|
||||||
<span class="row-sub-label">{{typeCounts.get(cipherType.Login) || 0}}</span>
|
|
||||||
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Card)">
|
|
||||||
<div class="row-main">
|
|
||||||
<div class="icon"><i class="fa fa-fw fa-lg fa-credit-card"></i></div>
|
|
||||||
<span class="text">{{'typeCard' | i18n}}</span>
|
|
||||||
</div>
|
|
||||||
<span class="row-sub-label">{{typeCounts.get(cipherType.Card) || 0}}</span>
|
|
||||||
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Identity)">
|
|
||||||
<div class="row-main">
|
|
||||||
<div class="icon"><i class="fa fa-fw fa-lg fa-id-card-o"></i></div>
|
|
||||||
<span class="text">{{'typeIdentity' | i18n}}</span>
|
|
||||||
</div>
|
|
||||||
<span class="row-sub-label">{{typeCounts.get(cipherType.Identity) || 0}}</span>
|
|
||||||
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="box-content-row" appStopClick appBlurClick
|
|
||||||
(click)="selectType(cipherType.SecureNote)">
|
|
||||||
<div class="row-main">
|
|
||||||
<div class="icon"><i class="fa fa-fw fa-lg fa-sticky-note-o"></i></div>
|
|
||||||
<span class="text">{{'typeSecureNote' | i18n}}</span>
|
|
||||||
</div>
|
|
||||||
<span class="row-sub-label">{{typeCounts.get(cipherType.SecureNote) || 0}}</span>
|
|
||||||
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="box list" *ngIf="nestedFolders && nestedFolders.length">
|
|
||||||
<div class="box-header">
|
|
||||||
{{'folders' | i18n}}
|
|
||||||
<span class="flex-right">{{folderCount}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="box-content single-line">
|
|
||||||
<a *ngFor="let f of nestedFolders" href="#" class="box-content-row" appStopClick appBlurClick
|
|
||||||
(click)="selectFolder(f.node)">
|
|
||||||
<div class="row-main">
|
|
||||||
<div class="icon">
|
|
||||||
<i class="fa fa-fw fa-lg"
|
|
||||||
[ngClass]="{'fa-folder-open': f.node.id, 'fa-folder-open-o': !f.node.id}"></i>
|
|
||||||
</div>
|
</div>
|
||||||
<span class="text">{{f.node.name}}</span>
|
<span class="row-sub-label">{{typeCounts.get(cipherType.Login) || 0}}</span>
|
||||||
</div>
|
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
||||||
<span class="row-sub-label">{{folderCounts.get(f.node.id) || 0}}</span>
|
</a>
|
||||||
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Card)">
|
||||||
</a>
|
<div class="row-main">
|
||||||
|
<div class="icon"><i class="fa fa-fw fa-lg fa-credit-card"></i></div>
|
||||||
|
<span class="text">{{'typeCard' | i18n}}</span>
|
||||||
|
</div>
|
||||||
|
<span class="row-sub-label">{{typeCounts.get(cipherType.Card) || 0}}</span>
|
||||||
|
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Identity)">
|
||||||
|
<div class="row-main">
|
||||||
|
<div class="icon"><i class="fa fa-fw fa-lg fa-id-card-o"></i></div>
|
||||||
|
<span class="text">{{'typeIdentity' | i18n}}</span>
|
||||||
|
</div>
|
||||||
|
<span class="row-sub-label">{{typeCounts.get(cipherType.Identity) || 0}}</span>
|
||||||
|
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="box-content-row" appStopClick appBlurClick
|
||||||
|
(click)="selectType(cipherType.SecureNote)">
|
||||||
|
<div class="row-main">
|
||||||
|
<div class="icon"><i class="fa fa-fw fa-lg fa-sticky-note-o"></i></div>
|
||||||
|
<span class="text">{{'typeSecureNote' | i18n}}</span>
|
||||||
|
</div>
|
||||||
|
<span class="row-sub-label">{{typeCounts.get(cipherType.SecureNote) || 0}}</span>
|
||||||
|
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="box list" *ngIf="nestedFolders && nestedFolders.length">
|
||||||
<div class="box list" *ngIf="nestedCollections && nestedCollections.length">
|
<div class="box-header">
|
||||||
<div class="box-header">
|
{{'folders' | i18n}}
|
||||||
{{'collections' | i18n}}
|
<span class="flex-right">{{folderCount}}</span>
|
||||||
<span class="flex-right">{{nestedCollections.length}}</span>
|
</div>
|
||||||
|
<div class="box-content single-line">
|
||||||
|
<a *ngFor="let f of nestedFolders" href="#" class="box-content-row" appStopClick appBlurClick
|
||||||
|
(click)="selectFolder(f.node)">
|
||||||
|
<div class="row-main">
|
||||||
|
<div class="icon">
|
||||||
|
<i class="fa fa-fw fa-lg"
|
||||||
|
[ngClass]="{'fa-folder-open': f.node.id, 'fa-folder-open-o': !f.node.id}"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text">{{f.node.name}}</span>
|
||||||
|
</div>
|
||||||
|
<span class="row-sub-label">{{folderCounts.get(f.node.id) || 0}}</span>
|
||||||
|
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content single-line">
|
<div class="box list" *ngIf="nestedCollections && nestedCollections.length">
|
||||||
<a *ngFor="let c of nestedCollections" href="#" class="box-content-row" appStopClick appBlurClick
|
<div class="box-header">
|
||||||
(click)="selectCollection(c.node)">
|
{{'collections' | i18n}}
|
||||||
<div class="row-main">
|
<span class="flex-right">{{nestedCollections.length}}</span>
|
||||||
<div class="icon"><i class="fa fa-fw fa-lg fa-cube"></i></div>
|
</div>
|
||||||
<span class="text">{{c.node.name}}</span>
|
<div class="box-content single-line">
|
||||||
</div>
|
<a *ngFor="let c of nestedCollections" href="#" class="box-content-row" appStopClick appBlurClick
|
||||||
<span class="row-sub-label">{{collectionCounts.get(c.node.id) || 0}}</span>
|
(click)="selectCollection(c.node)">
|
||||||
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
<div class="row-main">
|
||||||
</a>
|
<div class="icon"><i class="fa fa-fw fa-lg fa-cube"></i></div>
|
||||||
|
<span class="text">{{c.node.name}}</span>
|
||||||
|
</div>
|
||||||
|
<span class="row-sub-label">{{collectionCounts.get(c.node.id) || 0}}</span>
|
||||||
|
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="box list" *ngIf="showNoFolderCiphers">
|
||||||
<div class="box list" *ngIf="showNoFolderCiphers">
|
<div class="box-header">
|
||||||
<div class="box-header">
|
{{'noneFolder' | i18n}}
|
||||||
{{'noneFolder' | i18n}}
|
<div class="flex-right">{{noFolderCiphers.length}}</div>
|
||||||
<div class="flex-right">{{noFolderCiphers.length}}</div>
|
</div>
|
||||||
|
<div class="box-content">
|
||||||
|
<app-ciphers-list [ciphers]="noFolderCiphers" title="{{'viewItem' | i18n}}"
|
||||||
|
(onSelected)="selectCipher($event)" (launchEvent)="launchCipher($event)"></app-ciphers-list>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content">
|
<div class="box list" *ngIf="deletedCount">
|
||||||
<app-ciphers-list [ciphers]="noFolderCiphers" title="{{'viewItem' | i18n}}"
|
<div class="box-header">
|
||||||
(onSelected)="selectCipher($event)" (launchEvent)="launchCipher($event)"></app-ciphers-list>
|
{{'trash' | i18n}}
|
||||||
|
<span class="flex-right">{{deletedCount}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="box-content single-line">
|
||||||
|
<a href="#" class="box-content-row" appStopClick appBlurClick
|
||||||
|
(click)="selectTrash()">
|
||||||
|
<div class="row-main">
|
||||||
|
<div class="icon"><i class="fa fa-fw fa-lg fa-trash-o"></i></div>
|
||||||
|
<span class="text">{{'trash' | i18n}}</span>
|
||||||
|
</div>
|
||||||
|
<span class="row-sub-label">{{deletedCount}}</span>
|
||||||
|
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</cdk-virtual-scroll-viewport>
|
||||||
<div class="box list" *ngIf="deletedCount">
|
|
||||||
<div class="box-header">
|
|
||||||
{{'trash' | i18n}}
|
|
||||||
<span class="flex-right">{{deletedCount}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="box-content single-line">
|
|
||||||
<a href="#" class="box-content-row" appStopClick appBlurClick
|
|
||||||
(click)="selectTrash()">
|
|
||||||
<div class="row-main">
|
|
||||||
<div class="icon"><i class="fa fa-fw fa-lg fa-trash-o"></i></div>
|
|
||||||
<span class="text">{{'trash' | i18n}}</span>
|
|
||||||
</div>
|
|
||||||
<span class="row-sub-label">{{deletedCount}}</span>
|
|
||||||
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<ng-container *ngIf="showSearching()">
|
<ng-container *ngIf="showSearching()">
|
||||||
<div class="no-items" *ngIf="!ciphers || !ciphers.length">
|
<div class="no-items" *ngIf="!ciphers || !ciphers.length">
|
||||||
<p>{{'noItemsInList' | i18n}}</p>
|
<p>{{'noItemsInList' | i18n}}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="box list full-list" *ngIf="ciphers && ciphers.length > 0">
|
<cdk-virtual-scroll-viewport itemSize="46" *ngIf="ciphers && ciphers.length > 0">
|
||||||
<div class="box-content">
|
<div class="box list full-list">
|
||||||
<app-ciphers-list [ciphers]="ciphers" title="{{'viewItem' | i18n}}" (onSelected)="selectCipher($event)"
|
<div class="box-content">
|
||||||
(launchEvent)="launchCipher($event)"></app-ciphers-list>
|
<app-cipher-row *cdkVirtualFor="let c of ciphers" [cipher]="c" title="{{'viewItem' | i18n}}"
|
||||||
|
(onSelected)="selectCipher($event)" (launchEvent)="launchCipher($event)"></app-cipher-row>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</cdk-virtual-scroll-viewport>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</content>
|
</content>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user