Merge pull request #4610 from pengpengshui/fixIssue

Add bread crumb under project
This commit is contained in:
pengpengshui 2018-04-10 17:27:54 +08:00 committed by GitHub
commit 0d576fb19b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 59 additions and 51 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -23,4 +23,7 @@
.nav-link-override {
width: 126px !important;
}
:host >>> .clr-vertical-nav .nav-trigger+.nav-content{
padding-top: 0;
}

View File

@ -17,5 +17,7 @@
font-style: italic;
letter-spacing: 0.01em;
}
.cursor{
.backStyle{
color: #007cbb;
font-size: 12px;
cursor: pointer;}

View File

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

View File

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

View File

@ -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"]);
}
}

View File

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

View File

@ -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"]);
}
}

View File

@ -67,4 +67,5 @@
}
.custom-h2 {
margin-top: 0px !important;
line-height: 24px;
}