diff --git a/zephyr/static/js/stream_list.js b/zephyr/static/js/stream_list.js index 06c2efd0aa..f295819298 100644 --- a/zephyr/static/js/stream_list.js +++ b/zephyr/static/js/stream_list.js @@ -89,7 +89,9 @@ function add_narrow_filter(name, type) { var swatch = $('').attr('id', "stream_sidebar_swatch_" + subs.stream_id(name)) .addClass('streamlist_swatch') .css('background-color', subs.get_color(name)).html(" "); - list_item = $('
  • ').attr('data-name', name).html(swatch); + list_item = $('
  • ').attr('data-name', name) + .addClass("narrow-filter") + .html(swatch); if (type === 'stream') { list_item.attr('id', "stream_sidebar_" + subs.stream_id(name)); } @@ -97,7 +99,8 @@ function add_narrow_filter(name, type) { list_item.append($('').attr('href', uri) .addClass('subscription_name') .text(name) - .append('()')); + .append('()')) + .append(''); if (type === "stream" && subs.have(name).invite_only) { list_item.append(""); } diff --git a/zephyr/static/js/ui.js b/zephyr/static/js/ui.js index da60e2311a..15e38d7644 100644 --- a/zephyr/static/js/ui.js +++ b/zephyr/static/js/ui.js @@ -693,6 +693,20 @@ function collapse(row) { show_more_link(row); } +var current_sidebar_elem; +var sidebar_popup_shown_this_click = false; + +exports.hide_sidebar_popover = function () { + if (ui.sidebar_currently_popped()) { + current_sidebar_elem.popover("destroy"); + current_sidebar_elem = undefined; + } +}; + +exports.sidebar_currently_popped = function () { + return current_sidebar_elem !== undefined; +}; + $(function () { // NB: This just binds to current elements, and won't bind to elements // created after ready() is called. @@ -1200,6 +1214,23 @@ $(function () { e.preventDefault(); }); + $('#stream_filters').on('click', 'span.arrow', function (e) { + var last_sidebar_elem = current_sidebar_elem; + ui.hide_sidebar_popover(); + sidebar_popup_shown_this_click = true; + + var stream = $(e.target).parents('li').attr('data-name'); + + var ypos = $(e.target).offset().top - viewport.scrollTop(); + $(e.target).popover({ + content: templates.render('sidebar_stream_actions', {'stream': subs.have(stream)}), + trigger: "manual" + }); + $(e.target).popover("show"); + current_sidebar_elem = $(e.target); + e.preventDefault(); + }); + $('#stream_filters').on('click', '.expanded_subject a', function (e) { if (exports.home_tab_obscured()) { ui.change_tab_to('#home'); @@ -1324,10 +1355,36 @@ $(function () { e.stopPropagation(); }); + + $('body').on('click', '.toggle_home', function (e) { + var stream = $(e.currentTarget).parents('ul').attr('data-name'); + ui.hide_sidebar_popover(); + subs.toggle_home(stream); + e.stopPropagation(); + }); + + $('body').on('click', '.narrow_to_stream', function (e) { + var stream = $(e.currentTarget).parents('ul').attr('data-name'); + ui.hide_sidebar_popover(); + narrow.by('stream', stream, {select_first_unread: true}); + e.stopPropagation(); + }); + + $('body').on('click', '.compose_to_stream', function (e) { + var stream = $(e.currentTarget).parents('ul').attr('data-name'); + ui.hide_sidebar_popover(); + compose.start('stream', {"stream": stream}); + e.stopPropagation(); + }); + $("body").on('click', function (e) { // Dismiss the popover if the user has clicked outside it if ($('.popover-inner').has(e.target).length === 0) { ui.hide_actions_popover(); + if (sidebar_popup_shown_this_click === false ) { + ui.hide_sidebar_popover(); + } + sidebar_popup_shown_this_click = false; } // Unfocus our compose area if we click out of it. Don't let exits out diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css index 2bb29b6863..69c0f2881c 100644 --- a/zephyr/static/styles/zephyr.css +++ b/zephyr/static/styles/zephyr.css @@ -197,6 +197,10 @@ a:hover code { overflow-y: auto; } +#stream_filters li:hover { + background-color: lightgrey; +} + #user_presences { list-style-position: inside; /* Draw the bullets inside our box */ margin-top: 1em; @@ -262,6 +266,17 @@ ul.filters i { padding-right: 0.25em; } +ul.filters .arrow { + margin-right: 5em; + font-size: 1em; + display: none; +} + +ul.filters li:hover .arrow { + display: inline; + cursor: pointer; +} + .message_list { /* If we change this color, we must change message_reply_fade */ background-color: aliceblue; diff --git a/zephyr/static/templates/sidebar_stream_actions.handlebars b/zephyr/static/templates/sidebar_stream_actions.handlebars new file mode 100644 index 0000000000..3872781375 --- /dev/null +++ b/zephyr/static/templates/sidebar_stream_actions.handlebars @@ -0,0 +1,27 @@ +{{! Contents of the "message actions" popup }} +