mirror of
https://github.com/goharbor/harbor.git
synced 2024-10-01 06:47:33 +02:00
Merge pull request #5551 from zhoumeina/pr/helm-chart-card-refine
Pr/helm chart card refine
This commit is contained in:
commit
4367e7887a
@ -34,6 +34,9 @@
|
|||||||
<clr-dg-placeholder>{{'HELM_CHART.PLACEHOLDER' | translate }}</clr-dg-placeholder>
|
<clr-dg-placeholder>{{'HELM_CHART.PLACEHOLDER' | translate }}</clr-dg-placeholder>
|
||||||
<clr-dg-row *ngFor="let chart of charts" [clrDgItem]="chart">
|
<clr-dg-row *ngFor="let chart of charts" [clrDgItem]="chart">
|
||||||
<clr-dg-cell>
|
<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>
|
<a href="javascript:void(0)" (click)="onChartClick(chart)">{{ chart.name }}</a>
|
||||||
</clr-dg-cell>
|
</clr-dg-cell>
|
||||||
<clr-dg-cell>{{ chart.total_versions }}</clr-dg-cell>
|
<clr-dg-cell>{{ chart.total_versions }}</clr-dg-cell>
|
||||||
@ -48,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>
|
||||||
|
@ -1,17 +1,23 @@
|
|||||||
|
@import "../mixin";
|
||||||
|
$size24:24px;
|
||||||
|
$size60:60px;
|
||||||
|
|
||||||
|
@mixin flex-center {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
.chart-tool {
|
.chart-tool {
|
||||||
position: relative;
|
position: relative;
|
||||||
.toolbar {
|
.toolbar {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.rightPos {
|
.rightPos {
|
||||||
position: absolute;
|
@include grid-left-top-pos;
|
||||||
z-index: 100;
|
|
||||||
right: 35px;
|
|
||||||
margin-top: 4px;
|
|
||||||
.filter-divider {
|
.filter-divider {
|
||||||
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 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -59,4 +53,18 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-24 {
|
||||||
|
width:$size24;
|
||||||
|
height:$size24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-60 {
|
||||||
|
height:$size60;
|
||||||
|
max-width:165px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.margin-right-12 {
|
||||||
|
margin-right:12px;
|
||||||
}
|
}
|
@ -14,6 +14,7 @@ import { SystemInfo, SystemInfoService, HelmChartItem } from "../service/index";
|
|||||||
import { ErrorHandler } from "../error-handler/error-handler";
|
import { ErrorHandler } from "../error-handler/error-handler";
|
||||||
import { toPromise, DEFAULT_PAGE_SIZE } from "../utils";
|
import { toPromise, DEFAULT_PAGE_SIZE } from "../utils";
|
||||||
import { HelmChartService } from "../service/helm-chart.service";
|
import { HelmChartService } from "../service/helm-chart.service";
|
||||||
|
import { DefaultHelmIcon} from "../shared/shared.const";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: "hbr-helm-chart",
|
selector: "hbr-helm-chart",
|
||||||
@ -30,6 +31,7 @@ export class HelmChartComponent implements OnInit {
|
|||||||
@Input() hasProjectAdminRole: boolean;
|
@Input() hasProjectAdminRole: boolean;
|
||||||
@Output() chartClickEvt = new EventEmitter<any>();
|
@Output() chartClickEvt = new EventEmitter<any>();
|
||||||
@Output() chartDownloadEve = new EventEmitter<string>();
|
@Output() chartDownloadEve = new EventEmitter<string>();
|
||||||
|
@Input() chartDefaultIcon: string = DefaultHelmIcon;
|
||||||
|
|
||||||
lastFilteredChartName: string;
|
lastFilteredChartName: string;
|
||||||
charts: HelmChartItem[] = [];
|
charts: HelmChartItem[] = [];
|
||||||
@ -173,4 +175,8 @@ export class HelmChartComponent implements OnInit {
|
|||||||
return this.listHover;
|
return this.listHover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getDefaultIcon(chart: HelmChartItem) {
|
||||||
|
chart.icon = this.chartDefaultIcon;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
@ -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
BIN
src/ui_ng/src/images/helm-gray.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.3 KiB |
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 33 KiB |
Loading…
Reference in New Issue
Block a user