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

[CL-499][PM-14020] compact mode (#11796)

Browse Source
This commit is contained in:
Will Martin 2024-11-18 16:35:49 -05:00 committed by GitHub
parent 3521c54672
commit a07b072196
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
28 changed files with 392 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/browser/src/_locales/en/messages.json
View File

@ -4843,5 +4843,11 @@
},
"generatedPassword": {
"message": "Generated password"
},
"compactMode": {
"message": "Compact mode"
},
"beta": {
"message": "Beta"
}
}

31
apps/browser/src/platform/popup/layout/popup-compact-mode.service.ts Normal file
View File

@ -0,0 +1,31 @@
import { inject, Injectable } from "@angular/core";
import { map, Observable } from "rxjs";
import { GlobalStateProvider, KeyDefinition, THEMING_DISK } from "@bitwarden/common/platform/state";
import { CompactModeService } from "@bitwarden/components";
const COMPACT_MODE = new KeyDefinition<boolean>(THEMING_DISK, "compactMode", {
deserializer: (s) => s,
});
/**
* Service to persist Compact Mode to state / user settings.
**/
@Injectable({ providedIn: "root" })
export class PopupCompactModeService implements CompactModeService {
private state = inject(GlobalStateProvider).get(COMPACT_MODE);
enabled$: Observable<boolean> = this.state.state$.pipe(map((state) => state ?? false));
init() {
this.enabled$.subscribe((enabled) => {
enabled
? document.body.classList.add("tw-bit-compact")
: document.body.classList.remove("tw-bit-compact");
});
}
async setEnabled(enabled: boolean) {
await this.state.update(() => enabled);
}
}

4
apps/browser/src/platform/popup/layout/popup-footer.component.html
View File

@ -1,7 +1,7 @@
<footer
class="tw-p-4 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-bg-background"
class="tw-p-3 bit-compact:tw-p-2 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-bg-background"
>
<div class="tw-max-w-screen-sm tw-mx-auto tw-flex tw-justify-between tw-w-full">
<div class="tw-max-w-screen-sm tw-mx-auto tw-flex tw-justify-between tw-w-full tw-items-center">
<div class="tw-flex tw-justify-start tw-gap-2">
<ng-content></ng-content>
</div>

3
apps/browser/src/platform/popup/layout/popup-header.component.html
View File

@ -1,5 +1,5 @@
<header
class="tw-px-4 tw-py-3 tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid"
class="tw-p-3 bit-compact:tw-p-2 tw-pl-4 bit-compact:tw-pl-3 tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid"
[ngClass]="{
'tw-bg-background-alt tw-border-transparent':
this.background === 'alt' && !pageContentScrolled(),
@ -10,6 +10,7 @@
<div class="tw-max-w-screen-sm tw-mx-auto tw-flex tw-justify-between tw-w-full">
<div class="tw-inline-flex tw-items-center tw-gap-2 tw-h-9">
<button
class="-tw-ml-1"
bitIconButton="bwi-back"
type="button"
*ngIf="showBackButton"

46
apps/browser/src/platform/popup/layout/popup-layout.stories.ts
View File

