Add visibilit icons in publisher dropdown aspect

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() });
       }
     }

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();
   },
 

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

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) {

app/assets/stylesheets/publisher_blueprint.css.scss

@@ -64,6 +64,7 @@
 
     .public_toggle {
       text-align: right;
+      
       .dropdown {
         text-align: left;
       }

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' }
 

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