revise UI for starred stream

zulip · kartikmaji · Oct 14, 2015 · Oct 14, 2015 · Oct 15, 2015 · Nov 9, 2015
commit 51f4fb056ddb548beec46cd9fc1641cc0880d0e3
diff --git a/errors.log.2015-10-19 b/errors.log.2015-10-19
diff --git a/frontend_tests/casper_tests/server.log b/frontend_tests/casper_tests/server.log
diff --git a/server.log.2015-10-22 b/server.log.2015-10-22
diff --git a/static/js/stream_color.js b/static/js/stream_color.js
@@ -62,10 +62,6 @@ function update_stream_sidebar_swatch_color(id, color) {
     $("#stream_sidebar_privacy_swatch_" + id).css('color', color);
 }
 
-function update_stream_sidebar_star_color(id, color) {
-    $("#stream_sidebar_swatch_" + id).css('color', color);
-    $("#stream_sidebar_privacy_swatch_" + id).css('color', color);
-}
 function update_historical_message_color(stream_name, color) {
     update_table_stream_color($(".focused_table"), stream_name, color);
     if ($(".focused_table").attr("id") !== "#zhome") {
@@ -103,12 +99,7 @@ exports.update_stream_color = function (sub, stream_name, color, opts) {
     if (opts.update_historical) {
         update_historical_message_color(stream_name, color);
     }
-    if (sub.starred) {
-        update_stream_sidebar_star_color(id, color);
-    }
-    else {
-        update_stream_sidebar_swatch_color(id, color);
-    }
+    update_stream_sidebar_swatch_color(id, color);
     tab_bar.colorize_tab_bar();
 };
 

diff --git a/static/js/stream_list.js b/static/js/stream_list.js
@@ -54,16 +54,40 @@ exports.build_stream_list = function () {
     streams = filter_streams_by_search(streams);
 
     var sort_recent = (streams.length > 40);
-
     var starred_streams = [];
     var unstarred_streams = [];
+    var parent = $('#stream_filters');
+    var elems = [];
+
+    function add_label(label_text){
+        var label = document.createElement('li');
+        label.innerHTML = label_text;
+        label.className = 'stream-filters-label';
+        elems.push(label);
+    }
+
+    function add_sidebar_li(stream){
+        var li = $(stream_data.get_sub(stream).sidebar_li);
+        if (sort_recent) {
+            if (! recent_subjects.has(stream)) {
+                li.addClass('inactive_stream');
+            } else {
+                li.removeClass('inactive_stream');
+            }
+        }
+        elems.push(li.get(0));
+    }
+
+    if (streams.length === 0) {
+        return;
+    }
 
     _.each(streams, function (stream) {
         var starred = stream_data.get_sub(stream).starred;
         if (starred) {
             starred_streams.push(stream);
         }
-        else{
+        else {
             unstarred_streams.push(stream);
         }
     });
@@ -84,14 +108,17 @@ exports.build_stream_list = function () {
     if (previous_sort_order !== undefined && util.array_compare(previous_sort_order, streams)) {
         return;
     }
-
     previous_sort_order = streams;
-
-    var parent = $('#stream_filters');
     parent.empty();
+    elems.push(document.createElement('hr'));
+    if (starred_streams.length > 0){
+        label = document.createElement('li');
+        label.innerHTML = 'STARRED';
+        label.className = 'stream-filters-label';
+        elems.push(label);
+    }
 
-    var elems = [];
-    _.each(streams, function (stream) {
+    _.each(starred_streams, function (stream) {
         var li = $(stream_data.get_sub(stream).sidebar_li);
         if (sort_recent) {
             if (! stream_data.recent_subjects.has(stream)) {
@@ -102,6 +129,13 @@ exports.build_stream_list = function () {
         }
         elems.push(li.get(0));
     });
+    if (starred_streams.length > 0){
+        add_label('STARRED');
+        _.each(starred_streams, add_sidebar_li);
+        add_label('OTHERS');
+    }
+    _.each(unstarred_streams, add_sidebar_li);
+
     $(elems).appendTo(parent);
 };
 

diff --git a/static/styles/zulip.css b/static/styles/zulip.css
@@ -316,8 +316,7 @@ a:hover code {
 }
 
 .sidebar-title, .share-the-love-title {
-    font-size: 11px;
-    font-weight: normal;
+    font-size: 14px;
     display: inline;
 }
 
@@ -375,6 +374,16 @@ a:hover code {
     position: relative;
 }
 
+.stream-filters-label {
+    font-size: 12px;
+    color: #808080;
+    padding-left: 33px;
+}
+
+#stream_filters li.stream-filters-label:hover { 
+    background-color: transparent;
+}
+
 #stream_filters li:hover {
     background-color: #e2e8dd;
 }
@@ -2892,17 +2901,6 @@ button.topic_edit_cancel {
     box-shadow: inset 0px 0px 3px -2px #000;
 }
 
-.streamlist_star{
-    display: block;
-    width: 11px;
-    height: 11px;
-    vertical-align: middle;
-    float: left;
-    position: absolute;
-    left: 10px;
-    top: 5px;
-}
-
 .streamlist_swatch.private-stream-swatch {
     visibility: hidden;
 }

diff --git a/static/templates/stream_sidebar_row.handlebars b/static/templates/stream_sidebar_row.handlebars
@@ -9,14 +9,8 @@
 
     <div class="subscription_block selectable_sidebar_block" data-name="{{name}}">
 
-      {{#if starred}}
-      <div id="stream_sidebar_swatch_{{id}}" class="streamlist_star icon-vector-star{{#if invite_only}} private-stream-swatch{{/if}}"
-       style="color: {{color}}">&nbsp;</div>
-
-      {{else}}
       <div id="stream_sidebar_swatch_{{id}}" class="streamlist_swatch{{#if invite_only}} private-stream-swatch{{/if}}"
        style="background-color: {{color}}">&nbsp;</div>
-      {{/if}}
 
       <a href="{{uri}}" class="subscription_name">{{name}}
       </a>

diff --git a/workers.log.2015-10-15 b/workers.log.2015-10-15
@@ -0,0 +1,2 @@
+2015-10-22 21:15:50,003 INFO     Worker 0 disconnecting from queue missedmessage_mobile_notifications
+2015-10-22 21:15:50,040 INFO     Worker 0 disconnecting from queue missedmessage_mobile_notifications
diff --git a/workers.log.2015-10-22 b/workers.log.2015-10-22
@@ -0,0 +1,3 @@
+2015-11-03 13:27:39,966 INFO     Worker 0 connecting to queue invites
+2015-11-03 13:27:39,968 INFO     Worker 0 connecting to queue feedback_messages
+2015-11-03 13:272015-11-03 13:27:40,030 INFO     SimpleQueueClient connected (connecting took 0.036s)
diff --git a/zerver/migrations/0006_subscription_starred.py b/zerver/migrations/0006_subscription_starred.py
@@ -0,0 +1,19 @@
+# -*- coding: utf-8 -*-
+from __future__ import unicode_literals
+
+from django.db import models, migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('zerver', '0005_auto_20150920_1340'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='subscription',
+            name='starred',
+            field=models.BooleanField(default=False),
+        ),
+    ]
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		2015-10-22 21:15:50,003 INFO Worker 0 disconnecting from queue missedmessage_mobile_notifications
		2015-10-22 21:15:50,040 INFO Worker 0 disconnecting from queue missedmessage_mobile_notifications