Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-03-11 13:30:39 +01:00
Code Issues Projects Releases Wiki Activity

[SM-612] Highlighting selected product properly (#5065)

Browse Source 
* Highlighting selected product properly

* suggested changes by WIll
This commit is contained in:
cd-bitwarden 2023-04-11 14:59:20 -04:00 committed by GitHub
parent 2722198191
commit 3300a4cc15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web/src/app/layouts/product-switcher/product-switcher-content.component.html
View File

@ -12,8 +12,12 @@
<a <a
*ngFor="let product of products.bento" *ngFor="let product of products.bento"
[routerLink]="product.appRoute" [routerLink]="product.appRoute"
[ngClass]="
product.isActive
? 'tw-bg-primary-500 tw-font-bold !tw-text-contrast tw-ring-offset-2 hover:tw-bg-primary-500'
: ''
"
class="tw-group tw-flex tw-h-24 tw-w-28 tw-flex-col tw-items-center tw-justify-center tw-rounded tw-p-1 tw-text-primary-500 tw-outline-none hover:tw-bg-background-alt hover:tw-text-primary-700 hover:tw-no-underline focus-visible:!tw-ring-2 focus-visible:!tw-ring-primary-700" class="tw-group tw-flex tw-h-24 tw-w-28 tw-flex-col tw-items-center tw-justify-center tw-rounded tw-p-1 tw-text-primary-500 tw-outline-none hover:tw-bg-background-alt hover:tw-text-primary-700 hover:tw-no-underline focus-visible:!tw-ring-2 focus-visible:!tw-ring-primary-700"
routerLinkActive="tw-font-bold tw-bg-primary-500 hover:tw-bg-primary-500 !tw-text-contrast tw-ring-offset-2"
ariaCurrentWhenActive="page" ariaCurrentWhenActive="page"
> >
<i class="bwi {{ product.icon }} tw-text-4xl !tw-m-0 !tw-mb-1"></i> <i class="bwi {{ product.icon }} tw-text-4xl !tw-m-0 !tw-mb-1"></i>

15
apps/web/src/app/layouts/product-switcher/product-switcher-content.component.ts
View File

@ -1,5 +1,5 @@
import { Component, ViewChild } from "@angular/core"; import { Component, ViewChild } from "@angular/core";
import { ActivatedRoute } from "@angular/router"; import { ActivatedRoute, Router } from "@angular/router";
import { combineLatest, map } from "rxjs"; import { combineLatest, map } from "rxjs";
import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
@ -25,6 +25,11 @@ type ProductSwitcherItem = {
* Route for items in the `otherProducts$` section * Route for items in the `otherProducts$` section
*/ */
marketingRoute?: string | any[]; marketingRoute?: string | any[];
/**
* Used to apply css styles to show when a button is selected
*/
isActive?: boolean;
}; };
@Component({ @Component({
@ -56,12 +61,14 @@ export class ProductSwitcherContentComponent {
icon: "bwi-lock", icon: "bwi-lock",
appRoute: "/vault", appRoute: "/vault",
marketingRoute: "https://bitwarden.com/products/personal/", marketingRoute: "https://bitwarden.com/products/personal/",
isActive: !this.router.url.includes("/sm/"),
}, },
sm: { sm: {
name: "Secrets Manager Beta", name: "Secrets Manager Beta",
icon: "bwi-cli", icon: "bwi-cli",
appRoute: ["/sm", smOrg?.id], appRoute: ["/sm", smOrg?.id],
marketingRoute: "https://bitwarden.com/products/secrets-manager/", marketingRoute: "https://bitwarden.com/products/secrets-manager/",
isActive: this.router.url.includes("/sm/"),
}, },
orgs: { orgs: {
name: "Organizations", name: "Organizations",
@ -90,5 +97,9 @@ export class ProductSwitcherContentComponent {
}) })
); );
constructor(private organizationService: OrganizationService, private route: ActivatedRoute) {} constructor(
private organizationService: OrganizationService,
private route: ActivatedRoute,
private router: Router
) {}
} }