left-sidebar: Restyle to have new look.

This restyles the color swatches to either be locks or hashes,
and changes the notifications to be rounded rather than squared.

frontend_tests/node_tests/stream_list.js

@@ -76,7 +76,6 @@ function clear_filters() {
 
     var li = stream_list.get_stream_li('social');
     assert.equal(li.attr('data-name'), 'social');
-    assert.equal(li.find('.streamlist_swatch').attr('style'), 'background-color: green');
     assert.equal(li.find('a.stream-name').text().trim(), 'social');
     assert(li.find('.arrow').find("i").hasClass("icon-vector-chevron-down"));
 

frontend_tests/node_tests/templates.js

@@ -511,8 +511,6 @@ function render(template_name, args) {
     var row_2 = $(html).find(".draft-row[data-draft-id='2']");
     assert.equal(row_2.find(".stream_label").text().trim(), "You and Jordan, Michael");
     assert(row_2.find(".message_row").hasClass("private-message"));
-    assert.equal(row_2.find(".messagebox").css("box-shadow"),
-                 "inset 2px 0px 0px 0px #444444, -1px 0px 0px 0px #444444");
     assert.equal(row_2.find(".message_content").text().trim(), "Private draft");
 }());
 
@@ -897,10 +895,16 @@ function render(template_name, args) {
     html += render('stream_sidebar_row', args);
     html += '</ul>';
 
+    // because it won't mark the template as read otherwise.
+    render('stream_privacy');
+
     global.write_handlebars_output("stream_sidebar_row", html);
 
-    var swatch = $(html).find(".streamlist_swatch");
+    var swatch = $(html).find(".stream-privacy");
-    assert.equal(swatch.attr('id'), 'stream_sidebar_swatch_999');
+    assert.equal(swatch.attr('id'), 'stream_sidebar_privacy_swatch_999');
+
+    // test to ensure that the hashtag element from stream_privacy exists.
+    assert.equal($(html).find(".stream-privacy").children("*").attr("class"), "hashtag");
 }());
 
 

static/js/stream_list.js

@@ -257,7 +257,6 @@ exports.create_sidebar_row = function (sub) {
 exports.redraw_stream_privacy = function (stream_name) {
     var li = exports.get_stream_li(stream_name);
     var div = li.find('.stream-privacy');
-    var swatch = li.find('.streamlist_swatch');
     var sub = stream_data.get_sub(stream_name);
     var color = stream_data.get_color(stream_name);
     var dark_background = stream_color.get_color_class(color);
@@ -267,12 +266,6 @@ exports.redraw_stream_privacy = function (stream_name) {
         dark_background: dark_background,
     };
 
-    if (sub.invite_only) {
-        swatch.addClass("private-stream-swatch");
-    } else {
-        swatch.removeClass("private-stream-swatch");
-    }
-
     var html = templates.render('stream_privacy', args);
     div.html(html);
 };

static/styles/left-sidebar.css

@@ -1,3 +1,8 @@
+#left-sidebar {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
 #left-sidebar .brand {
     display: table-row;
 }
@@ -11,25 +16,31 @@
 #streams_filter_icon,
 #join_unsub_stream {
     float: right;
-    color: #000;
+    color: #ccc;
     font-size: 13px;
     margin-top: 3px;
-    margin-left: 6px;
+    margin-left: 10px;
-    opacity: 0.5;
 }
 
 #streams_inline_cog:hover,
-#streams_filter_icon:hover {
+#streams_filter_icon:hover,
-    opacity: 1.0;
+#join_unsub_stream:hover {
+    color: #555;
 }
 
-#join_unsub_stream {
+#streams_header #join_unsub_stream {
     margin-top: 1px;
 }
 
-#streams_header a {
+#streams_inline_cog {
-    color: inherit;
+    margin-right: 10px;
-    text-decoration: none;
+}
+
+.hashtag:empty:after {
+    content: "#";
+    font-size: 1.3rem;
+    font-weight: 800;
+    line-height: 1;
 }
 
 .tooltip {
@@ -43,6 +54,19 @@
     font-weight: normal;
 }
 
+#stream_filters li {
+    padding: 0px;
+}
+
+#stream_filters li ul {
+    margin-left: 0px;
+}
+
+#stream_filters li ul.topic-list li {
+    padding-left: 29px;
+    padding-top: 1px;
+}
+
 #stream-filters-container {
     overflow-x: hidden;
     overflow-y: hidden;
