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

Fix datagrid text overflow issue --1.10new feature change

Browse Source 
Signed-off-by: Yogi_Wang <yawang@vmware.com>
This commit is contained in:
Yogi_Wang 2019-11-15 15:25:52 +08:00
parent 1ccbc3b52b
commit 0de882ffa6
7 changed files with 22 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/portal/lib/src/tag/tag.component.html
View File

@ -92,9 +92,9 @@
<clr-dg-placeholder>{{'TAG.PLACEHOLDER' | translate }}</clr-dg-placeholder> <clr-dg-placeholder>{{'TAG.PLACEHOLDER' | translate }}</clr-dg-placeholder>
<clr-dg-row *clrDgItems="let t of tags" [clrDgItem]='t'> <clr-dg-row *clrDgItems="let t of tags" [clrDgItem]='t'>
<clr-dg-cell class="truncated flex-max-width"> <clr-dg-cell class="truncated flex-max-width">
<div class="cell"> <div class="cell white-normal" [class.immutable]="t.immutable">
<a href="javascript:void(0)" (click)="onTagClick(t)" title="{{t.name}}">{{t.name}}</a> <a href="javascript:void(0)" class="max-width-100" (click)="onTagClick(t)" title="{{t.name}}">{{t.name}}</a>
<span *ngIf="t.immutable" class="label label-info ml-1">{{'REPOSITORY.IMMUTABLE' | translate}}</span> <span *ngIf="t.immutable" class="label label-info ml-5">{{'REPOSITORY.IMMUTABLE' | translate}}</span>
</div> </div>
</clr-dg-cell> </clr-dg-cell>
<clr-dg-cell> <clr-dg-cell>

24
src/portal/lib/src/tag/tag.component.scss
View File

@ -225,7 +225,8 @@ hbr-image-name-input {
.datagrid-top { .datagrid-top {
.flex-max-width { .flex-max-width {
max-width: 220px max-width: 220px;
min-width: 130px;
} }
} }
@ -252,13 +253,16 @@ clr-datagrid {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
// todo :can be improved
:host::ng-deep clr-dg-row { .ml-5 {
.datagrid-select { margin-left: 8px !important;
.clr-checkbox-wrapper {
input[type=checkbox] + label {
margin: 0;
}
}
}
} }
.immutable {
padding-right: 80px;
}
.white-normal {
white-space: normal;
}
.max-width-100 {
max-width: 100%;
}

6
src/portal/src/app/config/scanner/config-scanner.component.html
View File

@ -61,15 +61,15 @@
<clr-dg-row *clrDgItems="let scanner of scanners" [clrDgItem]="scanner"> <clr-dg-row *clrDgItems="let scanner of scanners" [clrDgItem]="scanner">
<clr-dg-cell class="position-relative"> <clr-dg-cell class="position-relative">
<span>{{scanner.name}}</span> <span>{{scanner.name}}</span>
<span *ngIf="scanner.is_default" class="label label-info ml-1 label-in-cell">{{'SCANNER.DEFAULT' | translate}}</span> <span *ngIf="scanner.is_default" class="label label-info ml-1">{{'SCANNER.DEFAULT' | translate}}</span>
</clr-dg-cell> </clr-dg-cell>
<clr-dg-cell>{{scanner.url}}</clr-dg-cell> <clr-dg-cell>{{scanner.url}}</clr-dg-cell>
<clr-dg-cell class="position-relative"> <clr-dg-cell class="position-relative">
<span *ngIf="scanner.loadingMetadata;else elseBlockLoading" class="spinner spinner-inline ml-2"></span> <span *ngIf="scanner.loadingMetadata;else elseBlockLoading" class="spinner spinner-inline ml-2"></span>
<ng-template #elseBlockLoading> <ng-template #elseBlockLoading>
<span *ngIf="scanner.metadata;else elseBlock" class="label label-success label-in-cell">{{'SCANNER.HEALTHY' | translate}}</span> <span *ngIf="scanner.metadata;else elseBlock" class="label label-success">{{'SCANNER.HEALTHY' | translate}}</span>
<ng-template #elseBlock> <ng-template #elseBlock>
<span class="label label-danger label-in-cell">{{'SCANNER.UNHEALTHY' | translate}}</span> <span class="label label-danger">{{'SCANNER.UNHEALTHY' | translate}}</span>
</ng-template> </ng-template>
</ng-template> </ng-template>
</clr-dg-cell> </clr-dg-cell>

4
src/portal/src/app/config/scanner/config-scanner.component.scss
View File

@ -31,7 +31,3 @@
.margin-left-10 { .margin-left-10 {
margin-left: 10px; margin-left: 10px;
} }
.label-in-cell {
position: absolute;
margin-top: -3px;
}

2
src/portal/src/app/project/scanner/scanner.component.html
View File

@ -76,7 +76,7 @@
<clr-dg-cell>{{scanner.name}}</clr-dg-cell> <clr-dg-cell>{{scanner.name}}</clr-dg-cell>
<clr-dg-cell>{{scanner.url}}</clr-dg-cell> <clr-dg-cell>{{scanner.url}}</clr-dg-cell>
<clr-dg-cell class="position-relative"> <clr-dg-cell class="position-relative">
<span *ngIf="scanner.is_default" class="label label-info label-in-cell">{{scanner.is_default}}</span> <span *ngIf="scanner.is_default" class="label label-info">{{scanner.is_default}}</span>
<span *ngIf="!scanner.is_default">{{scanner.is_default}}</span> <span *ngIf="!scanner.is_default">{{scanner.is_default}}</span>
</clr-dg-cell> </clr-dg-cell>
<clr-dg-cell>{{scanner.description}}</clr-dg-cell> <clr-dg-cell>{{scanner.description}}</clr-dg-cell>

4
src/portal/src/app/project/scanner/scanner.component.scss
View File

@ -21,7 +21,3 @@
.clr-form-control { .clr-form-control {
margin-top: 0.75rem !important; margin-top: 0.75rem !important;
} }
.label-in-cell {
position: absolute;
margin-top: -3px;
}

2
src/portal/src/app/project/tag-retention/tag-retention.component.scss
View File

@ -81,7 +81,7 @@
flex: 0 0 8.3%; flex: 0 0 8.3%;
padding-left: 0.5rem; padding-left: 0.5rem;
} }
::ng-deep { :host::ng-deep {
.datagrid-row-flex { .datagrid-row-flex {
.datagrid-row-detail { .datagrid-row-detail {
.datagrid-cell { .datagrid-cell {