Move the "create new stream" form into the subscriptions table

(imported from commit 6cfccf01b4253423e271a08c74f6077cbc10fce3)

templates/zephyr/subscriptions.html

@@ -4,15 +4,21 @@
   <div class="span6">
     <div class="subscriptions">
       <h1>Subscriptions</h1>
-      <form id="add_new_subscription" class="form-inline">{% csrf_token %}
-        <input type="text" name="streams" id="streams"
-               placeholder="Stream name" value="" class="span4" />
-        <input type="submit" name="add_subscription" value="Subscribe" class="btn btn-primary" />
-      </form>
       <div class="alert" id="subscriptions-status"></div>
       <div id="subs_page_loading_indicator"></div>
       <table class="table table-condensed table-striped">
-        <tbody id="subscriptions_table"></tbody>
+        <tbody id="subscriptions_table">
+          <tr id="create_stream_row"><td>
+              <div class="subscription_table_elem">
+                <form id="add_new_subscription" class="form-inline">
+                  <input type="text" name="stream_name" id="create_stream_name"
+                         placeholder="Stream name" value="" class="span3" />
+                  <input type="submit" class="btn btn-primary"
+                         id="create_stream_button" value="Create stream" />
+                </form>
+              </div>
+          </td></tr>
+        </tbody>
       </table>
     </div>
   </div>

zephyr/jstemplates/subscription.html

@@ -3,7 +3,7 @@
 {{#with this}}
 <tr class="subscription_row" id="subscription_{{id}}">
   <td>
-    <div class="subscription_header" data-toggle="collapse" data-target="#subscription_settings_{{id}}">
+    <div class="subscription_table_elem subscription_header" data-toggle="collapse" data-target="#subscription_settings_{{id}}">
       <span class="color_swatch" style="background-color: {{color}}"></span>
       <span class="subscription_name">{{name}}</span>
       <button class="btn sub_unsub_button {{^subscribed}}btn-primary{{/subscribed}}"

zephyr/static/js/subs.js

@@ -110,14 +110,14 @@ function mark_subscribed(stream_name) {
 
     if (sub === undefined) {
         sub = create_sub(stream_name, {});
-        $('#subscriptions_table').prepend(templates.subscription({subscriptions: [sub]}));
+        $('#create_stream_row').after(templates.subscription({subscriptions: [sub]}));
     } else if (! sub.subscribed) {
         sub.subscribed = true;
         var button = button_for_sub(sub);
         if (button.length !== 0) {
             button.text("Unsubscribe").removeClass("btn-primary");
         } else {
-            $('#subscriptions_table').prepend(templates.subscription({subscriptions: [sub]}));
+            $('#create_stream_row').after(templates.subscription({subscriptions: [sub]}));
         }
     } else {
         // Already subscribed
@@ -205,10 +205,10 @@ exports.setup_page = function () {
             return a.name.localeCompare(b.name);
         });
 
-        $('#subscriptions_table tr').remove();
+        $('#subscriptions_table tr:gt(0)').remove();
         $('#subscriptions_table').append(templates.subscription({subscriptions: sub_rows}));
         util.destroy_loading_indicator($('#subs_page_loading_indicator'));
-        $('#streams').focus().select();
+        $('#create_stream_name').focus().select();
     }
 
     if (should_list_all_streams()) {
@@ -286,8 +286,8 @@ function ajaxSubscribe(stream) {
         dataType: 'json', // This seems to be ignored. We still get back an xhr.
         data: {"subscriptions": JSON.stringify([stream]) },
         success: function (resp, statusText, xhr, form) {
-            if ($("#streams").val() === stream) {
-                $("#streams").val("");
+            if ($("#create_stream_name").val() === stream) {
+                $("#create_stream_name").val("");
             }
             var name, res = $.parseJSON(xhr.responseText);
             if (res.subscribed.length === 0) {
@@ -302,7 +302,7 @@ function ajaxSubscribe(stream) {
         },
         error: function (xhr) {
             ui.report_error("Error adding subscription", xhr, $("#subscriptions-status"));
-            $("#streams").focus();
+            $("#create_stream_name").focus();
         }
     });
 }
@@ -328,7 +328,7 @@ function ajaxUnsubscribe(stream) {
         },
         error: function (xhr) {
             ui.report_error("Error removing subscription", xhr, $("#subscriptions-status"));
-            $("#streams").focus();
+            $("#create_stream_name").focus();
         }
     });
 }
@@ -343,7 +343,7 @@ $(function () {
 
     $("#add_new_subscription").on("submit", function (e) {
         e.preventDefault();
-        ajaxSubscribe($("#streams").val());
+        ajaxSubscribe($("#create_stream_name").val());
     });
 
     $("#subscriptions_table").on("click", ".sub_unsub_button", function (e) {

zephyr/static/styles/zephyr.css

@@ -641,7 +641,7 @@ table.floating_recipient {
     table-layout: fixed;
 }
 
-.subscription_header {
+.subscription_table_elem {
     padding: 2px;
     height: 30px;
     line-height: 30px;
@@ -695,6 +695,15 @@ table.floating_recipient {
     float: right;
 }
 
+#create_stream_name {
+    margin-left: 25px;
+}
+
+#create_stream_button {
+    width: 140px;
+    float: right;
+}
+
 .sub_settings_title {
     line-height: 30px;
     font-size: 14px;

zephyr/tests/frontend/tests/site.js

@@ -307,7 +307,7 @@ casper.then(function() {
 });
 casper.then(function() {
     casper.test.assertTextExists('Unsubscribe', 'Initial subscriptions loaded');
-    casper.fill('form#add_new_subscription', {streams: 'Waseemio'});
+    casper.fill('form#add_new_subscription', {stream_name: 'Waseemio'});
     casper.click('form#add_new_subscription input.btn.btn-primary');
     casper.waitForText('Waseemio');
 });
@@ -315,13 +315,13 @@ casper.then(function() {
     // TODO: Make this more robust.
     // I tried to do it with assertSelectorHasText, but it wasn't quite working.
     casper.test.assertTextExists('Successfully added subscription to Waseemio', 'Subscribing to a stream');
-    casper.fill('form#add_new_subscription', {streams: 'WASeemio'});
+    casper.fill('form#add_new_subscription', {stream_name: 'WASeemio'});
     casper.click('form#add_new_subscription input.btn.btn-primary');
     casper.waitForText('Already subscribed');
 });
 casper.then(function() {
     casper.test.assertTextExists('Already subscribed', "Can't subscribe twice to a stream");
-    casper.fill('form#add_new_subscription', {streams: '  '});
+    casper.fill('form#add_new_subscription', {stream_name: '  '});
     casper.click('form#add_new_subscription input.btn.btn-primary');
     casper.waitForText('Error adding subscription');
 });