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

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

@ -1,18 +1,27 @@
<label
class="label"
[ngStyle]="{
'background-color': labelColor?.color,
color: labelColor?.textColor,
border: labelColor?.color === '#FFFFFF' ? '1px solid #A1A1A1' : 'none'
}"
[style.max-width.px]="labelWidth">
<span>
<clr-icon
*ngIf="hasIcon && label.scope === 'p'"
shape="organization"></clr-icon>
<clr-icon
*ngIf="hasIcon && label.scope === 'g'"
shape="administrator"></clr-icon>
</span>
<span class="label-name">{{ label.name }}</span>
</label>
<clr-tooltip>
<label
clrTooltipTrigger
class="label"
[ngStyle]="{
'background-color': labelColor?.color,
color: labelColor?.textColor,
border:
labelColor?.color === '#FFFFFF' ? '1px solid #A1A1A1' : 'none'
}"
[style.max-width.px]="labelWidth">
<span>
<clr-icon
*ngIf="hasIcon && label.scope === 'p'"
shape="organization"></clr-icon>
<clr-icon
*ngIf="hasIcon && label.scope === 'g'"
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() labelWidth: number;
@Input() hasIcon: boolean = true;
@Input() withTooltip: boolean = false;
labelColor: { [key: string]: string };
ngOnChanges(): void {