diff --git a/app/assets/javascripts/app/views/aspects_dropdown_view.js b/app/assets/javascripts/app/views/aspects_dropdown_view.js index a6085263f2bf68714eee56e92612143f06bf0d39..9aba299071395aab799a1756c4b84f29d6443923 100644 --- a/app/assets/javascripts/app/views/aspects_dropdown_view.js +++ b/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 (){ - deselectAll() - selectAspect() - self.setDropdownText(link.text()) - } - - function setPrivate (){ + if(_.include(['public', 'all-aspects'], link.data('visibility'))) { deselectAll() - selectAspect() + link.parents("li").addClass("selected") 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") diff --git a/app/assets/stylesheets/new_styles/_base.scss b/app/assets/stylesheets/new_styles/_base.scss index 66d4d877fe328b355c2229725413b9dfce6351ac..f60d86350a93b466443279d48131353672615ce9 100644 --- a/app/assets/stylesheets/new_styles/_base.scss +++ b/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; + } } } diff --git a/app/assets/templates/aspects-dropdown.jst.hbs b/app/assets/templates/aspects-dropdown.jst.hbs index aca5b30d726fa5079c1e83919f8eb432e6c936eb..a89c087f9586435cf13f6f8061e923832a12c369 100644 --- a/app/assets/templates/aspects-dropdown.jst.hbs +++ b/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> diff --git a/app/assets/templates/services-selector.jst.hbs b/app/assets/templates/services-selector.jst.hbs index 4459e8dd95181d43ca4028b2116ff047a617b98c..ec95ac2191ed5e224b96a616472c53b27b1b1f76 100644 --- a/app/assets/templates/services-selector.jst.hbs +++ b/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> diff --git a/spec/javascripts/app/views/aspects_dropdown_view_spec.js b/spec/javascripts/app/views/aspects_dropdown_view_spec.js index f3e470375a612b262bd04b1e72d7a2fc08ac0879..8ecb746c848e3c4ceb3d496a216a02c82d697938 100644 --- a/spec/javascripts/app/views/aspects_dropdown_view_spec.js +++ b/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") }) })