@ -117,11 +117,7 @@ class MockCurrentAccountComponent {}
@Component({
selector: "mock-search",
template: `
<div class="tw-p-4">
<bit-search placeholder="Search"> </bit-search>
</div>
`,
template: ` <bit-search placeholder="Search"> </bit-search> `,
standalone: true,
imports: [SearchModule],
})
@ -410,6 +406,46 @@ export const PopupPageWithFooter: Story = {
}),
};
export const CompactMode: Story = {
render: (args) => ({
props: args,
template: /* HTML */ `
<div class="tw-flex tw-gap-6 tw-text-main">
<div id="regular-example">
<p>Relaxed</p>
<p class="example-label"></p>
<extension-container>
<mock-vault-subpage></mock-vault-subpage>
</extension-container>
</div>
<div id="compact-example" class="tw-bit-compact">
<p>Compact</p>
<p class="example-label"></p>
<extension-container>
<mock-vault-subpage></mock-vault-subpage>
</extension-container>
</div>
</div>
`,
}),
play: async (context) => {
const canvasEl = context.canvasElement;
const updateLabel = (containerId: string) => {
const compact = canvasEl.querySelector(
`#${containerId} [data-testid=popup-layout-scroll-region]`,
);
const label = canvasEl.querySelector(`#${containerId} .example-label`);
const percentVisible =
100 -
Math.round((100 * (compact.scrollHeight - compact.clientHeight)) / compact.scrollHeight);
label.textContent = `${percentVisible}% above the fold`;
};
updateLabel("compact-example");
updateLabel("regular-example");
},
};
export const PoppedOut: Story = {
render: (args) => ({
props: args,

7
apps/browser/src/platform/popup/layout/popup-page.component.html
View File

@ -2,9 +2,9 @@
<main class="tw-flex-1 tw-overflow-hidden tw-flex tw-flex-col tw-relative tw-bg-background-alt">
<div
#nonScrollable
class="tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid"
class="tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid tw-p-3 bit-compact:tw-p-2"
[ngClass]="{
'tw-invisible': loading || nonScrollable.childElementCount === 0,
'tw-invisible !tw-p-0': loading || nonScrollable.childElementCount === 0,
'tw-border-secondary-300': scrolled(),
'tw-border-transparent': !scrolled(),
}"
@ -13,12 +13,13 @@
</div>
<div
class="tw-max-w-screen-sm tw-mx-auto tw-overflow-y-auto tw-flex tw-flex-col tw-w-full tw-h-full tw-styled-scrollbar"
data-testid="popup-layout-scroll-region"
(scroll)="handleScroll($event)"
[ngClass]="{ 'tw-invisible': loading }"
>
<div
class="tw-max-w-screen-sm tw-mx-auto tw-flex-1 tw-flex tw-flex-col tw-h-full tw-w-full"
[ngClass]="{ 'tw-p-3': !disablePadding }"
[ngClass]="{ 'tw-p-3 bit-compact:tw-p-2': !disablePadding }"
>
<ng-content></ng-content>
</div>

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

@ -7,7 +7,7 @@
<ul class="tw-flex tw-flex-1 tw-mb-0 tw-p-0">
<li *ngFor="let button of navButtons" class="tw-flex-1 tw-list-none">
<button
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"
class="tw-w-full tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 bit-compact:tw-pb-1 tw-pt-3 bit-compact:tw-pt-2 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"
[ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
[title]="button.label"
[routerLink]="button.page"

4
apps/browser/src/popup/app.component.ts
View File

@ -24,6 +24,7 @@ import {
} from "@bitwarden/components";
import { flagEnabled } from "../platform/flags";
import { PopupCompactModeService } from "../platform/popup/layout/popup-compact-mode.service";
import { PopupViewCacheService } from "../platform/popup/view-cache/popup-view-cache.service";
import { initPopupClosedListener } from "../platform/services/popup-view-cache-background.service";
import { BrowserSendStateService } from "../tools/popup/services/browser-send-state.service";
@ -42,6 +43,7 @@ import { DesktopSyncVerificationDialogComponent } from "./components/desktop-syn
})
export class AppComponent implements OnInit, OnDestroy {
private viewCacheService = inject(PopupViewCacheService);
private compactModeService = inject(PopupCompactModeService);
private lastActivity: Date;
private activeUserId: UserId;
@ -96,6 +98,8 @@ export class AppComponent implements OnInit, OnDestroy {
initPopupClosedListener();
await this.viewCacheService.init();
this.compactModeService.init();
// Component states must not persist between closing and reopening the popup, otherwise they become dead objects
// Clear them aggressively to make sure this doesn't occur
await this.clearComponentStates();

8
apps/browser/src/popup/services/services.module.ts
View File

@ -103,7 +103,7 @@ import {
} from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
import { TotpService as TotpServiceAbstraction } from "@bitwarden/common/vault/abstractions/totp.service";
import { TotpService } from "@bitwarden/common/vault/services/totp.service";
import { DialogService, ToastService } from "@bitwarden/components";
import { CompactModeService, DialogService, ToastService } from "@bitwarden/components";
import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
import { BiometricStateService, BiometricsService, KeyService } from "@bitwarden/key-management";
import { PasswordRepromptService } from "@bitwarden/vault";
@ -123,6 +123,7 @@ import { ChromeMessageSender } from "../../platform/messaging/chrome-message.sen
/* eslint-enable no-restricted-imports */
import { OffscreenDocumentService } from "../../platform/offscreen-document/abstractions/offscreen-document";
import { DefaultOffscreenDocumentService } from "../../platform/offscreen-document/offscreen-document.service";
import { PopupCompactModeService } from "../../platform/popup/layout/popup-compact-mode.service";
import { BrowserFileDownloadService } from "../../platform/popup/services/browser-file-download.service";
import { PopupViewCacheService } from "../../platform/popup/view-cache/popup-view-cache.service";
import { ScriptInjectorService } from "../../platform/services/abstractions/script-injector.service";
@ -581,6 +582,11 @@ const safeProviders: SafeProvider[] = [
useClass: ExtensionAnonLayoutWrapperDataService,
deps: [],
}),
safeProvider({
provide: CompactModeService,
useExisting: PopupCompactModeService,
deps: [],
}),
];
@NgModule({

4
apps/browser/src/tools/popup/send-v2/send-v2.component.html
View File

@ -6,7 +6,7 @@
<app-current-account></app-current-account>
</ng-container>
</popup-header>
<div slot="above-scroll-area" class="tw-p-4" *ngIf="!(sendsLoading$ | async)">
<ng-container slot="above-scroll-area" *ngIf="!(sendsLoading$ | async)">
<bit-callout *ngIf="sendsDisabled" [title]="'sendDisabled' | i18n">
{{ "sendDisabledWarning" | i18n }}
</bit-callout>
@ -14,7 +14,7 @@
<tools-send-search></tools-send-search>
<app-send-list-filters></app-send-list-filters>
</ng-container>
</div>
</ng-container>
<div
*ngIf="listState === sendState.Empty"

4
apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
View File

@ -20,7 +20,7 @@
</div>
<bit-item-group>
<cdk-virtual-scroll-viewport
[itemSize]="ItemHeight"
[itemSize]="itemHeight$ | async"
class="tw-overflow-visible [&>.cdk-virtual-scroll-content-wrapper]:[contain:layout_style]"
>
<bit-item *cdkVirtualFor="let cipher of ciphers">
@ -30,7 +30,7 @@
(click)="onViewCipher(cipher)"
(dblclick)="launchCipher(cipher)"
[appA11yTitle]="'viewItemTitle' | i18n: cipher.name"
class="{{ ItemHeightClass }}"
class="{{ itemHeightClass }}"
>
<app-vault-icon slot="start" [cipher]="cipher"></app-vault-icon>
<span data-testid="item-name">{{ cipher.name }}</span>

27
apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
View File

@ -1,7 +1,8 @@
import { ScrollingModule } from "@angular/cdk/scrolling";
import { CommonModule } from "@angular/common";
import { booleanAttribute, Component, EventEmitter, Input, Output } from "@angular/core";
import { booleanAttribute, Component, EventEmitter, inject, Input, Output } from "@angular/core";
import { Router, RouterLink } from "@angular/router";
import { map } from "rxjs";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@ -9,9 +10,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,
CompactModeService,
IconButtonModule,
ItemModule,
SectionComponent,
@ -49,8 +49,25 @@ import { ItemMoreOptionsComponent } from "../item-more-options/item-more-options
standalone: true,
})
export class VaultListItemsContainerComponent {
protected ItemHeightClass = BitItemHeightClass;
protected ItemHeight = BitItemHeight;
private compactModeService = inject(CompactModeService);
/**
* 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$ = this.compactModeService.enabled$.pipe(
map((enabled) => (enabled ? 53 : 59)),
);
/**
* Timeout used to add a small delay when selecting a cipher to allow for double click to launch

7
apps/browser/src/vault/popup/components/vault/vault-v2.component.html
View File

@ -23,14 +23,13 @@
</div>
<!-- Show search & filters outside of the scroll area of the page -->
<div
<ng-container
slot="above-scroll-area"
class="tw-p-4"
*ngIf="vaultState !== VaultStateEnum.Empty && !(loading$ | async)"
>
<app-vault-v2-search> </app-vault-v2-search>
<app-vault-list-filters></app-vault-list-filters>
</div>
</ng-container>
<ng-container *ngIf="vaultState !== VaultStateEnum.Empty">
<div
@ -61,7 +60,7 @@
<div
*ngIf="vaultState === null"
cdkVirtualScrollingElement
class="tw-h-full tw-p-3 tw-styled-scrollbar"
class="tw-h-full tw-p-3 bit-compact:tw-p-2 tw-styled-scrollbar"
>
<app-autofill-vault-list-items></app-autofill-vault-list-items>
<app-vault-list-items-container

8
apps/browser/src/vault/popup/settings/appearance-v2.component.html
View File

@ -18,6 +18,14 @@
</bit-select>
</bit-form-field>
<bit-form-control>
<input bitCheckbox formControlName="enableCompactMode" type="checkbox" />
<bit-label
>{{ "compactMode" | i18n }}
<span bitBadge variant="warning">{{ "beta" | i18n }}</span></bit-label
>
</bit-form-control>
<bit-form-control>
<input bitCheckbox formControlName="enableBadgeCounter" type="checkbox" />
<bit-label>{{ "showNumberOfAutofillSuggestions" | i18n }}</bit-label>

8
apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts
View File

@ -13,6 +13,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
import { ThemeType } from "@bitwarden/common/platform/enums";
import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
import { PopupCompactModeService } from "../../../platform/popup/layout/popup-compact-mode.service";
import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";
@ -43,10 +44,12 @@ describe("AppearanceV2Component", () => {
const enableBadgeCounter$ = new BehaviorSubject<boolean>(true);
const selectedTheme$ = new BehaviorSubject<ThemeType>(ThemeType.Nord);
const enableRoutingAnimation$ = new BehaviorSubject<boolean>(true);
const enableCompactMode$ = new BehaviorSubject<boolean>(false);
const setSelectedTheme = jest.fn().mockResolvedValue(undefined);
const setShowFavicons = jest.fn().mockResolvedValue(undefined);
const setEnableBadgeCounter = jest.fn().mockResolvedValue(undefined);
const setEnableRoutingAnimation = jest.fn().mockResolvedValue(undefined);
const setEnableCompactMode = jest.fn().mockResolvedValue(undefined);
beforeEach(async () => {
setSelectedTheme.mockClear();
@ -71,6 +74,10 @@ describe("AppearanceV2Component", () => {
provide: BadgeSettingsServiceAbstraction,
useValue: { enableBadgeCounter$, setEnableBadgeCounter },
},
{
provide: PopupCompactModeService,
useValue: { enabled$: enableCompactMode$, setEnabled: setEnableCompactMode },
},
],
})
.overrideComponent(AppearanceV2Component, {
@ -94,6 +101,7 @@ describe("AppearanceV2Component", () => {
enableFavicon: true,
enableBadgeCounter: true,
theme: ThemeType.Nord,
enableCompactMode: false,
});
});

21
apps/browser/src/vault/popup/settings/appearance-v2.component.ts
View File

@ -1,5 +1,5 @@
import { CommonModule } from "@angular/common";
import { Component, DestroyRef, OnInit } from "@angular/core";
import { Component, DestroyRef, inject, OnInit } from "@angular/core";
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
import { firstValueFrom } from "rxjs";
@ -12,12 +12,13 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
import { ThemeType } from "@bitwarden/common/platform/enums";
import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
import { CheckboxModule } from "@bitwarden/components";
import { BadgeModule, CheckboxModule } from "@bitwarden/components";
import { CardComponent } from "../../../../../../libs/components/src/card/card.component";
import { FormFieldModule } from "../../../../../../libs/components/src/form-field/form-field.module";
import { SelectModule } from "../../../../../../libs/components/src/select/select.module";
import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
import { PopupCompactModeService } from "../../../platform/popup/layout/popup-compact-mode.service";
import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";
@ -35,14 +36,18 @@ import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.co
SelectModule,
ReactiveFormsModule,
CheckboxModule,
BadgeModule,
],
})
export class AppearanceV2Component implements OnInit {
private compactModeService = inject(PopupCompactModeService);
appearanceForm = this.formBuilder.group({
enableFavicon: false,
enableBadgeCounter: true,
theme: ThemeType.System,
enableAnimations: true,
enableCompactMode: false,
});
/** To avoid flashes of inaccurate values, only show the form after the entire form is populated. */
@ -75,6 +80,7 @@ export class AppearanceV2Component implements OnInit {
const enableAnimations = await firstValueFrom(
this.animationControlService.enableRoutingAnimation$,
);
const enableCompactMode = await firstValueFrom(this.compactModeService.enabled$);
// Set initial values for the form
this.appearanceForm.setValue({
@ -82,6 +88,7 @@ export class AppearanceV2Component implements OnInit {
enableBadgeCounter,
theme,
enableAnimations,
enableCompactMode,
});
this.formLoading = false;
@ -109,6 +116,12 @@ export class AppearanceV2Component implements OnInit {
.subscribe((enableBadgeCounter) => {
void this.updateAnimations(enableBadgeCounter);
});
this.appearanceForm.controls.enableCompactMode.valueChanges
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((enableCompactMode) => {
void this.updateCompactMode(enableCompactMode);
});
}
async updateFavicon(enableFavicon: boolean) {
@ -127,4 +140,8 @@ export class AppearanceV2Component implements OnInit {
async updateAnimations(enableAnimations: boolean) {
await this.animationControlService.setEnableRoutingAnimation(enableAnimations);
}
async updateCompactMode(enableCompactMode: boolean) {
await this.compactModeService.setEnabled(enableCompactMode);
}
}

2
libs/components/src/card/card.component.ts
View File

@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component } from "@angular/core";
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
class:
"tw-box-border tw-block tw-bg-background tw-text-main tw-border-solid tw-border-b tw-border-0 tw-border-b-secondary-300 [&:not(bit-layout_*)]:tw-rounded-lg [&:not(bit-layout_*)]:tw-border-b-shadow tw-py-4 tw-px-3",
"tw-box-border tw-block tw-bg-background tw-text-main tw-border-solid tw-border-b tw-border-0 tw-border-b-secondary-300 [&:not(bit-layout_*)]:tw-rounded-lg [&:not(bit-layout_*)]:tw-border-b-shadow tw-py-4 bit-compact:tw-py-3 tw-px-3 bit-compact:tw-px-2",
},
})
export class CardComponent {}

2
libs/components/src/form-field/form-field.component.ts
View File

@ -70,7 +70,7 @@ export class BitFormFieldComponent implements AfterContentChecked {
@HostBinding("class")
get classList() {
return ["tw-block"]
.concat(this.disableMargin ? [] : ["tw-mb-4"])
.concat(this.disableMargin ? [] : ["tw-mb-4", "bit-compact:tw-mb-3"])
.concat(this.readOnly ? [] : "tw-pt-2");
}

1
libs/components/src/index.ts
View File

@ -31,6 +31,7 @@ export * from "./radio-button";
export * from "./search";
export * from "./section";
export * from "./select";
export * from "./shared/compact-mode.service";
export * from "./table";
export * from "./tabs";
export * from "./toast";

2
libs/components/src/item/index.ts
View File

@ -1,3 +1 @@
export * from "./item.module";
export { BitItemHeight, BitItemHeightClass } from "./item.component";

2
libs/components/src/item/item-content.component.ts
View File

@ -17,7 +17,7 @@ import { TypographyModule } from "../typography";
templateUrl: `item-content.component.html`,
host: {
class:
"fvw-target tw-outline-none tw-text-main hover:tw-text-main tw-no-underline hover:tw-no-underline tw-text-base tw-py-2 tw-px-4 tw-bg-transparent tw-w-full tw-border-none tw-flex tw-gap-4 tw-items-center tw-justify-between",
"fvw-target tw-outline-none tw-text-main hover:tw-text-main tw-no-underline hover:tw-no-underline tw-text-base tw-py-2 tw-px-4 bit-compact:tw-py-1.5 bit-compact:tw-px-2 tw-bg-transparent tw-w-full tw-border-none tw-flex tw-gap-4 tw-items-center tw-justify-between",
},
changeDetection: ChangeDetectionStrategy.OnPush,
})

