Add support for changing colors in the stream popovers.

(imported from commit 30593148500a78c36baec87af5868d8c5a173d96)

zephyr/static/js/subs.js

@@ -214,22 +214,43 @@ function set_color(stream_name, color) {
     set_stream_property(stream_name, 'color', color);
 }
 
-var colorpicker_options = {
+var stream_color_palette = [
+    ['a47462', 'c2726a', 'e4523d', 'e7664d', 'ee7e4a', 'f4ae55'],
+    ['76ce90', '53a063', '94c849', 'bfd56f', 'fae589', 'f5ce6e'],
+    ['a6dcbf', 'addfe5', 'a6c7e5', '4f8de4', '95a5fd', 'b0a5fd'],
+    ['c2c2c2', 'c8bebf', 'c6a8ad', 'e79ab5', 'bd86e5', '9987e1']
+];
+
+function picker_do_change_color (color) {
+    var stream_name = $(this).attr('stream_name');
+    var hex_color = color.toHexString();
+    set_color(stream_name, hex_color);
+}
+
+exports.sidebar_popover_colorpicker_options = {
+    clickoutFiresChange: true,
+    showPaletteOnly: true,
+    showPalette: true,
+    flat: true,
+    palette: stream_color_palette,
+    change: picker_do_change_color
+};
+
+exports.sidebar_popover_colorpicker_options_full = {
     clickoutFiresChange: true,
     showPalette: true,
-    palette: [
-        ['a47462', 'c2726a', 'e4523d', 'e7664d', 'ee7e4a', 'f4ae55'],
-        ['76ce90', '53a063', '94c849', 'bfd56f', 'fae589', 'f5ce6e'],
-        ['a6dcbf', 'addfe5', 'a6c7e5', '4f8de4', '95a5fd', 'b0a5fd'],
-        ['c2c2c2', 'c8bebf', 'c6a8ad', 'e79ab5', 'bd86e5', '9987e1']
-    ],
-    change: function (color) {
-        // TODO: Kind of a hack.
-        var sub_row = $(this).closest('.subscription_row');
-        var stream_name = sub_row.find('.subscription_name').text();
-        var hex_color = color.toHexString();
-        set_color(stream_name, hex_color);
-    }
+    flat: true,
+    cancelText: "",
+    chooseText: "choose",
+    palette: stream_color_palette,
+    change: picker_do_change_color
+};
+
+var subscriptions_table_colorpicker_options = {
+    clickoutFiresChange: true,
+    showPalette: true,
+    palette: stream_color_palette,
+    change: picker_do_change_color
 };
 
 function create_sub(stream_name, attrs) {
@@ -751,7 +772,7 @@ $(function () {
     $("#subscriptions_table").on("show", ".subscription_settings", function (e) {
         var subrow = $(e.target).closest('.subscription_row');
         var colorpicker = subrow.find('.colorpicker');
-        colorpicker.spectrum(colorpicker_options);
+        colorpicker.spectrum(subscriptions_table_colorpicker_options);
 
         // To figure out the worst case for an expanded row's height, we do some math:
         // .subscriber_list_container max-height,

zephyr/static/js/ui.js

@@ -1250,7 +1250,49 @@ $(function () {
             content:   templates.render('sidebar_stream_actions', {'stream': subs.have(stream)}),
             trigger:   "manual"
         });
+
+        // This little function is a workaround for the fact that
+        // Bootstrap popovers don't properly handle being resized --
+        // so after resizing our popover to add in the spectrum color
+        // picker, we need to adjust its height accordingly.
+        function update_spectrum(popover, update_func) {
+            var initial_height = popover[0].offsetHeight;
+
+            var colorpicker = popover.find('.colorpicker-container').find('.colorpicker');
+            update_func(colorpicker);
+            var after_height = popover[0].offsetHeight;
+
+            var popover_root = popover.closest(".popover");
+            var current_top_px = parseFloat(popover_root.css('top').replace('px', ''));
+            var height_delta = - (after_height - initial_height) * 0.5;
+
+            popover_root.css('top', (current_top_px + height_delta) + "px");
+        }
+
         $(e.target).popover("show");
+        var popover = $('.streams_popover[data-id=' + subs.have(stream).id + ']');
+        update_spectrum(popover, function(colorpicker) {
+            colorpicker.spectrum(subs.sidebar_popover_colorpicker_options);
+        });
+
+        $('.streams_popover').on('click', '.custom_color', function (e) {
+            update_spectrum($(e.target).closest('.streams_popover'), function(colorpicker) {
+                colorpicker.spectrum("destroy");
+                colorpicker.spectrum(subs.sidebar_popover_colorpicker_options_full);
+                // In theory this should clean up the old color picker,
+                // but this seems a bit flaky -- the new colorpicker
+                // doesn't fire until you click a button, but the buttons
+                // have been hidden.  We work around this by just manually
+                // fixing it up here.
+                colorpicker.parent().find('.sp-container').removeClass('sp-buttons-disabled');
+                $(e.target).hide();
+            });
+
+            $('.streams_popover').on('click', 'a.sp-cancel', function (e) {
+                ui.hide_sidebar_popover();
+            });
+        });
+
         current_sidebar_elem = $(e.target);
         e.preventDefault();
     });

zephyr/static/styles/zephyr.css

@@ -1090,6 +1090,21 @@ table.floating_recipient {
     margin: 0 30px 5px 20px;
 }
 
+.streams_popover .sp-container {
+    background: white;
+    cursor: pointer;
+    border: none;
+}
+
+.streams_popover .sp-palette-container {
+    border-right: none;
+}
+
+.streams_popover .colorpicker-container {
+    display: inline-block;
+    margin-right: 10px;
+}
+
 .sub_setting_control {
     display: inline-block;
     margin-right: 10px;

zephyr/static/templates/sidebar_stream_actions.handlebars

@@ -1,5 +1,5 @@
 {{! Contents of the "message actions" popup }}
-<ul class="nav nav-list actions_popover" data-name="{{ stream.name }}">
+<ul class="nav nav-list streams_popover" data-id="{{ stream.id }}">
   <li>
     <a class="narrow_to_stream">
       <i class="icon-vector-bullhorn"></i>
@@ -23,5 +23,9 @@
       Compose a new message on this stream.
     </a>
   </li>
+  <li>
+    <span class="colorpicker-container"><input stream_name="{{stream.name}}" class="colorpicker" type="text" value="{{stream.color}}" /></span>
+    <a class="custom_color">Choose custom color</a>
+  </li>
 
 </ul>

zephyr/static/templates/subscription.handlebars

@@ -34,7 +34,10 @@
             <input class="sub_setting_control" type="checkbox" {{#if notifications}}checked{{/if}} />
             Show desktop notifications for traffic on this stream
           </li>
-          <li><span class="sub_setting_control"><input class="colorpicker" type="text" value="{{color}}" /></span>
+          <li>
+            <span class="sub_setting_control">
+              <input stream_name="{{name}}" class="colorpicker" type="text" value="{{color}}" />
+            </span>
             Stream color
           </li>
         </ul>