From 3d793679e069f9c049f7d9b6278d31f865f947d8 Mon Sep 17 00:00:00 2001 From: flaburgan Date: Sun, 1 Jun 2014 23:41:23 +0200 Subject: [PATCH] Add visibilit icons in publisher dropdown aspect --- .../app/views/aspects_dropdown_view.js | 17 +++++------ .../aspect_selector_blueprint_view.js | 1 - .../views/publisher/aspect_selector_view.js | 15 ++++++++-- app/assets/javascripts/aspects-dropdown.js | 28 ++++++++++++++----- .../stylesheets/publisher_blueprint.css.scss | 1 + .../publisher/_aspect_dropdown.html.haml | 20 +++++++------ .../publisher/_publisher_blueprint.html.haml | 17 +++++++---- 7 files changed, 64 insertions(+), 35 deletions(-) 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..567ea8642 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 = $('#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