bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-12 22:44:11 +00:00
Code Issues Releases Wiki Activity

wip Item compact mode

Browse Source
This commit is contained in:
William Martin
2024-10-30 14:32:31 -04:00
parent 16961986da
commit ef92ae29bb
2 changed files with 28 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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 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-block 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>

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

@@ -1,5 +1,11 @@
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";
@@ -26,6 +32,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:tw-mb-1.5 bit-compact:[&:not(bit-layout_*)]:last:tw-rounded-b-lg bit-compact:[&:not(bit-layout_*)]:first:tw-rounded-t-lg tw-mb-1.5 bit-compact:tw-mb-0",
},
})
export class ItemComponent extends A11yRowDirective {
/**
@@ -40,4 +50,12 @@ 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 tw-ring-primary-600 tw-border-transparent"
: "tw-border-b-shadow",
];
}
}