diff --git a/app/assets/javascripts/app/views/aspects_dropdown_view.js b/app/assets/javascripts/app/views/aspects_dropdown_view.js index a6085263f..9aba29907 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 (){ + 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") diff --git a/app/assets/stylesheets/new_styles/_base.scss b/app/assets/stylesheets/new_styles/_base.scss index 66d4d877f..f60d86350 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 aca5b30d7..a89c087f9 100644 --- a/app/assets/templates/aspects-dropdown.jst.hbs +++ b/app/assets/templates/aspects-dropdown.jst.hbs @@ -3,12 +3,12 @@ diff --git a/app/assets/templates/services-selector.jst.hbs b/app/assets/templates/services-selector.jst.hbs index 4459e8dd9..ec95ac219 100644 --- a/app/assets/templates/services-selector.jst.hbs +++ b/app/assets/templates/services-selector.jst.hbs @@ -1,8 +1,8 @@ Broadcast:
{{#each current_user.services}} - + {{/each}}
diff --git a/spec/javascripts/app/views/aspects_dropdown_view_spec.js b/spec/javascripts/app/views/aspects_dropdown_view_spec.js index f3e470375..8ecb746c8 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") }) })