From 5b6fe1fccc927d24b6f0f7b2427a9ffceafe6090 Mon Sep 17 00:00:00 2001
From: pfh <pengf@vmware.com>
Date: Tue, 10 Apr 2018 16:04:15 +0800
Subject: [PATCH] add bread crumb under project

---
 .../repository/repository.component.css.ts    | 21 +++++--------------
 .../repository/repository.component.html.ts   |  7 ++++---
 .../src/repository/repository.component.ts    | 12 +++++++----
 .../lib/src/tag/tag-detail.component.css.ts   | 19 ++++-------------
 .../lib/src/tag/tag-detail.component.html.ts  |  8 ++++---
 src/ui_ng/lib/src/tag/tag-detail.component.ts | 14 ++++++++++---
 src/ui_ng/package.json                        |  2 +-
 .../harbor-shell/harbor-shell.component.css   |  3 +++
 .../project-detail.component.css              |  4 +++-
 .../project-detail.component.html             |  2 +-
 .../tag-detail/tag-detail-page.component.html |  2 +-
 .../tag-detail/tag-detail-page.component.ts   |  8 ++++++-
 .../tag-repository.component.html             |  2 +-
 .../tag-repository.component.ts               |  5 ++++-
 src/ui_ng/src/styles.css                      |  1 +
 15 files changed, 59 insertions(+), 51 deletions(-)

diff --git a/src/ui_ng/lib/src/repository/repository.component.css.ts b/src/ui_ng/lib/src/repository/repository.component.css.ts
index 0b1f34ccf..87edf988f 100644
--- a/src/ui_ng/lib/src/repository/repository.component.css.ts
+++ b/src/ui_ng/lib/src/repository/repository.component.css.ts
@@ -3,24 +3,13 @@ export const REPOSITORY_STYLE = `.option-right {
   margin-bottom: 12px;
 }
 
-.arrow-back {
-  cursor: pointer;
+.arrow-block a{
+    text-decoration: none;
+    cursor: pointer;
+    color: #007cbb;
+    font-size: 12px;
 }
 
-.arrow-block {
-  border-right: 2px solid #cccccc;
-  margin-right: 6px;
-  display: inline-flex;
-  padding: 6px 6px 6px 12px;
-}
-
-.title-block {
-  display: inline-block;
-}
-
-.title-wrapper {
-  padding-top: 12px;
-}
 .tag-name {
   font-weight: 300;
   font-size: 32px;
diff --git a/src/ui_ng/lib/src/repository/repository.component.html.ts b/src/ui_ng/lib/src/repository/repository.component.html.ts
index 375dd286c..40daed91c 100644
--- a/src/ui_ng/lib/src/repository/repository.component.html.ts
+++ b/src/ui_ng/lib/src/repository/repository.component.html.ts
@@ -1,10 +1,11 @@
 export const REPOSITORY_TEMPLATE = `
 <section class="overview-section">
   <div class="title-wrapper">
-    <div class="title-block arrow-block">
-      <clr-icon class="rotate-90 arrow-back" shape="arrow" size="36" (click)="goBack()"></clr-icon>
+    <div class="arrow-block">
+      <a (click)="goProBack()">< {{'SIDE_NAV.PROJECTS'| translate}}</a>
+      <a (click)="goRepBack()">< {{'SIDE_NAV.SYSTEM_MGMT.REGISTRY'| translate}}</a>
     </div>
-    <div class="title-block">
+    <div>
       <h2 sub-header-title class="custom-h2">{{repoName}}</h2>
     </div>
   </div>
