compose: Show description in autocomplete.

Stream descriptions are now displayed along with the name. The
autocomplete results include streams with matches in the stream
descriptions. Added styling for description in compose.css.

Fixes #2398.

frontend_tests/node_tests/composebox_typeahead.js

@@ -5,7 +5,7 @@ var emoji_list = [{emoji_name: "tada", emoji_url: "TBD"},
 var stream_list = ['Denmark', 'Sweden'];
 
 set_global('emoji', {emojis: emoji_list});
-set_global('stream_data', {subscribed_streams: function () {
+set_global('stream_data', {subscribed_subs: function () {
     return stream_list;
 }});
 

static/js/composebox_typeahead.js

@@ -67,7 +67,10 @@ function query_matches_person(query, person) {
 }
 
 function query_matches_stream(query, stream) {
-    return ( stream.toLowerCase().indexOf(query.toLowerCase()) !== -1);
+    query = query.toLowerCase();
+
+    return ( stream.name       .toLowerCase().indexOf(query) !== -1
+         ||  stream.description.toLowerCase().indexOf(query) !== -1);
 }
 
 // Case-insensitive
@@ -271,7 +274,7 @@ exports.compose_content_begins_typeahead = function (query) {
 
         this.completing = 'stream';
         this.token = current_token.substring(current_token.indexOf("#")+1);
-        return stream_data.subscribed_streams();
+        return stream_data.subscribed_subs();
     }
     return false;
 };
@@ -283,7 +286,7 @@ exports.content_highlighter = function (item) {
         var item_formatted = typeahead_helper.render_person(item);
         return typeahead_helper.highlight_with_escaping(this.token, item_formatted);
     } else if (this.completing === 'stream') {
-        return typeahead_helper.highlight_with_escaping(this.token, item);
+        return typeahead_helper.render_stream(this.token, item);
     }
 };
 
@@ -305,7 +308,7 @@ exports.content_typeahead_selected = function (item) {
         $(document).trigger('usermention_completed.zulip', {mentioned: item});
     } else if (this.completing === 'stream') {
         beginning = (beginning.substring(0, beginning.length - this.token.length-1)
-                + '#**' + item + '** ');
+                + '#**' + item.name + '** ');
         $(document).trigger('streamname_completed.zulip', {stream: item});
     }
 

static/js/typeahead_helper.js

@@ -66,6 +66,21 @@ exports.render_person = function (person) {
     return person.full_name + " <" + person.email + ">";
 };
 
+exports.render_stream = function (token, stream) {
+    var desc = stream.description;
+    var short_desc = desc.substring(0, 35);
+
+    if (desc === short_desc) {
+        desc = exports.highlight_with_escaping(token, desc);
+    } else {
+        desc = exports.highlight_with_escaping(token, short_desc) + "...";
+    }
+
+    var name = exports.highlight_with_escaping(token, stream.name);
+
+    return name + '&nbsp;&nbsp;<small class = "autocomplete_secondary">' + desc + '</small>';
+};
+
 function prefix_sort(query, objs, get_item) {
     // Based on Bootstrap typeahead's default sorter, but taking into
     // account case sensitivity on "begins with"
@@ -173,9 +188,23 @@ exports.sort_emojis = function (matches, query) {
     return results.matches.concat(results.rest);
 };
 
+exports.compare_by_sub_count = function (stream_a, stream_b) {
+    return stream_a.subscribers.num_items() < stream_b.subscribers.num_items();
+};
+
 exports.sort_streams = function (matches, query) {
-    var results = prefix_sort(query, matches, function (x) { return x; });
-    return results.matches.concat(results.rest);
+    var name_results = prefix_sort(query, matches, function (x) { return x.name; });
+    var desc_results
+        = prefix_sort(query, name_results.rest, function (x) { return x.description; });
+
+    // Streams that start with the query.
+    name_results.matches = name_results.matches.sort(exports.compare_by_sub_count);
+    // Streams with descriptions that start with the query.
+    desc_results.matches = desc_results.matches.sort(exports.compare_by_sub_count);
+    // Streams with names and descriptions that don't start with the query.
+    desc_results.rest = desc_results.rest.sort(exports.compare_by_sub_count);
+
+    return name_results.matches.concat(desc_results.matches.concat(desc_results.rest));
 };
 
 exports.sort_recipientbox_typeahead = function (matches) {

static/styles/compose.css

@@ -20,6 +20,10 @@
     padding: 10px 10px 8px 5px;
 }
 
+.autocomplete_secondary {
+    opacity: 0.6;
+}
+
 #compose_buttons {
     text-align: center;
 }