From d71219caa9a6c7598b18efd41041bbd6ce8b32b6 Mon Sep 17 00:00:00 2001
From: Thomas Rittson <trittson@bitwarden.com>
Date: Thu, 3 Jun 2021 08:50:36 +1000
Subject: [PATCH] Remove virtualScroll for favorites list

---
 src/popup/vault/groupings.component.html | 222 +++++++++++------------
 1 file changed, 110 insertions(+), 112 deletions(-)

diff --git a/src/popup/vault/groupings.component.html b/src/popup/vault/groupings.component.html
index d80377bbe5..ade7ba5593 100644
--- a/src/popup/vault/groupings.component.html
+++ b/src/popup/vault/groupings.component.html
@@ -23,125 +23,123 @@
         </ng-container>
     </div>
     <ng-container *ngIf="ciphers && ciphers.length && !showSearching()">
-        <cdk-virtual-scroll-viewport itemSize="46">
-            <div class="box list" *ngIf="favoriteCiphers">
-                <div class="box-header">
-                    {{'favorites' | i18n}}
-                    <span class="flex-right">{{favoriteCiphers.length}}</span>
-                </div>
-                <div class="box-content">
-                    <app-cipher-row *cdkVirtualFor="let favoriteCipher of favoriteCiphers" [cipher]="favoriteCipher"
-                        title="{{'viewItem' | i18n}}" (onSelected)="selectCipher($event)"
-                        (launchEvent)="launchCipher($event)"></app-cipher-row>
-                </div>
+        <div class="box list" *ngIf="favoriteCiphers">
+            <div class="box-header">
+                {{'favorites' | i18n}}
+                <span class="flex-right">{{favoriteCiphers.length}}</span>
             </div>
-            <div class="box list">
-                <div class="box-header">
-                    {{'types' | i18n}}
-                    <span class="flex-right">4</span>
-                </div>
-                <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 class="box-content">
+                <app-cipher-row *ngFor="let favoriteCipher of favoriteCiphers" [cipher]="favoriteCipher"
+                    title="{{'viewItem' | i18n}}" (onSelected)="selectCipher($event)"
+                    (launchEvent)="launchCipher($event)"></app-cipher-row>
             </div>
-            <div class="box list" *ngIf="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>
-                            <span class="text">{{f.node.name}}</span>
+        </div>
+        <div class="box list">
+            <div class="box-header">
+                {{'types' | i18n}}
+                <span class="flex-right">4</span>
+            </div>
+            <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?.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>
-                        <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>
+                        <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 class="box list" *ngIf="nestedCollections && nestedCollections.length">
-                <div class="box-header">
-                    {{'collections' | i18n}}
-                    <span class="flex-right">{{nestedCollections.length}}</span>
-                </div>
-                <div class="box-content single-line">
-                    <a *ngFor="let nestedCollection of nestedCollections" href="#" class="box-content-row"
-                        appStopClick appBlurClick (click)="selectCollection(nestedCollection.node)">
-                        <div class="row-main">
-                            <div class="icon"><i class="fa fa-fw fa-lg fa-cube"></i></div>
-                            <span class="text">{{nestedCollection.node.name}}</span>
-                        </div>
-                        <span class="row-sub-label">{{collectionCounts.get(nestedCollection.node.id) || 0}}</span>
-                        <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
-                    </a>
-                </div>
+        </div>
+        <div class="box list" *ngIf="nestedCollections && nestedCollections.length">
+            <div class="box-header">
+                {{'collections' | i18n}}
+                <span class="flex-right">{{nestedCollections.length}}</span>
             </div>
-            <div class="box list" *ngIf="showNoFolderCiphers">
-                <div class="box-header">
-                    {{'noneFolder' | i18n}}
-                    <div class="flex-right">{{noFolderCiphers.length}}</div>
-                </div>
-                <div class="box-content">
-                    <app-cipher-row *ngFor="let noFolderCipher of noFolderCiphers" [cipher]="noFolderCipher"
-                        title="{{'viewItem' | i18n}}" (onSelected)="selectCipher($event)"
-                        (launchEvent)="launchCipher($event)"></app-cipher-row>
-                </div>
+            <div class="box-content single-line">
+                <a *ngFor="let nestedCollection of nestedCollections" href="#" class="box-content-row"
+                    appStopClick appBlurClick (click)="selectCollection(nestedCollection.node)">
+                    <div class="row-main">
+                        <div class="icon"><i class="fa fa-fw fa-lg fa-cube"></i></div>
+                        <span class="text">{{nestedCollection.node.name}}</span>
+                    </div>
+                    <span class="row-sub-label">{{collectionCounts.get(nestedCollection.node.id) || 0}}</span>
+                    <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
+                </a>
             </div>
-            <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>
+        <div class="box list" *ngIf="showNoFolderCiphers">
+            <div class="box-header">
+                {{'noneFolder' | i18n}}
+                <div class="flex-right">{{noFolderCiphers.length}}</div>
             </div>
-        </cdk-virtual-scroll-viewport>
+            <div class="box-content">
+                <app-cipher-row *ngFor="let noFolderCipher of noFolderCiphers" [cipher]="noFolderCipher"
+                    title="{{'viewItem' | i18n}}" (onSelected)="selectCipher($event)"
+                    (launchEvent)="launchCipher($event)"></app-cipher-row>
+            </div>
+        </div>
+        <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 *ngIf="showSearching()">
         <div class="no-items" *ngIf="!ciphers || !ciphers.length">