Update aspects dropdown to say number of selected aspects

app/assets/javascripts/app/views/aspects_dropdown_view.js

@@ -11,38 +11,25 @@ app.views.AspectsDropdown = app.views.Base.extend({
   setVisibility : function(evt){
     var self = this
       , link = $(evt.target).closest("a")
-      , visibilityCallbacks = {
-          'public' : setPublic,
-          'all-aspects' : setPrivate,
-          'custom' : setCustom
-        }
 
-    visibilityCallbacks[link.data("visibility")]()
-
-    this.setAspectIds()
-
-    function setPublic (){
+    if(_.include(['public', 'all-aspects'], link.data('visibility'))) {
       deselectAll()
-      selectAspect()
+      link.parents("li").addClass("selected")
       self.setDropdownText(link.text())
-    }
-
-    function setPrivate (){
-      deselectAll()
-      selectAspect()
-      self.setDropdownText(link.text())
-    }
-
-    function setCustom (){
+    } else {
       deselectOverrides()
       link.parents("li").toggleClass("selected")
-      self.setDropdownText(link.text())
-      evt.stopImmediatePropagation();
+      evt.stopImmediatePropagation(); //stop dropdown from going awaay
+
+      var selectedAspects = this.$("li.selected")
+      if(selectedAspects.length > 1) {
+        self.setDropdownText("In " + this.$("li.selected").length + " aspects")
+      } else {
+        self.setDropdownText(selectedAspects.text() || "Private")
+      }
     }
 
-    function selectAspect() {
-      link.parents("li").addClass("selected")
-    }
+    this.setAspectIds()
 
     function deselectOverrides() {
       self.$("a.public, a.all-aspects").parent().removeClass("selected")

app/assets/stylesheets/new_styles/_base.scss

@@ -356,10 +356,17 @@ div[data-template=flow] {
 
     .selected i {
       display: inline-block;
+      position: absolute;
+      left : 3px;
+      margin-top : 1px;
     }
 
     a {
-      display : inline-block;
+      display : block;
+
+      span {
+        padding-left: 5px;
+      }
     }
   }
 

app/assets/templates/aspects-dropdown.jst.hbs

@@ -3,12 +3,12 @@
         <span class="text"></span> <span class="caret"></span>
     </a>
     <ul class="dropdown-menu">
-        <li><i class='icon-ok'/><a href="#" class="public" data-aspect-id="public" data-visibility="public">Public</a></li>
-        <li><i class='icon-ok'/><a href="#" class="all-aspects" data-aspect-id="all_aspects" data-visibility="all-aspects">All Aspects</a></li>
+        <li><a href="#" class="public" data-aspect-id="public" data-visibility="public"><i class='icon-ok'/><span>Public</span></a></li>
+        <li><a href="#" class="all-aspects" data-aspect-id="all_aspects" data-visibility="all-aspects"><i class='icon-ok'/><span>All Aspects</span></a></li>
 
         <li class="divider"></li>
         {{#each current_user.aspects}}
-            <li><i class='icon-ok'/><a href="#" data-aspect-id="{{id}}"  data-visibility="custom">{{name}}</a></li>
+            <li><a href="#" data-aspect-id="{{id}}"  data-visibility="custom"><i class='icon-ok'/><span>{{name}}</span></a></li>
         {{/each}}
 
     </ul>

app/assets/templates/services-selector.jst.hbs

@@ -1,8 +1,8 @@
 <span class="service-selector-title">Broadcast:</span>
 <div class="services">
     {{#each current_user.services}}
-        <input type="checkbox" name="services" class="service" value="{{provider}}" />
         <img class="legacy-provider-image" src="/assets/social_media_logos/{{provider}}-16x16.png" />
+        <input type="checkbox" name="services" class="service" value="{{provider}}" />
     {{/each}}
 </div>
 

spec/javascripts/app/views/aspects_dropdown_view_spec.js

@@ -27,7 +27,7 @@ describe("app.views.AspectsDropdown", function(){
        this.link.click()
       })
 
-      it("calls set aspect_ids to 'public'", function(){
+      it("sets aspect_ids to 'public'", function(){
         expect(this.view.$("input.aspect_ids").val()).toBe("public")
       })
 
@@ -87,11 +87,22 @@ describe("app.views.AspectsDropdown", function(){
           expect(this.view.$("input.aspect_ids").val()).toBe("3,7")
         })
 
+        it("sets the button text to the number of selected aspects", function(){
+          expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("In 2 aspects")
+          this.view.$("a:contains('conf')").click()
+          expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("In 3 aspects")
+          this.view.$("a:contains('conf')").click()
+          expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("In 2 aspects")
+
+        })
+
         describe("deselecting another aspect", function(){
           it("removes the clicked aspect", function(){
             expect(this.view.$("input.aspect_ids").val()).toBe("3,7")
+            expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("In 2 aspects")
             this.view.$("a:contains('lovers')").click()
             expect(this.view.$("input.aspect_ids").val()).toBe("3")
+            expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("sauce")
           })
         })