From 0e0c44b90b553b1e5dbca992769af9d32321808e Mon Sep 17 00:00:00 2001 From: Jason Ng Date: Tue, 23 Jul 2024 13:29:46 -0400 Subject: [PATCH] [PM-9638] Browser V2 Item Details Defects (#10124) * Item Details Refactored. Created OrgIcon directive, Added screen reader logic, removed excess styling. --- apps/browser/src/_locales/en/messages.json | 3 + .../vault-list-items-container.component.html | 5 +- .../vault-list-items-container.component.ts | 2 + .../vault/popup/views/popup-cipher.view.ts | 18 ----- .../item-details-v2.component.html | 74 +++++++++++++------ .../item-details/item-details-v2.component.ts | 3 + .../src/components/org-icon.directive.ts | 50 +++++++++++++ libs/vault/src/index.ts | 1 + 8 files changed, 115 insertions(+), 41 deletions(-) create mode 100644 libs/vault/src/components/org-icon.directive.ts diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index 6dd5bf4aa8..4c149676fe 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/apps/browser/src/_locales/en/messages.json @@ -3850,5 +3850,8 @@ "example": "3" } } + }, + "itemLocation": { + "message": "Item Location" } } 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 fbe1d60b44..4da4393a49 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 @@ -27,9 +27,10 @@ {{ 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 b6ba09fb31..80ef26a322 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 @@ -13,6 +13,7 @@ import { SectionHeaderComponent, TypographyModule, } from "@bitwarden/components"; +import { OrgIconDirective } from "@bitwarden/vault"; import { VaultPopupAutofillService } from "../../../services/vault-popup-autofill.service"; import { PopupCipherView } from "../../../views/popup-cipher.view"; @@ -33,6 +34,7 @@ import { ItemMoreOptionsComponent } from "../item-more-options/item-more-options RouterLink, ItemCopyActionsComponent, ItemMoreOptionsComponent, + OrgIconDirective, ], selector: "app-vault-list-items-container", templateUrl: "vault-list-items-container.component.html", diff --git a/apps/browser/src/vault/popup/views/popup-cipher.view.ts b/apps/browser/src/vault/popup/views/popup-cipher.view.ts index 5bb1905c59..de371ca65d 100644 --- a/apps/browser/src/vault/popup/views/popup-cipher.view.ts +++ b/apps/browser/src/vault/popup/views/popup-cipher.view.ts @@ -1,5 +1,4 @@ import { Organization } from "@bitwarden/common/admin-console/models/domain/organization"; -import { ProductTierType } from "@bitwarden/common/billing/enums"; import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view"; import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view"; @@ -21,21 +20,4 @@ export class PopupCipherView extends CipherView { this.collections = collections; this.organization = organization; } - - /** - * Get the bwi icon for the cipher according to the organization type. - */ - get orgIcon(): "bwi-family" | "bwi-business" | null { - switch (this.organization?.productTierType) { - case ProductTierType.Free: - case ProductTierType.Families: - return "bwi-family"; - case ProductTierType.Teams: - case ProductTierType.Enterprise: - case ProductTierType.TeamsStarter: - return "bwi-business"; - default: - return null; - } - } } diff --git a/libs/vault/src/cipher-view/item-details/item-details-v2.component.html b/libs/vault/src/cipher-view/item-details/item-details-v2.component.html index 6941c25c2e..d84c5baa71 100644 --- a/libs/vault/src/cipher-view/item-details/item-details-v2.component.html +++ b/libs/vault/src/cipher-view/item-details/item-details-v2.component.html @@ -3,36 +3,68 @@

{{ "itemDetails" | i18n }}

-
+
-
-

- {{ "ownerYou" | i18n }} -

-

+

  • - {{ organization.name }} -

    -
      -

      - {{ collection.name }} -

      -
    -

    - {{ folder.name }} -

    -
    • + + + +
  • +
      +
    • + + +
      • +
    +
    • +
  • + + +
    • + diff --git a/libs/vault/src/cipher-view/item-details/item-details-v2.component.ts b/libs/vault/src/cipher-view/item-details/item-details-v2.component.ts index f4f60dc6f5..0694283b04 100644 --- a/libs/vault/src/cipher-view/item-details/item-details-v2.component.ts +++ b/libs/vault/src/cipher-view/item-details/item-details-v2.component.ts @@ -13,6 +13,8 @@ import { TypographyModule, } from "@bitwarden/components"; +import { OrgIconDirective } from "../../components/org-icon.directive"; + @Component({ selector: "app-item-details-v2", templateUrl: "item-details-v2.component.html", @@ -24,6 +26,7 @@ import { SectionComponent, SectionHeaderComponent, TypographyModule, + OrgIconDirective, ], }) export class ItemDetailsV2Component { diff --git a/libs/vault/src/components/org-icon.directive.ts b/libs/vault/src/components/org-icon.directive.ts new file mode 100644 index 0000000000..1f0af29c83 --- /dev/null +++ b/libs/vault/src/components/org-icon.directive.ts @@ -0,0 +1,50 @@ +import { Directive, ElementRef, HostBinding, Input, Renderer2 } from "@angular/core"; + +import { ProductTierType } from "@bitwarden/common/billing/enums"; + +export type OrgIconSize = "default" | "small" | "large"; + +@Directive({ + standalone: true, + selector: "[appOrgIcon]", +}) +export class OrgIconDirective { + @Input({ required: true }) tierType: ProductTierType; + @Input() size?: OrgIconSize = "default"; + + constructor( + private el: ElementRef, + private renderer: Renderer2, + ) { + this.renderer.setAttribute(this.el.nativeElement, "aria-hidden", "true"); + } + + get iconSize(): "bwi-sm" | "bwi-lg" | "" { + switch (this.size) { + case "small": + return "bwi-sm"; + case "large": + return "bwi-lg"; + default: + return ""; + } + } + + get orgIcon(): string { + switch (this.tierType) { + case ProductTierType.Free: + case ProductTierType.Families: + return "bwi-family"; + case ProductTierType.Teams: + case ProductTierType.Enterprise: + case ProductTierType.TeamsStarter: + return "bwi-business"; + default: + return ""; + } + } + + @HostBinding("class") get classList() { + return ["bwi", this.iconSize, this.orgIcon]; + } +} diff --git a/libs/vault/src/index.ts b/libs/vault/src/index.ts index b48d359b90..e9417495a7 100644 --- a/libs/vault/src/index.ts +++ b/libs/vault/src/index.ts @@ -1,6 +1,7 @@ export { PasswordRepromptService } from "./services/password-reprompt.service"; export { CopyCipherFieldService, CopyAction } from "./services/copy-cipher-field.service"; export { CopyCipherFieldDirective } from "./components/copy-cipher-field.directive"; +export { OrgIconDirective } from "./components/org-icon.directive"; export * from "./cipher-view"; export * from "./cipher-form";