diff --git a/src/ui_ng/lib/src/filter/filter.component.ts b/src/ui_ng/lib/src/filter/filter.component.ts index 5f7c80ada..bba258ade 100644 --- a/src/ui_ng/lib/src/filter/filter.component.ts +++ b/src/ui_ng/lib/src/filter/filter.component.ts @@ -34,6 +34,7 @@ export class FilterComponent implements OnInit { isExpanded: boolean = false; @Output("filter") private filterEvt = new EventEmitter(); + @Output() private openFlag = new EventEmitter(); @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 { diff --git a/src/ui_ng/lib/src/filter/filter.template.ts b/src/ui_ng/lib/src/filter/filter.template.ts index 9bed73db5..005850d16 100644 --- a/src/ui_ng/lib/src/filter/filter.template.ts +++ b/src/ui_ng/lib/src/filter/filter.template.ts @@ -5,7 +5,7 @@ export const FILTER_TEMPLATE: string = ` - + `; diff --git a/src/ui_ng/lib/src/tag/tag.component.css.ts b/src/ui_ng/lib/src/tag/tag.component.css.ts index fc0a65a72..7e5c8ceca 100644 --- a/src/ui_ng/lib/src/tag/tag.component.css.ts +++ b/src/ui_ng/lib/src/tag/tag.component.css.ts @@ -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;} `; \ No newline at end of file diff --git a/src/ui_ng/lib/src/tag/tag.component.html.ts b/src/ui_ng/lib/src/tag/tag.component.html.ts index 4e18a27f8..199c13624 100644 --- a/src/ui_ng/lib/src/tag/tag.component.html.ts +++ b/src/ui_ng/lib/src/tag/tag.component.html.ts @@ -15,28 +15,28 @@ export const TAG_TEMPLATE = `
-
+
+
- - - - -
- -
-
{{'LABEL.NO_LABELS' | translate }}
-
- -
-
- - - + +
+ × + +
+
{{'LABEL.NO_LABELS' | translate }}
+
+ +
+
+ + + +
diff --git a/src/ui_ng/lib/src/tag/tag.component.ts b/src/ui_ng/lib/src/tag/tag.component.ts index 872a309ba..b8344d300 100644 --- a/src/ui_ng/lib/src/tag/tag.component.ts +++ b/src/ui_ng/lib/src/tag/tag.component.ts @@ -100,6 +100,8 @@ export class TagComponent implements OnInit, AfterViewInit { lastFilteredTagName: string; batchDelectionInfos: BatchInfo[] = []; inprogress: boolean; + openLabelFilterPanel: boolean; + openLabelFilterPiece: boolean; createdComparator: Comparator = new CustomComparator("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); diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json index c3aa3f3a3..3937cd9db 100644 --- a/src/ui_ng/package.json +++ b/src/ui_ng/package.json @@ -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", diff --git a/tests/resources/Harbor-Pages/Project.robot b/tests/resources/Harbor-Pages/Project.robot index c6b53499b..b850c35c4 100644 --- a/tests/resources/Harbor-Pages/Project.robot +++ b/tests/resources/Harbor-Pages/Project.robot @@ -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}")]