@@ -94,6 +118,11 @@ li.active-sub-filter {
     position: relative;
 }
 
+.left-sidebar .sidebar-title a {
+    color: inherit;
+    text-decoration: none;
+}
+
 li.hidden-filter {
     visibility: hidden;
     display: none;
@@ -113,9 +142,18 @@ li.hidden-filter {
 
 #global_filters .global-filter {
     position: relative;
-    padding: 1px 10px;
+    padding-left: 10px;
-    font-size: 16px;
+    padding-right: 10px;
-    font-weight: 300;
+}
+
+.left-sidebar li a {
+    color: #555;
+}
+
+.left-sidebar li {
+    font-size: 1em;
+    padding-top: 2px;
+    padding-bottom: 2px;
 }
 
 #global_filters .global-filter i {
@@ -124,27 +162,31 @@ li.hidden-filter {
 
 #global_filters .count,
 #stream_filters .count {
-    position: absolute;
+    float: right;
-    right: 25px;
+    margin-top: 3px;
-    top: 2px;
-    padding: 2px 3px 1px 3px;
     background: #80837f;
+    padding: 2px 4px 1px 4px;
     border-radius: 0px;
     color: #ffffff;
     font-size: 12px;
     font-weight: normal;
     letter-spacing: 0.6px;
+    border-radius: 4px;
 }
 
-#stream_filters .count,
 #global_filters .count {
-    margin-left: 0.5em;
+    margin-right: 15px;
     display: none;
 }
 
+#stream_filters .count {
+    margin-right: 10px;
+}
+
 #global_filters .count {
     line-height: 13px;
     top: 3px;
+    margin-right: 15px;
 }
 
 .topic-name {
@@ -162,22 +204,24 @@ li.hidden-filter {
     display: block;
     position: absolute;
     line-height: 1em;
-    top: 2px;
+    top: 4px;
-    padding: 2px 3px 0px 3px;
+    padding: 2px 4px 1px 4px;
     background: #a6ada4;
     color: #ffffff;
     border-radius: 1px;
     font-size: 12px;
     font-weight: normal;
     letter-spacing: 0.6px;
+    border-radius: 4px;
 }
 
 .topic-unread-count {
     right: 25px;
+    top: 2px;
 }
 
 .private_message_count {
-    right: 10px;
+    right: 15px;
 }
 
 ul.filters i {
@@ -189,7 +233,7 @@ ul.filters i {
 
 ul.filters .arrow {
     position: absolute;
-    right: 0px;
+    right: 2px;
     top: 2px;
     right: 4px;
     font-size: 0.8em;
@@ -243,11 +287,11 @@ ul.filters li.out_of_home_view li.muted_topic {
 }
 
 #stream_filters .subscription_block {
-    padding-bottom: 3px;
+    padding: 0 0 0 10px;
     line-height: 12px;
-    padding-top: 4px;
+    padding: 2px 0px;
-    margin-right: 15px;
+    margin-right: 18px;
-    padding-left: 28px;
+    margin-left: 10px;
 }
 
 #stream_filters .subscription_block .stream-name {
@@ -255,51 +299,50 @@ ul.filters li.out_of_home_view li.muted_topic {
 }
 
 #stream_filters .subscription_block.stream-with-count {
-    margin-right: 38px;
+    margin-right: 15px;
-}
-
-.streamlist_swatch {
-    display: block;
-    width: 11px;
-    height: 11px;
-    vertical-align: middle;
-    float: left;
-    position: absolute;
-    left: 10px;
-    top: 5px;
-    box-shadow: inset 0px 0px 3px -2px #000;
-}
-
-.streamlist_swatch.private-stream-swatch {
-    visibility: hidden;
 }
 
 .stream-privacy {
-    position: absolute;
-    left: 11px;
-    top: 3px;
     font-size: 15px;
 }
 
+.stream-privacy .icon-vector-lock {
+    display: inline-block;
+    width: 9px;
+    margin-right: 2px;
+    margin-left: 1px;
+    position: relative;
+    top: 1px;
+}
+
+.stream-privacy .hashtag {
+    position: relative;
+    top: 2px;
+    margin-right: 5px;
+}
+
 ul.topic-list {
     list-style-type: none;
     font-weight: normal;
-    margin-left: 0px;
+}
-    padding-bottom: 2px;
+
+#streams_header a {
+    text-decoration: none;
 }
 
 ul.expanded_private_messages {
     list-style-type: none;
     font-weight: 300;
-    font-size: 84%;
+    font-size: 0.9em;
+    font-weight: 400;
     margin-left: 0px;
     padding-bottom: 2px;
+    margin-top: 3px;
 }
 
 li.show-more-topics,
 li.topic-list-item {
     position: relative;
-    padding-left: 28px;
     padding-right: 5px;
 }
 
@@ -311,6 +354,10 @@ li.expanded_private_message {
     padding-top: 2px;
 }
 
+li.expanded_private_message a {
+    margin-top: 3px;
+}
+
 .show-all-streams a {
     color: #333;
 }
@@ -326,6 +373,10 @@ li.expanded_private_message {
     margin-right: 38px;
 }
 
+.pm-box {
+    line-height: 1;
+}
+
 .zero-subject-unreads .pm-box,
 .zero-subject-unreads .topic-box {
     margin-right: 15px;

static/styles/right-sidebar.css

@@ -1,3 +1,8 @@
+.right-sidebar {
+    -webkit-font-smoothing: antialiased;
+    color: #555;
+}
+
 #group-pms li:hover,
 #user_presences li:hover {
     background-color: #e2e8dd;
@@ -36,6 +41,11 @@
     list-style-type: none;
 }
 
+#group-pm-title {
+    margin: 10px 0px 0px 0px;
+    display: inline-block;
+}
+
 .user-status-indicator,
 .group-pm-status-indicator {
     display: block;
@@ -75,7 +85,7 @@
 
 #user_presences a,
 #group-pms a {
-    color: #333;
+    color: inherit;
 }
 
 #invite-user-link i {

