bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-13 23:03:32 +00:00
Code Issues Releases Wiki Activity

[PM-9952][PM-9954] Minor assign collection fixes (#10190)

Browse Source 
* disable organization selector when only one org is selected

* break long org names in assign collections copy

- applicable more in the browser implementation

* add `title` to each select option so a mouse over presents the name

- more applicable to the browser extension where names can overflow

* truncate options that overflow a select

* set max width of form fields to 100%
This commit is contained in:
Nick Krantz
2024-07-22 09:26:38 -05:00
committed by GitHub
parent 0e51695078
commit 8a86a699ff
3 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
libs/components/src/select/select.component.html
View File

@@ -10,11 +10,11 @@
appendTo="body" appendTo="body"
> >
<ng-template ng-option-tmp let-item="item"> <ng-template ng-option-tmp let-item="item">
<div class="tw-flex"> <div class="tw-flex" [title]="item.label">
<div class="tw-mr-2 tw-flex-initial"> <div class="tw-mr-2 tw-flex-initial">
<i *ngIf="item.icon != null" class="bwi bwi-fw {{ item.icon }}" aria-hidden="true"></i> <i *ngIf="item.icon != null" class="bwi bwi-fw {{ item.icon }}" aria-hidden="true"></i>
</div> </div>
<div class="tw-flex-1"> <div class="tw-flex-1 tw-text-ellipsis tw-overflow-hidden">
{{ item.label }} {{ item.label }}
</div> </div>
</div> </div>

6
libs/vault/src/components/assign-collections.component.html
View File

@@ -1,7 +1,7 @@
<form [formGroup]="formGroup" [bitSubmit]="submit" id="assign_collections_form"> <form [formGroup]="formGroup" [bitSubmit]="submit" id="assign_collections_form">
<p>{{ "bulkCollectionAssignmentDialogDescription" | i18n }}</p> <p>{{ "bulkCollectionAssignmentDialogDescription" | i18n }}</p>
<ul class="tw-list-none tw-pl-5 tw-space-y-2"> <ul class="tw-list-none tw-pl-5 tw-space-y-2 tw-break-words">
<li *ngIf="readonlyItemCount > 0"> <li *ngIf="readonlyItemCount > 0">
<p> <p>
{{ "bulkCollectionAssignmentWarning" | i18n: totalItemCount : readonlyItemCount }} {{ "bulkCollectionAssignmentWarning" | i18n: totalItemCount : readonlyItemCount }}
@@ -15,7 +15,7 @@
</ul> </ul>
<div class="tw-flex" *ngIf="showOrgSelector"> <div class="tw-flex" *ngIf="showOrgSelector">
<bit-form-field class="tw-grow"> <bit-form-field class="tw-grow tw-max-w-full">
<bit-label>{{ "moveToOrganization" | i18n }}</bit-label> <bit-label>{{ "moveToOrganization" | i18n }}</bit-label>
<bit-select formControlName="selectedOrg"> <bit-select formControlName="selectedOrg">
<bit-option <bit-option
@@ -30,7 +30,7 @@
</div> </div>
<div class="tw-flex"> <div class="tw-flex">
<bit-form-field class="tw-grow"> <bit-form-field class="tw-grow tw-max-w-full">
<bit-label>{{ "selectCollectionsToAssign" | i18n }}</bit-label> <bit-label>{{ "selectCollectionsToAssign" | i18n }}</bit-label>
<bit-multi-select <bit-multi-select
class="tw-w-full" class="tw-w-full"

7
libs/vault/src/components/assign-collections.component.ts
View File

@@ -123,6 +123,11 @@ export class AssignCollectionsComponent implements OnInit {
setTimeout(() => { setTimeout(() => {
this.formGroup.patchValue({ selectedOrg: orgs[0].id }); this.formGroup.patchValue({ selectedOrg: orgs[0].id });
this.setFormValidators(); this.setFormValidators();
// Disable the org selector if there is only one organization
if (orgs.length === 1) {
this.formGroup.controls.selectedOrg.disable();
}
}); });
} }
}), }),
@@ -139,7 +144,7 @@ export class AssignCollectionsComponent implements OnInit {
// Get the selected organization ID. If the user has not selected an organization from the form, // Get the selected organization ID. If the user has not selected an organization from the form,
// fallback to use the organization ID from the params. // fallback to use the organization ID from the params.
private get selectedOrgId(): OrganizationId { private get selectedOrgId(): OrganizationId {
return this.formGroup.value.selectedOrg || this.params.organizationId; return this.formGroup.getRawValue().selectedOrg || this.params.organizationId;
} }
private destroy$ = new Subject<void>(); private destroy$ = new Subject<void>();