Merge pull request #5551 from zhoumeina/pr/helm-chart-card-refine

Pr/helm chart card refine

src/ui_ng/lib/src/helm-chart/helm-chart.component.html

@@ -34,6 +34,9 @@
                 <clr-dg-placeholder>{{'HELM_CHART.PLACEHOLDER' | translate }}</clr-dg-placeholder>
                 <clr-dg-row *ngFor="let chart of charts" [clrDgItem]="chart">
                     <clr-dg-cell>
+                        <span class="list-img">
+                           <img  class="size-24 margin-right-12" [src]="chart.icon ?chart.icon:chartDefaultIcon"  (error)="getDefaultIcon(chart);" />
+                        </span>
                         <a href="javascript:void(0)" (click)="onChartClick(chart)">{{ chart.name }}</a>
                     </clr-dg-cell>
                     <clr-dg-cell>{{ chart.total_versions }}</clr-dg-cell>
@@ -48,24 +51,19 @@
         </div>
     </div>
     <div *ngIf="isCardView" class="row card-container">
-        <div *ngFor="let item of charts;" class="col-lg-3 col-md-4 col-sm-6">
+        <div *ngFor="let item of charts;" class="col-lg-2 col-md-5 col-sm-5 col-xs-6">
             <a let i=index; class="card clickable" (click)="onChartClick(item)">
                 <div class="card-header">
-                    <div class="card-media-block wrap">
-                        <div class="card-media-description">
-                            <span class="card-media-title">{{item.name}}</span>
-                            <p class="card-media-text">{{item.home}}</p>
-                        </div>
+                    <div class="card-icon">
+                        <img  class="size-60" [src]="item.icon ?item.icon:chartDefaultIcon"  (error)="getDefaultIcon(item);" />
                     </div>
+                    <div class="card-title">{{item.name}}</div>
                 </div>
-                <div class="card-block">
+                <div class="card-footer">
                     <div class="form-group">
-                        <label>{{'HELM_CHART.VERSIONS' | translate}}</label>
-                        <div>{{item.total_versions}}</div>
-                    </div>
-                    <div class="form-group">
-                            <label>{{'HELM_CHART.CREATED' | translate}}</label>
-                            <div>{{item.Created | date}}</div>
+                        <span class="version-text">{{item.total_versions}}</span>
+                        <label *ngIf="item.total_versions !== 1">{{'HELM_CHART.CHARTVERSIONS' | translate}}</label>
+                        <label *ngIf="item.total_versions === 1">{{'HELM_CHART.VERSION' | translate}}</label>
                     </div>
                 </div>
             </a>

src/ui_ng/lib/src/helm-chart/helm-chart.component.scss

