From c0e03687d502e07539f8bc6725e6b4778674583d Mon Sep 17 00:00:00 2001
From: Max Goodman <max@reddit.com>
Date: Mon, 13 May 2013 02:03:59 -0700
Subject: [PATCH] Add "awesomeness goes here" bubble to empty multis.

---
 r2/r2/lib/strings.py                |  2 ++
 r2/r2/public/static/css/reddit.less | 28 ++++++++++++++++++++++++++++
 r2/r2/public/static/js/multi.js     | 29 ++++++++++++++++++++++++++++-
 r2/r2/public/static/js/ui.js        |  8 +++++---
 4 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/r2/r2/lib/strings.py b/r2/r2/lib/strings.py
index 811a0ea30..9e3af2f9e 100644
--- a/r2/r2/lib/strings.py
+++ b/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):
diff --git a/r2/r2/public/static/css/reddit.less b/r2/r2/public/static/css/reddit.less
index 99e53f4bc..20db7586a 100755
--- a/r2/r2/public/static/css/reddit.less
+++ b/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;
 }
diff --git a/r2/r2/public/static/js/multi.js b/r2/r2/public/static/js/multi.js
index d8a84176d..84c5236f7 100644
--- a/r2/r2/public/static/js/multi.js
+++ b/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({
diff --git a/r2/r2/public/static/js/ui.js b/r2/r2/public/static/js/ui.js
index d3db748af..1e711d7f1 100644
--- a/r2/r2/public/static/js/ui.js
+++ b/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() {