Merge pull request #8443 from jwangyangls/fix-many-issue

Fix many issue  for harbor for ui
This commit is contained in:
jwangyangls 2019-07-31 16:00:37 +08:00 committed by GitHub
commit 270f9ea213
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 32 additions and 23 deletions

View File

@ -1,6 +1,6 @@
<span> <span>
<clr-icon shape="search" size="20" class="search-btn" [class.filter-icon]="isShowSearchBox" (click)="onClick()"></clr-icon> <clr-icon shape="search" size="20" class="search-btn" [class.filter-icon]="isShowSearchBox" (click)="onClick()"></clr-icon>
<input [hidden]="!isShowSearchBox" type="text" class="filter-input" (keyup)="valueChange()" (focus)="inputFocus()" <input [hidden]="!isShowSearchBox" type="text" class="filter-input" autofocus (keyup)="valueChange()" (focus)="inputFocus()"
placeholder="{{placeHolder}}" [(ngModel)]="currentValue" /> placeholder="{{placeHolder}}" [(ngModel)]="currentValue" />
<span class="filter-divider" *ngIf="withDivider"></span> <span class="filter-divider" *ngIf="withDivider"></span>
</span> </span>

View File

@ -7,6 +7,7 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: .875rem; line-height: .875rem;
cursor: inherit;
} }
.label clr-icon { .label clr-icon {

View File

@ -1,18 +1,21 @@
<div> <div>
<div class="form-group filter-div"> <div class="form-group filter-div">
<input #filterInput type="text" placeholder='{{"LABEL.FILTER_LABEL_PLACEHOLDER" | translate }}' [(ngModel)]="labelFilter"> <input #filterInput type="text" placeholder='{{"LABEL.FILTER_LABEL_PLACEHOLDER" | translate }}'
[(ngModel)]="labelFilter">
</div> </div>
<div class="label-items-container"> <div class="label-items-container">
<div class="dropdown-item" *ngFor='let label of filteredLabels'> <div class="dropdown-item" *ngFor='let label of filteredLabels'>
<span class="check-label-span"> <div class="cur-pointer" (click)="selectLabel(label)">
<clr-icon *ngIf="isSelected(label)" shape="check"></clr-icon> <span class="check-label-span">
</span> <clr-icon *ngIf="isSelected(label)" shape="check"></clr-icon>
<span (click)="selectLabel(label)"> </span>
<hbr-label-piece [label]="label" [labelWidth]="90"></hbr-label-piece> <span class="cur-pointer">
</span> <hbr-label-piece [label]="label" [labelWidth]="90"></hbr-label-piece>
<span class="x-label-span" (click)="unselectLabel(label)"> </span>
<clr-icon *ngIf="isSelected(label)" shape="times-circle"></clr-icon> <span *ngIf="isSelected(label)" class="x-label-span" (click)="$event.stopPropagation(); unselectLabel(label)">
</span> <clr-icon shape="times-circle"></clr-icon>
</span>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -7,7 +7,9 @@
margin-left: 9px; margin-left: 9px;
margin-bottom: 12px; margin-bottom: 12px;
} }
.cur-pointer {
cursor: pointer;
}
.label-items-container { .label-items-container {
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;

View File

@ -5,18 +5,21 @@
</div> </div>
<div class="label-items-container"> <div class="label-items-container">
<div class="dropdown-item" *ngFor='let label of sortedLabels'> <div class="dropdown-item" *ngFor='let label of sortedLabels'>
<div *ngIf="!isMarkOngoing(label)" class="mark-label-div"> <div (click)="markLabel(label)">
<clr-icon *ngIf="isMarked(label)" shape="check" ></clr-icon> <div *ngIf="!isMarkOngoing(label)" class="mark-label-div">
</div> <clr-icon *ngIf="isMarked(label)" shape="check"></clr-icon>
<div *ngIf="isMarkOngoing(label)" class="spinner spinner-sm"> </div>
<div *ngIf="isMarkOngoing(label)" class="spinner spinner-sm">
Loading... Loading...
</div>
<div class="label-div">
<hbr-label-piece [label]="label" [labelWidth]="130"></hbr-label-piece>
</div>
<div class="unmark-label-div" (click)="unmarkLabel(label)">
<clr-icon *ngIf="isMarked(label)" shape="times-circle"></clr-icon>
</div>
</div> </div>
<div (click)="markLabel(label)" class="label-div">
<hbr-label-piece [label]="label" [labelWidth]="130"></hbr-label-piece>
</div>
<div class="unmark-label-div" (click)="unmarkLabel(label)">
<clr-icon *ngIf="isMarked(label)" shape="times-circle"></clr-icon>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -77,7 +77,7 @@ body {
} }
.datagrid-header{ .datagrid-header{
z-index: 1 !important; z-index: 0 !important;
} }
.color-green { .color-green {