Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-09-27 13:02:59 +02:00
Code Issues Projects Releases Wiki Activity

Improve css for tags column (#16811)

Browse Source 
Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
Shijun Sun 2022-05-10 17:47:09 +08:00 committed by GitHub
parent 4d116893be
commit 6ca3665207
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 4 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

@ -202,9 +202,9 @@
<div *ngIf="artifact.tags" class="truncated width-p-100">
<clr-tooltip class="width-p-100">
<div clrTooltipTrigger class="center">
<div class="center">
<span class="truncated">{{tagsString(artifact?.tags)}}</span>
<span *ngIf="artifact?.tags?.length>1">({{artifact?.tagNumber}})</span>
<div class="center width-p-100">
<span #tagsSpan class="truncated width-p-75">{{tagsString(artifact?.tags)}}</span>
<span *ngIf="artifact?.tags?.length>1 && isEllipsisActive(tagsSpan)">({{artifact?.tagNumber}})</span>
</div>
</div>
<clr-tooltip-content [clrPosition]="'top-right'" class="lg" [clrSize]="'lg'" *clrIfOpen>

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

@ -431,7 +431,7 @@ clr-datagrid {
width: 5rem !important;
}
.tag-column {
width: 7rem !important;
min-width: 7rem;
}
.signed {
color: #00d40f;
@ -446,3 +446,6 @@ clr-datagrid {
display: flex;
align-items: center;
}
.width-p-75 {
width: 75%;
}

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

@ -1213,4 +1213,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
buttons);
this.confirmationDialog.open(message);
}
isEllipsisActive(ele: HTMLSpanElement): boolean {
return ele?.offsetWidth < ele?.scrollWidth;
}
}