From 3be4a010e83c8ee3d18d4e300bcaf5069a7e1c8d Mon Sep 17 00:00:00 2001 From: Tim Abbott Date: Thu, 30 May 2013 15:29:30 -0400 Subject: [PATCH] Add a sidebar actions popover for the right/user sidebar. Currently, this is accessed by clicking anywhere in the sidebar region other than the text of the person's name itself, which does the existing narrow behaviour. Later we can make it do something clever with hovering pulling out the popover or something, but that's potentially a significant design project I think this is good enough to be useful. (imported from commit a2cc5dc851661117a6d438ca48a1ce7585d4eb63) --- zephyr/static/js/ui.js | 57 +++++++++++++++++++ zephyr/static/styles/zephyr.css | 20 +++++++ .../stream_sidebar_actions.handlebars | 2 +- .../templates/user_sidebar_actions.handlebars | 22 +++++++ 4 files changed, 100 insertions(+), 1 deletion(-) create mode 100644 zephyr/static/templates/user_sidebar_actions.handlebars diff --git a/zephyr/static/js/ui.js b/zephyr/static/js/ui.js index 9e8817ca7d..e884605f71 100644 --- a/zephyr/static/js/ui.js +++ b/zephyr/static/js/ui.js @@ -712,7 +712,9 @@ function collapse(row) { } var current_stream_sidebar_elem; +var current_user_sidebar_elem; var stream_sidebar_popup_shown_this_click = false; +var user_sidebar_popup_shown_this_click = false; exports.hide_stream_sidebar_popover = function () { if (ui.stream_sidebar_currently_popped()) { @@ -721,6 +723,17 @@ exports.hide_stream_sidebar_popover = function () { } }; +exports.hide_user_sidebar_popover = function () { + if (ui.user_sidebar_currently_popped()) { + current_user_sidebar_elem.popover("destroy"); + current_user_sidebar_elem = undefined; + } +}; + +exports.user_sidebar_currently_popped = function () { + return current_user_sidebar_elem !== undefined; +}; + exports.stream_sidebar_currently_popped = function () { return current_stream_sidebar_elem !== undefined; }; @@ -1238,6 +1251,46 @@ $(function () { e.preventDefault(); }); + $('body').on('click', '.user_sidebar_entry', function (e) { + var last_sidebar_elem = current_user_sidebar_elem; + ui.hide_user_sidebar_popover(); + user_sidebar_popup_shown_this_click = true; + + var email = $(e.target).find('a').attr('data-email'); + var name = $(e.target).find('a').text(); + + $(e.target).popover({ + content: templates.render('user_sidebar_actions', {'email': email, + 'name': name}), + placement: "left", + trigger: "manual" + }); + $(e.target).popover("show"); + current_user_sidebar_elem = $(e.target); + e.preventDefault(); + }); + + $('body').on('click', '.user_popover .narrow_to_private_messages', function (e) { + var email = $(e.target).parents('ul').attr('data-email'); + ui.hide_user_sidebar_popover(); + narrow.by('pm-with', email, {select_first_unread: true, trigger: 'user sidebar popover'}); + e.stopPropagation(); + }); + + $('body').on('click', '.user_popover .narrow_to_messages_sent', function (e) { + var email = $(e.target).parents('ul').attr('data-email'); + ui.hide_user_sidebar_popover(); + narrow.by('sender', email, {select_first_unread: true, trigger: 'user sidebar popover'}); + e.stopPropagation(); + }); + + $('body').on('click', '.user_popover .compose_private_message', function (e) { + var email = $(e.target).parents('ul').attr('data-email'); + ui.hide_user_sidebar_popover(); + compose.start('private', {"private_message_recipient": email, trigger: 'sidebar user actions'}); + e.stopPropagation(); + }); + $('#stream_filters').on('click', 'span.arrow', function (e) { var last_sidebar_elem = current_stream_sidebar_elem; ui.hide_stream_sidebar_popover(); @@ -1475,7 +1528,11 @@ $(function () { if (stream_sidebar_popup_shown_this_click === false ) { ui.hide_stream_sidebar_popover(); } + if (user_sidebar_popup_shown_this_click === false ) { + ui.hide_user_sidebar_popover(); + } stream_sidebar_popup_shown_this_click = false; + user_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 525a65c187..c76675b8f9 100644 --- a/zephyr/static/styles/zephyr.css +++ b/zephyr/static/styles/zephyr.css @@ -217,6 +217,14 @@ a:hover code { overflow-y: auto; } +#user_presences li:hover { + background-color: lightgrey; +} + +#user_presences .user_sidebar_entry:hover { + cursor: pointer; +} + #user_presences li { overflow: hidden; white-space: nowrap; @@ -235,6 +243,18 @@ a:hover code { list-style-image: url(/static/images/presence/user-idle.png); } +#user_presences .arrow { + font-size: 1em; + width: 2em; +} +#user_presences .arrow-real { + display: none; +} +#user_presences li:hover .arrow-real { + display: inline; + cursor: pointer; +} + #user_presences a { color: #333; } diff --git a/zephyr/static/templates/stream_sidebar_actions.handlebars b/zephyr/static/templates/stream_sidebar_actions.handlebars index dde07db8a5..138cb5cdb6 100644 --- a/zephyr/static/templates/stream_sidebar_actions.handlebars +++ b/zephyr/static/templates/stream_sidebar_actions.handlebars @@ -1,4 +1,4 @@ -{{! Contents of the "message actions" popup }} +{{! Contents of the "stream actions" popup }}