From ca9de64cdb95b480758154f476da10fafc864ceb Mon Sep 17 00:00:00 2001
From: "Deng, Qian" <dengqian0826@gmail.com>
Date: Wed, 18 Apr 2018 20:04:12 +0800
Subject: [PATCH] Fix default view problem and styles issues
Set default view of repo to cardview
Fix card title style issue that break test
---
src/ui_ng/lib/package.json | 2 +-
src/ui_ng/lib/pkg/package.json | 2 +-
.../repository-gridview.component.css.ts | 16 ++++++++++------
.../repository-gridview.component.html.ts | 6 ++----
.../repository-gridview.component.ts | 5 +++--
src/ui_ng/package.json | 2 +-
.../repository/repository-page.component.html | 2 +-
.../app/repository/repository-page.component.ts | 1 +
8 files changed, 20 insertions(+), 16 deletions(-)
diff --git a/src/ui_ng/lib/package.json b/src/ui_ng/lib/package.json
index 3349775b9..b4aefed86 100644
--- a/src/ui_ng/lib/package.json
+++ b/src/ui_ng/lib/package.json
@@ -1,6 +1,6 @@
{
"name": "harbor-ui",
- "version": "0.7.1",
+ "version": "0.7.2",
"description": "Harbor shared UI components based on Clarity and Angular4",
"scripts": {
"start": "ng serve --host 0.0.0.0 --port 4500 --proxy-config proxy.config.json",
diff --git a/src/ui_ng/lib/pkg/package.json b/src/ui_ng/lib/pkg/package.json
index 1b9a124b5..187bf8bd4 100644
--- a/src/ui_ng/lib/pkg/package.json
+++ b/src/ui_ng/lib/pkg/package.json
@@ -1,6 +1,6 @@
{
"name": "harbor-ui",
- "version": "0.7.1",
+ "version": "0.7.2",
"description": "Harbor shared UI components based on Clarity and Angular4",
"author": "VMware",
"module": "index.js",
diff --git a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.css.ts b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.css.ts
index b0b8539e5..acb48ccbd 100644
--- a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.css.ts
+++ b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.css.ts
@@ -36,16 +36,20 @@ export const REPOSITORY_GRIDVIEW_STYLE = `
width: 100px;
}
-
-.card-media-block {
- margin-top: 12px;
- margin-bottom: 12px;
-}
-
.card-media-block > img {
height: 45px;
width: 45px;
}
+
+.card-media-title {
+ overflow: hidden;
+ height: 24px;
+}
+.card-media-text {
+ overflow: hidden;
+ height: 21px
+}
+
.card-media-description {
height: 45px;
}
diff --git a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html.ts b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html.ts
index 4d56b3396..409b119e2 100644
--- a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html.ts
+++ b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html.ts
@@ -50,12 +50,10 @@ export const REPOSITORY_GRIDVIEW_TEMPLATE = `
<ng-template let-item="item">
<a class="card clickable" (click)="watchRepoClickEvt(item)">
<div class="card-header">
- <div [ngClass]="{'card-media-block': withAdmiral, 'card-media-block wrap': !withAdmiral }">
+ <div [ngClass]="{'card-media-block': true, 'wrap': !withAdmiral }">
<img *ngIf="withAdmiral" [src]="getImgLink(item)"/>
<div class="card-media-description">
- <span class="card-media-title">
- {{ (item.name?.length>29) ? (item.name | slice:0:29) + '...' : (item.name)}}
- </span>
+ <span class="card-media-title">{{item.name}}</span>
<p class="card-media-text">{{registryUrl}}</p>
</div>
</div>
diff --git a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts
index 5fd234578..09a6a9af6 100644
--- a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts
+++ b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts
@@ -32,6 +32,7 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
@Input() urlPrefix: string;
@Input() hasSignedIn: boolean;
@Input() hasProjectAdminRole: boolean;
+ @Input() mode = 'admiral';
@Output() repoClickEvent = new EventEmitter<RepositoryItem>();
@Output() repoProvisionEvent = new EventEmitter<RepositoryItem>();
@Output() addInfoEvent = new EventEmitter<RepositoryItem>();
@@ -87,7 +88,7 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
}
public get withAdmiral(): boolean {
- return this.systemInfo ? this.systemInfo.with_admiral : false;
+ return this.mode === 'admiral'
}
public get showDBStatusWarning(): boolean {
@@ -106,7 +107,7 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
.then(systemInfo => this.systemInfo = systemInfo)
.catch(error => this.errorHandler.error(error));
- if (this.withAdmiral) {
+ if (this.mode === 'admiral') {
this.isCardView = true;
} else {
this.isCardView = false;
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json
index 90acc0295..5821269f3 100644
--- a/src/ui_ng/package.json
+++ b/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.1",
+ "harbor-ui": "0.7.2",
"intl": "^1.2.5",
"mutationobserver-shim": "^0.3.2",
"ngx-cookie": "^1.0.0",
diff --git a/src/ui_ng/src/app/repository/repository-page.component.html b/src/ui_ng/src/app/repository/repository-page.component.html
index 449b67ca9..a073468a7 100644
--- a/src/ui_ng/src/app/repository/repository-page.component.html
+++ b/src/ui_ng/src/app/repository/repository-page.component.html
@@ -1,5 +1,5 @@
<div style="margin-top: 4px;">
<hbr-repository-gridview [projectId]="projectId" [projectName]="projectName" [hasSignedIn]="hasSignedIn"
- [hasProjectAdminRole]="hasProjectAdminRole"
+ [hasProjectAdminRole]="hasProjectAdminRole" [mode]="mode"
(repoClickEvent)="watchRepoClickEvent($event)"></hbr-repository-gridview>
</div>
\ No newline at end of file
diff --git a/src/ui_ng/src/app/repository/repository-page.component.ts b/src/ui_ng/src/app/repository/repository-page.component.ts
index 5e77fb926..8d6e6ce07 100644
--- a/src/ui_ng/src/app/repository/repository-page.component.ts
+++ b/src/ui_ng/src/app/repository/repository-page.component.ts
@@ -28,6 +28,7 @@ export class RepositoryPageComponent implements OnInit {
hasProjectAdminRole: boolean;
hasSignedIn: boolean;
projectName: string;
+ mode = 'standalone';
constructor(
private route: ActivatedRoute,