@@ -1,17 +1,23 @@
+@import "../mixin";
+$size24:24px;
+$size60:60px;
+
+@mixin flex-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 .chart-tool {
     position: relative;
     .toolbar {
         overflow: hidden;
         .rightPos {
-            position: absolute;
-            z-index: 100;
-            right: 35px;
-            margin-top: 4px;
+            @include grid-left-top-pos;
             .filter-divider {
                 display: inline-block;
                 height: 16px;
                 width: 2px;
-                background-color: #cccccc;
+                background-color: #ccc;
                 padding-top: 12px;
                 padding-bottom: 12px;
                 position: relative;
@@ -26,32 +32,20 @@
 .card-container {
     margin-top: 21px;
     .card-header {
-        .card-media-block {
-            .card-media-description {
-                height: 45px;
-                p {
-                    margin-top: 0;
-                }
-                .card-media-title {
-                    overflow: hidden;
-                    height: 24px;
-                }
-                .card-media-text {
-                    overflow: hidden;
-                    height: 21px
-                }
-            }
+        .card-icon {
+           @include flex-center;
+        }
+        .card-title {
+           @include text-overflow;
+           text-align:center;
+           margin:15px;
         }
     }
-    .card-block {
-        margin-top: 24px;
-        min-height: 100px;
-        .form-group {
-            display: flex;
-            label {
-                width: 100px;
-            }
-        }
+    .card-footer {
+        background-color:#d7d7d7;
+         .version-text {
+             font-size:1.1rem;
+         }
     }
 }
 
@@ -59,4 +53,18 @@
     display: inline-block;
     height: 100%;
     vertical-align: middle;
+}
+
+.size-24 {
+    width:$size24;
+    height:$size24;
+}
+
+.size-60 {
+    height:$size60;
+    max-width:165px;
+}
+
+.margin-right-12 {
+    margin-right:12px;
 }

src/ui_ng/lib/src/helm-chart/helm-chart.component.ts

@@ -14,6 +14,7 @@ import { SystemInfo, SystemInfoService, HelmChartItem } from "../service/index";
 import { ErrorHandler } from "../error-handler/error-handler";
 import { toPromise, DEFAULT_PAGE_SIZE } from "../utils";
 import { HelmChartService } from "../service/helm-chart.service";
+import { DefaultHelmIcon} from "../shared/shared.const";
 
 @Component({
   selector: "hbr-helm-chart",
@@ -30,6 +31,7 @@ export class HelmChartComponent implements OnInit {
   @Input() hasProjectAdminRole: boolean;
   @Output() chartClickEvt = new EventEmitter<any>();
   @Output() chartDownloadEve = new EventEmitter<string>();
+  @Input() chartDefaultIcon: string = DefaultHelmIcon;
 
   lastFilteredChartName: string;
   charts: HelmChartItem[] = [];
@@ -173,4 +175,8 @@ export class HelmChartComponent implements OnInit {
       return this.listHover;
     }
   }
+
+  getDefaultIcon(chart: HelmChartItem) {
+    chart.icon = this.chartDefaultIcon;
+  }
 }

src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html

@@ -82,21 +82,21 @@
                         <img [src]="getImgLink(item)"/>
                         <div class="card-media-description">
                             <span class="card-media-title">{{item.name}}</span>
-                            <p class="card-media-text">{{item.home}}</p>
+                            <a class="card-media-text">{{item.home}}</a>
                         </div>
                     </div>
                 </div>
                 <div class="card-block">
                     <div class="form-group">
-                        <label>{{'HELM_CHART.ENGINE' | translate}}</label>
+                        <label class="card-label">{{'HELM_CHART.ENGINE' | translate}}</label>
                         <div>{{item.engine}}</div>
                     </div>
                     <div class="form-group">
-                        <label>{{'HELM_CHART.MAINTAINERS' | translate}}</label>
+                        <label class="card-label">{{'HELM_CHART.MAINTAINERS' | translate}}</label>
                         <div>{{getMaintainerString(item.maintainers)}}</div>
                     </div>
                     <div class="form-group">
-                        <label>{{'HELM_CHART.VERSION' | translate}}</label>
+                        <label class="card-label">{{'HELM_CHART.VERSION' | translate}}</label>
                         <div>{{item.appVersion}}</div>
                     </div>
                 </div>

src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.scss

@@ -42,28 +42,30 @@
                 width: 45px;
             }
             .card-media-description {
+                width:80%;
                 height: 45px;
-                p {
-                    margin-top: 0;
-                }
                 .card-media-title {
                     overflow: hidden;
                     height: 24px;
                 }
                 .card-media-text {
-                    overflow: hidden;
-                    height: 21px
+                    font-size:0.8em;
+                    color:#007cbb;
+                    @include text-overflow;
+                    height: 20px;
                 }
             }
         }
     }
     .card-block {
+        font-size:0.9em;
         margin-top: 24px;
         min-height: 100px;
         .form-group {
             display: flex;
             label {
                 width: 100px;
+                color:#aaa;
             }
         }
         margin-top: 0px;

src/ui_ng/lib/src/shared/shared.const.ts

@@ -91,4 +91,4 @@ export const LabelColor = [
 
 export const RoleMapping = { 'projectAdmin': 'MEMBER.PROJECT_ADMIN', 'developer': 'MEMBER.DEVELOPER', 'guest': 'MEMBER.GUEST' };
 
-export const DefaultHelmIcon = '/static/images/helm-logo.svg';
+export const DefaultHelmIcon = '/static/images/helm-gray.png';