Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-19 00:36:02 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Pr/helm chart card refine
This commit is contained in:
Qian Deng 2018-08-07 22:57:47 -04:00 committed by GitHub
commit 4367e7887a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 66 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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;
}
}
}
@ -60,3 +54,17 @@
height: 100%;
vertical-align: middle;
}
.size-24 {
width:$size24;
height:$size24;
}
.size-60 {
height:$size60;
max-width:165px;
}
.margin-right-12 {
margin-right:12px;
}

6
src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
View File

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

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

@ -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>

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

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

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