27
libs/components/src/item/item.component.html
View File

@ -1,20 +1,11 @@
<div
class="tw-box-border tw-overflow-auto tw-flex tw-bg-background [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-cursor-pointer [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-bg-primary-100 tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg tw-mb-1.5"
[ngClass]="
focusVisibleWithin()
? 'tw-z-10 tw-rounded tw-outline-none tw-ring-2 tw-ring-primary-600 tw-border-transparent'
: 'tw-border-b-shadow'
"
>
<bit-item-action class="item-main-content tw-block tw-flex-1 tw-overflow-hidden">
<ng-content></ng-content>
</bit-item-action>
<bit-item-action class="item-main-content tw-flex tw-flex-1 tw-overflow-hidden">
<ng-content></ng-content>
</bit-item-action>
<div
#endSlot
class="tw-p-2 tw-flex tw-gap-1 tw-items-center"
[hidden]="endSlot.childElementCount === 0"
>
<ng-content select="[slot=end]"></ng-content>
</div>
<div
#endSlot
class="tw-p-2 tw-flex tw-gap-1 tw-items-center"
[hidden]="endSlot.childElementCount === 0"
>
<ng-content select="[slot=end]"></ng-content>
</div>

36
libs/components/src/item/item.component.ts
View File

@ -1,24 +1,16 @@
import { CommonModule } from "@angular/common";
import { ChangeDetectionStrategy, Component, HostListener, signal } from "@angular/core";
import {
ChangeDetectionStrategy,
Component,
HostBinding,
HostListener,
signal,
} from "@angular/core";
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 = 59px
*/
export const BitItemHeight = 59;
@Component({
selector: "bit-item",
standalone: true,
@ -26,6 +18,10 @@ export const BitItemHeight = 59;
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: "item.component.html",
providers: [{ provide: A11yRowDirective, useExisting: ItemComponent }],
host: {
class:
"tw-block tw-box-border tw-overflow-auto tw-flex tw-bg-background [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-cursor-pointer [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-bg-primary-100 tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg bit-compact:[&:not(bit-layout_*)]:tw-rounded-none bit-compact:[&:not(bit-layout_*)]:last-of-type:tw-rounded-b-lg bit-compact:[&:not(bit-layout_*)]:first-of-type:tw-rounded-t-lg tw-min-h-9 tw-mb-1.5 bit-compact:tw-mb-0",
},
})
export class ItemComponent extends A11yRowDirective {
/**
@ -40,4 +36,14 @@ export class ItemComponent extends A11yRowDirective {
onFocusOut() {
this.focusVisibleWithin.set(false);
}
@HostBinding("class") get classList(): string[] {
return [
this.focusVisibleWithin()
? "tw-z-10 tw-rounded tw-outline-none tw-ring-2 bit-compact:tw-ring-inset tw-ring-primary-600 tw-border-transparent".split(
" ",
)
: "tw-border-b-shadow",
].flat();
}
}

257
libs/components/src/item/item.stories.ts
View File

@ -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",
@ -152,127 +152,129 @@ export const TextOverflow: Story = {
}),
};
const multipleActionListTemplate = /*html*/ `
<bit-item-group aria-label="Multiple Action List">
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
</bit-item-group>
`;
export const MultipleActionList: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
<bit-item-group aria-label="Multiple Action List">
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
</bit-item-group>
`,
template: multipleActionListTemplate,
}),
};
@ -346,18 +348,27 @@ export const SingleActionWithBadge: Story = {
}),
};
export const CompactMode: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
<div class="tw-bit-compact">
${multipleActionListTemplate}
</div>
`,
}),
};
export const VirtualScrolling: Story = {
render: (_args) => ({
props: {
data: Array.from(Array(100000).keys()),
itemSize: BitItemHeight,
itemClass: BitItemHeightClass,
},
template: /*html*/ `
<cdk-virtual-scroll-viewport [itemSize]="itemSize" class="tw-h-[500px]">
<cdk-virtual-scroll-viewport [itemSize]="59" class="tw-h-[500px]">
<bit-item-group aria-label="Virtual Scrolling">
<bit-item *cdkVirtualFor="let item of data">
<button bit-item-content [ngClass]="itemClass">
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
{{ item }}
</button>

3
libs/components/src/section/section.component.ts
View File

@ -9,7 +9,8 @@ import { Component, Input } from "@angular/core";
template: `
<section
[ngClass]="{
'tw-mb-6 [&:not(bit-dialog_*):not(popup-page_*)]:md:tw-mb-12': !disableMargin,
'tw-mb-5 bit-compact:tw-mb-4 [&:not(bit-dialog_*):not(popup-page_*)]:md:tw-mb-12':
!disableMargin,
}"
>
<ng-content></ng-content>

11
libs/components/src/shared/compact-mode.service.ts Normal file
View File

@ -0,0 +1,11 @@
import { Observable } from "rxjs";
/** Global config for the Bitwarden Design System */
export abstract class CompactModeService {
/**
* When true, enables "compact mode".
*
* Component authors can also hook into compact mode with the `bit-compact:` Tailwind variant.
**/
enabled$: Observable<boolean>;
}

45
libs/components/src/stories/compact-mode.mdx Normal file
View File

@ -0,0 +1,45 @@
import { Meta, Story } from "@storybook/addon-docs";
import * as itemStories from "../item/item.stories";
import * as popupLayoutStories from "../../../../apps/browser/src/platform/popup/layout/popup-layout.stories";
<Meta title="Documentation/Compact Mode" />
# Compact Mode
The Bitwarden browser extension has a global compact mode setting for users who prefer a more
information-dense UI.
## Tailwind
Component authors can hook into this setting with the `bit-compact` Tailwind variant. In the
following example, the paragraph's padding is reduced when compact mode is enabled.
```html
<p class="tw-bg-primary-100 tw-p-4 bit-compact:tw-p-0.5">Lorem impsum doggo dolor...</p>
<div class="tw-bit-compact">
<p class="tw-bg-primary-100 tw-p-4 bit-compact:tw-p-0.5">Lorem impsum doggo dolor...</p>
</div>
```
<p class="tw-bg-primary-100 tw-p-4 bit-compact:tw-p-0.5">Lorem impsum doggo dolor...</p>
<div class="tw-bit-compact">
<p class="tw-bg-primary-100 tw-p-4 bit-compact:tw-p-0.5">Lorem impsum doggo dolor...</p>
</div>
## Service
To get/set compact mode in TypeScript, the `CompactModeService` exposes a `enabled$` observable.
However, styling with the Tailwind variant should be used when possible as it is more performant.
## Examples
### [Popup Layout](?path=/story/browser-popup-layout--compact-mode)
<Story autoplay={true} of={popupLayoutStories.CompactMode} />
### [Item](?path=/story/component-library-item--compact-mode)
<Story of={itemStories.CompactMode} />

4
libs/components/tailwind.config.base.js
View File

@ -175,5 +175,9 @@ module.exports = {
addVariant(state, [`&:${state}`, `&.test-${state}`]);
}
}),
/** Plugin for compact mode */
plugin(function ({ addVariant }) {
addVariant("bit-compact", ".bit-compact &");
}),
],
};