From ade01c9d078613f6ba176209192238ffe59ee684 Mon Sep 17 00:00:00 2001 From: Shane Melton Date: Thu, 22 Aug 2024 07:40:32 -0700 Subject: [PATCH] [PM-8380] Browser Refresh - Virtual scrolling (#10646) * [PM-8380] Add option to disable content padding for popup page * [PM-8380] Add cdkVirtualScroll to vault list items and fixed item heights * [PM-8380] Move item height constants to item component --- .../popup/layout/popup-page.component.html | 3 +- .../popup/layout/popup-page.component.ts | 5 +- .../vault-list-items-container.component.html | 87 ++++++++++--------- .../vault-list-items-container.component.ts | 7 ++ .../components/vault/vault-v2.component.html | 6 +- .../components/vault/vault-v2.component.ts | 2 + libs/components/src/item/index.ts | 2 + libs/components/src/item/item.component.ts | 14 +++ 8 files changed, 79 insertions(+), 47 deletions(-) diff --git a/apps/browser/src/platform/popup/layout/popup-page.component.html b/apps/browser/src/platform/popup/layout/popup-page.component.html index cef86a3849..8a7bedf088 100644 --- a/apps/browser/src/platform/popup/layout/popup-page.component.html +++ b/apps/browser/src/platform/popup/layout/popup-page.component.html @@ -17,7 +17,8 @@ [ngClass]="{ 'tw-invisible': loading }" >
diff --git a/apps/browser/src/platform/popup/layout/popup-page.component.ts b/apps/browser/src/platform/popup/layout/popup-page.component.ts index 50db3e370f..7b4665040f 100644 --- a/apps/browser/src/platform/popup/layout/popup-page.component.ts +++ b/apps/browser/src/platform/popup/layout/popup-page.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from "@angular/common"; -import { Component, Input, inject, signal } from "@angular/core"; +import { booleanAttribute, Component, inject, Input, signal } from "@angular/core"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; @@ -17,6 +17,9 @@ export class PopupPageComponent { @Input() loading = false; + @Input({ transform: booleanAttribute }) + disablePadding = false; + protected scrolled = signal(false); isScrolled = this.scrolled.asReadonly(); diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html index 6ac793e4d4..e24723d583 100644 --- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html +++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html @@ -17,47 +17,50 @@ {{ description }} - - - - {{ cipher.name }} - - - {{ cipher.subTitle }} - - - - - - - - - + + + + + {{ cipher.name }} + + + {{ cipher.subTitle }} + + + + + + + + + + diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts index 0f5287af34..615d37cb60 100644 --- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts +++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts @@ -1,3 +1,4 @@ +import { ScrollingModule } from "@angular/cdk/scrolling"; import { CommonModule } from "@angular/common"; import { booleanAttribute, Component, EventEmitter, Input, Output } from "@angular/core"; import { Router, RouterLink } from "@angular/router"; @@ -6,6 +7,8 @@ import { JslibModule } from "@bitwarden/angular/jslib.module"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { BadgeModule, + BitItemHeight, + BitItemHeightClass, ButtonModule, IconButtonModule, ItemModule, @@ -35,12 +38,16 @@ import { ItemMoreOptionsComponent } from "../item-more-options/item-more-options ItemCopyActionsComponent, ItemMoreOptionsComponent, OrgIconDirective, + ScrollingModule, ], selector: "app-vault-list-items-container", templateUrl: "vault-list-items-container.component.html", standalone: true, }) export class VaultListItemsContainerComponent { + protected ItemHeightClass = BitItemHeightClass; + protected ItemHeight = BitItemHeight; + /** * The list of ciphers to display. */ diff --git a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html index 3279d28e93..e402e13143 100644 --- a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html +++ b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html @@ -1,4 +1,4 @@ - + @@ -54,7 +54,7 @@ - +
- +
diff --git a/apps/browser/src/vault/popup/components/vault/vault-v2.component.ts b/apps/browser/src/vault/popup/components/vault/vault-v2.component.ts index a2b778984d..c088626487 100644 --- a/apps/browser/src/vault/popup/components/vault/vault-v2.component.ts +++ b/apps/browser/src/vault/popup/components/vault/vault-v2.component.ts @@ -1,3 +1,4 @@ +import { ScrollingModule } from "@angular/cdk/scrolling"; import { CommonModule } from "@angular/common"; import { Component, OnDestroy, OnInit } from "@angular/core"; import { takeUntilDestroyed } from "@angular/core/rxjs-interop"; @@ -51,6 +52,7 @@ enum VaultState { RouterLink, VaultV2SearchComponent, NewItemDropdownV2Component, + ScrollingModule, ], providers: [VaultUiOnboardingService], }) diff --git a/libs/components/src/item/index.ts b/libs/components/src/item/index.ts index 56896cdc3c..3d65fdb8e0 100644 --- a/libs/components/src/item/index.ts +++ b/libs/components/src/item/index.ts @@ -1 +1,3 @@ export * from "./item.module"; + +export { BitItemHeight, BitItemHeightClass } from "./item.component"; diff --git a/libs/components/src/item/item.component.ts b/libs/components/src/item/item.component.ts index 4b7b57fa9f..58545a49b5 100644 --- a/libs/components/src/item/item.component.ts +++ b/libs/components/src/item/item.component.ts @@ -5,6 +5,20 @@ import { A11yRowDirective } from "../a11y/a11y-row.directive"; import { ItemActionComponent } from "./item-action.component"; +/** + * The class used to set the height of a bit item's inner content. + */ +export const BitItemHeightClass = `tw-h-[52px]`; + +/** + * The height of a bit item in pixels. Includes any margin, padding, or border. Used by the virtual scroll + * to estimate how many items can be displayed at once and how large the virtual container should be. + * Needs to be updated if the item height or spacing changes. + * + * 52px + 5.25px bottom margin + 1px border = 58.25px + */ +export const BitItemHeight = 58.25; // + @Component({ selector: "bit-item", standalone: true,