Add input for creating multis in categorize bubble UI.

r2/r2/lib/strings.py

@@ -213,6 +213,7 @@ Note: there are a couple of places outside of your subreddit where someone can c
     are_you_sure = _('are you sure?'),
     yes = _('yes'),
     no = _('no'),
+    create_multi = _('create a new multi'),
 )
 
 class StringHandler(object):

r2/r2/public/static/css/reddit.less

@@ -1087,6 +1087,7 @@ a.author { margin-right: 0.5em; }
 
         input[type="checkbox"] {
             margin-top: 0;
+            margin-right: 5px;
             vertical-align: middle;
         }
 
@@ -1108,8 +1109,10 @@ a.author { margin-right: 0.5em; }
         }
     }
 
-    input {
-        margin-right: 5px;
+    .create-multi {
+        input[type="text"] {
+            .light-text-input;
+        }
     }
 }
 
@@ -6965,6 +6968,12 @@ body.gold .buttons li.comment-save-button { display: inline; }
     }
 }
 
+.light-text-input {
+    background: white;
+    border: 1px solid #ccc;
+    padding: 2px 5px;
+}
+
 body.with-listing-chooser {
     position: relative;
 
@@ -7115,10 +7124,8 @@ body.with-listing-chooser {
         padding: 5px;
 
         input[type="text"] {
+            .light-text-input;
             width: 95px;
-            background: white;
-            border: 1px solid #ccc;
-            padding: 2px 5px;
             margin-bottom: 3px;
             display: none;
         }

r2/r2/public/static/js/multi.js

@@ -314,10 +314,12 @@ r.multi.SubscribeButton = Backbone.View.extend({
 r.multi.MultiSubscribeBubble = r.ui.Bubble.extend({
     className: 'multi-selector hover-bubble anchor-right',
     template: _.template('<div class="title"><strong><%= title %></strong><a class="sr" href="/r/<%= srName %>">/r/<%= srName %></a></div><div class="throbber"></div>'),
-    itemTemplate: _.template('<label><input type="checkbox" data-path="<%= path %>" <%= checked %>><%= name %><a href="<%= path %>" target="_blank">&rsaquo;</a></label>'),
+    itemTemplate: _.template('<label><input class="add-to-multi" type="checkbox" data-path="<%= path %>" <%= checked %>><%= name %><a href="<%= path %>" target="_blank">&rsaquo;</a></label>'),
+    itemCreateTemplate: _.template('<label><form class="create-multi"><input type="text" placeholder="<%= createMsg %>"></form><div class="error create-multi-error"></div></label>'),
 
     events: {
-        'click input': 'toggleSubscribed'
+        'click .add-to-multi': 'toggleSubscribed',
+        'submit .create-multi': 'createMulti'
     },
 
     initialize: function() {
@@ -350,6 +352,9 @@ r.multi.MultiSubscribeBubble = r.ui.Bubble.extend({
                              ? 'checked' : ''
                 }))
             }, this)
+        content.append(this.itemCreateTemplate({
+            createMsg: r.strings('create_multi')
+        }))
         this.$el.append(content)
     },
 
@@ -361,6 +366,22 @@ r.multi.MultiSubscribeBubble = r.ui.Bubble.extend({
         } else {
             multi.removeSubreddit(this.options.srName)
         }
+    },
+
+    createMulti: function(ev) {
+        ev.preventDefault()
+        var name = this.$('.create-multi input[type="text"]').val()
+        name = $.trim(name)
+        if (name) {
+            r.multi.mine.create({name: name}, {
+                wait: true,
+                error: _.bind(function(multi, xhr) {
+                    var resp = JSON.parse(xhr.responseText)
+                    this.$('.create-multi-error').text(resp.explanation).show()
+                }, this),
+                beforeSend: _.bind(r.ui.showWorkingDeferred, this, this.$el)
+            })
+        }
     }
 })