From 0a848e412fb1d4dea712dc0e8f57835ecf06e73c Mon Sep 17 00:00:00 2001
From: Steve Howell <showell@zulipchat.com>
Date: Fri, 1 Mar 2019 19:27:15 +0000
Subject: [PATCH] buddy list: Use user-list-arrow class.

Using a more specific class avoids confusion related
to the .arrow class, which is not only a popover concept,
but also a Zulip concept in the left sidebar.
---
 static/js/popovers.js                         |  2 +-
 static/styles/left-sidebar.scss               | 11 -----------
 static/styles/night_mode.scss                 |  2 ++
 static/styles/right-sidebar.scss              | 19 ++++++++++++++++++-
 static/templates/user_presence_row.handlebars |  2 +-
 5 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/static/js/popovers.js b/static/js/popovers.js
index 4eedcaa770..d8d429dd8e 100644
--- a/static/js/popovers.js
+++ b/static/js/popovers.js
@@ -792,7 +792,7 @@ exports.register_click_handlers = function () {
         e.preventDefault();
     });
 
-    $('#user_presences').on('click', 'span.arrow', function (e) {
+    $('#user_presences').on('click', '.user-list-arrow', function (e) {
         e.stopPropagation();
 
         // use email of currently selected user, rather than some elem comparison,
diff --git a/static/styles/left-sidebar.scss b/static/styles/left-sidebar.scss
index a118714342..dbab32ed1f 100644
--- a/static/styles/left-sidebar.scss
+++ b/static/styles/left-sidebar.scss
@@ -273,17 +273,6 @@ a.conversation-partners:hover {
                 ignores top, font-size, display
                 display would be none either way
 
-        buddy list
-            span:
-                #user_presences .arrow (ok, top=0)
-
-                ul.filters .arrow
-                    keeps all but top
-
-            i:
-                ul.filters i
-                ignores ul.filters arrow
-
 */
 
 ul.filters i {
diff --git a/static/styles/night_mode.scss b/static/styles/night_mode.scss
index de80d27a36..11af724983 100644
--- a/static/styles/night_mode.scss
+++ b/static/styles/night_mode.scss
@@ -255,6 +255,7 @@ on a dark background, and don't change the dark labels dark either. */
     #searchbox a.search_icon,
     #searchbox .search_button,
     .close,
+    #user_presences li:hover .user-list-arrow,
     ul.filters li:hover .arrow {
         color: hsl(236, 33%, 80%);
     }
@@ -266,6 +267,7 @@ on a dark background, and don't change the dark labels dark either. */
     #searchbox a.search_icon:hover,
     #searchbox .search_button:hover,
     .close:hover,
+    #user_presences li .user-list-arrow:hover,
     ul.filters li .arrow:hover {
         color: hsl(0, 0%, 100%);
     }
diff --git a/static/styles/right-sidebar.scss b/static/styles/right-sidebar.scss
index bbf3ed32cf..be2457c6d1 100644
--- a/static/styles/right-sidebar.scss
+++ b/static/styles/right-sidebar.scss
@@ -49,10 +49,27 @@
     padding-right: 15px;
 }
 
-#user_presences .arrow {
+#user_presences .user-list-arrow {
+    position: absolute;
     top: 0px;
+    right: 10px;
+    font-size: 0.8em;
+    display: none;
 }
 
+#user_presences li:hover .user-list-arrow {
+    display: inline;
+    cursor: pointer;
+    color: hsl(0, 0%, 53%);
+}
+
+#user_presences li .user-list-arrow:hover {
+    display: inline;
+    cursor: pointer;
+    color: hsl(0, 0%, 0%);
+}
+
+
 #group-pm-title {
     margin: 10px 0px 0px 0px;
     display: inline-block;
diff --git a/static/templates/user_presence_row.handlebars b/static/templates/user_presence_row.handlebars
index f17164e25d..544bb65d34 100644
--- a/static/templates/user_presence_row.handlebars
+++ b/static/templates/user_presence_row.handlebars
@@ -13,5 +13,5 @@
         </a>
         <span class="count"><span class="value">{{#if num_unread}}{{num_unread}}{{/if}}</span></span>
     </div>
-    <span class="arrow"><i class="fa fa-chevron-down" aria-hidden="true"></i></span>
+    <span class="user-list-arrow"><i class="fa fa-chevron-down" aria-hidden="true"></i></span>
 </li>