Upstream
/
harbor
mirror of https://github.com/goharbor/harbor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add label's description as tooltip (#19421) 

* feat(ui): add label's description as tooltip

Will only display the tooltip on artifact-list-page.

Signed-off-by: Kenji Gaillac <kenji@gaillac.eu>

* fix(ui): remove redundant condition

Signed-off-by: Kenji Gaillac <kenji@gaillac.eu>

---------

Signed-off-by: Kenji Gaillac <kenji@gaillac.eu>
This commit is contained in:
Kenji Gaillac 2023-10-24 03:52:35 +02:00 committed by GitHub
parent f58dc2dbec
commit a1effcbb98
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html
View File

@ -430,7 +430,8 @@
<hbr-label-piece <hbr-label-piece
*ngIf="artifact.labels?.length" *ngIf="artifact.labels?.length"
[label]="artifact.labels[0]" [label]="artifact.labels[0]"
[labelWidth]="90"> [labelWidth]="90"
[withTooltip]="true">
</hbr-label-piece> </hbr-label-piece>
<div <div
class="signpost-item" class="signpost-item"
@ -447,7 +448,8 @@
class="margin-5px"> class="margin-5px">
<hbr-label-piece <hbr-label-piece
[labelWidth]="130" [labelWidth]="130"
[label]="label"> [label]="label"
[withTooltip]="true">
</hbr-label-piece> </hbr-label-piece>
</div> </div>
</clr-signpost-content> </clr-signpost-content>

45
src/portal/src/app/shared/components/label/label-piece/label-piece.component.html
View File

@ -1,18 +1,27 @@
<label <clr-tooltip>
class="label" <label
[ngStyle]="{ clrTooltipTrigger
'background-color': labelColor?.color, class="label"
color: labelColor?.textColor, [ngStyle]="{
border: labelColor?.color === '#FFFFFF' ? '1px solid #A1A1A1' : 'none' 'background-color': labelColor?.color,
}" color: labelColor?.textColor,
[style.max-width.px]="labelWidth"> border:
<span> labelColor?.color === '#FFFFFF' ? '1px solid #A1A1A1' : 'none'
<clr-icon }"
*ngIf="hasIcon && label.scope === 'p'" [style.max-width.px]="labelWidth">
shape="organization"></clr-icon> <span>
<clr-icon <clr-icon
*ngIf="hasIcon && label.scope === 'g'" *ngIf="hasIcon && label.scope === 'p'"
shape="administrator"></clr-icon> shape="organization"></clr-icon>
</span> <clr-icon
<span class="label-name">{{ label.name }}</span> *ngIf="hasIcon && label.scope === 'g'"
</label> shape="administrator"></clr-icon>
</span>
<span class="label-name">{{ label.name }}</span>
</label>
<clr-tooltip-content
[clrPosition]="'right'"
*ngIf="withTooltip && label.description">
<span>{{ label.description }}</span>
</clr-tooltip-content>
</clr-tooltip>

1
src/portal/src/app/shared/components/label/label-piece/label-piece.component.ts
View File

@ -24,6 +24,7 @@ export class LabelPieceComponent implements OnChanges {
@Input() label: Label; @Input() label: Label;
@Input() labelWidth: number; @Input() labelWidth: number;
@Input() hasIcon: boolean = true; @Input() hasIcon: boolean = true;
@Input() withTooltip: boolean = false;
labelColor: { [key: string]: string }; labelColor: { [key: string]: string };
ngOnChanges(): void { ngOnChanges(): void {