Merge pull request #4872 from pengpengshui/fixIssues

rewrite layout about filter by label and tesecase #4809
2024-09-20 16:35:44 +00:00 · 2018-05-08 13:34:40 +08:00 · 2018-05-08 13:34:40 +08:00 · 5420f7ff0e
commit 5420f7ff0e
parent 981743ada9 2f6dcce0d5
7 changed files with 111 additions and 30 deletions
--- 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<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 {
--- 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 = `
 <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>
 `;
--- 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;}
 `;
--- 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 = `
 <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">
--- 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<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);
--- 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",
--- 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}")]