Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-19 16:55:16 +01:00
Code Issues Projects Releases Wiki Activity

Fix many issue for harbor for ui

Browse Source 
1.filter input auto focus
2.filter is covered by datagrid
3.modify elements of click action in label
Signed-off-by: Yogi_Wang <yawang@vmware.com>
This commit is contained in:
Yogi_Wang 2019-07-26 11:43:58 +08:00
parent 5a390d2fa0
commit 4adc94762d
6 changed files with 32 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/portal/lib/src/filter/filter.component.html
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>

1
src/portal/lib/src/label-piece/label-piece.component.scss
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 {

23
src/portal/src/app/project/helm-chart/label-filter/label-filter.component.html
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>

4
src/portal/src/app/project/helm-chart/label-filter/label-filter.component.scss
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;

23
src/portal/src/app/project/helm-chart/label-marker/label-marker.component.html
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>

2
src/portal/src/styles.css
View File

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