upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor synced 2025-04-17 16:19:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refine helm chart card view

Browse Source 
Changes including:

1 chart list view will have icon which from the latest version.

2 Card View will change to the option2 (large icon).

3 version list will also have icons inside the data grid.
This commit is contained in:
Mia ZHOU 2018-08-08 10:22:07 +08:00
parent 8f183c02ae
commit e2edbef3df
7 changed files with 48 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/ui_ng/lib/src/helm-chart/helm-chart.component.html
View File

@ -51,24 +51,19 @@
</div> </div>
</div> </div>
<div *ngIf="isCardView" class="row card-container"> <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)"> <a let i=index; class="card clickable" (click)="onChartClick(item)">
<div class="card-header"> <div class="card-header">
<div class="card-media-block wrap"> <div class="card-icon">
<div class="card-media-description"> <img class="size-60" [src]="item.icon ?item.icon:chartDefaultIcon" (error)="getDefaultIcon(item);" />
<span class="card-media-title">{{item.name}}</span>
<p class="card-media-text">{{item.home}}</p>
</div>
</div> </div>
<div class="card-title">{{item.name}}</div>
</div> </div>
<div class="card-block"> <div class="card-footer">
<div class="form-group"> <div class="form-group">
<label>{{'HELM_CHART.VERSIONS' | translate}}</label> <span class="version-text">{{item.total_versions}}</span>
<div>{{item.total_versions}}</div> <label *ngIf="item.total_versions !== 1">{{'HELM_CHART.CHARTVERSIONS' | translate}}</label>
</div> <label *ngIf="item.total_versions === 1">{{'HELM_CHART.VERSION' | translate}}</label>
<div class="form-group">
<label>{{'HELM_CHART.CREATED' | translate}}</label>
<div>{{item.Created | date}}</div>
</div> </div>
</div> </div>
</a> </a>

57
src/ui_ng/lib/src/helm-chart/helm-chart.component.scss
View File

@ -1,6 +1,12 @@
@import "../mixin"; @import "../mixin";
$width:24px; $size24:24px;
$height:$width; $size60:60px;
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.chart-tool { .chart-tool {
position: relative; position: relative;
.toolbar { .toolbar {
@ -11,7 +17,7 @@ $height:$width;
display: inline-block; display: inline-block;
height: 16px; height: 16px;
width: 2px; width: 2px;
background-color: #cccccc; background-color: #ccc;
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
position: relative; position: relative;
@ -26,32 +32,20 @@ $height:$width;
.card-container { .card-container {
margin-top: 21px; margin-top: 21px;
.card-header { .card-header {
.card-media-block { .card-icon {
.card-media-description { @include flex-center;
height: 45px; }
p { .card-title {
margin-top: 0; @include text-overflow;
} text-align:center;
.card-media-title { margin:15px;
overflow: hidden;
height: 24px;
}
.card-media-text {
overflow: hidden;
height: 21px
}
}
} }
} }
.card-block { .card-footer {
margin-top: 24px; background-color:#d7d7d7;
min-height: 100px; .version-text {
.form-group { font-size:1.1rem;
display: flex; }
label {
width: 100px;
}
}
} }
} }
@ -62,8 +56,13 @@ $height:$width;
} }
.size-24 { .size-24 {
width:$width; width:$size24;
height:$height; height:$size24;
}
.size-60 {
height:$size60;
max-width:165px;
} }
.margin-right-12 { .margin-right-12 {

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

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

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

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

2
src/ui_ng/lib/src/shared/shared.const.ts
View File

@ -91,4 +91,4 @@ export const LabelColor = [
export const RoleMapping = { 'projectAdmin': 'MEMBER.PROJECT_ADMIN', 'developer': 'MEMBER.DEVELOPER', 'guest': 'MEMBER.GUEST' }; 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';

BIN
src/ui_ng/src/images/helm-gray.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

1
src/ui_ng/src/images/helm-logo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 33 KiB