From 40191e0bcdcc83ae2263e811bb75aabafd83e684 Mon Sep 17 00:00:00 2001
From: Shijun Sun <30999793+AllForNothing@users.noreply.github.com>
Date: Mon, 18 Apr 2022 11:08:43 +0800
Subject: [PATCH] Add dotted line between the artifacts and their accessories
 (#16701)

Signed-off-by: AllForNothing <sshijun@vmware.com>
---
 .../sub-accessories.component.html            |  9 ++++----
 .../sub-accessories.component.scss            | 23 ++++++++++++++++++-
 .../sub-accessories.component.ts              |  5 ++++
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.html b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.html
index 13dd1cefc..c5a7f8acf 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.html
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.html
@@ -1,15 +1,16 @@
-<clr-datagrid (clrDgRefresh)="clrLoad()" [clrDgLoading]="loading">
+<clr-datagrid class="ml-8" (clrDgRefresh)="clrLoad()" [clrDgLoading]="loading">
     <clr-dg-column>{{'ACCESSORY.ACCESSORY' | translate}}</clr-dg-column>
     <clr-dg-column>{{'PROJECT.TYPE' | translate}}</clr-dg-column>
     <clr-dg-column>{{'REPOSITORY.SIZE' | translate}}</clr-dg-column>
     <clr-dg-column>{{'ROBOT_ACCOUNT.CREATETION' | translate}}</clr-dg-column>
-    <clr-dg-row *ngFor="let a of displayedAccessories" [clrDgItem]="a">
+    <clr-dg-row *ngFor="let a of displayedAccessories;let i = index;" [clrDgItem]="a">
         <clr-dg-action-overflow>
             <button class="action-item" (click)="delete(a)">{{'REPOSITORY.DELETE' | translate}}</button>
         </clr-dg-action-overflow>
-        <clr-dg-cell>
+        <clr-dg-cell class="relative">
+            <hr class="y-dash-line" *ngIf="i===displayedAccessories?.length-1" [style.height.px]="dashLineHeight"><hr class="x-dash-line">
             <div class="cell">
-                <div title="{{a?.digest}}" class="artifact-icon clr-display-inline-block">
+                <div title="{{a?.digest}}" class="artifact-icon-div clr-display-inline-block">
                     <img *ngIf="getIcon(a.icon)" class="artifact-icon" [title]="a.type"
                          [src]="getIcon(a.icon)" (error)="showDefaultIcon($event)" />
                 </div>
diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.scss b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.scss
index b5301878a..b62124a1b 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.scss
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.scss
@@ -1,7 +1,11 @@
-.artifact-icon {
+.artifact-icon-div {
+  text-align: center;
   width: 2.5rem;
   height: 0.8rem;
 }
+.artifact-icon {
+  height: 0.8rem;
+}
 .cell {
   display: flex;
   align-items: center;
@@ -11,3 +15,20 @@
 .margin-left-5 {
   margin-left: 5px;
 }
+.ml-8 {
+  margin-left: 8rem;
+}
+.x-dash-line {
+  position: absolute;
+  width: 80px;
+  left: -80px;
+  border: 0;
+  border-top: 2px dotted #a2a9b6;
+}
+.y-dash-line {
+  position: absolute;
+  border: 0;
+  border-left: 2px dotted #a2a9b6;
+  left: -4.2rem;
+  bottom: 0
+}
diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.ts b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.ts
index 048eef4a3..e62a4c573 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.ts
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.ts
@@ -113,4 +113,9 @@ export class SubAccessoriesComponent implements OnInit {
             this.artifactService.getIconsFromBackEnd(this.displayedAccessories);
         }
     }
+
+    get dashLineHeight() {
+        // fixed height 27 plus each row height 40
+        return 27 + this.displayedAccessories?.length * 40;
+    }
 }