Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-09-30 06:18:02 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #9881 from jwangyangls/fix-datagrid-text-overflow

Browse Source 
Fix datagrid text overflow issue
This commit is contained in:
jwangyangls 2019-11-18 17:21:41 +08:00 committed by GitHub
commit a1ccc0242b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 82 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/portal/lib/src/label/label.component.scss
View File

@ -16,6 +16,10 @@
}
}
}
hbr-label-piece {
max-width: 100%;
display: flex;
}
}

10
src/portal/lib/src/replication/replication.component.html
View File

@ -27,10 +27,12 @@
<div class="row flex-items-xs-between flex-items-xs-bottom fiter-task">
<div class="execution-select">
<div class="select filter-tag" [hidden]="!isOpenFilterTag">
<select (change)="doFilterJob($event)">
<option value="trigger">{{'REPLICATION.REPLICATION_TRIGGER' |translate}}</option>
<option value="status">{{'REPLICATION.STATUS' | translate}}</option>
</select>
<clr-select-container>
<select clrSelect (change)="doFilterJob($event)" >
<option value="trigger">{{'REPLICATION.REPLICATION_TRIGGER' |translate}}</option>
<option value="status">{{'REPLICATION.STATUS' | translate}}</option>
</select>
</clr-select-container>
</div>
<hbr-filter id="filter-executions" [withDivider]="true" (openFlag)="openFilter($event)"
filterPlaceholder='{{"REPLICATION.FILTER_EXECUTIONS_PLACEHOLDER" | translate}}'

10
src/portal/lib/src/replication/replication.component.scss
View File

@ -22,6 +22,9 @@
.filter-tag {
float: left;
margin-top: 8px;
.clr-form-control {
margin-top: 0;
}
}
.refresh-btn {
cursor: pointer;
@ -79,4 +82,9 @@ clr-datagrid {
::ng-deep .datagrid-table {
position: static;
}
}
}
.flex-items-xs-between {
display: flex;
justify-content: space-between;
}

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-row *clrDgItems="let t of tags" [clrDgItem]='t'>
<clr-dg-cell class="truncated flex-max-width">
<div class="cell">
<a href="javascript:void(0)" (click)="onTagClick(t)" title="{{t.name}}">{{t.name}}</a>
<span *ngIf="t.immutable" class="label label-info ml-1">{{'REPOSITORY.IMMUTABLE' | translate}}</span>
<div class="cell white-normal" [class.immutable]="t.immutable">
<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-5">{{'REPOSITORY.IMMUTABLE' | translate}}</span>
</div>
</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 {
.flex-max-width {
max-width: 220px
max-width: 220px;
min-width: 130px;
}
}
@ -252,13 +253,16 @@ clr-datagrid {
width: 100%;
height: 100%;
}
// todo :can be improved
:host::ng-deep clr-dg-row {
.datagrid-select {
.clr-checkbox-wrapper {
input[type=checkbox] + label {
margin: 0;
}
}
}
.ml-5 {
margin-left: 8px !important;
}
.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-cell class="position-relative">
<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>{{scanner.url}}</clr-dg-cell>
<clr-dg-cell class="position-relative">
<span *ngIf="scanner.loadingMetadata;else elseBlockLoading" class="spinner spinner-inline ml-2"></span>
<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>
<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>
</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: 10px;
}
.label-in-cell {
position: absolute;
margin-top: -3px;
}

3
src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.scss
View File

@ -67,8 +67,7 @@ $size60:60px;
}
.size-24 {
width:$size24;
height:$size24;
width: 60px;
}
.size-60 {

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.url}}</clr-dg-cell>
<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>
</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 {
margin-top: 0.75rem !important;
}
.label-in-cell {
position: absolute;
margin-top: -3px;
}

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

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

32
src/portal/src/global.scss
View File

@ -292,3 +292,35 @@
.position-relative {
position: relative;
}
clr-datagrid {
clr-dg-row {
.datagrid-scrolling-cells {
align-items: center;
width: 100%;
}
clr-dg-cell {
overflow-wrap: break-word;
}
.datagrid-expandable-caret-icon {
margin-top: 0;
}
}
.datagrid-select {
display: flex;
align-items: center;
clr-checkbox-wrapper,
clr-radio-wrapper {
.clr-control-label {
min-height: 0.8rem;
}
}
}
.datagrid-table {
.datagrid-column {
.datagrid-column-title,
clr-dg-filter {
align-self: center;
}
}
}
}