Add "awesomeness goes here" bubble to empty multis.

r2/r2/lib/strings.py

@@ -214,6 +214,8 @@ Note: there are a couple of places outside of your subreddit where someone can c
     yes = _('yes'),
     no = _('no'),
     create_multi = _('create a new multi'),
+    awesomeness_goes_here = _('awesomeness goes here'),
+    add_multi_sr = _('add a subreddit to your multi.'),
 )
 
 class StringHandler(object):

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

@@ -5245,6 +5245,34 @@ table.calendar {
     }
 }
 
+.hover-bubble.multi-add-notice {
+    @bg-color: lighten(orange, 42%);
+    @border-color: lighten(orangered, 30%);
+    padding: 10px 15px;
+    margin-top: -5px;
+    margin-right: 10px;
+    background: @bg-color;
+    border-color: @border-color;
+    border-radius: 4px;
+
+    &:before {
+        border-left-color: @border-color;
+    }
+
+    &:after {
+        border-left-color: @bg-color;
+    }
+
+    h3 {
+        font-size: 2em;
+    }
+
+    p {
+        font-size: 1.5em;
+        color: gray;
+    }
+}
+
 .sidecontentbox {
     font-size: normal;
 }

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

@@ -183,6 +183,7 @@ r.multi.MultiDetails = Backbone.View.extend({
         this.listenTo(this.model.subreddits, 'add', this.addOne)
         this.listenTo(this.model.subreddits, 'remove', this.removeOne)
         this.listenTo(this.model.subreddits, 'reset', this.addAll)
+        this.listenTo(this.model.subreddits, 'add remove reset', this.render)
         new r.ui.ConfirmButton({el: this.$('button.delete')})
 
         this.listenTo(this.model.subreddits, 'add remove', function() {
@@ -194,10 +195,24 @@ r.multi.MultiDetails = Backbone.View.extend({
         }, this)
 
         this.bubbleGroup = {}
+        this.addBubble = new r.multi.MultiAddNoticeBubble({
+            parent: this.$('.add-sr .sr-name'),
+            trackHover: false
+        })
     },
 
     render: function() {
-        this.$el.toggleClass('readonly', !this.model.get('can_edit'))
+        var canEdit = this.model.get('can_edit')
+        if (canEdit) {
+            if (this.model.subreddits.isEmpty()) {
+                this.addBubble.show()
+            } else {
+                this.addBubble.hide()
+            }
+        }
+
+        this.$el.toggleClass('readonly', !canEdit)
+
         return this
     },
 
@@ -315,6 +330,18 @@ r.multi.MultiDetails = Backbone.View.extend({
     }
 })
 
+r.multi.MultiAddNoticeBubble = r.ui.Bubble.extend({
+    className: 'multi-add-notice hover-bubble anchor-right',
+    template: _.template('<h3><%= awesomeness_goes_here %></h3><p><%= add_multi_sr %></p>'),
+
+    render: function() {
+        this.$el.html(this.template({
+            awesomeness_goes_here: r.strings('awesomeness_goes_here'),
+            add_multi_sr: r.strings('add_multi_sr')
+        }))
+    }
+})
+
 r.multi.SubscribeButton = Backbone.View.extend({
     initialize: function() {
         this.bubble = new r.multi.MultiSubscribeBubble({

r2/r2/public/static/js/ui.js

@@ -158,10 +158,12 @@ r.ui.Bubble = Backbone.View.extend({
     animateDuration: 150,
 
     initialize: function() {
-        this.$el.hover($.proxy(this, 'queueShow'), $.proxy(this, 'queueHide'))
         this.$parent = this.options.parent || this.$el.parent()
-        this.$parent.hover($.proxy(this, 'queueShow'), $.proxy(this, 'queueHide'))
-        this.$parent.click($.proxy(this, 'queueShow'))
+        if (this.options.trackHover != false) {
+            this.$el.hover($.proxy(this, 'queueShow'), $.proxy(this, 'queueHide'))
+            this.$parent.hover($.proxy(this, 'queueShow'), $.proxy(this, 'queueHide'))
+            this.$parent.click($.proxy(this, 'queueShow'))
+        }
     },
 
     position: function() {