CUSTOMER7-specific left side user list at narrow widths.

(imported from commit 7504d86fe57e4e96f85dee18ede663c542d0144d)

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;
 
 }());

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;
 }());

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 =
+    res.right_sidebar_height = viewport_height - parseInt($("#right-sidebar").css("marginTop"), 10);
-        viewport_height - top_navbar_height
-        - $("#notifications-area").outerHeight(true)
-        - 14;  // margin for right sidebar
 
     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.user_presences_max_height = res.right_sidebar_height
-        res.right_sidebar_height * 0.90 - invite_user_link_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;
 }());

static/styles/zulip.css

@@ -346,13 +346,13 @@ a:hover code {
     margin-top: 1em;
 }
 
-.streams_title {
+.sidebar-title, .share-the-love-title {
-    font-size: 0.9em;
+    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 {
+#streams_header, #userlist-header, #sharethelove-header {
-    border-top: 1px solid #eee;
+    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,

templates/zerver/left-sidebar.html

@@ -19,14 +19,14 @@
                           <li data-name="mentioned" class="global-filter"><i class="icon-vector-tag"></i> <a href="#narrow/is/mentioned">@-mentions<span class="count"><span class="value"></span></span></a></li>
                       </ul>
                       <div id="streams_list">
-                        <div id="streams_header"><h4 class="streams_title">STREAMS</h4>
+                        <div id="streams_header"><h4 class="sidebar-title">STREAMS</h4>
                           <a href=""><i id="streams_inline_cog" class='icon-vector-cog' data-toggle="tooltip" title="Subscribe, add, or configure streams"></i></a>
                         </div>
                         <ul id="stream_filters" class="filters scrolling_list"></ul>
                       </div>
                       <div id="share-the-love">
                         <div id="share-the-love-expand-collapse">
-                          <i class="toggle icon-vector-caret-right"></i> <h4 class="streams_title">SHARE THE LOVE<span class="still-have-invites"> (<span class="invite-count">0</span>)</span></h4>
+                          <i class="toggle icon-vector-caret-right"></i><div id="sharethelove-header"><h4 class="share-the-love-title">SHARE THE LOVE<span class="still-have-invites"> (<span class="invite-count">0</span>)</span></h4></div>
                         </div>
                         <div id="share-the-love-contents">
                           <div id="tell-a-friend-success" class="alert alert-success">

templates/zerver/right-sidebar.html

@@ -31,8 +31,13 @@
                 <div id="onboarding-checklist">
                 </div>
               </div>
-              <ul id="user_presences" class="filters scrolling_list"></ul>
+              <div id="user-list">
+                <div id="userlist-header">
+                  <h4 class='sidebar-title' id='userlist-title'>USERS</h4>
+                </div>
+                 <ul id="user_presences" class="filters scrolling_list"></ul>
               {% if show_invites %}
-              <a id="invite-user-link" href="#invite-user" data-toggle="modal"><i class="icon-vector-plus-sign"></i>Invite coworkers</a>
+                 <a id="invite-user-link" href="#invite-user" data-toggle="modal"><i class="icon-vector-plus-sign"></i>Invite coworkers</a>
               {% endif %}
+              </div>
           </div>