Make unread counts appear as lozenges to the right of stream/subject names

In particular:
   * Pull the count containers out of the containers that cut off overflow text
   * Make them lozenge-like
   * Add logic for shortening the overflow container when a count container is
     present

(imported from commit a2b3d237cbfe4fadfbbc3a931d2de85dfba10d04)

static/js/stream_list.js

@@ -109,11 +109,13 @@ exports.get_count = function (type, name) {
 function update_count_in_dom(count_span, value_span, count) {
     if (count === 0) {
         count_span.hide();
+        count_span.parent(".subscription_block").removeClass("stream-with-count");
         value_span.text('');
         return;
     }
 
     count_span.show();
+    count_span.parent(".subscription_block").addClass("stream-with-count");
     value_span.text(count);
 }
 

static/styles/zulip.css

@@ -530,6 +530,32 @@ ul.filters {
     display: none;
 }
 
+#stream_filters .count {
+    position: absolute;
+    right: 20px;
+    top: 4px;
+    padding: 2px 3px 1px 3px;
+    background: #80837f;
+    color: #ffffff;
+    border-radius: 1px;
+    font-size: 11px;
+    font-weight: normal;
+}
+
+.subject_count {
+    display: block;
+    position: absolute;
+    line-height: 1em;
+    right: 20px;
+    top: 2px;
+    padding: 2px 3px 0px 3px;
+    background: #a6ada4;
+    color: #ffffff;
+    border-radius: 1px;
+    font-size: 11px;
+    font-weight: normal;
+}
+
 ul.filters i {
     padding-right: 0.25em;
     /* Make filter icons the same width so labels line up. */
@@ -1784,10 +1810,25 @@ table.floating_recipient {
     padding-bottom: 4px;
     line-height: 12px;
     padding-top: 4px;
+    margin-right: 15px;
 }
 
-.selectable_sidebar_block {
+#stream_filters .subscription_block.stream-with-count {
+    margin-right: 38px;
+}
+
+.subscription_name {
     display: block;
+    line-height: 1em;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.subject-name {
+    display: block;
+    line-height: 1.3em;
     width: 100%;
     white-space: nowrap;
     overflow: hidden;
@@ -2024,14 +2065,21 @@ ul.expanded_subjects {
     margin-left: 0px;
 }
 
-li.expanded_subject .subject_box {
-    display: block;
-    width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
+li.expanded_subject {
+    position: relative;
 }
 
+.expanded_subject .subject_box {
+    display: block;
+    margin-right: 38px;
+}
+
+.expanded_subject.zero-subject-unreads .subject_box {
+    display: block;
+    margin-right: 0px;
+}
+
+
 .twitter-tweet {
     border: 1px solid #ddd;
     padding: .5em .75em;

static/templates/sidebar_subject_list.handlebars

@@ -1,13 +1,13 @@
 <ul class='expanded_subjects' data-stream='{{stream}}'>
     {{#each subjects}}
-    <li class='expanded_subject' data-name='{{subject}}'>
+    <li class='{{#if is_zero}}zero-subject-unreads {{/if}}expanded_subject' data-name='{{subject}}'>
       <span class='subject_box'>
-        <a href='{{url}}'>
+        <a href='{{url}}' class="subject-name">
           {{subject}}
-          <span class="subject_count {{#if is_zero}}zero_count{{/if}}">
-              (<span class="value">{{unread}}</span>)
-          </span>
         </a>
+        <div class="subject_count {{#if is_zero}}zero_count{{/if}}">
+            <div class="value">{{unread}}</div>
+        </div>
       </span>
     </li>
     {{/each}}

static/templates/stream_sidebar_row.handlebars

@@ -7,18 +7,20 @@
       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">
+    <div class="subscription_block selectable_sidebar_block">
 
-      <span id="stream_sidebar_swatch_{{id}}" class="streamlist_swatch"
-       style="background-color: {{color}}">&nbsp;</span>
+      <div id="stream_sidebar_swatch_{{id}}" class="streamlist_swatch"
+       style="background-color: {{color}}">&nbsp;</div>
 
       <a href="{{uri}}" class="subscription_name">{{name}}
-        <span class="count">(<span class="value"></span>)</span>
       </a>
+
+      <div class="count"><div class="value"></div></div>
+
       {{#if invite_only}}
       <i class="icon-vector-lock"></i>
       {{/if}}
-    </span>
+    </div>
     <span class="arrow"><i class="icon-vector-chevron-down"></i></span>
 
 </li>