streams: Add "Create Stream" button to right side.

This adds a button to allow a user to more easily discover the
stream creation functionality to the right side of the streams
overlay.

frontend_tests/casper_tests/05-subscriptions.js

@@ -23,7 +23,7 @@ casper.then(function () {
 
 casper.waitUntilVisible('.sub_unsub_button.checked', function () {
     casper.test.assertExists('.sub_unsub_button.checked', 'Initial subscriptions loaded');
-    casper.click('#create_stream_button');
+    casper.click('.create_stream_button');
 });
 
 casper.then(function () {
@@ -127,10 +127,10 @@ casper.then(function () {
     // 1 user, Cordelia, is added. Othello (subscribed to Scotland) is not added twice.
     casper.test.assertSelectorHasText('.subscriber-count-text', '5');
     casper.fill('form#add_new_subscription', {stream_name: 'WASeemio'});
-    casper.click('#create_stream_button');
+    casper.click('.create_stream_button');
 });
 casper.then(function () {
-    casper.click('#create_stream_button');
+    casper.click('.create_stream_button');
     casper.fill('form#stream_creation_form', {stream_name: '  '});
     casper.click('form#stream_creation_form button.btn.btn-primary');
 });
@@ -139,7 +139,7 @@ casper.then(function () {
         casper.test.assertTextExists('A stream needs to have a name', "Can't create a stream with an empty name");
         casper.click('form#stream_creation_form button.btn.btn-default');
         casper.fill('form#add_new_subscription', {stream_name: '  '});
-        casper.click('#create_stream_button');
+        casper.click('.create_stream_button');
         casper.fill('form#stream_creation_form', {stream_name: 'Waseemio'});
         casper.click('form#stream_creation_form button.btn.btn-primary');
     });

static/js/stream_create.js

@@ -183,7 +183,7 @@ exports.new_stream_clicked = function (stream_name) {
     exports.show_new_stream_modal();
 
     // at less than 700px we have a @media query that when you tap the
-    // #create_stream_button, the stream prompt slides in. However, when you
+    // .create_stream_button, the stream prompt slides in. However, when you
     // focus  the button on that page, the entire app view jumps over to
     // the other tab, and the animation breaks.
     // it is unclear whether this is a browser bug or "feature", however what

static/js/subs.js

@@ -398,7 +398,7 @@ exports.setup_page = function (callback) {
     populate_and_fill();
 
     if (!should_list_all_streams()) {
-        $('#create_stream_button').val(i18n.t("Subscribe"));
+        $('.create_stream_button').val(i18n.t("Subscribe"));
     }
 };
 
@@ -651,7 +651,7 @@ $(function () {
     // when new messages come in, but it's fairly quick.
     stream_list.build_stream_list();
 
-    $("#subscriptions_table").on("click", "#create_stream_button", function (e) {
+    $("#subscriptions_table").on("click", ".create_stream_button", function (e) {
         e.preventDefault();
         exports.new_stream_clicked();
     });
@@ -695,7 +695,7 @@ $(function () {
         $('#empty_narrow_message').show();
     });
 
-    $("#subscriptions_table").on("click", ".stream-row, #create_stream_button", function () {
+    $("#subscriptions_table").on("click", ".stream-row, .create_stream_button", function () {
         $(".right").addClass("show");
         $(".subscriptions-header").addClass("slide-left");
     });

static/styles/subscriptions.css

@@ -237,7 +237,7 @@ form#add_new_subscription {
     margin: 0;
 }
 
-#create_stream_button {
+.create_stream_button {
     margin: 0px 0px 0px 5px;
 
     border: none;
@@ -255,7 +255,7 @@ form#add_new_subscription {
     padding-top: 0px;
 }
 
-#create_stream_button:hover {
+.create_stream_button:hover {
     color: hsl(0, 0%, 27%);
 }
 
@@ -500,14 +500,22 @@ form#add_new_subscription {
 
 .subscriptions-container .right .nothing-selected {
     display: block;
-    margin-top: calc(45vh - 30px - 1em);
+    margin-top: calc(45vh - 75px);
     text-align: center;
     font-size: 1em;
-    color: hsl(0, 0%, 66%);
-    pointer-events: none;
     -webkit-font-smoothing: antialiased;
 }
 
+.subscriptions-container .right .nothing-selected span {
+    color: hsl(0, 0%, 66%);
+}
+
+.subscriptions-container .right .nothing-selected button {
+    padding: 6px 10px 8px 10px;
+    display: block;
+    margin: 10px auto 0 auto;
+}
+
 .subscriptions-container .left {
     border-right: 1px solid hsl(0, 0%, 86%);
 }

static/templates/subscription_table_body.handlebars

@@ -14,8 +14,8 @@
                         <input type="text" name="stream_name" id="search_stream_name"
                           placeholder="{{t 'Filter streams' }}" value="" autocomplete="off" />
                         {{#if can_create_streams}}
-                        <input type="submit" class=""
+                        <input type="submit" class="create_stream_button"
-                          id="create_stream_button" value="+" title="{{t 'Create new stream' }} (n)"/>
+                         value="+" title="{{t 'Create new stream' }} (n)"/>
                         {{/if}}
                         <div class="float-clear"></div>
                     </form>
@@ -33,7 +33,8 @@
                     <div id="stream_settings_title" class="stream-info-title">{{t 'Stream settings' }}</div>
                 </div>
                 <div class="nothing-selected">
-                    {{t 'Nothing selected.' }}
+                    <span>{{t "Can't find what you're looking for? Create a stream!" }}</span>
+                    <button type="button" class="create_stream_button button small rounded">Create Stream</button>
                 </div>
                 <div class="settings">
                     {{!-- edit stream here --}}