diff --git a/static/js/feature_flags.js b/static/js/feature_flags.js index 7a115aeb71..8784d373fe 100644 --- a/static/js/feature_flags.js +++ b/static/js/feature_flags.js @@ -32,6 +32,9 @@ exports.alert_words = page_params.staging || exports.muting = page_params.staging; +exports.left_side_userlist = page_params.staging || + _.contains(['customer7.invalid'], page_params.domain); + return exports; }()); diff --git a/static/js/popovers.js b/static/js/popovers.js index 50dc27ddd8..22ce31b554 100644 --- a/static/js/popovers.js +++ b/static/js/popovers.js @@ -5,6 +5,8 @@ var exports = {}; var current_actions_popover_elem; var current_message_info_popover_elem; +var userlist_placement = "right"; + function show_message_info_popover(element, id) { var last_popover_elem = current_message_info_popover_elem; popovers.hide_all(); @@ -148,6 +150,7 @@ var current_stream_sidebar_elem; var current_topic_sidebar_elem; var current_user_sidebar_elem; + function user_sidebar_popped() { return current_user_sidebar_elem !== undefined; } @@ -210,8 +213,9 @@ exports.register_click_handlers = function () { var last_sidebar_elem = current_user_sidebar_elem; popovers.hide_all(); - popovers.show_userlist_sidebar(); - + if (userlist_placement === "right") { + popovers.show_userlist_sidebar(); + } var target = $(elt).closest('li'); var email = target.find('a').attr('data-email'); var name = target.find('a').attr('data-name'); @@ -219,7 +223,7 @@ exports.register_click_handlers = function () { target.popover({ content: templates.render('user_sidebar_actions', {'email': email, 'name': name}), - placement: "left", + placement: userlist_placement === "left" ? "right" : "left", trigger: "manual", fixed: true }); @@ -542,5 +546,9 @@ exports.hide_all = function () { popovers.hide_streamlist_sidebar(); }; +exports.set_userlist_placement = function (placement) { + userlist_placement = placement || "right"; +}; + return exports; }()); diff --git a/static/js/ui.js b/static/js/ui.js index 54ed78ae4e..42c81069b3 100644 --- a/static/js/ui.js +++ b/static/js/ui.js @@ -3,6 +3,7 @@ var ui = (function () { var exports = {}; var actively_scrolling = false; +var narrow_window = false; exports.actively_scrolling = function () { return actively_scrolling; @@ -328,10 +329,7 @@ function get_new_heights() { - $(".upper_sidebar").outerHeight(true) - 40; - res.right_sidebar_height = - viewport_height - top_navbar_height - - $("#notifications-area").outerHeight(true) - - 14; // margin for right sidebar + res.right_sidebar_height = viewport_height - parseInt($("#right-sidebar").css("marginTop"), 10); res.stream_filters_max_height = res.bottom_sidebar_height @@ -348,8 +346,67 @@ function get_new_heights() { // Don't let us crush the stream sidebar completely out of view res.stream_filters_max_height = Math.max(40, res.stream_filters_max_height); - res.user_presences_max_height = - res.right_sidebar_height * 0.90 - invite_user_link_height; + res.user_presences_max_height = res.right_sidebar_height + - $("#feedback_section").outerHeight(true) + - parseInt($("#user_presences").css("marginTop"),10) + - parseInt($("#user_presences").css("marginBottom"), 10) + - invite_user_link_height; + + return res; +} + +function left_userlist_get_new_heights() { + + var res = {}; + var viewport_height = viewport.height(); + var viewport_width = viewport.width(); + var top_navbar_height = $(".header").outerHeight(true); + var invite_user_link_height = $("#invite-user-link").outerHeight(true) || 0; + var share_the_love_height = $("#share-the-love").is(":visible") ? $("#share-the-love").outerHeight(true) : 0; + + var stream_filters_real_height = $("#stream_filters").prop("scrollHeight"); + var user_list_real_height = $("#user_presences").prop("scrollHeight"); + + res.bottom_whitespace_height = viewport_height * 0.4; + + res.main_div_min_height = viewport_height - top_navbar_height; + + res.bottom_sidebar_height = viewport_height + - parseInt($("#left-sidebar").css("marginTop"),10) + - $(".upper_sidebar").outerHeight(true) + - parseInt($(".bottom_sidebar").css("marginTop"),10); + + + res.total_leftlist_height = res.bottom_sidebar_height + - $("#global_filters").outerHeight(true) + - $("#streams_header").outerHeight(true) + - $("#userlist-header").outerHeight(true) + - parseInt($("#stream_filters").css("marginBottom"),10) + - parseInt($("#user_presences").css("marginTop"), 10) + - parseInt($("#user_presences").css("marginBottom"), 10) + - invite_user_link_height + - share_the_love_height + - 15; + + res.stream_filters_max_height = Math.max (40, res.total_leftlist_height / 2); + + res.user_presences_max_height = Math.max(40, res.total_leftlist_height / 2); + + if (res.stream_filters_max_height > stream_filters_real_height) { + res.stream_filters_max_height = stream_filters_real_height; + res.user_presences_max_height = Math.max(40, res.total_leftlist_height + - stream_filters_real_height); + } + + else if (res.user_presences_max_height > user_list_real_height) { + res.user_presences_max_height = user_list_real_height; + res.stream_filters_max_height = Math.max (40, res.total_leftlist_height + - user_list_real_height); + } + + + res.viewport_height = viewport_height; + res.viewport_width = viewport_width; return res; } @@ -368,13 +425,30 @@ exports.resize_page_components = function () { tab_bar.width(desired_width); tab_bar_under.width(desired_width); - var h = get_new_heights(); + var h; + + if (viewport.width() < 975 && feature_flags.left_side_userlist && !narrow_window) { + narrow_window = true; + popovers.set_userlist_placement("left"); + $(".bottom_sidebar").append($("#user-list")).append($("#share-the-love")); + $("#user_presences").css("margin", "0px"); + $("#userlist-toggle").css("display", "none"); + } + else if (viewport.width() > 975 && feature_flags.left_side_userlist && narrow_window) { + narrow_window = false; + popovers.set_userlist_placement("right"); + $("#right-sidebar").append($("#user-list")); + $("#user_presences").css("margin", ''); + $("#userlist-toggle").css("display", ''); + } + + h = narrow_window ? left_userlist_get_new_heights() : get_new_heights(); $("#bottom_whitespace").height(h.bottom_whitespace_height); - $(".bottom_sidebar").height(h.bottom_sidebar_height); - $("#right-sidebar").height(h.right_sidebar_height); $("#stream_filters").css('max-height', h.stream_filters_max_height); $("#user_presences").css('max-height', h.user_presences_max_height); + + popovers.hide_all(); }; function resizehandler(e) { @@ -1665,5 +1739,6 @@ $(function () { } }); + return exports; }()); diff --git a/static/styles/zulip.css b/static/styles/zulip.css index 7177dc7b9b..d61accdb30 100644 --- a/static/styles/zulip.css +++ b/static/styles/zulip.css @@ -346,13 +346,13 @@ a:hover code { margin-top: 1em; } -.streams_title { - font-size: 0.9em; +.sidebar-title, .share-the-love-title { + font-size: 11px; font-weight: normal; - display: inline; } + #streams_list:hover #streams_inline_cog { visibility: visible; opacity: 0.5; @@ -376,7 +376,6 @@ a:hover code { } #stream_filters { - border-bottom: 1px solid #eee; overflow-x: visible; overflow-y: hidden; margin: 2px 0px 0px 0px; @@ -2485,8 +2484,8 @@ li.expanded_subject { margin-right: 5px; } -#streams_header { - border-top: 1px solid #eee; +#streams_header, #userlist-header, #sharethelove-header { + border-top: 1px solid #ddd; margin-top: 5px; margin-right: 10px; } @@ -2772,7 +2771,7 @@ div.edit_bot { #share-the-love { margin-left: 0px; - margin-right: 18px; + margin-right: 0px; margin-bottom: 5px; line-height: 18px; display: none; @@ -2815,11 +2814,17 @@ div.edit_bot { #share-the-love .still-have-invites { clear: both; + margin-right: 10px; } #share-the-love .no-more-invites { clear: both; display: none; + margin-right: 10px; +} + +#share-the-love .invite-count-area { + margin-right: 10px; } #share-the-love .alert { @@ -2874,6 +2879,7 @@ div.edit_bot { border-left: 1px solid #dddddd; margin-top: 40px; padding-top: 10px; + height: 100%; } .header-main .column-right { @@ -2960,7 +2966,7 @@ div.edit_bot { display: block; position: absolute; float: none; - left: 15px; + left: 0px; top: 0px; } @@ -2970,6 +2976,8 @@ div.edit_bot { border-right: 1px solid #dddddd; margin-top: 40px; padding-top: 10px; + height: 100%; + padding-left: 10px; } body, html, diff --git a/templates/zerver/left-sidebar.html b/templates/zerver/left-sidebar.html index f2cfd805b6..9b965cfd36 100644 --- a/templates/zerver/left-sidebar.html +++ b/templates/zerver/left-sidebar.html @@ -19,14 +19,14 @@
  • @-mentions
    • -

    STREAMS

    +

    STREAMS

    -

    SHARE THE LOVE (0)

    +
    diff --git a/templates/zerver/right-sidebar.html b/templates/zerver/right-sidebar.html index e185c32c80..47275c1f8c 100644 --- a/templates/zerver/right-sidebar.html +++ b/templates/zerver/right-sidebar.html @@ -31,8 +31,13 @@
    -
      +
      +
      + +
      +
        {% if show_invites %} - Invite coworkers + Invite coworkers {% endif %} +