mirror of
https://github.com/goharbor/harbor.git
synced 2025-01-23 16:11:24 +01:00
add bread crumb under project
This commit is contained in:
parent
a9c7b34de9
commit
5b6fe1fccc
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
@ -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",
|
||||
|
@ -23,4 +23,7 @@
|
||||
|
||||
.nav-link-override {
|
||||
width: 126px !important;
|
||||
}
|
||||
:host >>> .clr-vertical-nav .nav-trigger+.nav-content{
|
||||
padding-top: 0;
|
||||
}
|
@ -17,5 +17,7 @@
|
||||
font-style: italic;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
.cursor{
|
||||
.backStyle{
|
||||
color: #007cbb;
|
||||
font-size: 12px;
|
||||
cursor: pointer;}
|
@ -1,4 +1,4 @@
|
||||
<a *ngIf="hasSignedIn" (click)="backToProject()" class="cursor">< {{'PROJECT_DETAIL.PROJECTS' | translate}}</a>
|
||||
<a *ngIf="hasSignedIn" (click)="backToProject()" class="backStyle">< {{'PROJECT_DETAIL.PROJECTS' | translate}}</a>
|
||||
<a *ngIf="!hasSignedIn" [routerLink]="['/harbor', 'sign-in']">< {{'SEARCH.BACK' | translate}}</a>
|
||||
|
||||
<h1 class="custom-h2" sub-header-title>{{currentProject.name}} <span class="role-label" *ngIf="isMember">{{roleName | translate}}</span></h1>
|
||||
|
@ -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>
|
@ -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"]);
|
||||
}
|
||||
}
|
@ -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>
|
@ -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"]);
|
||||
}
|
||||
}
|
@ -67,4 +67,5 @@
|
||||
}
|
||||
.custom-h2 {
|
||||
margin-top: 0px !important;
|
||||
line-height: 24px;
|
||||
}
|
Loading…
Reference in New Issue
Block a user