Merge pull request #4717 from pengpengshui/breadScrumb

Modify bread crumb for vic

src/ui_ng/lib/src/repository/repository.component.css.ts

@@ -3,13 +3,21 @@ export const REPOSITORY_STYLE = `.option-right {
   margin-bottom: 12px;
 }
 
-.arrow-block a{
+.arrow-back {
-    text-decoration: none;
+  cursor: pointer;
-    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;	
+}	
+
 .tag-name {
   font-weight: 300;
   font-size: 32px;

src/ui_ng/lib/src/repository/repository.component.html.ts

@@ -1,11 +1,10 @@
 export const REPOSITORY_TEMPLATE = `
 <section class="overview-section">
   <div class="title-wrapper">
-    <div class="arrow-block">
+    <div class="title-block arrow-block" *ngIf="withAdmiral">	
-      <a (click)="goProBack()">< {{'SIDE_NAV.PROJECTS'| translate}}</a>
+       <clr-icon class="rotate-90 arrow-back" shape="arrow" size="36" (click)="goBack()"></clr-icon>
-      <a (click)="goRepBack()">< {{'REPOSITORY.REPOSITORIES'| translate}}</a>
     </div>
-    <div>
+    <div class="title-block">
       <h2 sub-header-title class="custom-h2">{{repoName}}</h2>
     </div>
   </div>

src/ui_ng/lib/src/repository/repository.component.ts

