From 6ca366520716ebd7e39cf83ae6eaf88401ce75c5 Mon Sep 17 00:00:00 2001
From: Shijun Sun <30999793+AllForNothing@users.noreply.github.com>
Date: Tue, 10 May 2022 17:47:09 +0800
Subject: [PATCH] Improve css for tags column (#16811)

Signed-off-by: AllForNothing <sshijun@vmware.com>
---
 .../artifact-list-tab/artifact-list-tab.component.html      | 6 +++---
 .../artifact-list-tab/artifact-list-tab.component.scss      | 5 ++++-
 .../artifact-list-tab/artifact-list-tab.component.ts        | 3 +++
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html
index c10b67114..3b3ee81ee 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html
@@ -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>
diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.scss b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.scss
index fa31ba0b7..b313c011e 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.scss
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.scss
@@ -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%;
+}
diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts
index 2375bb319..b7ab019df 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts
@@ -1213,4 +1213,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
             buttons);
         this.confirmationDialog.open(message);
     }
+    isEllipsisActive(ele: HTMLSpanElement): boolean {
+        return ele?.offsetWidth < ele?.scrollWidth;
+    }
 }