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 }}
+