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

rewrite layout about filter by label and tesecase #4809

Browse Source
This commit is contained in:
pfh 2018-05-07 14:08:19 +08:00
parent 86dddf444a
commit 2f6dcce0d5
7 changed files with 111 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/ui_ng/lib/src/filter/filter.component.ts
View File

@ -34,6 +34,7 @@ export class FilterComponent implements OnInit {
isExpanded: boolean = false;
@Output("filter") private filterEvt = new EventEmitter<string>();
@Output() private openFlag = new EventEmitter<boolean>();
@Input() currentValue: string;
@Input("filterPlaceholder")
@ -58,12 +59,17 @@ export class FilterComponent implements OnInit {
this.filterTerms.next(this.currentValue.trim());
}
inputFocus(): void {
this.openFlag.emit(this.isExpanded);
}
onClick(): void {
//Only enabled when expandMode is set to false
if(this.expandMode){
return;
}
this.isExpanded = !this.isExpanded;
this.openFlag.emit(this.isExpanded);
}
public get isShowSearchBox(): boolean {

2
src/ui_ng/lib/src/filter/filter.template.ts
View File

@ -5,7 +5,7 @@
export const FILTER_TEMPLATE: string = `
<span>
<clr-icon shape="search" size="20" class="search-btn" [class.filter-icon]="isShowSearchBox" (click)="onClick()"></clr-icon>
<input [hidden]="!isShowSearchBox" type="text" style="padding-left: 15px;" (keyup)="valueChange()" placeholder="{{placeHolder}}" [(ngModel)]="currentValue"/>
<input [hidden]="!isShowSearchBox" type="text" style="padding-left: 15px;" (keyup)="valueChange()" (focus)="inputFocus()" placeholder="{{placeHolder}}" [(ngModel)]="currentValue"/>
<span class="filter-divider" *ngIf="withDivider"></span>
</span>
`;

53
src/ui_ng/lib/src/tag/tag.component.css.ts
View File

@ -5,6 +5,7 @@ export const TAG_STYLE = `
}
.refresh-btn {
margin-top:8px;
cursor: pointer;
}
@ -65,8 +66,56 @@ export const TAG_STYLE = `
:host >>> .signpost-content{min-width:4rem;}
:host >>> .signpost-content-body{padding:0 .4rem;}
:host >>> .signpost-content-header{display:none;}
.filterLabelPiece{position: absolute; bottom :0px;z-index:1;}
.filterLabelPiece{position: absolute; top :4px;z-index:1;}
.dropdown .dropdown-toggle.btn {
margin: .25rem .5rem .25rem 0;
margin: .25rem .5rem .25rem 0;
}
.labelFilterPanel{
display: flex;
position: relative;
-ms-flex-direction: column;
flex-direction: column;
background: #fff;
padding: .5rem 0;
border: 1px solid #ccc;
box-shadow: 0 1px 0.125rem hsla(0,0%,45%,.25);
min-width: 5rem;
max-width: 15rem;
border-radius: .125rem;
}
.labelBtn{
position: relative;
overflow: hidden;
font-size: .58333rem;
letter-spacing: normal;
font-weight: 400;
background: transparent;
border: 0;
color: #565656;
cursor: pointer;
display: block;
margin: 0;
width: 100%;
height:30px;
text-transform: none;}
.labelBtn:hover{
background-color: #eee;
}
.labelBtn:focus{
outline: none;
}
.filterLabelHeader {
font-size: .5rem;
font-weight: 600;
letter-spacing: normal;
padding: 0 .5rem;
line-height: .75rem;
margin: 0;
color: #313131;
}
.labelFilterPanel .form-group input{position: relative;
margin-left: .5rem;
margin-right: .5rem;}
.filterClose{position:absolute; right: 8px; top: 5px; cursor:pointer; font-size:20px;}
`;

38
src/ui_ng/lib/src/tag/tag.component.html.ts
View File

@ -15,28 +15,28 @@ export const TAG_TEMPLATE = `
<div class="row" style="position:relative;">
<div>
<div class="row flex-items-xs-right rightPos">
<div class='filterLabelPiece' [style.left.px]='filterLabelPieceWidth' ><hbr-label-piece [hidden]='!filterOneLabel' [label]="filterOneLabel" [labelWidth]="130"></hbr-label-piece></div>
<div id="filterArea">
<div class='filterLabelPiece' *ngIf="!withAdmiral" [hidden]="!openLabelFilterPiece" [style.left.px]='filterLabelPieceWidth' ><hbr-label-piece [hidden]='!filterOneLabel' [label]="filterOneLabel" [labelWidth]="130"></hbr-label-piece></div>
<div class="flex-xs-middle">
<hbr-filter *ngIf="withAdmiral" [withDivider]="true" filterPlaceholder="{{'TAG.FILTER_FOR_TAGS' | translate}}" (filter)="doSearchTagNames($event)" [currentValue]="lastFilteredTagName"></hbr-filter>
<clr-dropdown *ngIf="!withAdmiral">
<hbr-filter [withDivider]="true" filterPlaceholder="{{'TAG.FILTER_FOR_TAGS' | translate}}" (filter)="doSearchTagNames($event)" [currentValue]="lastFilteredTagName" clrDropdownTrigger></hbr-filter>
<clr-dropdown-menu clrPosition="bottom-left" *clrIfOpen>
<div style='display:grid'>
<label class="dropdown-header">{{'REPOSITORY.FILTER_BY_LABEL' | translate}}</label>
<div class="form-group"><input type="text" placeholder="Filter labels" [(ngModel)]= "filterName" (keyup)="handleInputFilter()"></div>
<div [hidden]='imageFilterLabels.length' style="padding-left:10px;">{{'LABEL.NO_LABELS' | translate }}</div>
<div [hidden]='!imageFilterLabels.length' style='max-height:300px;overflow-y: auto;'>
<button type="button" class="dropdown-item" *ngFor='let label of imageFilterLabels' [hidden]="!label.show" (click)="rightFilterLabel(label)">
<clr-icon shape="check" class='pull-left' [hidden]='!label.iconsShow'></clr-icon>
<div class='labelDiv'><hbr-label-piece [label]="label.label" [labelWidth]="130"></hbr-label-piece></div>
</button>
</div>
</div>
</clr-dropdown-menu>
</clr-dropdown>
<span class="refresh-btn" (click)="refresh()"><clr-icon shape="refresh"></clr-icon></span>
<hbr-filter [withDivider]="true" filterPlaceholder="{{'TAG.FILTER_FOR_TAGS' | translate}}" (filter)="doSearchTagNames($event)" (openFlag)="openFlagEvent($event)" [currentValue]="lastFilteredTagName"></hbr-filter>
<div class="labelFilterPanel" *ngIf="!withAdmiral" [hidden]="!openLabelFilterPanel">
<a class="filterClose" (click)="closeFilter()">&times;</a>
<label class="filterLabelHeader">{{'REPOSITORY.FILTER_BY_LABEL' | translate}}</label>
<div class="form-group"><input type="text" placeholder="Filter labels" [(ngModel)]= "filterName" (keyup)="handleInputFilter()"></div>
<div [hidden]='imageFilterLabels.length' style="padding-left:10px;">{{'LABEL.NO_LABELS' | translate }}</div>
<div [hidden]='!imageFilterLabels.length' style='max-height:300px;overflow-y: auto;'>
<button type="button" class="labelBtn" *ngFor='let label of imageFilterLabels' [hidden]="!label.show" (click)="rightFilterLabel(label)">
<clr-icon shape="check" class='pull-left' [hidden]='!label.iconsShow'></clr-icon>
<div class='labelDiv'><hbr-label-piece [label]="label.label" [labelWidth]="160"></hbr-label-piece></div>
</button>
</div>
</div>
</div>
</div>
<span class="refresh-btn" (click)="refresh()"><clr-icon shape="refresh"></clr-icon></span>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<clr-datagrid [clrDgLoading]="loading" [class.embeded-datagrid]="isEmbedded" [(clrDgSelected)]="selectedRow">

26
src/ui_ng/lib/src/tag/tag.component.ts
View File

@ -100,6 +100,8 @@ export class TagComponent implements OnInit, AfterViewInit {
lastFilteredTagName: string;
batchDelectionInfos: BatchInfo[] = [];
inprogress: boolean;
openLabelFilterPanel: boolean;
openLabelFilterPiece: boolean;
createdComparator: Comparator<Tag> = new CustomComparator<Tag>("created", "date");
@ -450,6 +452,30 @@ export class TagComponent implements OnInit, AfterViewInit {
this.clrLoad(st);
}
closeFilter(): void {
this.openLabelFilterPanel = false;
}
openFlagEvent(isOpen: boolean): void {
if (isOpen) {
this.openLabelFilterPanel = true;
this.openLabelFilterPiece = true;
this.filterName = '';
// redisplay all labels
this.imageFilterLabels.forEach(data => {
if (data.label.name.indexOf(this.filterName) !== -1) {
data.show = true;
}else {
data.show = false;
}
});
}else {
this.openLabelFilterPanel = false;
this.openLabelFilterPiece = false;
}
}
handleInputFilter() {
if (this.filterName.length) {
this.labelNameFilter.next(this.filterName);

2
src/ui_ng/package.json
View File

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

14
tests/resources/Harbor-Pages/Project.robot
View File

@ -251,19 +251,19 @@ Add Labels To Tag
Filter Labels In Tags
[Arguments] ${labelName1} ${labelName2}
Sleep 2
Click Element xpath=//clr-dropdown/hbr-filter/span/clr-icon
Click Element xpath=//*[@id="filterArea"]//hbr-filter/span/clr-icon
Sleep 2
Page Should Contain Element xpath=//tag-repository//clr-dropdown-menu/div//button[contains(.,"${labelName1}")]
Click Element xpath=//tag-repository//clr-dropdown-menu/div//button[contains(.,"${labelName1}")]
Page Should Contain Element xpath=//*[@id="filterArea"]//div//button[contains(.,"${labelName1}")]
Click Element xpath=//*[@id="filterArea"]//div//button[contains(.,"${labelName1}")]
Sleep 2
Click Element xpath=//clr-dropdown/hbr-filter/span/clr-icon
Click Element xpath=//*[@id="filterArea"]//hbr-filter/span/clr-icon
Page Should Contain Element xpath=//clr-datagrid//label[contains(.,"${labelName1}")]
Click Element xpath=//clr-dropdown/hbr-filter/span/clr-icon
Click Element xpath=//*[@id="filterArea"]//hbr-filter/span/clr-icon
Sleep 2
Click Element xpath=//tag-repository//clr-dropdown-menu/div//button[contains(.,"${labelName2}")]
Click Element xpath=//*[@id="filterArea"]//div//button[contains(.,"${labelName2}")]
Sleep 2
Click Element xpath=//clr-dropdown/hbr-filter/span/clr-icon
Click Element xpath=//*[@id="filterArea"]//hbr-filter/span/clr-icon
Sleep 2
Capture Page Screenshot filter_${labelName2}.png
Page Should Contain Element xpath=//clr-dg-row[contains(.,"${labelName2}")]