Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Tweak message searching

Clean up styles, use case-insensitive, multi-token filtering.
  • Loading branch information...
commit b0cce663f415c161ba488efeaf3e1d7b24df5334 1 parent cee3ed2
@sj26 authored
View
23 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()
View
35 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() {
View
48 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;
View
13 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)
Please sign in to comment.
Something went wrong with that request. Please try again.