From 0baf5dc6d0b97847d9c9fe7bf8bab00aea6e5811 Mon Sep 17 00:00:00 2001
From: Piotr Sarnacki <drogus@gmail.com>
Date: Mon, 26 Jan 2015 11:16:22 +0100
Subject: [PATCH] Make filtering a bit more snappy

---
 .../controllers/dashboard/repositories.coffee    | 10 ++++++++++
 assets/scripts/app/helpers.coffee                |  2 ++
 assets/scripts/app/helpers/filter-input.coffee   | 16 ++++++++++++++++
 .../app/templates/dashboard/repositories.hbs     |  3 ++-
 assets/styles/dashboard/dashboard.scss           |  5 +++--
 5 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 assets/scripts/app/helpers/filter-input.coffee

diff --git a/assets/scripts/app/controllers/dashboard/repositories.coffee b/assets/scripts/app/controllers/dashboard/repositories.coffee
index 89bb747a..e649a4dd 100644
--- a/assets/scripts/app/controllers/dashboard/repositories.coffee
+++ b/assets/scripts/app/controllers/dashboard/repositories.coffee
@@ -14,4 +14,14 @@ Controller = Ember.Controller.extend
 
   ).property('filter', 'model')
 
+  updateFilter: () ->
+    value = @get('_lastFilterValue')
+    @transitionToRoute queryParams: { filter: value }
+    #@set('filter', value)
+
+  actions:
+    updateFilter: (value) ->
+      @set('_lastFilterValue', value)
+      Ember.run.throttle this, @updateFilter, [], 200, false
+
 Travis.DashboardRepositoriesController = Controller
diff --git a/assets/scripts/app/helpers.coffee b/assets/scripts/app/helpers.coffee
index 19e42046..eec1e8a6 100644
--- a/assets/scripts/app/helpers.coffee
+++ b/assets/scripts/app/helpers.coffee
@@ -19,12 +19,14 @@ require 'helpers/format_message'
 require 'helpers/format_config'
 require 'helpers/short_compare_shas'
 require 'helpers/mb'
+require 'helpers/filter-input'
 
 Ember.Handlebars.registerHelper('label', Travis.Handlebars.label)
 Ember.Handlebars.registerHelper('input', Travis.Handlebars.input)
 Ember.Handlebars.registerHelper('tipsy', Travis.Handlebars.tipsy)
 Ember.Handlebars.registerHelper('travis-errors', Travis.Handlebars.travisErrors)
 Ember.Handlebars.registerHelper('travis-field', Travis.Handlebars.travisField)
+Ember.Handlebars.registerHelper('filter-input', Travis.Handlebars.filterInput)
 
 Ember.Handlebars.registerBoundHelper('capitalize', Travis.Handlebars.capitalize)
 Ember.Handlebars.registerBoundHelper('githubCommitLink', Travis.Handlebars.githubCommitLink)
diff --git a/assets/scripts/app/helpers/filter-input.coffee b/assets/scripts/app/helpers/filter-input.coffee
new file mode 100644
index 00000000..b21a49a5
--- /dev/null
+++ b/assets/scripts/app/helpers/filter-input.coffee
@@ -0,0 +1,16 @@
+TextField = Ember.TextField.extend
+  keyUp: (event) ->
+    @sendAction('action', @get('_value'), event)
+
+  _elementValueDidChange: ->
+    @set('_value', @$().val());
+
+fn = (options) ->
+  Ember.assert('You can only pass attributes to the `input` helper, not arguments', arguments.length < 2)
+
+  onEvent = options.hash.on
+  delete options.hash.on
+  options.hash.onEvent = onEvent || 'enter'
+  return Ember.Handlebars.helpers.view.call(this, TextField, options)
+
+Travis.Handlebars.filterInput = fn
diff --git a/assets/scripts/app/templates/dashboard/repositories.hbs b/assets/scripts/app/templates/dashboard/repositories.hbs
index feb32182..cc896b8b 100644
--- a/assets/scripts/app/templates/dashboard/repositories.hbs
+++ b/assets/scripts/app/templates/dashboard/repositories.hbs
@@ -29,7 +29,8 @@
         </li>
       </ul>
     </div> -->
-    {{input placeholder="Search all repositories" class="search-field" value=filter}}
+    {{filter-input placeholder="Search all repositories" class="search-field"
+        value=filter action="updateFilter" on="key-up"}}
   </div>
 </div>
 
diff --git a/assets/styles/dashboard/dashboard.scss b/assets/styles/dashboard/dashboard.scss
index b8b60b0c..3e5dbe78 100644
--- a/assets/styles/dashboard/dashboard.scss
+++ b/assets/styles/dashboard/dashboard.scss
@@ -365,12 +365,13 @@ a {
 .search-field {
   background-image   : url('/images/dashboard/search-icon.svg');
   background-repeat  : no-repeat;
-  background-position: right center;
+  background-position: right 5px center;
   display            : inline-block;
   float              : right;
   border             : 1px solid #666;
   padding            : 0.5em;
-  width              : 100px;
+  width              : 300px;
+  background-size    : 16px 16px;
 }
 
 .tiles {