Add frontend support for colorizing streams.

(imported from commit 48395ba915d6b22d8a7a8c7fbfb5e462680cef09)

zephyr/jstemplates/message.html

@@ -22,10 +22,10 @@
 {{#if is_stream}}
 <tr zid="{{id}}" class="recipient_row">
     <td colspan="2"
-        class="message_header message_header_stream left_part">
+        class="message_header message_header_stream left_part" style="background-color: {{background_color}};">
     </td>
-    <td class="message_header message_header_stream right_part">
-      <span class="message_label_clickable narrows_by_recipient"
+    <td class="message_header message_header_stream right_part" style="background-color: {{background_color}};">
+      <span class="message_label_clickable narrows_by_recipient stream_label"
             title="Narrow to stream &quot;{{display_recipient}}&quot;">{{display_recipient}}</span>
       &nbsp; | &nbsp;
       <span class="message_label_clickable narrows_by_subject"

zephyr/static/js/subs.js

@@ -3,6 +3,11 @@ var subs = (function () {
 var exports = {};
 
 var stream_set = {};
+var stream_colors = {};
+// We fetch the stream colors asynchronous while the message feed is
+// getting constructed, so we may need to go back and color streams
+// that have already been rendered.
+var initial_color_fetch = true;
 
 function case_insensitive_subscription_index(stream_name) {
     var i;
@@ -16,11 +21,29 @@ function case_insensitive_subscription_index(stream_name) {
     return -1;
 }
 
+function update_table_stream_color(table, stream_name, color) {
+    $.each(table.find(".stream_label"), function () {
+        if ($(this).text() === stream_name) {
+            var parent_label = $(this).parent("td");
+            parent_label.css("background-color", color);
+            parent_label.prev("td").css("background-color", color);
+        }
+    });
+}
+
+function update_historical_message_color(stream_name, color) {
+    update_table_stream_color($(".focused_table"), stream_name, color);
+    if ($(".focused_table").attr("id") !== "#zhome") {
+        update_table_stream_color($("#zhome"), stream_name, color);
+    }
+}
+
 // TODO: The way that we find the row is kind of fragile
 // and liable to break with streams with " in their name,
 // just like our unsubscribe button code.
 function draw_colorpicker(stream_name) {
-    var colorpicker = $('#subscriptions_table').find('button[value="' + stream_name + '"]').parent().prev().find('input');
+    var colorpicker = $('#subscriptions_table').find('button[value="' + stream_name + '"]')
+                                               .parent().prev().find('input');
     colorpicker.spectrum({
         clickoutFiresChange: true,
         showPalette: true,
@@ -31,7 +54,20 @@ function draw_colorpicker(stream_name) {
             ['c2c2c2', 'c8bebf', 'c6a8ad', 'e79ab5', 'bd86e5', '9987e1']
         ],
         change: function (color) {
-            console.log("Changing color for", stream_name, "to", color);
+            var hex_color = color.toHexString();
+            stream_colors[stream_name] = hex_color;
+            update_historical_message_color(stream_name, hex_color);
+
+            $.ajax({
+                type:     'POST',
+                url:      '/json/subscriptions/colorize',
+                dataType: 'json',
+                data: {
+                    "stream_name": stream_name,
+                    "color": hex_color
+                },
+                timeout:  10*1000
+            });
         }
     });
 }
@@ -51,7 +87,8 @@ function add_to_stream_list(stream_name) {
                 .removeAttr("onclick")
                 .click(function (event) {exports.unsubscribe(stream_name);});
         } else {
-            $('#subscriptions_table').prepend(templates.subscription({subscription: stream_name, color: "c2c2c2"}));
+            $('#subscriptions_table').prepend(templates.subscription({
+                subscription: stream_name,color: "c2c2c2"}));
             draw_colorpicker(stream_name);
         }
     }
@@ -65,6 +102,32 @@ function remove_from_stream_list(stream_name) {
     }
 }
 
+exports.get_color = function (stream_name) {
+    return stream_colors[stream_name];
+};
+
+exports.fetch_colors = function () {
+    $.ajax({
+        type:     'POST',
+        url:      '/json/subscriptions/colors',
+        dataType: 'json',
+        timeout:  10*1000,
+        success: function (data) {
+            if (data) {
+                $.each(data.stream_colors, function (index, data) {
+                    var stream_name = data[0];
+                    var color = data[1];
+                    stream_colors[stream_name] = color;
+                    if (initial_color_fetch) {
+                        update_historical_message_color(stream_name, color);
+                    }
+                });
+                initial_color_fetch = false;
+            }
+        }
+    });
+};
+
 exports.fetch = function () {
     $.ajax({
         type:     'POST',
@@ -74,9 +137,13 @@ exports.fetch = function () {
         success: function (data) {
             $('#subscriptions_table tr').remove();
             if (data) {
-                $.each(data.subscriptions, function (index, name) {
-                    $('#subscriptions_table').append(templates.subscription({subscription: name, color: "c2c2c2"}));
-                    draw_colorpicker(name);
+                $.each(data.subscriptions, function (index, data) {
+                    var stream_name = data[0];
+                    var color = data[1];
+                    stream_colors[stream_name] = color;
+                    $('#subscriptions_table').append(templates.subscription({
+                        subscription: stream_name, color: color}));
+                    draw_colorpicker(stream_name);
                 });
             }
             $('#streams').focus().select();

zephyr/static/js/ui.js

@@ -127,6 +127,11 @@ function replace_floating_recipient_bar(desired_label) {
             new_label = $("#current_label_stream");
             other_label = $("#current_label_huddle");
             header = desired_label.children(".message_header_stream.right_part");
+
+            $("#current_label_stream td:first").css(
+                "background-color",
+                desired_label.children(".message_header_stream.right_part")
+                             .css("background-color"));
         } else {
             new_label = $("#current_label_huddle");
             other_label = $("#current_label_stream");

zephyr/static/js/zephyr.js

@@ -338,6 +338,11 @@ function add_to_table(messages, table_name, filter_function, where, allow_collap
             message.stamp = ui.get_gravatar_stamp();
         }
 
+        var background_color = subs.get_color(message.display_recipient);
+        if (background_color !== undefined) {
+            message.background_color = background_color;
+        }
+
         messages_to_render.push(message);
         prev = message;
     });
@@ -720,6 +725,8 @@ $(function () {
                           }});
     }
 
+    subs.fetch_colors();
+
     if (have_initial_messages) {
         load_old_messages(initial_pointer, 200, 200, load_more);
     } else {