Modify bread crumb for vic

This commit is contained in:
Fuhui Peng (c) 2018-04-18 18:29:06 +08:00
parent 2f1989d211
commit 8a41bcab93
12 changed files with 73 additions and 46 deletions

View File

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

View File

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

View File

@ -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() backProEvt: EventEmitter<any> = new EventEmitter<any>();
@Output() backEvt: 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 {
this.backRepEvt.emit(this.projectId);
}
goProBack(): void {
this.backProEvt.emit();
goBack(): void {
this.backEvt.emit(this.projectId);
}
hasChanges() {

View File

@ -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{
text-decoration: none;
.arrow-back {
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;
}

View File

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

View File

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

View File

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

View File

@ -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>

View File

@ -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 {

View File

@ -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;}

View File

@ -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>

View File

@ -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 {