@@ -52,8 +52,7 @@ export class RepositoryComponent implements OnInit {
   @Input() hasProjectAdminRole: boolean;
   @Input() isGuest: boolean;
   @Output() tagClickEvent = new EventEmitter<TagClickEvent>();
-  @Output() backRepEvt: EventEmitter<any> = new EventEmitter<any>();
+  @Output() backEvt: EventEmitter<any> = new EventEmitter<any>();
-  @Output() backProEvt: EventEmitter<any> = new EventEmitter<any>();
 
   onGoing = false;
   editing = false;
@@ -156,11 +155,8 @@ export class RepositoryComponent implements OnInit {
            .catch(error => this.errorHandler.error(error));
  }
 
-    goRepBack(): void {
+    goBack(): void {
-        this.backRepEvt.emit(this.projectId);
+        this.backEvt.emit(this.projectId);
-    }
-    goProBack(): void {
-        this.backProEvt.emit();
     }
 
   hasChanges() {

src/ui_ng/lib/src/tag/tag-detail.component.css.ts

@@ -10,10 +10,15 @@ export const TAG_DETAIL_STYLES: string = `
     padding-right: 24px;
 }
 
+.title-block {
+    display: inline-block;
+}
+
 .tag-name {
     font-weight: 300;
     font-size: 32px;
 }
+.tag-name h2{margin-top:0;}
 
 .tag-timestamp {
     font-weight: 400;
@@ -33,11 +38,19 @@ export const TAG_DETAIL_STYLES: string = `
     transform: rotate(-90deg);
 }
 
-.arrow-block a{
+.arrow-back {
-    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;	
 }
 
 

src/ui_ng/lib/src/tag/tag-detail.component.html.ts

@@ -2,13 +2,11 @@ export const TAG_DETAIL_HTML: string = `
 <div>
     <section class="overview-section">
         <div class="title-wrapper">
-            <div class="arrow-block">
+            <div class="title-block arrow-block" *ngIf="withAdmiral">
-                <a (click)="onBackPro()">< {{'SIDE_NAV.PROJECTS'| translate}}</a>
+                <clr-icon class="rotate-90 arrow-back" shape="arrow" size="36" (click)="onBack()"></clr-icon>
-                <a (click)="onBackRep()">< {{'REPOSITORY.REPOSITORIES'| translate}}</a>
-                <a (click)="onBackTag()">< {{repositoryId}}</a>
             </div>
-            <div class="">
+            <div class="title-block">
-                <h2 class="custom-h2" sub-header-title>{{repositoryId}}:{{tagDetails.name}}</h2>
+                <h2 class="custom-h2">{{repositoryId}}:{{tagDetails.name}}</h2>
             </div>
         </div>
         <div class="summary-block">

src/ui_ng/lib/src/tag/tag-detail.component.ts

@@ -38,9 +38,7 @@ export class TagDetailComponent implements OnInit {
         labels: [],
     };
 
-    @Output() backTagEvt: EventEmitter<any> = new EventEmitter<any>();
+    @Output() backEvt: EventEmitter<any> = new EventEmitter<any>();
-    @Output() backRepEvt: EventEmitter<any> = new EventEmitter<any>();
-    @Output() backProEvt: EventEmitter<any> = new EventEmitter<any>();
 
     constructor(
         private tagService: TagService,
@@ -79,14 +77,8 @@ export class TagDetailComponent implements OnInit {
         }
     }
 
-    onBackTag(): void {
+    onBack(): void {
-        this.backTagEvt.emit(this.repositoryId);
+        this.backEvt.emit(this.repositoryId);
-    }
-    onBackRep(): void {
-        this.backRepEvt.emit();
-    }
-    onBackPro(): void {
-        this.backProEvt.emit();
     }
 
     getPackageText(count: number): string {

src/ui_ng/package.json

@@ -30,7 +30,7 @@
         "clarity-icons": "0.10.24",
         "clarity-ui": "0.10.24",
         "core-js": "^2.4.1",
-        "harbor-ui": "0.7.2",
+        "harbor-ui": "0.7.3",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-cookie": "^1.0.0",

src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.html

@@ -1,3 +1,8 @@
 <div>
-    <hbr-tag-detail (backTagEvt)="goBackTag($event)" (backRepEvt)="goBackRep()" (backProEvt)="goBackPro()" [tagId]="tagId" [withClair]="withClair"  [withAdmiral]="withAdmiral" [repositoryId]="repositoryId"></hbr-tag-detail>
+    <div class="arrow-block" *ngIf="!withAdmiral">
+        <a (click)="goBackPro()">< {{'SIDE_NAV.PROJECTS'| translate}}</a>
+        <a (click)="goBackRep()">< {{'REPOSITORY.REPOSITORIES'| translate}}</a>
+        <a (click)="goBack(repositoryId)">< {{repositoryId}}</a>
+    </div>
+    <hbr-tag-detail (backEvt)="goBack($event)" [tagId]="tagId" [withClair]="withClair"  [withAdmiral]="withAdmiral" [repositoryId]="repositoryId"></hbr-tag-detail>
 </div>

src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.ts

@@ -17,7 +17,8 @@ import {AppConfigService} from "../../app-config.service";
 
 @Component({
   selector: 'repository',
-  templateUrl: 'tag-detail-page.component.html'
+  templateUrl: 'tag-detail-page.component.html',
+  styles: ['.arrow-block a{text-decoration: none; cursor: pointer; cursor: pointer; color: #007cbb; font-size: 12px;}']
 })
 export class TagDetailPageComponent implements OnInit {
   tagId: string;
@@ -45,7 +46,7 @@ export class TagDetailPageComponent implements OnInit {
     return this.appConfigService.getConfig().with_clair;
   }
 
-  goBackTag(tag: string): void {
+  goBack(tag: string): void {
     this.router.navigate(["harbor", "projects", this.projectId, "repositories", tag]);
   }
   goBackRep(): void {

src/ui_ng/src/app/repository/tag-repository/tag-repository.component.css

@@ -1,3 +1,4 @@
 .sub-header-title {
     margin-top: 12px;
-}
+}
+.arrow-block a{text-decoration: none; cursor: pointer; cursor: pointer; color: #007cbb; font-size: 12px;}

src/ui_ng/src/app/repository/tag-repository/tag-repository.component.html

@@ -1,4 +1,8 @@
 <div>
+    <div class="arrow-block" *ngIf="!withAdmiral">
+        <a (click)="goProBack()">< {{'SIDE_NAV.PROJECTS'| translate}}</a>
+        <a (click)="watchGoBackEvt(projectId)">< {{'REPOSITORY.REPOSITORIES'| translate}}</a>
+    </div>
     <hbr-repository [repoName]="repoName" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" [projectId]="projectId" [isGuest]="isGuest"
-    (tagClickEvent)="watchTagClickEvt($event)" (backRepEvt)="goRepBack($event)" (backProEvt)="goProBack()"></hbr-repository>
+                    (tagClickEvent)="watchTagClickEvt($event)" (backEvt)="watchGoBackEvt($event)"></hbr-repository>
 </div>

src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts

@@ -85,7 +85,7 @@ export class TagRepositoryComponent implements OnInit {
     this.router.navigate(linkUrl);
   }
 
-  goRepBack(projectId: string): void {
+  watchGoBackEvt(projectId: string| number): void {
     this.router.navigate(["harbor", "projects", projectId, "repositories"]);
   }
   goProBack(): void {