From 384993a8da51647c5cdd699721dff4669c385a0d Mon Sep 17 00:00:00 2001 From: William Martin Date: Wed, 13 Nov 2024 09:11:51 -0500 Subject: [PATCH] move item height info to vault; make item height dynamic based off of compact mode signal --- .../vault-list-items-container.component.html | 2 +- .../vault-list-items-container.component.ts | 34 ++++++++++++++++--- libs/components/src/item/item.component.ts | 14 -------- libs/components/src/item/item.stories.ts | 8 ++--- 4 files changed, 33 insertions(+), 25 deletions(-) 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 6be64b17d77..cf2a0ad0d33 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 @@ -20,7 +20,7 @@ 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 653255ac78d..1f3de5ecff1 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,6 +1,14 @@ import { ScrollingModule } from "@angular/cdk/scrolling"; import { CommonModule } from "@angular/common"; -import { booleanAttribute, Component, EventEmitter, Input, Output } from "@angular/core"; +import { + booleanAttribute, + Component, + computed, + EventEmitter, + inject, + Input, + Output, +} from "@angular/core"; import { Router, RouterLink } from "@angular/router"; import { JslibModule } from "@bitwarden/angular/jslib.module"; @@ -9,9 +17,8 @@ import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.servi import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view"; import { BadgeModule, - BitItemHeight, - BitItemHeightClass, ButtonModule, + DesignSystemService, IconButtonModule, ItemModule, SectionComponent, @@ -49,8 +56,25 @@ import { ItemMoreOptionsComponent } from "../item-more-options/item-more-options standalone: true, }) export class VaultListItemsContainerComponent { - protected ItemHeightClass = BitItemHeightClass; - protected ItemHeight = BitItemHeight; + private designSystemService = inject(DesignSystemService); + + /** + * The class used to set the height of a bit item's inner content. + */ + protected readonly ItemHeightClass = `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. + * + * Default: 52px + 1px border + 6px bottom margin = 59px + * + * Compact mode: 52px + 1px border = 53px + */ + protected readonly ItemHeight = computed(() => + this.designSystemService.compactMode() ? 53 : 59, + ); /** * Timeout used to add a small delay when selecting a cipher to allow for double click to launch diff --git a/libs/components/src/item/item.component.ts b/libs/components/src/item/item.component.ts index de35a100283..0e81e34e6ec 100644 --- a/libs/components/src/item/item.component.ts +++ b/libs/components/src/item/item.component.ts @@ -11,20 +11,6 @@ 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 + 6px bottom margin + 1px border = 53px - */ -export const BitItemHeight = 59; - @Component({ selector: "bit-item", standalone: true, diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts index b681d073484..11cc70bd86c 100644 --- a/libs/components/src/item/item.stories.ts +++ b/libs/components/src/item/item.stories.ts @@ -16,7 +16,7 @@ import { I18nMockService } from "../utils/i18n-mock.service"; import { ItemActionComponent } from "./item-action.component"; import { ItemContentComponent } from "./item-content.component"; import { ItemGroupComponent } from "./item-group.component"; -import { ItemComponent, BitItemHeight, BitItemHeightClass } from "./item.component"; +import { ItemComponent } from "./item.component"; export default { title: "Component Library/Item", @@ -363,14 +363,12 @@ export const VirtualScrolling: Story = { render: (_args) => ({ props: { data: Array.from(Array(100000).keys()), - itemSize: BitItemHeight, - itemClass: BitItemHeightClass, }, template: /*html*/ ` - + -