Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-07 09:31:31 +01:00
Code Issues Projects Releases Wiki Activity

[CL-475] Use buttons instead of anchors for popup tab navigation (#11643)

Browse Source
This commit is contained in:
Victoria League 2024-10-29 11:10:29 -04:00 committed by GitHub
parent 021efa2c90
commit b391c291df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 31 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
View File

@ -3,30 +3,36 @@
</div> </div>
<footer class="tw-bg-background tw-border-0 tw-border-t tw-border-secondary-300 tw-border-solid"> <footer class="tw-bg-background tw-border-0 tw-border-t tw-border-secondary-300 tw-border-solid">
<div class="tw-max-w-screen-sm tw-mx-auto"> <div class="tw-max-w-screen-sm tw-mx-auto">
<div class="tw-flex tw-flex-1"> <nav>
<a <ul class="tw-flex tw-flex-1 tw-mb-0 tw-p-0">
*ngFor="let button of navButtons" <li *ngFor="let button of navButtons" class="tw-flex-1 tw-list-none">
class="tw-flex-1 tw-group tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-500" <button
[ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'" class="tw-w-full tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-bg-transparent tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-600"
[title]="button.label" [ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
[routerLink]="button.page" [title]="button.label"
routerLinkActive [routerLink]="button.page"
#rla="routerLinkActive" routerLinkActive
ariaCurrentWhenActive="page" #rla="routerLinkActive"
> ariaCurrentWhenActive="page"
<i *ngIf="!rla.isActive" class="bwi bwi-lg bwi-{{ button.iconKey }}" aria-hidden="true"></i> type="button"
<i role="link"
*ngIf="rla.isActive" >
class="bwi bwi-lg bwi-{{ button.iconKeyActive }}" <i
aria-hidden="true" *ngIf="!rla.isActive"
></i> class="bwi bwi-lg bwi-{{ button.iconKey }}"
<span aria-hidden="true"
class="tw-truncate tw-max-w-full" ></i>
[ngClass]="!rla.isActive && 'group-hover:tw-underline'" <i
> *ngIf="rla.isActive"
{{ button.label }} class="bwi bwi-lg bwi-{{ button.iconKeyActive }}"
</span> aria-hidden="true"
</a> ></i>
</div> <span class="tw-truncate tw-max-w-full">
{{ button.label }}
</span>
</button>
</li>
</ul>
</nav>
</div> </div>
</footer> </footer>