1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-25 12:15:18 +01:00

[SM-1192] displaying full project name in tooltip and allowing more of project name in bit badge/project column (#8917)

* allowing max width adjustment on bit badge and not truncating the tooltip text on project

* suggested changes from WIll

* updating values
This commit is contained in:
cd-bitwarden 2024-06-04 10:58:09 -04:00 committed by GitHub
parent 490e6c322d
commit ed7a57810e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 5 additions and 2 deletions

View File

@ -93,8 +93,9 @@
variant="secondary" variant="secondary"
class="tw-ml-1" class="tw-ml-1"
[title]="project.name" [title]="project.name"
maxWidthClass="tw-max-w-60"
> >
{{ project.name | ellipsis: 32 }} {{ project.name }}
</span> </span>
<span *ngIf="secret.projects.length === 0" bitBadge variant="warning" class="tw-ml-1" <span *ngIf="secret.projects.length === 0" bitBadge variant="warning" class="tw-ml-1"
><i class="bwi bwi-fw bwi-exclamation-triangle tw-mr-1" aria-hidden="true"></i ><i class="bwi bwi-fw bwi-exclamation-triangle tw-mr-1" aria-hidden="true"></i

View File

@ -49,7 +49,7 @@ export class BadgeDirective implements FocusableElement {
] ]
.concat(styles[this.variant]) .concat(styles[this.variant])
.concat(this.hasHoverEffects ? hoverStyles[this.variant] : []) .concat(this.hasHoverEffects ? hoverStyles[this.variant] : [])
.concat(this.truncate ? ["tw-truncate", "tw-max-w-40"] : []); .concat(this.truncate ? ["tw-truncate", this.maxWidthClass] : []);
} }
@HostBinding("attr.title") get title() { @HostBinding("attr.title") get title() {
return this.truncate ? this.el.nativeElement.textContent.trim() : null; return this.truncate ? this.el.nativeElement.textContent.trim() : null;
@ -65,6 +65,8 @@ export class BadgeDirective implements FocusableElement {
*/ */
@Input() truncate = true; @Input() truncate = true;
@Input() maxWidthClass: `tw-max-w-${string}` = "tw-max-w-40";
getFocusTarget() { getFocusTarget() {
return this.el.nativeElement; return this.el.nativeElement;
} }