diff --git a/src/ui_ng/lib/src/repository/repository.component.ts b/src/ui_ng/lib/src/repository/repository.component.ts
index cae155c8f..5b8d715e1 100644
--- a/src/ui_ng/lib/src/repository/repository.component.ts
+++ b/src/ui_ng/lib/src/repository/repository.component.ts
@@ -52,7 +52,8 @@ export class RepositoryComponent implements OnInit {
   @Input() hasProjectAdminRole: boolean;
   @Input() isGuest: boolean;
   @Output() tagClickEvent = new EventEmitter<TagClickEvent>();
-  @Output() backEvt: EventEmitter<any> = new EventEmitter<any>();
+  @Output() backRepEvt: EventEmitter<any> = new EventEmitter<any>();
+  @Output() backProEvt: EventEmitter<any> = new EventEmitter<any>();
 
   onGoing = false;
   editing = false;
@@ -155,9 +156,12 @@ export class RepositoryComponent implements OnInit {
            .catch(error => this.errorHandler.error(error));
  }
 
-  goBack() {
-    this.backEvt.emit(this.projectId);
-  }
+    goRepBack(): void {
+        this.backRepEvt.emit(this.projectId);
+    }
+    goProBack(): void {
+        this.backProEvt.emit();
+    }
 
   hasChanges() {
     return this.imageInfo !== this.orgImageInfo;
diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.css.ts b/src/ui_ng/lib/src/tag/tag-detail.component.css.ts
index 97bf9f26f..a0a27b36a 100644
--- a/src/ui_ng/lib/src/tag/tag-detail.component.css.ts
+++ b/src/ui_ng/lib/src/tag/tag-detail.component.css.ts
@@ -10,10 +10,6 @@ export const TAG_DETAIL_STYLES: string = `
     padding-right: 24px;
 }
 
-.title-wrapper {
-    padding-top: 12px;
-}
-
 .tag-name {
     font-weight: 300;
     font-size: 32px;
@@ -37,20 +33,13 @@ export const TAG_DETAIL_STYLES: string = `
     transform: rotate(-90deg);
 }
 
-.arrow-back {
+.arrow-block a{
+    text-decoration: none;
     cursor: pointer;
+    color: #007cbb;
+    font-size: 12px;
 }
 
-.arrow-block {
-    border-right: 2px solid #cccccc;
-    margin-right: 6px;
-    display: inline-flex;
-    padding: 6px 6px 6px 12px;
-}
-
-.title-block {
-    display: inline-block;
-}
 
 .vulnerability-block {
     margin-bottom: 12px;
diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.html.ts b/src/ui_ng/lib/src/tag/tag-detail.component.html.ts
index cd198af2b..6da49f1bd 100644
--- a/src/ui_ng/lib/src/tag/tag-detail.component.html.ts
+++ b/src/ui_ng/lib/src/tag/tag-detail.component.html.ts
@@ -2,10 +2,12 @@ export const TAG_DETAIL_HTML: string = `
 <div>
     <section class="overview-section">
         <div class="title-wrapper">
-            <div class="title-block arrow-block">
-                <clr-icon class="rotate-90 arrow-back" shape="arrow" size="36" (click)="onBack()"></clr-icon>
+            <div class="arrow-block">
+                <a (click)="onBackPro()">< {{'SIDE_NAV.PROJECTS'| translate}}</a>
+                <a (click)="onBackRep()">< {{'SIDE_NAV.SYSTEM_MGMT.REGISTRY'| translate}}</a>
+                <a (click)="onBackTag()">< {{repositoryId}}</a>
             </div>
-            <div class="title-block">
+            <div class="">
                 <h2 class="custom-h2" sub-header-title>{{repositoryId}}:{{tagDetails.name}}</h2>
             </div>
         </div>
diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.ts b/src/ui_ng/lib/src/tag/tag-detail.component.ts
index 5de443831..8b52fe1d8 100644
--- a/src/ui_ng/lib/src/tag/tag-detail.component.ts
+++ b/src/ui_ng/lib/src/tag/tag-detail.component.ts
@@ -38,7 +38,9 @@ export class TagDetailComponent implements OnInit {
         labels: [],
     };
 
-    @Output() backEvt: EventEmitter<any> = new EventEmitter<any>();
+    @Output() backTagEvt: EventEmitter<any> = new EventEmitter<any>();
+    @Output() backRepEvt: EventEmitter<any> = new EventEmitter<any>();
+    @Output() backProEvt: EventEmitter<any> = new EventEmitter<any>();
 
     constructor(
         private tagService: TagService,
@@ -77,8 +79,14 @@ export class TagDetailComponent implements OnInit {
         }
     }
 
-    onBack(): void {
-        this.backEvt.emit(this.repositoryId);
+    onBackTag(): void {
+        this.backTagEvt.emit(this.repositoryId);
+    }
+    onBackRep(): void {
+        this.backRepEvt.emit();
+    }
+    onBackPro(): void {
+        this.backProEvt.emit();
     }
 
     getPackageText(count: number): string {
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json
index 6d511ae54..7521d28f4 100644
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@@ -31,7 +31,7 @@
         "clarity-icons": "0.10.24",
         "clarity-ui": "0.10.24",
         "core-js": "^2.4.1",
-        "harbor-ui": "0.6.69",
+        "harbor-ui": "0.6.71",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-cookie": "^1.0.0",
diff --git a/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.css b/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.css
index 374014acf..903edb90d 100644
--- a/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.css
+++ b/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.css
@@ -23,4 +23,7 @@
 
 .nav-link-override {
     width: 126px !important;
+}
+:host >>> .clr-vertical-nav .nav-trigger+.nav-content{
+    padding-top: 0;
 }
\ No newline at end of file
diff --git a/src/ui_ng/src/app/project/project-detail/project-detail.component.css b/src/ui_ng/src/app/project/project-detail/project-detail.component.css
index 1bf9b2c6e..a7177fe39 100644
--- a/src/ui_ng/src/app/project/project-detail/project-detail.component.css
+++ b/src/ui_ng/src/app/project/project-detail/project-detail.component.css
@@ -17,5 +17,7 @@
   font-style: italic;
   letter-spacing: 0.01em;
 }
-.cursor{
+.backStyle{
+  color: #007cbb;
+  font-size: 12px;
   cursor: pointer;}
\ No newline at end of file
diff --git a/src/ui_ng/src/app/project/project-detail/project-detail.component.html b/src/ui_ng/src/app/project/project-detail/project-detail.component.html
index 140d5aa61..7f05c34f9 100644
--- a/src/ui_ng/src/app/project/project-detail/project-detail.component.html
+++ b/src/ui_ng/src/app/project/project-detail/project-detail.component.html
@@ -1,4 +1,4 @@
-<a *ngIf="hasSignedIn" (click)="backToProject()" class="cursor">&lt; {{'PROJECT_DETAIL.PROJECTS' | translate}}</a>
+<a *ngIf="hasSignedIn" (click)="backToProject()" class="backStyle">&lt; {{'PROJECT_DETAIL.PROJECTS' | translate}}</a>
 <a *ngIf="!hasSignedIn" [routerLink]="['/harbor', 'sign-in']">&lt; {{'SEARCH.BACK' | translate}}</a>
 
 <h1 class="custom-h2" sub-header-title>{{currentProject.name}} <span class="role-label" *ngIf="isMember">{{roleName | translate}}</span></h1>
diff --git a/src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.html b/src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.html
index 2a0a6b995..8702de646 100644
--- a/src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.html
+++ b/src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.html
@@ -1,3 +1,3 @@
 <div>
-    <hbr-tag-detail (backEvt)="goBack($event)" [tagId]="tagId" [withClair]="withClair"  [withAdmiral]="withAdmiral" [repositoryId]="repositoryId"></hbr-tag-detail>
+    <hbr-tag-detail (backTagEvt)="goBackTag($event)" (backRepEvt)="goBackRep()" (backProEvt)="goBackPro()" [tagId]="tagId" [withClair]="withClair"  [withAdmiral]="withAdmiral" [repositoryId]="repositoryId"></hbr-tag-detail>
 </div>
\ No newline at end of file
diff --git a/src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.ts b/src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.ts
index 762c62e3b..58cb17b3e 100644
--- a/src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.ts
+++ b/src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.ts
@@ -45,7 +45,13 @@ export class TagDetailPageComponent implements OnInit {
     return this.appConfigService.getConfig().with_clair;
   }
 
-  goBack(tag: string): void {
+  goBackTag(tag: string): void {
     this.router.navigate(["harbor", "projects", this.projectId, "repositories", tag]);
   }
+  goBackRep(): void {
+    this.router.navigate(["harbor", "projects", this.projectId, "repositories"]);
+  }
+  goBackPro(): void {
+    this.router.navigate(["harbor", "projects"]);
+  }
 }
\ No newline at end of file
diff --git a/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.html b/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.html
index b9c5f60c1..a890efc50 100644
--- a/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.html
+++ b/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.html
@@ -1,4 +1,4 @@
 <div>
     <hbr-repository [repoName]="repoName" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" [projectId]="projectId" [isGuest]="isGuest"
-    (tagClickEvent)="watchTagClickEvt($event)" (backEvt)="watchGoBackEvt($event)" ></hbr-repository>
+    (tagClickEvent)="watchTagClickEvt($event)" (backRepEvt)="goRepBack($event)" (backProEvt)="goProBack()"></hbr-repository>
 </div>
\ No newline at end of file
diff --git a/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts b/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts
index 96708a18e..1e75ddfab 100644
--- a/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts
+++ b/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts
@@ -85,7 +85,10 @@ export class TagRepositoryComponent implements OnInit {
     this.router.navigate(linkUrl);
   }
 
-  watchGoBackEvt(projectId: string): void {
+  goRepBack(projectId: string): void {
     this.router.navigate(["harbor", "projects", projectId, "repositories"]);
   }
+  goProBack(): void {
+    this.router.navigate(["harbor", "projects"]);
+  }
 }
\ No newline at end of file
diff --git a/src/ui_ng/src/styles.css b/src/ui_ng/src/styles.css
index b8289a28c..8f82ec77b 100644
--- a/src/ui_ng/src/styles.css
+++ b/src/ui_ng/src/styles.css
@@ -67,4 +67,5 @@
 }
 .custom-h2 {
     margin-top: 0px !important;
+    line-height: 24px;
 }
\ No newline at end of file