subs: Redesign the rows of the #subscriptions table.

frontend_tests/casper_tests/05-subscriptions.js

@@ -19,8 +19,8 @@ casper.then(function () {
     });
 });
 
-casper.waitForSelector('.sub_unsub_button.subscribed-button', function () {
+casper.waitForSelector('.sub_unsub_button.checked', function () {
-    casper.test.assertTextExists('Subscribed', 'Initial subscriptions loaded');
+    casper.test.assertExists('.sub_unsub_button.checked', 'Initial subscriptions loaded');
     casper.click('form#add_new_subscription input.btn');
 });
 casper.waitForSelector('#create_stream_button', function () {

static/js/stream_color.js

@@ -93,7 +93,7 @@ exports.update_stream_color = function (sub, stream_name, color, opts) {
     sub.color = color;
     var id = parseInt(sub.stream_id, 10);
     // The swatch in the subscription row header.
-    $(".stream-row[data-stream-id='" + id + "'] .color_swatch").css('background-color', color);
+    $(".stream-row[data-stream-id='" + id + "'] .icon").css('background-color', color);
     // The swatch in the color picker.
     exports.set_colorpicker_color($(".stream-row[data-stream-id='" + id + "'] .colorpicker"), color);
 

static/js/subs.js

@@ -221,7 +221,7 @@ function create_sub(stream_name, attrs) {
 
 function button_for_sub(sub) {
     var id = parseInt(sub.stream_id, 10);
-    return $(".stream-row[data-stream-id='" + id + "'] .sub_unsub_button");
+    return $(".stream-row[data-stream-id='" + id + "'] .check");
 }
 
 function settings_for_sub(sub) {
@@ -393,7 +393,7 @@ exports.mark_subscribed = function (stream_name, attrs) {
         if (button.length !== 0) {
             exports.rerender_subscribers_count(sub);
 
-            button.text(i18n.t("Subscribed")).addClass("subscribed-button").addClass("btn-success");
+            button.toggleClass("checked");
             button.parent().children(".preview-stream").text(i18n.t("Narrow"));
             // Add the user to the member list if they're currently
             // viewing the members of this stream
@@ -442,7 +442,7 @@ exports.mark_sub_unsubscribed = function (sub) {
         sub.subscribed = false;
 
         var button = button_for_sub(sub);
-        button.removeClass("subscribed-button").removeClass("btn-success").removeClass("btn-danger").text(i18n.t("Subscribe"));
+        button.toggleClass("checked");
         button.parent().children(".preview-stream").text(i18n.t("Preview"));
 
         var settings = settings_for_sub(sub);
@@ -1077,7 +1077,7 @@ $(function () {
         sub = stream_data.add_admin_options(sub);
 
         html = templates.render('subscription_setting_icon', sub);
-        sub_row.find('.subscription-setting-icon').expectOne().html(html);
+        sub_row.find('.icon').expectOne().replaceWith($(html));
 
         html = templates.render('subscription_type', sub);
         sub_row.find('.subscription-type').expectOne().html(html);

static/styles/components.css

@@ -1,5 +1,17 @@
 /* Reusable, object-oriented CSS base components for the Zulip redesign */
 
+.flex {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.hide {
+    display: none;
+}
+
 /* -- base button styling -- */
 .new-style .button {
     padding: 8px 15px;

static/styles/subscriptions.css

@@ -180,11 +180,6 @@
     margin: 20px 15px 20px 15px;
 }
 
-.stream-row {
-    position: relative;
-    border-top: 1px solid #ddd;
-}
-
 .stream-email .email-address {
     width: 90%;
     display: block;
@@ -240,7 +235,7 @@
     border: 1px solid #adadad;
 }
 
-.sub_unsub_button {
+.btn.sub_unsub_button {
     display: inline-block;
     min-width: 140px;
     float: right;
@@ -382,3 +377,106 @@ form#add_new_subscription {
 .change-stream-privacy-feedback {
     display: none;
 }
+
+.streams-list {
+    overflow: auto;
+    height: calc(100% - 41px);
+}
+
+.stream-row {
+    padding: 15px 10px;
+    border-bottom: 1px solid #ddd;
+    cursor: pointer;
+}
+
+.stream-row.active {
+    background-color: #eee;
+    border-bottom: 1px solid #eee;
+}
+
+.stream-row.no-border {
+    border-bottom: 1px solid #eee;
+}
+
+.subscription_table_elem > div {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.stream-row .check {
+    width: 25px;
+    height: 35px;
+    margin-right: 8px;
+    background-size: 60% auto;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.stream-row .checked {
+    background-image: url(../images/checkbox-green.png);
+}
+
+.stream-row .icon {
+    width: 35px;
+    height: 35px;
+    margin-right: 8px;
+    background-color: purple;
+    border-radius: 4px;
+    color: #fff;
+}
+
+.stream-row .icon .symbol {
+    font-weight: 600;
+    font-size: 1.1em;
+}
+
+.stream-row .icon .icon-vector-lock {
+    font-size: 1.4em;
+}
+
+.stream-row .icon .hashtag {
+    font-size: 1.4em;
+    font-weight: 600;
+}
+
+.stream-row .sub-info-box {
+    width: calc(100% - 90px);
+}
+
+.stream-row .sub-info-box .top-bar > div {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.stream-row .sub-info-box .top-bar .stream-title {
+    font-weight: 600;
+}
+
+.stream-row .sub-info-box .top-bar .message-count,
+.stream-row .sub-info-box .top-bar .subscriber-count {
+    float: right;
+    color: #aaa;
+}
+
+.stream-row .sub-info-box .top-bar .subscriber-count {
+    margin-left: 10px;
+}
+
+.stream-row .sub-info-box .description {
+    margin-top: 5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.stream-row .sub-info-box .description:empty:after {
+    content: "No description given.";
+    font-style: italic;
+    color: #aaa;
+}
+
+.stream-row .settings-dropdown-trigger {
+    float: right;
+    margin-left: 10px;
+    color: #aaa;
+}

static/templates/subscription.handlebars

@@ -2,35 +2,26 @@
 {{#with this}}
 <div class="stream-row" data-stream-id="{{stream_id}}" data-stream-name="{{name}}">
   <div class="subscription_table_elem subscription_header collapsed" data-toggle="collapse" data-target="#subscription_settings_{{stream_id}}">
-    <div class="subscription-info-container">
-      <span class="subscription-setting-icon">
-        {{partial "subscription_setting_icon"}}
-      </span>
-      <div class="subscription-info">
-        <span class="stream-name subscription-name-row">{{name}}</span>
-        <span class="subscriber_icon">(<span class="subscriber-count">{{subscriber_count}}</span> <i class="icon-vector-user"></i>)</span>
-        <span class="description subscription-description-row light">{{description}}</span>
-      </div>
-    </div>
 
-    <span class="sub_arrow"><i class="icon-vector-chevron-down"></i></span>
+    {{#if subscribed}}
-    <button class="btn sub_unsub_button btn-default{{#subscribed}} btn-success subscribed-button{{/subscribed}}"
+    <div class="check checked sub_unsub_button"></div>
-            type="button" name="subscription">
+    {{else}}
-      {{#subscribed}}
+    <div class="check sub_unsub_button"></div>
-      {{t "Subscribed" }}
+    {{/if}}
-      {{/subscribed}}
+    {{ partial "subscription_setting_icon" }}
-      {{^subscribed}}
+    <div class="sub-info-box">
-      {{t "Subscribe" }}
+        <div class="top-bar">
-      {{/subscribed}}
+            <div class="stream-name">{{name}}</div>
-    </button>
+            <div class="settings-dropdown-trigger">
-    <a class="preview-stream" href="#narrow/stream/{{name}}">
+                <i class="icon-vector-chevron-down"></i>
-      {{#subscribed}}
+            </div>
-        {{t "Narrow" }}
+            <div class="subscriber-count">
-      {{/subscribed}}
+                <i class="icon-vector-user"></i>
-      {{^subscribed}}
+                {{subscriber_count}}
-        {{t "Preview" }}
+            </div>
-      {{/subscribed}}
+        </div>
-    </a>
+        <div class="description">{{description}}</div>
+    </div>
   </div>
   {{ partial "subscription_settings" }}
 </div>

static/templates/subscription_setting_icon.handlebars

@@ -1,5 +1,9 @@
-{{#if invite_only}}
+<div class="icon" style="background-color: {{color}}">
-   <span class="subscription_lock"><i class="icon-vector-lock" style="color: {{color}}"></i></span>
+    <div class="flex">
-{{else}}
+        {{#if invite_only}}
- <span class="color_swatch fade {{#subscribed}}in{{/subscribed}}" style="background-color: {{color}}"></span>
+        <i class="icon-vector-lock"></i>
-{{/if}}
+        {{else}}
+        <span class="hashtag">#</span>
+        {{/if}}
+    </div>
+</div>