From 6b322a6e00c8f2c8c2923d17473bc35776c7eef0 Mon Sep 17 00:00:00 2001
From: kunw <kunw@vmware.com>
Date: Wed, 5 Apr 2017 15:20:21 +0800
Subject: [PATCH] Fix some UX issues.

---
 .../src/app/project/member/member.component.css  |  4 ++++
 src/ui_ng/src/app/project/project.component.html | 16 ++++++----------
 src/ui_ng/src/app/project/project.component.ts   | 10 ++++++----
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/ui_ng/src/app/project/member/member.component.css b/src/ui_ng/src/app/project/member/member.component.css
index 0713c78d3..c782e3827 100644
--- a/src/ui_ng/src/app/project/member/member.component.css
+++ b/src/ui_ng/src/app/project/member/member.component.css
@@ -6,3 +6,7 @@
   padding-right: 16px;
   margin-top: 18px;
 }
+
+.datagrid-foot {
+  margin-bottom: 0.5px;
+}
\ No newline at end of file
diff --git a/src/ui_ng/src/app/project/project.component.html b/src/ui_ng/src/app/project/project.component.html
index 22332d4e5..0d4f82aa7 100644
--- a/src/ui_ng/src/app/project/project.component.html
+++ b/src/ui_ng/src/app/project/project.component.html
@@ -12,16 +12,12 @@
                 <create-project (create)="createProject($event)"></create-project>
             </div>
             <div class="option-right">
-                <clr-dropdown [clrMenuPosition]="'bottom'">
-                    <button class="btn btn-link" clrDropdownToggle>
-            {{projectTypes[currentFilteredType] | translate}}
-            <clr-icon shape="caret down"></clr-icon>
-          </button>
-                    <div class="dropdown-menu">
-                        <a href="javascript:void(0)" clrDropdownItem (click)="doFilterProjects(0)">{{projectTypes[0] | translate}}</a>
-                        <a href="javascript:void(0)" clrDropdownItem (click)="doFilterProjects(1)">{{projectTypes[1] | translate}}</a>
-                    </div>
-                </clr-dropdown>
+                <div class="select" style="float: left;">
+                  <select (change)="doFilterProjects($event)">
+                    <option value="0">{{projectTypes[0] | translate}}</option>
+                    <option value="1">{{projectTypes[1] | translate}}</option>
+                  </select>
+                </div>
                 <grid-filter filterPlaceholder='{{"PROJECT.FILTER_PLACEHOLDER" | translate}}' (filter)="doSearchProjects($event)" [currentValue]="projectName"></grid-filter>
                 <a href="javascript:void(0)" (click)="refresh()">
                     <clr-icon shape="refresh"></clr-icon>
diff --git a/src/ui_ng/src/app/project/project.component.ts b/src/ui_ng/src/app/project/project.component.ts
index fb32fce99..ea3222131 100644
--- a/src/ui_ng/src/app/project/project.component.ts
+++ b/src/ui_ng/src/app/project/project.component.ts
@@ -148,10 +148,12 @@ export class ProjectComponent implements OnInit, OnDestroy {
     this.retrieve();
   }
 
-  doFilterProjects(filteredType: number): void {
-    this.isPublic = filteredType;
-    this.currentFilteredType = filteredType;
-    this.retrieve();
+  doFilterProjects($event: any): void {
+    if ($event && $event.target && $event.target["value"]) {
+      this.currentFilteredType = $event.target["value"];
+      this.isPublic = this.currentFilteredType;
+      this.retrieve();
+    }
   }
 
   toggleProject(p: Project) {