MS DG; checkboxes are togglable, with tested css magick

app/assets/stylesheets/new_styles/_base.scss

@@ -379,9 +379,9 @@ div[data-template=flow] {
   .service-selector {
     float: left;
     margin-left: 100px;
-
   }
 
+
   .dropdown-menu {
     bottom : 0;
     top: auto;
@@ -406,3 +406,18 @@ div[data-template=flow] {
   }
 }
 
+// this is about the service toggle icons, there is a jasmine test that tests this in service_selector spec
+// if you change this, check toggling the new publisher service broadcasts is still sensible
+// the checkbox should be hidden, and in the off state the service icons should be lighter
+// when the service icons are clicked they should be lighter, and toggle the hidden checkbox.
+.services {
+  label { display : inline;}
+
+  input:not(:checked) + label {
+    @include opacity(0.4);
+  }
+
+  input {
+    display : none;
+  }
+}

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

@@ -1,8 +1,9 @@
 <span class="service-selector-title">Broadcast:</span>
 <div class="services">
+     <!--*CSS MAGIC* CHECKBOX IS HIDDEN AND IS CHECKED BY CLICKING THE LABEL, CHANGE THIS AT YOUR OWN PERIL, RUN JASMINE AFTER-->
     {{#each current_user.services}}
-        <img class="legacy-provider-image" src="/assets/social_media_logos/{{provider}}-16x16.png" />
+        <input id="service_toggle_{{provider}}" type="checkbox" name="services" class="service" value="{{provider}}" />
-        <input type="checkbox" name="services" class="service" value="{{provider}}" />
+        <label for="service_toggle_{{provider}}"><img class="legacy-provider-image" src="/assets/social_media_logos/{{provider}}-16x16.png" data-provider="{{provider}}" /></label>
     {{/each}}
 </div>
 

spec/javascripts/app/views/services_selector_view_spec.js

@@ -2,7 +2,7 @@ describe("app.views.ServicesSelector", function(){
   beforeEach(function(){
     loginAs({
       services : [
-        { provider : "fakeBook" }
+        { provider : "facebook" }
       ]
     });
 
@@ -11,12 +11,21 @@ describe("app.views.ServicesSelector", function(){
 
   describe("rendering", function(){
     beforeEach(function(){
+      this.view.setElement("#jasmine_content")
       this.view.render();
     });
 
     it("displays all services", function(){
       var checkboxes = $(this.view.el).find('input[type="checkbox"]');
-      expect(checkboxes.val()).toBe("fakeBook");
+      expect(checkboxes.val()).toBe("facebook");
     });
+
+    // this tests the crazy css we have in a bassackwards way
+    // check out toggling the services on the new publisher and make sure it works if you change stuff.
+    it("selects the checkbox when the image is clicked", function(){
+      expect($("label[for=service_toggle_facebook]").css("opacity")).toBeLessThan(0.8) //floating point weirdness, be safe.
+      this.view.$("input[value='facebook']").select()
+      expect($("label[for=service_toggle_facebook]").css("opacity")).toBe('1')
+    })
   });
 });