devol
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

add truncation and close icon

This commit is contained in:
William Martin 2024-05-10 18:07:30 -04:00
parent 41a59dac5b
commit cac7624a06
No known key found for this signature in database
GPG Key ID: A65ACD91BADF316B
3 changed files with 205 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
libs/components/src/chip-select/chip-select.component.html
View File

@ -6,8 +6,13 @@
#menuTrigger="menuTrigger"
>
<i class="bwi {{ icon }}"></i>
{{ placeholder }}
<i class="bwi" [ngClass]="menuTrigger.isOpen ? 'bwi-angle-up' : 'bwi-angle-down'"></i>
{{ selected?.label || placeholder }}
<i
*ngIf="!selected?.label"
class="bwi"
[ngClass]="menuTrigger.isOpen ? 'bwi-angle-up' : 'bwi-angle-down'"
></i>
<i *ngIf="selected?.label" class="bwi bwi-close"></i>
</button>
<bit-menu #menu>
<button
@ -35,8 +40,12 @@
bitMenuItem
*ngFor="let option of renderedOptions.children"
(click)="option.children ? viewOption(option, $event) : selectOption(option, $event)"
class="tw-flex tw-justify-between tw-items-center"
>
{{ option.label }}
<span class="tw-w-full tw-truncate">
<i *ngIf="option.icon" class="bwi {{ icon }}"></i>
<span [title]="option.label">{{ option.label }}</span>
</span>
<i *ngIf="option.children" class="bwi bwi-angle-right"></i>
</button>
</bit-menu>

193
libs/components/src/chip-select/chip-select.component.ts
View File

@ -14,6 +14,8 @@ export type OptionTree<T> = Option<T> & {
const testData: OptionTree<any>[] = [
{
label: "Foo",
value: "foo-1-2-3",
icon: "bwi-key",
},
{
label: "Bar",
@ -41,6 +43,193 @@ const testData: OptionTree<any>[] = [
{
label: "Baf2",
},
{
label: "Foooooooooooooooo00000000000000000000000000000000000002",
},
{
label: "Bar2",
children: [
{
label: "Foo3",
},
],
},
{
label: "Baz2",
},
{
label: "Baf2",
},
{
label: "Foooooooooooooooo00000000000000000000000000000000000002",
},
{
label: "Bar2",
children: [
{
label: "Foo3",
},
],
},
{
label: "Baz2",
},
{
label: "Baf2",
},
{
label: "Foooooooooooooooo00000000000000000000000000000000000002",
},
{
label: "Bar2",
children: [
{
label: "Foo3",
},
],
},
{
label: "Baz2",
},
{
label: "Baf2",
},
{
label: "Foooooooooooooooo00000000000000000000000000000000000002",
},
{
label: "Bar2",
children: [
{
label: "Foo3",
},
],
},
{
label: "Baz2",
},
{
label: "Baf2",
},
{
label: "Foooooooooooooooo00000000000000000000000000000000000002",
},
{
label: "Bar2",
children: [
{
label: "Foo3",
},
],
},
{
label: "Baz2",
},
{
label: "Baf2",
},
{
label: "Foooooooooooooooo00000000000000000000000000000000000002",
},
{
label: "Bar2",
children: [
{
label: "Foo3",
},
],
},
{
label: "Baz2",
},
{
label: "Baf2",
},
{
label: "Foooooooooooooooo00000000000000000000000000000000000002",
},
{
label: "Bar2",
children: [
{
label: "Foo3",
},
],
},
{
label: "Baz2",
},
{
label: "Baf2",
},
{
label: "Foooooooooooooooo00000000000000000000000000000000000002",
},
{
label: "Bar2",
children: [
{
label: "Foo3",
},
],
},
{
label: "Baz2",
},
{
label: "Baf2",
},
{
label: "Foooooooooooooooo00000000000000000000000000000000000002",
},
{
label: "Bar2",
children: [
{
label: "Foo3",
},
],
},
{
label: "Baz2",
},
{
label: "Baf2",
},
{
label: "Foooooooooooooooo00000000000000000000000000000000000002",
},
{
label: "Bar2",
children: [
{
label: "Foo3",
},
],
},
{
label: "Baz2",
},
{
label: "Baf2",
},
{
label: "Foooooooooooooooo00000000000000000000000000000000000002",
},
{
label: "Bar2",
children: [
{
label: "Foo3",
},
],
},
{
label: "Baz2",
},
{
label: "Baf2",
},
],
},
],
@ -56,6 +245,8 @@ const testData: OptionTree<any>[] = [
export class ChipSelectComponent<T = unknown> implements OnInit {
// private i18nService = inject(I18nService);
protected selected: OptionTree<T>;
@Input() placeholder = "Placeholder";
// name placeholder icon?
@ -67,7 +258,7 @@ export class ChipSelectComponent<T = unknown> implements OnInit {
protected renderedOptions: OptionTree<T>;
protected selectOption(option: OptionTree<T>, event: MouseEvent) {
this.placeholder = option.label;
this.selected = option;
}
protected viewOption(option: OptionTree<T>, event: MouseEvent) {

2
libs/components/src/menu/menu.component.html
View File

@ -1,7 +1,7 @@
<ng-template>
<div
(click)="closed.emit()"
class="tw-flex tw-shrink-0 tw-flex-col tw-rounded tw-border tw-border-solid tw-border-secondary-600 tw-bg-background tw-bg-clip-padding tw-py-2 tw-overflow-y-auto"
class="tw-flex tw-shrink-0 tw-flex-col tw-rounded tw-border tw-border-solid tw-border-secondary-600 tw-bg-background tw-bg-clip-padding tw-py-2 tw-overflow-y-auto tw-max-w-80"
[attr.role]="ariaRole"
[attr.aria-label]="ariaLabel"
cdkTrapFocus