Fix default view problem and styles issues

Set default view of repo to cardview
Fix card title style issue that break test
This commit is contained in:
Deng, Qian 2018-04-18 20:04:12 +08:00
parent 5792829951
commit ca9de64cdb
8 changed files with 20 additions and 16 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -28,6 +28,7 @@ export class RepositoryPageComponent implements OnInit {
hasProjectAdminRole: boolean;
hasSignedIn: boolean;
projectName: string;
mode = 'standalone';
constructor(
private route: ActivatedRoute,