From 333b8b095c7e3303bc81cdf5c761e71a29b60bbd Mon Sep 17 00:00:00 2001
From: Cynthia Lin <cynthialin1004@gmail.com>
Date: Wed, 14 Mar 2018 21:24:00 -0700
Subject: [PATCH] subscriptions: Use tooltips for stream info hover content.

Fixes #8718.
---
 frontend_tests/node_tests/subs.js        |  2 +
 static/js/subs.js                        |  4 ++
 static/styles/subscriptions.css          | 48 ++++++++----------------
 static/templates/subscription.handlebars | 17 ++++-----
 4 files changed, 30 insertions(+), 41 deletions(-)

diff --git a/frontend_tests/node_tests/subs.js b/frontend_tests/node_tests/subs.js
index 1c431d5cc2..e88fc71872 100644
--- a/frontend_tests/node_tests/subs.js
+++ b/frontend_tests/node_tests/subs.js
@@ -15,6 +15,8 @@ zrequire('subs');
 var jsdom = require("jsdom");
 var window = jsdom.jsdom().defaultView;
 global.$ = require('jquery')(window);
+set_global('window', window);
+zrequire('bootstrap', 'third/bootstrap/js/bootstrap');
 
 subs.stream_name_match_stream_ids = [];
 subs.stream_description_match_stream_ids = [];
diff --git a/static/js/subs.js b/static/js/subs.js
index 301a13620c..31b50b7220 100644
--- a/static/js/subs.js
+++ b/static/js/subs.js
@@ -343,6 +343,10 @@ exports.filter_table = function (query) {
             $(row).addClass("notdisplayed");
             others.push($(row).detach());
         }
+
+        $(row).find('.sub-info-box [class$="-bar"] [class$="-count"]').tooltip({
+            placement: 'left', animation: false,
+        });
     });
 
     ui.update_scrollbar($("#subscription_overlay .streams-list"));
diff --git a/static/styles/subscriptions.css b/static/styles/subscriptions.css
index ef29c0b6b2..4c96bcc2bd 100644
--- a/static/styles/subscriptions.css
+++ b/static/styles/subscriptions.css
@@ -678,18 +678,32 @@ form#add_new_subscription {
     width: calc(100% - 90px);
 }
 
+.stream-row .sub-info-box .top-bar,
+.stream-row .sub-info-box .bottom-bar {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+}
+
 .stream-row .sub-info-box .top-bar > div {
     display: inline-block;
     vertical-align: top;
 }
 
+.stream-row .sub-info-box .top-bar .stream-name,
+.stream-row .sub-info-box .bottom-bar .description {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .stream-row .sub-info-box .top-bar .stream-name {
     font-weight: 600;
 }
 
 .stream-row .sub-info-box .top-bar .subscriber-count,
 .stream-row .sub-info-box .bottom-bar .stream-message-count {
-    float: right;
+    white-space: nowrap;
     color: hsl(0, 0%, 66%);
 }
 
@@ -699,46 +713,16 @@ form#add_new_subscription {
     margin-right: 5px;
 }
 
-.stream-row .sub-info-box .top-bar .subscriber-count:hover .subscriber-count-hover-content,
-.stream-row .sub-info-box .bottom-bar .stream-message-count:hover .stream-message-hover-content {
-    display: inline-block;
-}
-
-.stream-row .sub-info-box .top-bar .subscriber-count .subscriber-count-hover-content {
-    display: none;
-    width: 110px;
-    margin-right: 3px;
-    float: left;
-    text-align: center;
-    background-color: #a9a9a9;
-    color: #fff;
-    border-radius: 6px;
-}
-
 .stream-row .sub-info-box .bottom-bar > div {
     display: inline-block;
     vertical-align: bottom;
 }
 
-.stream-row .sub-info-box .bottom-bar .description {
+.stream-row .sub-info-box .bottom-bar {
     margin-top: 2px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
     line-height: 1.5;
 }
 
-.stream-row .sub-info-box .bottom-bar .stream-message-count .stream-message-hover-content {
-    display: none;
-    width: 175px;
-    margin-right: 3px;
-    float: left;
-    text-align: center;
-    background-color: #a9a9a9;
-    color: #fff;
-    border-radius: 6px;
-}
-
 #subscription_overlay .stream-description .stream-description-editable:empty:after,
 .stream-row .sub-info-box .description:empty:after {
     content: attr(data-no-description);
diff --git a/static/templates/subscription.handlebars b/static/templates/subscription.handlebars
index 7222cdbe0b..77f1fbeb57 100644
--- a/static/templates/subscription.handlebars
+++ b/static/templates/subscription.handlebars
@@ -10,23 +10,22 @@
     <div class="sub-info-box">
         <div class="top-bar">
             <div class="stream-name">{{name}}</div>
-            <div class="subscriber-count">
+            <div class="subscriber-count" data-toggle="tooltip" title="{{t 'Subscriber count' }}">
                 {{partial "subscription_count"}}
-                <div class="subscriber-count-hover-content">{{t "Subscriber count" }}</div>
             </div>
         </div>
         <div class="bottom-bar">
             <div class="description" data-no-description="{{t 'No description.'}}">{{{rendered_description}}}</div>
-            <div class="stream-message-count">
-                {{#if is_old_stream}}
+            {{#if is_old_stream}}
+            <div class="stream-message-count" data-toggle="tooltip" title="{{t 'Average messages per week' }}">
                 <i class="fa fa-bar-chart"></i>
                 <span class="stream-message-count-text">{{stream_weekly_traffic}}</span>
-                <div class="stream-message-hover-content">{{t "Average messages per week" }}</div>
-                {{else}}
-                <span class="stream-message-count-text">{{t "New" }}</span>
-                <div class="stream-message-hover-content">{{t "Stream created recently" }}</div>
-                {{/if}}
             </div>
+            {{else}}
+            <div class="stream-message-count" data-toggle="tooltip" title="{{t 'Stream created recently' }}">
+                <span class="stream-message-count-text">{{t "New" }}</span>
+            </div>
+            {{/if}}
         </div>
     </div>
 </div>