Fix UI/UX issues and manuely refresh component when fresh

1. Fix card-title text alignment
2. Trancate text in title if length greater then 29
3. Fix auto refresh data when loading next page in card-view
This commit is contained in:
Deng, Qian 2018-04-16 17:04:20 +08:00
parent 67ae79989d
commit c31fb5ddf2
5 changed files with 7 additions and 5 deletions

View File

@ -1,6 +1,6 @@
{
"name": "harbor-ui",
"version": "0.6.72",
"version": "0.7.0",
"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.6.72",
"version": "0.7.0",
"description": "Harbor shared UI components based on Clarity and Angular4",
"author": "VMware",
"module": "index.js",

View File

@ -50,11 +50,11 @@ export const REPOSITORY_GRIDVIEW_TEMPLATE = `
<ng-template let-item="item">
<a class="card clickable" (click)="watchRepoClickEvt(item)">
<div class="card-header">
<div class="card-media-block">
<div [ngClass]="{'card-media-block': withAdmiral, 'card-media-block wrap': !withAdmiral }">
<img *ngIf="withAdmiral" [src]="getImgLink(item)"/>
<div class="card-media-description">
<span class="card-media-title">
{{item.name}}
{{ (item.name?.length>29) ? (item.name | slice:0:29) + '...' : (item.name)}}
</span>
<p class="card-media-text">{{registryUrl}}</p>
</div>

View File

@ -318,6 +318,8 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
this.loading = false;
this.errorHandler.error(error);
});
let hnd = setInterval(() => this.ref.markForCheck(), 500);
setTimeout(() => clearInterval(hnd), 5000);
}
clrLoad(state: State): void {

View File

@ -30,7 +30,7 @@
"clarity-icons": "0.10.24",
"clarity-ui": "0.10.24",
"core-js": "^2.4.1",
"harbor-ui": "0.6.75",
"harbor-ui": "0.7.0",
"intl": "^1.2.5",
"mutationobserver-shim": "^0.3.2",
"ngx-cookie": "^1.0.0",