From 67f84b06f74edf7cbb602d8319786e02c64a5b52 Mon Sep 17 00:00:00 2001 From: Tim Abbott Date: Fri, 17 May 2013 15:35:17 -0400 Subject: [PATCH] Add support for changing colors in the stream popovers. (imported from commit 30593148500a78c36baec87af5868d8c5a173d96) --- zephyr/static/js/subs.js | 51 +++++++++++++------ zephyr/static/js/ui.js | 42 +++++++++++++++ zephyr/static/styles/zephyr.css | 15 ++++++ .../sidebar_stream_actions.handlebars | 6 ++- .../static/templates/subscription.handlebars | 5 +- 5 files changed, 102 insertions(+), 17 deletions(-) diff --git a/zephyr/static/js/subs.js b/zephyr/static/js/subs.js index 0789a65aac..b63631eaa8 100644 --- a/zephyr/static/js/subs.js +++ b/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, diff --git a/zephyr/static/js/ui.js b/zephyr/static/js/ui.js index 998cdfafcd..7a35628516 100644 --- a/zephyr/static/js/ui.js +++ b/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(); }); diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css index 9667b3f375..06759cc9df 100644 --- a/zephyr/static/styles/zephyr.css +++ b/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; diff --git a/zephyr/static/templates/sidebar_stream_actions.handlebars b/zephyr/static/templates/sidebar_stream_actions.handlebars index 3872781375..21bc59aa06 100644 --- a/zephyr/static/templates/sidebar_stream_actions.handlebars +++ b/zephyr/static/templates/sidebar_stream_actions.handlebars @@ -1,5 +1,5 @@ {{! Contents of the "message actions" popup }} -