Improve project members page UI

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

1 files changed, 14 insertions, 2 deletions

diff --git a/app/views/projects/project_members/_team.html.haml b/app/views/projects/project_members/_team.html.haml
index b807fb2cc9d..8f4c6134261 100644
--- a/app/views/projects/project_members/_team.html.haml
+++ b/app/views/projects/project_members/_team.html.haml
@@ -1,9 +1,21 @@
-.panel.panel-default.prepend-top-20
+.panel.panel-default
   .panel-heading
     %strong #{@project.name}
     project members
     %small
       (#{members.count})
-  %ul.well-list
+    .pull-right
+      = form_tag namespace_project_project_members_path(@project.namespace, @project), method: :get, class: 'form-inline member-search-form'  do
+        .form-group
+          = search_field_tag :search, params[:search], { placeholder: 'Find existing member by name', class: 'form-control', spellcheck: false }
+        = button_tag class: 'btn' do
+          = icon("search")
+  %ul.content-list
     - members.each do |project_member|
       = render 'project_member', member: project_member
+
+:javascript
+  $('form.member-search-form').on('submit', function (event) {
+    event.preventDefault();
+    Turbolinks.visit(this.action + '?' + $(this).serialize());
+  });