Add subscribe button inside subscription settings.

This adds a subscribe/unsubscribe button inside the subscription
settings container for a stream right next to the stream name.

static/js/subs.js

@@ -17,6 +17,11 @@ function button_for_sub(sub) {
     return $(".stream-row[data-stream-id='" + id + "'] .check");
 }
 
+function settings_button_for_sub(sub) {
+    var id = parseInt(sub.stream_id, 10);
+    return $(".subscription_settings[data-stream-id='" + id + "'] .subscribe-button");
+}
+
 function get_color() {
     var used_colors = stream_data.get_colors();
     var color = stream_color.pick_color(used_colors);
@@ -404,11 +409,13 @@ exports.mark_subscribed = function (stream_name, attrs) {
     }
     var settings = settings_for_sub(sub);
     var button = button_for_sub(sub);
+    var settings_button = settings_button_for_sub(sub).removeClass("unsubscribed");
 
     if (button.length !== 0) {
         exports.rerender_subscribers_count(sub);
 
         button.toggleClass("checked");
+        settings_button.text(i18n.t("Unsubscribe"));
         // Add the user to the member list if they're currently
         // viewing the members of this stream
         if (sub.render_subscribers && settings.hasClass('in')) {
@@ -448,7 +455,10 @@ exports.mark_sub_unsubscribed = function (sub) {
         stream_data.unsubscribe_myself(sub);
 
         var button = button_for_sub(sub);
+        var settings_button = settings_button_for_sub(sub).addClass("unsubscribed");
+
         button.toggleClass("checked");
+        settings_button.text(i18n.t("Subscribe"));
 
         var settings = settings_for_sub(sub);
         if (settings.hasClass('in')) {

static/styles/components.css

@@ -83,6 +83,10 @@
     box-shadow: none !important;
 }
 
+.new-style .button.rounded {
+    border-radius: 4px;
+}
+
 .new-style .button.green {
     background-color: #64ad89;
 }

static/styles/subscriptions.css

@@ -202,7 +202,7 @@
     border: 1px solid #adadad;
 }
 
-.btn.sub_unsub_button {
+.stream-row .btn.sub_unsub_button {
     display: inline-block;
     min-width: 140px;
     float: right;
@@ -679,6 +679,21 @@ form#add_new_subscription {
     display: inline-block;
     font-size: 1.5em;
     font-weight: 600;
+    margin-left: -3px;
+}
+
+#subscription_overlay .stream-header .subscribe-button {
+    float: right;
+    margin-top: -5px;
+}
+
+#subscription_overlay .stream-header .subscribe-button.unsubscribed {
+    color: #5bb792;
+    border-color: #addcc9;
+}
+
+#subscription_overlay .stream-header .subscribe-button.unsubscribed:active {
+    background-color: rgba(91,183,146,0.2);
 }
 
 #subscription_overlay .stream-header .large-icon {

static/templates/subscription_settings.handlebars

@@ -12,6 +12,8 @@
     <div class="stream-name">
       {{name}}
     </div>
+    <button class="button small white rounded subscribe-button sub_unsub_button {{#unless subscribed }}unsubscribed{{/unless}}" type="button" name="button">
+        {{#if subscribed }}Unsubscribe{{else}}Subscribe{{/if}}</button>
   </div>
   <div class="stream-description" data-no-description="{{t 'No description.' }}">{{description}}</div>