diff --git a/Changelog.md b/Changelog.md index 8df9c92aa..e466d34a1 100644 --- a/Changelog.md +++ b/Changelog.md @@ -26,6 +26,7 @@ The default for including jQuery from a CDN has changed. If you want to continue * Remember whether a AccountDeletion was performed [#5156](https://github.com/diaspora/diaspora/pull/5156) * Increased the number of notifications shown in drop down bar to 15 [#5129](https://github.com/diaspora/diaspora/pull/5129) * Increase possible captcha length [#5169](https://github.com/diaspora/diaspora/pull/5169) +* Display visibility icon in publisher aspects dropdown [#4982](https://github.com/diaspora/diaspora/pull/4982) # 0.4.1.0 diff --git a/app/assets/javascripts/app/views/aspects_dropdown_view.js b/app/assets/javascripts/app/views/aspects_dropdown_view.js index 76ecb5878..287bfe1d2 100644 --- a/app/assets/javascripts/app/views/aspects_dropdown_view.js +++ b/app/assets/javascripts/app/views/aspects_dropdown_view.js @@ -14,12 +14,11 @@ app.views.AspectsDropdown = app.views.Base.extend({ // select aspects in the dropdown by a given list of ids _selectAspects: function(ids) { - this.$('.dropdown-menu > li').each(function(){ + this.$('.dropdown-menu > li').each(function() { var el = $(this); - if(_.contains(ids, el.data('aspect_id'))){ + if (_.contains(ids, el.data('aspect_id'))) { el.addClass('selected'); - } - else { + } else { el.removeClass('selected'); } }); @@ -31,16 +30,14 @@ app.views.AspectsDropdown = app.views.Base.extend({ selectedAspects = this.$(".dropdown-menu > li.selected").length, buttonText; - if(selectedAspects == 0){ + if (selectedAspects == 0) { button.removeClass(inAspectClass).addClass('btn-default'); buttonText = Diaspora.I18n.t("aspect_dropdown.select_aspects"); - } - else{ + } else { button.removeClass('btn-default').addClass(inAspectClass); - if(selectedAspects == 1){ + if (selectedAspects == 1) { buttonText = this.$(".dropdown-menu > li.selected .text").first().text(); - } - else{ + } else { buttonText = Diaspora.I18n.t("aspect_dropdown.toggle", { count: selectedAspects.toString() }); } } diff --git a/app/assets/javascripts/app/views/publisher/aspect_selector_blueprint_view.js b/app/assets/javascripts/app/views/publisher/aspect_selector_blueprint_view.js index 9d21e43f6..d58beeaeb 100644 --- a/app/assets/javascripts/app/views/publisher/aspect_selector_blueprint_view.js +++ b/app/assets/javascripts/app/views/publisher/aspect_selector_blueprint_view.js @@ -30,7 +30,6 @@ app.views.PublisherAspectSelectorBlueprint = Backbone.View.extend({ // update the selection summary this._updateAspectsNumber(el); - this._updateSelectedAspectIds(); }, diff --git a/app/assets/javascripts/app/views/publisher/aspect_selector_view.js b/app/assets/javascripts/app/views/publisher/aspect_selector_view.js index f2135f51d..ce14a612f 100644 --- a/app/assets/javascripts/app/views/publisher/aspect_selector_view.js +++ b/app/assets/javascripts/app/views/publisher/aspect_selector_view.js @@ -20,10 +20,9 @@ app.views.PublisherAspectSelector = app.views.AspectsDropdown.extend({ var target = $(evt.target).closest('li'); // visually toggle the aspect selection - if( target.is('.radio') ) { + if (target.is('.radio')) { this._toggleRadio(target); - } - else if( target.is('.aspect_selector') ) { + } else if (target.is('.aspect_selector')) { // don't close the dropdown evt.stopPropagation(); this._toggleCheckbox(target); @@ -31,6 +30,16 @@ app.views.PublisherAspectSelector = app.views.AspectsDropdown.extend({ this._updateSelectedAspectIds(); this._updateButton('btn-default'); + + // update the globe or lock icon + var icon = this.$('#visibility-icon'); + if (target.find('.text').text().trim() == Diaspora.I18n.t('stream.public')) { + icon.removeClass('lock'); + icon.addClass('globe'); + } else { + icon.removeClass('globe'); + icon.addClass('lock'); + } }, // select a (list of) aspects in the dropdown selector by the given list of ids diff --git a/app/assets/javascripts/aspects-dropdown.js b/app/assets/javascripts/aspects-dropdown.js index 50ee48fab..fe2a4447f 100644 --- a/app/assets/javascripts/aspects-dropdown.js +++ b/app/assets/javascripts/aspects-dropdown.js @@ -7,11 +7,12 @@ var AspectsDropdown = { var button = dropdown.parents(".dropdown").children('.button.toggle'), selectedAspects = dropdown.children(".selected").length, allAspects = dropdown.children().length, - replacement; + replacement, + isInPublisher = dropdown.closest('#publisher').length; if (number == 0) { button.removeClass(inAspectClass); - if( dropdown.closest('#publisher').length ) { + if (isInPublisher) { replacement = Diaspora.I18n.t("aspect_dropdown.select_aspects"); } else { replacement = Diaspora.I18n.t("aspect_dropdown.add_to_aspect"); @@ -19,21 +20,34 @@ var AspectsDropdown = { var message = Diaspora.I18n.t("aspect_dropdown.stopped_sharing_with", {name: dropdown.data('person-short-name')}); Diaspora.page.flashMessages.render({success: true, notice: message}); } - }else if (selectedAspects == allAspects) { + } else if (selectedAspects == allAspects) { replacement = Diaspora.I18n.t('aspect_dropdown.all_aspects'); - }else if (number == 1) { + } else if (number == 1) { button.addClass(inAspectClass); replacement = dropdown.find(".selected").first().text(); /* flash message prompt */ - if( dropdown.closest('#publisher').length == 0 ) { + if (!isInPublisher) { var message = Diaspora.I18n.t("aspect_dropdown.started_sharing_with", {name: dropdown.data('person-short-name')}); Diaspora.page.flashMessages.render({success: true, notice: message}); } - }else { + } else { replacement = Diaspora.I18n.t('aspect_dropdown.toggle', { count: number.toString()}) } - button.text(replacement + ' ▼'); + // if we are in the publisher, we add the visibility icon + if (isInPublisher) { + var icon = $('#visibility-icon'); + if (replacement.trim() == Diaspora.I18n.t('stream.public')) { + icon.removeClass('lock'); + icon.addClass('globe'); + } else { + icon.removeClass('globe'); + icon.addClass('lock'); + } + button.find('.text').text(replacement); + } else { + button.text(replacement + ' ▼'); + } }, toggleCheckbox: function(check) { diff --git a/app/assets/stylesheets/publisher_blueprint.css.scss b/app/assets/stylesheets/publisher_blueprint.css.scss index 9c81db04c..97dd3b56d 100644 --- a/app/assets/stylesheets/publisher_blueprint.css.scss +++ b/app/assets/stylesheets/publisher_blueprint.css.scss @@ -64,6 +64,7 @@ .public_toggle { text-align: right; + .dropdown { text-align: left; } diff --git a/app/views/publisher/_aspect_dropdown.html.haml b/app/views/publisher/_aspect_dropdown.html.haml index f50e33d9e..792a76e87 100644 --- a/app/views/publisher/_aspect_dropdown.html.haml +++ b/app/views/publisher/_aspect_dropdown.html.haml @@ -1,14 +1,18 @@ .btn-group.aspect_dropdown %button.btn.btn-default.dropdown-toggle{ ! current_user.getting_started? ? {'data-toggle' => 'dropdown'} : {'data-toggle' => 'dropdown', :title => popover_with_close_html("2. #{t('shared.public_explain.control_your_audience')}"), 'data-content'=> t('shared.public_explain.visibility_dropdown')} } - %span.text - - if publisher_public + - if publisher_public + %i#visibility-icon.entypo.small.globe + %span.text = t('public') - - elsif all_aspects_selected?(selected_aspects) - = t('all_aspects') - - elsif selected_aspects.size == 1 - = selected_aspects.first.name - - else - = t('shared.aspect_dropdown.toggle', :count => selected_aspects.size) + - else + %i#visibility-icon.entypo.small.lock + %span.text + - if all_aspects_selected?(selected_aspects) + = t('all_aspects') + - elsif selected_aspects.size == 1 + = selected_aspects.first.name + - else + = t('shared.aspect_dropdown.toggle', count: selected_aspects.size) %span.caret %ul.dropdown-menu.pull-right{ :unSelectable => 'on' } diff --git a/app/views/publisher/_publisher_blueprint.html.haml b/app/views/publisher/_publisher_blueprint.html.haml index a97beb2e7..b54a3e716 100644 --- a/app/views/publisher/_publisher_blueprint.html.haml +++ b/app/views/publisher/_publisher_blueprint.html.haml @@ -66,13 +66,18 @@ .dropdown{ ! current_user.getting_started? ? {:class => "hang_right"} : { :class => "hang_right", :title => popover_with_close_html("2. #{t('shared.public_explain.control_your_audience')}"), 'data-content'=> t('shared.public_explain.visibility_dropdown')} } .button.toggle.publisher - if publisher_public - = t('public') - - elsif all_aspects_selected?(selected_aspects) - = t('all_aspects') - - elsif selected_aspects.size == 1 - = selected_aspects.first.name + %i#visibility-icon.entypo.small.globe + %span.text + = t('public') - else - = t('shared.aspect_dropdown.toggle', :count => selected_aspects.size) + %i#visibility-icon.entypo.small.lock + %span.text + - if all_aspects_selected?(selected_aspects) + = t('all_aspects') + - elsif selected_aspects.size == 1 + = selected_aspects.first.name + - else + = t('shared.aspect_dropdown.toggle', :count => selected_aspects.size) ▼ .wrapper diff --git a/spec/javascripts/app/views/publisher_view_spec.js b/spec/javascripts/app/views/publisher_view_spec.js index 37e27fc45..2a86fce7c 100644 --- a/spec/javascripts/app/views/publisher_view_spec.js +++ b/spec/javascripts/app/views/publisher_view_spec.js @@ -6,7 +6,7 @@ describe("app.views.Publisher", function() { describe("standalone", function() { beforeEach(function() { - // should be jasmine helper + // TODO should be jasmine helper loginAs({name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}}); spec.loadFixture("aspects_index"); @@ -26,7 +26,7 @@ describe("app.views.Publisher", function() { context("plain publisher", function() { beforeEach(function() { - // should be jasmine helper + // TODO should be jasmine helper loginAs({name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}}); spec.loadFixture("aspects_index"); @@ -245,9 +245,11 @@ describe("app.views.Publisher", function() { context("aspect selection", function(){ beforeEach( function(){ spec.loadFixture('status_message_new'); + Diaspora.I18n.load({ stream: { public: 'Public' }}); this.radio_els = $('#publisher .dropdown li.radio'); this.check_els = $('#publisher .dropdown li.aspect_selector'); + this.visibility_icon = $('#visibility-icon'); this.view = new app.views.Publisher(); this.view.open(); @@ -260,17 +262,50 @@ describe("app.views.Publisher", function() { _.each(this.check_els, function(el){ expect($(el).hasClass('selected')).toBeFalsy(); }); + expect(this.visibility_icon.hasClass('globe')).toBeFalsy(); + expect(this.visibility_icon.hasClass('lock')).toBeTruthy(); }); it("toggles the selected entry visually", function(){ + // click on the last aspect this.check_els.last().trigger('click'); - + // public and "all aspects" are deselected _.each(this.radio_els, function(el){ expect($(el).hasClass('selected')).toBeFalsy(); }); - + // the first aspect is not selected expect(this.check_els.first().hasClass('selected')).toBeFalsy(); + // the last aspect is selected expect(this.check_els.last().hasClass('selected')).toBeTruthy(); + // visibility icon is set to the lock icon + expect(this.visibility_icon.hasClass('globe')).toBeFalsy(); + expect(this.visibility_icon.hasClass('lock')).toBeTruthy(); + + // click on public + this.radio_els.first().trigger('click'); + // public is selected, "all aspects" is deselected + expect(this.radio_els.first().hasClass('selected')).toBeTruthy(); + expect(this.radio_els.last().hasClass('selected')).toBeFalsy(); + // the aspects are deselected + _.each(this.check_els, function(el){ + expect($(el).hasClass('selected')).toBeFalsy(); + }); + // visibility icon is set to the globe icon + expect(this.visibility_icon.hasClass('globe')).toBeTruthy(); + expect(this.visibility_icon.hasClass('lock')).toBeFalsy(); + + // click on "all aspects" + this.radio_els.last().trigger('click'); + // public is deselected, "all aspects" is selected + expect(this.radio_els.first().hasClass('selected')).toBeFalsy(); + expect(this.radio_els.last().hasClass('selected')).toBeTruthy(); + // the aspects are deselected + _.each(this.check_els, function(el){ + expect($(el).hasClass('selected')).toBeFalsy(); + }); + // visibility icon is set to the lock icon + expect(this.visibility_icon.hasClass('globe')).toBeFalsy(); + expect(this.visibility_icon.hasClass('lock')).toBeTruthy(); }); describe("hidden form elements", function(){ @@ -312,7 +347,6 @@ describe("app.views.Publisher", function() { expect(this.view.$('input[name="aspect_ids[]"][value="99"]').length).toBe(1); }); }); - }); context("locator", function() {