subscriptions: add HTML and templates for new stream creation modal.

(imported from commit d19991c7fcdd29feafa877ca8203034028b1e0b2)

templates/zephyr/index.html

@@ -16,6 +16,10 @@
 {% rawjstemplate "subscription" %}
 </script>
 
+<script id="template_new_stream_users" type="text/x-handlebars-template">
+{% rawjstemplate "new_stream_users" %}
+</script>
+
 <script id="template_invite_subscription" type="text/x-handlebars-template">
 {% rawjstemplate "invite_subscription" %}
 </script>

templates/zephyr/stream_creation_prompt.html

@@ -0,0 +1,26 @@
+<div class="modal hide" id="stream-creation" tabindex="-1" role="dialog"
+     aria-labelledby="stream-creation-label" aria-hidden="true">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+    <h3 id="stream-creation-label">Create stream <span id="stream_name"></span></h3>
+  </div>
+  <form id="stream_creation_form" class="form-inline">
+      <div class="modal-body">
+          <div id="make-invite-only">
+            <label class="checkbox">
+              <input id="invite-only" type="checkbox" name="invite-only" />
+              Make stream invite-only
+            </label>
+          </div>
+          <br />
+          <div class="control-group">
+            <label class="control-label" for="people_to_add"><b>People to add</b></label><br />
+            <div class="controls" id="people_to_add"></div>
+          </div>
+      </div>
+      <div class="modal-footer">
+          <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
+          <button class="btn btn-primary" type="submit">Create</button>
+      </div>
+  </form>
+</div>

templates/zephyr/subscriptions.html

@@ -23,3 +23,5 @@
     </div>
   </div>
 </div>
+
+{% include "zephyr/stream_creation_prompt.html" %}

zephyr/jstemplates/new_stream_users.html

@@ -0,0 +1,11 @@
+{{! Client-side Mustache template for rendering users in the stream creation modal.}}
+<a href="#" onclick="subs.set_all_users(event, true);">Check all</a> |
+<a href="#" onclick="subs.set_all_users(event, false);">Uncheck all</a>
+<div id="user-checkboxes">
+  {{#each users}}
+  <label class="checkbox">
+    <input type="checkbox" name="user" value="{{this.email}}" checked="true"> {{this.full_name}} ({{this.email}})
+  </label><br />
+  {{/each}}
+</div>
+

zephyr/static/js/setup.js

@@ -13,7 +13,7 @@ $(function () {
     // Compile Handlebars templates.
     $.each(['message', 'subscription',
             'userinfo_popover_title', 'userinfo_popover_content',
-            'timeinfo_popover_content', 'invite_subscription'],
+            'timeinfo_popover_content', 'invite_subscription', 'new_stream_users'],
         function (index, name) {
             templates[name] = Handlebars.compile($('#template_'+name).html());
         }

zephyr/static/styles/zephyr.css

@@ -813,4 +813,13 @@ table.floating_recipient {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+#stream-creation {
+    max-height: 80%;
+}
+
+#stream-creation .modal-body {
+    // Setting max-height to a percentage doesn't work.
+    max-height: 400px;
+    overflow-y: scroll;
 }