Make the left sidebar and right sidebar more consistent.

Addresses Trac #1500.

(imported from commit ad59d6f78042ce89a99ad60c7c34f67144e9c776)

static/js/popovers.js

@@ -159,7 +159,7 @@ exports.register_click_handlers = function () {
     });
 
 
-    $('body').on('click', '.user_sidebar_entry', function (e) {
+    $('#user_presences').on('click', 'span.arrow', function (e) {
         var last_sidebar_elem = current_user_sidebar_elem;
         popovers.hide_all();
 

static/js/stream_list.js

@@ -292,6 +292,10 @@ $(function () {
             rebuild_recent_subjects(op_stream[0], subject);
             process_visible_unread_messages();
         }
+        var op_pm = event.filter.operands('pm-with');
+        if (op_pm.length === 1) {
+            $("#user_presences li[data-email='" + op_pm[0] + "']").addClass('active-filter');
+        }
     });
 
     $(document).on('narrow_deactivated.zulip', function (event) {

static/js/ui.js

@@ -1158,8 +1158,8 @@ $(function () {
         timerender.set_full_datetime(message, time_elem);
     });
 
-    $('#user_presences').on('click', 'a', function (e) {
-        var email = $(e.target).closest('a').attr('data-email');
+    $('#user_presences').on('click', '.selectable_sidebar_block', function (e) {
+        var email = $(e.target).parents('li').attr('data-email');
         narrow.by('pm-with', email, {trigger: 'presence list'});
         compose.start('private', {private_message_recipient: email,
                                   trigger: 'presence list'});

static/styles/zulip.css

@@ -304,8 +304,11 @@ a:hover code {
 }
 
 #stream_filters .narrow-filter {
-    display: block;
     padding-left: 1.5em;
+}
+
+.narrow-filter {
+    display: block;
     position: relative;
     padding-right: 10px;
 }
@@ -389,18 +392,6 @@ a:hover code {
     border-color: gray;
 }
 
-#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;
 }
@@ -1641,10 +1632,13 @@ table.floating_recipient {
 
 #stream_filters .subscription_block {
     padding-bottom: 4px;
-    display: inline-block;
     line-height: 12px;
-    width: 100%;
     padding-top: 4px;
+}
+
+.selectable_sidebar_block {
+    display: inline-block;
+    width: 100%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

static/templates/stream_sidebar_row.handlebars

@@ -7,10 +7,11 @@
       takes up no space and you don't see the background color. Thus, add a
         to get the inline-block behavior we want. }}
 
+    <span class="subscription_block selectable_sidebar_block">
+
       <span id="stream_sidebar_swatch_{{id}}" class="streamlist_swatch"
        style="background-color: {{color}}">&nbsp;</span>
 
-    <span class="subscription_block">
       <a href="{{uri}}" class="subscription_name">{{name}}
         <span class="count">(<span class="value"></span>)</span>
       </a>

static/templates/user_presence_rows.handlebars

@@ -1,8 +1,11 @@
 {{! User Presence rows }}
 {{#each users}}
-<li class="user_sidebar_entry user_{{type}}">
+<li data-email="{{email}}" class="user_sidebar_entry narrow-filter user_{{type}}">
+  <span class="selectable_sidebar_block">
     <span class="user-status-indicator"></span>
       <a href="#" data-email="{{email}}" data-name="{{name}}" title="{{name}} {{type_desc}}"
          class="{{#if my_fullname}} my_fullname{{/if}}"><span class="count">(<span class="value"></span>) </span>{{name}}</a>
+  </span>
+  <span class="arrow"><i class="icon-vector-chevron-down"></i></span>
 </li>
 {{/each}}

templates/zerver/right-sidebar.html

@@ -28,7 +28,7 @@
                 <div id="onboarding-checklist">
                 </div>
               </div>
-              <ul id="user_presences" class="scrolling_list"></ul>
+              <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>
               {% endif %}