static/styles/zulip.css

@@ -473,7 +473,8 @@ a:hover code {
 }
 
 .sidebar-title {
-    font-size: 11px;
+    font-size: 1em;
+    color: #aaa;
     font-weight: normal;
     display: inline;
 }
@@ -2130,8 +2131,8 @@ div.floating_recipient {
 }
 
 .conversation-partners {
-    display: block;
+    display: inline-block;
-    line-height: 1.2em;
+    line-height: 1.2;
     width: 90%;
     overflow: hidden;
 }

static/templates/stream_privacy.handlebars

@@ -1,4 +1,6 @@
 {{! This controls whether the swatchnext to streams in the left sidebar has a lock icon. }}
 {{#if invite_only}}
 <i class="icon-vector-lock"></i>
+{{ else }}
+<span class="hashtag"></span>
 {{/if}}

static/templates/stream_sidebar_row.handlebars

@@ -2,25 +2,16 @@
 
 <li data-name="{{name}}" class="narrow-filter{{#if not_in_home_view}} out_of_home_view{{/if}}"
     id="stream_sidebar_{{id}}">
-
-    {{! For some reason, even though the span is inline-block, if it is empty it
-    takes up no space and you don't see the background color. Thus, add a
-    &nbsp; to get the inline-block behavior we want. }}
-
     <div class="subscription_block selectable_sidebar_block" data-name="{{name}}">
 
-        <div id="stream_sidebar_swatch_{{id}}" class="streamlist_swatch{{#if invite_only}} private-stream-swatch{{/if}}"
-         style="background-color: {{color}}">&nbsp;</div>
-
-        <a href="{{uri}}" class="stream-name">{{name}}
-        </a>
-
-        <div class="count"><div class="value"></div></div>
-
         <span id="stream_sidebar_privacy_swatch_{{id}}" class="stream-privacy" style="color: {{color}}">
-            {{partial "stream_privacy"}}
+            {{! This controls whether the swatchnext to streams in the left sidebar has a lock icon. }}
+            {{ partial "stream_privacy" }}
         </span>
 
+        <a href="{{uri}}" class="stream-name">{{name}}</a>
+
+        <div class="count"><div class="value"></div></div>
     </div>
     <span class="arrow stream-sidebar-arrow"><i class="icon-vector-chevron-down"></i></span>
 

templates/zerver/left_sidebar.html

@@ -15,7 +15,7 @@
                           </a>
                           <a href=""><i id='streams_filter_icon' class='icon-vector-search' data-toggle="tooltip" title="{{ _('Filter streams list') }}"></i></a>
                           <a href="" id="join_unsub_stream">
-                              <i class="icon-vector-plus" title="{{ _('Join stream')}}"></i>
+                              <i class="icon-vector-plus" title="{{ _('Join stream')}}" data-toggle="tooltip"></i>
                           </a>
                         </div>
                         <div id="topics_header">