Started updating search UI

8 files changed, 49 insertions, 31 deletions

diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee
index 2fdb7562515..8c9cb8ef792 100644
--- a/app/assets/javascripts/dispatcher.js.coffee
+++ b/app/assets/javascripts/dispatcher.js.coffee
@@ -108,6 +108,8 @@ class Dispatcher
         new BuildArtifacts()
       when 'projects:group_links:index'
         new GroupsSelect()
+      when 'search:show'
+        new SearchDropdowns()
 
     switch path.first()
       when 'admin'
diff --git a/app/assets/javascripts/search_dropdowns.js.coffee b/app/assets/javascripts/search_dropdowns.js.coffee
new file mode 100644
index 00000000000..37c5c94d8b0
--- /dev/null
+++ b/app/assets/javascripts/search_dropdowns.js.coffee
@@ -0,0 +1,6 @@
+class @SearchDropdowns
+  constructor: ->
+    $('.js-search-group-dropdown').glDropdown(
+      selectable: true
+      filterable: true
+    )
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 2ade341c9dd..3386523dbf7 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -11,6 +11,7 @@
 .prepend-top-10 { margin-top: 10px }
 .prepend-top-default { margin-top: $gl-padding !important; }
 .prepend-top-20 { margin-top: 20px }
+.prepend-left-5 { margin-left: 5px }
 .prepend-left-10 { margin-left: 10px }
 .prepend-left-default { margin-left: $gl-padding; }
 .prepend-left-20 { margin-left: 20px }
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index f0f3744c6fa..4a5149ee64d 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -10,17 +10,6 @@
   }
 }
 
-.search-holder {
-  max-width: 600px;
-  margin: 0 auto;
-  margin-bottom: 20px;
-
-  input {
-    border-color: #bbb;
-    font-weight: bold;
-  }
-}
-
 .search {
   margin-right: 10px;
   margin-left: 10px;
@@ -163,3 +152,18 @@
     }
   }
 }
+
+.search-holder {
+  display: -webkit-flex;
+  display:         flex;
+
+  .search-field-holder {
+    position: relative;
+    width: 100%;
+  }
+
+  .dropdown-toggle {
+    width: 160px;
+    text-align: left;
+  }
+}
diff --git a/app/helpers/search_helper.rb b/app/helpers/search_helper.rb
index 8a97a74ad73..c8a7a686651 100644
--- a/app/helpers/search_helper.rb
+++ b/app/helpers/search_helper.rb
@@ -19,6 +19,16 @@ module SearchHelper
     end
   end
 
+  def search_entries_info(collection)
+    if collection.count > 0
+      from = collection.offset_value + 1
+      to = collection.offset_value + collection.length
+      count = collection.count
+
+      "Showing #{from} - #{to} of #{count} results for All projects: \"#{@search_term}\""
+    end
+  end
+
   private
 
   # Autocomplete results for various settings pages
diff --git a/app/views/search/_filter.html.haml b/app/views/search/_filter.html.haml
index 4ef544136a8..091dae24f4c 100644
--- a/app/views/search/_filter.html.haml
+++ b/app/views/search/_filter.html.haml
@@ -1,16 +1,17 @@
-.dropdown.inline
-  %button.dropdown-toggle.btn.btn-sm{type: 'button', 'data-toggle' => 'dropdown'}
-    %span.light Group:
+.dropdown.append-right-5.prepend-left-5
+  %button.dropdown-toggle.btn.js-search-group-dropdown{ type: "button", data: { toggle: "dropdown" } }
+    Group:
     - if @group.present?
       %strong= @group.name
     - else
       Any
     %b.caret
-  .dropdown-menu.dropdown-select.dropdown-menu-selectable
+  .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-align-right
     .dropdown-title
       %span Filter results by group
-      %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
+      %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
         = icon('times')
+    = dropdown_filter("Search groups")
     .dropdown-content
       %ul
         %li
@@ -22,19 +23,20 @@
             = link_to search_filter_path(group_id: group.id, project_id: nil), class: ("is-active" if params[:group_id] == group.id.to_s) do
               = group.name
 
-.dropdown.inline.prepend-left-10.project-filter
-  %button.dropdown-toggle.btn.btn-sm{type: 'button', 'data-toggle' => 'dropdown'}
-    %span.light Project:
+.dropdown.project-filter.append-right-5.prepend-left-5
+  %button.dropdown-toggle.btn{ type: "button", data: { toggle: "dropdown" } }
+    Project:
     - if @project.present?
       %strong= @project.name_with_namespace
     - else
       Any
     %b.caret
-  .dropdown-menu.dropdown-select.dropdown-menu-selectable
+  .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-align-right
     .dropdown-title
       %span Filter results by project
       %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
         = icon('times')
+    = dropdown_filter("Search projects")
     .dropdown-content
       %ul
         %li
diff --git a/app/views/search/_form.html.haml b/app/views/search/_form.html.haml
index a9dbc84da29..b05e8d4d908 100644
--- a/app/views/search/_form.html.haml
+++ b/app/views/search/_form.html.haml
@@ -4,11 +4,9 @@
   = hidden_field_tag :snippets, params[:snippets]
   = hidden_field_tag :scope, params[:scope]
 
-  .search-holder.clearfix
-    .input-group
+  .search-holder
+    .search-field-holder.append-right-5
       = search_field_tag :search, params[:search], placeholder: "Search for projects, issues etc", class: "form-control search-text-input", id: "dashboard_search", autofocus: true, spellcheck: false
-      %span.input-group-btn
-        = button_tag 'Search', class: "btn btn-primary"
     - unless params[:snippets].eql? 'true'
-      %br
       = render 'filter' if current_user
+    = button_tag 'Search', class: "btn btn-success btn-search prepend-left-5"
diff --git a/app/views/search/_results.html.haml b/app/views/search/_results.html.haml
index 60df348891c..a7615f580f0 100644
--- a/app/views/search/_results.html.haml
+++ b/app/views/search/_results.html.haml
@@ -2,9 +2,7 @@
   = render partial: "search/results/empty"
 - else
   .gray-content-block
-    Search results for
-    %code
-      = @search_term
+    = search_entries_info @objects
     - unless @show_snippets
       - if @project
         in project #{link_to @project.name_with_namespace, [@project.namespace.becomes(Namespace), @project]}
@@ -21,6 +19,3 @@
 
     - if @scope != 'projects'
       = paginate @objects, theme: 'gitlab'
-
-:javascript
-  $(".search-results .term").highlight("#{escape_javascript(params[:search])}");