Tweak message searching

Clean up styles, use case-insensitive, multi-token filtering.

public/javascripts/application.coffee

@@ -1,16 +1,19 @@
+# Add a new jQuery selector expression which does a case-insensitive :contains
+jQuery.expr[':'].icontains = (a, i, m) ->
+  (a.textContent ? a.innerText ? "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0
+
 class MailCatcher
   constructor: ->
     $('#messages tr').live 'click', (e) =>
       e.preventDefault()
       @loadMessage $(e.currentTarget).attr 'data-message-id'
 
-    $('input[name=search]').live 'keyup', (e) =>
-      e.preventDefault()
-      console.log(e)
-      if e.currentTarget.value == ""
-        @clearSearch()
+    $('input[name=search]').keyup (e) =>
+      query = $.trim $(e.currentTarget).val()
+      if query
+        @searchMessages query
       else
-        @searchMessages e.currentTarget.value
+        @clearSearch()
 
     $('#message .views .format.tab a').live 'click', (e) =>
       e.preventDefault()
@@ -82,9 +85,11 @@ class MailCatcher
   selectedMessage: ->
     $('#messages tr.selected').data 'message-id'
 
-  searchMessages: (term) ->
-    $('#messages tbody tr:not(:contains("' + term + '"))').hide()
-    $('#messages tbody tr(:contains("' + term + '"))').show()
+  searchMessages: (query) ->
+    selector = (":icontains('#{token}')" for token in query.split /\s+/).join ""
+    $rows = $("#messages tbody tr")
+    $rows.not(selector).hide()
+    $rows.filter(selector).show()
 
   clearSearch: ->
     $('#messages tbody tr').show()

public/javascripts/application.js

@@ -1,6 +1,11 @@
 (function() {
   var MailCatcher;
 
+  jQuery.expr[':'].icontains = function(a, i, m) {
+    var _ref, _ref2;
+    return ((_ref = (_ref2 = a.textContent) != null ? _ref2 : a.innerText) != null ? _ref : "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
+  };
+
   MailCatcher = (function() {
 
     function MailCatcher() {
@@ -9,13 +14,13 @@
         e.preventDefault();
         return _this.loadMessage($(e.currentTarget).attr('data-message-id'));
       });
-      $('input[name=search]').live('keyup', function(e) {
-        e.preventDefault();
-        console.log(e);
-        if (e.currentTarget.value === "") {
-          return _this.clearSearch();
+      $('input[name=search]').keyup(function(e) {
+        var query;
+        query = $.trim($(e.currentTarget).val());
+        if (query) {
+          return _this.searchMessages(query);
         } else {
-          return _this.searchMessages(e.currentTarget.value);
+          return _this.clearSearch();
         }
       });
       $('#message .views .format.tab a').live('click', function(e) {
@@ -110,9 +115,21 @@
       return $('#messages tr.selected').data('message-id');
     };
 
-    MailCatcher.prototype.searchMessages = function(term) {
-      $('#messages tbody tr:not(:contains("' + term + '"))').hide();
-      return $('#messages tbody tr(:contains("' + term + '"))').show();
+    MailCatcher.prototype.searchMessages = function(query) {
+      var $rows, selector, token;
+      selector = ((function() {
+        var _i, _len, _ref, _results;
+        _ref = query.split(/\s+/);
+        _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          token = _ref[_i];
+          _results.push(":icontains('" + token + "')");
+        }
+        return _results;
+      })()).join("");
+      $rows = $("#messages tbody tr");
+      $rows.not(selector).hide();
+      return $rows.filter(selector).show();
     };
 
     MailCatcher.prototype.clearSearch = function() {

public/stylesheets/application.css

@@ -60,12 +60,12 @@ html, body {
 }
 
 body {
-  display: -moz-box;
   display: -webkit-box;
+  display: -moz-box;
   display: -ms-box;
   display: box;
-  -moz-box-orient: vertical;
   -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
   -ms-box-orient: vertical;
   box-orient: vertical;
   background: #eeeeee;
@@ -99,11 +99,10 @@ body.iframe .loading {
 .button {
   padding: 0.5em 1em;
   border: 1px solid #cccccc;
-  -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
-  -o-border-radius: 2px;
+  -moz-border-radius: 2px;
   -ms-border-radius: 2px;
-  -khtml-border-radius: 2px;
+  -o-border-radius: 2px;
   border-radius: 2px;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f4f4f4), color-stop(100%, #ececec)), #ececec;
   background: -webkit-linear-gradient(#f4f4f4, #ececec), #ececec;
@@ -159,8 +158,9 @@ body > header h1 a {
   color: black;
   text-decoration: none;
   text-shadow: 0 1px 0 white;
-  -moz-transition: 0.1s ease;
   -webkit-transition: 0.1s ease;
+  -moz-transition: 0.1s ease;
+  -ms-transition: 0.1s ease;
   -o-transition: 0.1s ease;
   transition: 0.1s ease;
 }
@@ -177,22 +177,17 @@ body > header nav.app {
   float: right;
 }
 body > header nav li {
-  display: inline;
+  display: block;
+  float: left;
+  border-left: 1px solid white;
+  border-right: 1px solid #cccccc;
 }
 body > header nav li input {
-  float: left;
   margin: 6px;
 }
 body > header nav li a {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: middle;
-  *vertical-align: auto;
-  float: left;
-  padding: 9px;
-  border-left: 1px solid white;
-  border-right: 1px solid #cccccc;
+  display: block;
+  padding: 10px;
   text-decoration: none;
   text-shadow: 0 1px 0 white;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f4f4f4), color-stop(100%, #ececec)), #ececec;
@@ -205,9 +200,6 @@ body > header nav li a {
   text-shadow: 1px 1px 0 white;
   text-decoration: none;
 }
-body > header nav li a {
-  *display: inline;
-}
 body > header nav li a:hover, body > header nav li a:focus {
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #dddddd)), #dddddd;
   background: -webkit-linear-gradient(#eeeeee, #dddddd), #dddddd;
@@ -255,8 +247,9 @@ body > header nav li a:active, body > header nav li a.active {
 }
 #messages table tbody tr {
   cursor: pointer;
-  -moz-transition: 0.1s ease;
   -webkit-transition: 0.1s ease;
+  -moz-transition: 0.1s ease;
+  -ms-transition: 0.1s ease;
   -o-transition: 0.1s ease;
   transition: 0.1s ease;
   color: #333333;
@@ -289,16 +282,16 @@ body > header nav li a:active, body > header nav li a.active {
 }
 
 #message {
-  display: -moz-box;
   display: -webkit-box;
+  display: -moz-box;
   display: -ms-box;
   display: box;
-  -moz-box-orient: vertical;
   -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
   -ms-box-orient: vertical;
   box-orient: vertical;
-  -moz-box-flex: 1;
   -webkit-box-flex: 1;
+  -moz-box-flex: 1;
   -ms-box-flex: 1;
   box-flex: 1;
 }
@@ -384,9 +377,8 @@ body > header nav li a:active, body > header nav li a.active {
   background: white;
   color: black;
   height: 13px;
-  -moz-box-shadow: 1px 1px 0 #cccccc;
   -webkit-box-shadow: 1px 1px 0 #cccccc;
-  -o-box-shadow: 1px 1px 0 #cccccc;
+  -moz-box-shadow: 1px 1px 0 #cccccc;
   box-shadow: 1px 1px 0 #cccccc;
   margin-bottom: -2px;
   cursor: default;
@@ -449,12 +441,12 @@ body > header nav li a:active, body > header nav li a.active {
 }
 
 iframe {
-  display: -moz-box;
   display: -webkit-box;
+  display: -moz-box;
   display: -ms-box;
   display: box;
-  -moz-box-flex: 1;
   -webkit-box-flex: 1;
+  -moz-box-flex: 1;
   -ms-box-flex: 1;
   box-flex: 1;
   background: white;

public/stylesheets/application.sass

@@ -74,16 +74,15 @@ body > header
       float: right
     border-left: 1px solid #ccc
     li
-      display: inline
+      display: block
+      float: left
+      border-left: 1px solid #fff
+      border-right: 1px solid #ccc
       input
-        float: left
         margin: 6px
       a
-        +inline-block
-        float: left
-        padding: 9px
-        border-left: 1px solid #fff
-        border-right: 1px solid #ccc
+        display: block
+        padding: 10px
         text-decoration: none
         +text-shadow(0 1px 0 white)
         +background(linear-gradient(color-stops(#f4f4f4, #ececec)), #ececec)