Merge pull request #4720 from ninjadq/fix_default_view_to_card_view

Fix default view problem and styles issues

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

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

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

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">
+                            <span class="card-media-title">{{item.name}}</span>
-                                {{ (item.name?.length>29) ? (item.name | slice:0:29) + '...' : (item.name)}}
-                            </span>
                             <p class="card-media-text">{{registryUrl}}</p>
                         </div>
                     </div>

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;

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

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>

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,