show username of the services in the publisher

original work by @Ruxton
rebased and extended to include feedback from the original PR #3959

Changelog.md

@@ -143,7 +143,8 @@ everything is set up.
 * Add hotkeys to navigate in stream [#4089](https://github.com/diaspora/diaspora/pull/4089)
 * Add a brief explanatory text about external services connections to services index page [#3064](https://github.com/diaspora/diaspora/issues/3064)
 * Add a preview for posts in the stream [#4099](https://github.com/diaspora/diaspora/issues/4099)
-* Add shortcut key Shift to submit comments and publish posts. [#4096](github.com/diaspora/diaspora/pull/4096)
+* Add shortcut key Shift to submit comments and publish posts. [#4096](https://github.com/diaspora/diaspora/pull/4096)
+* Show the service username in a tooltip next to the publisher icons [#4126](https://github.com/diaspora/diaspora/pull/4126)
 
 # 0.0.3.4
 

app/assets/javascripts/app/views/publisher_view.js

@@ -16,7 +16,7 @@ app.views.Publisher = Backbone.View.extend(_.extend(
   el : "#publisher",
 
   events : {
-    "keydown #status_message_fake_text" : "keyDown", 
+    "keydown #status_message_fake_text" : "keyDown",
     "focus textarea" : "open",
     "click #hide_publisher" : "clear",
     "submit form" : "createStatusMessage",
@@ -26,6 +26,8 @@ app.views.Publisher = Backbone.View.extend(_.extend(
     "click .dropdown .dropdown_list li": "toggleAspect"
   },
 
+  tooltipSelector: ".service_icon",
+
   initialize : function(){
     // init shortcut references to the various elements
     this.el_input = this.$('#status_message_fake_text');
@@ -41,6 +43,9 @@ app.views.Publisher = Backbone.View.extend(_.extend(
     // init autoresize plugin
     this.el_input.autoResize({ 'extraSpace' : 10, 'maxHeight' : Infinity });
 
+    // init tooltip plugin
+    this.$(this.tooltipSelector).tooltip();
+
     // sync textarea content
     if( this.el_hiddenInput.val() == "" ) {
       this.el_hiddenInput.val( this.el_input.val() );
@@ -95,7 +100,7 @@ app.views.Publisher = Backbone.View.extend(_.extend(
     if(evt){ evt.preventDefault(); }
 
     var serializedForm = $(evt.target).closest("form").serializeObject();
-    
+
     var photos = new Array();
     $('li.publisher_photo img').each(function(){
       var file = $(this).attr('src').substring("/uploads/images/".length);
@@ -108,8 +113,8 @@ app.views.Publisher = Backbone.View.extend(_.extend(
           }
         }
       );
-    });  
+    });
-    
+
     var mentioned_people = new Array();
     var regexp = new RegExp("@{\(\.\*\) ; \(\.\*\)}", "g");
     while(user=regexp.exec(serializedForm["status_message[text]"])){
@@ -123,9 +128,9 @@ app.views.Publisher = Backbone.View.extend(_.extend(
           "diaspora_id":user[2],
           "avatar":mentioned_user["avatar"]
         });
-      }      
+      }
     }
-    
+
     var date = (new Date()).toISOString();
     var previewMessage = {
       "id" : 0,
@@ -146,21 +151,21 @@ app.views.Publisher = Backbone.View.extend(_.extend(
       this.removePostPreview();
       app.stream.items.add(previewMessage);
       this.recentPreview=previewMessage;
-      this.modifyPostPreview($('.stream_element:first'));   
+      this.modifyPostPreview($('.stream_element:first'));
     }
   },
 
   modifyPostPreview : function(post) {
     post.addClass('post_preview');
     $('a.delete.remove_post',post).hide();
-    $('a.like, a.focus_comment_textarea',post).removeAttr("href");    
+    $('a.like, a.focus_comment_textarea',post).removeAttr("href");
     $('a.like',post).addClass("like_preview");
     $('a.like',post).removeClass("like");
     $('a.focus_comment_textarea',post).addClass("focus_comment_textarea_preview");
     $('a.focus_comment_textarea',post).removeClass("focus_comment_textarea");
     $('a',$('span.details.grey',post)).removeAttr("href");
   },
-  
+
   removePostPreview : function() {
     if(app.stream && this.recentPreview){
         app.stream.items.remove(this.recentPreview);
@@ -194,7 +199,7 @@ app.views.Publisher = Backbone.View.extend(_.extend(
 
     // close publishing area (CSS)
     this.close();
-    
+
     // remove preview
     this.removePostPreview();
 
@@ -204,7 +209,7 @@ app.views.Publisher = Backbone.View.extend(_.extend(
     // force textchange plugin to update lastValue
     this.el_input.data('lastValue', '');
     this.el_hiddenInput.data('lastValue', '');
-    
+
     return this;
   },
 

app/views/shared/_publisher.html.haml

@@ -43,10 +43,11 @@
             - if current_user.services
               - for service in current_user.services
                 = content_tag :div, nil,
-                              :title => service.provider.titleize,
+                              :title => "#{service.provider.titleize} (#{service.nickname})",
                               :class => "social_media_logos-#{service.provider}-16x16 service_icon dim",
                               :id    => "#{service.provider}",
-                              :maxchar => "#{service.class::MAX_CHARACTERS}"
+                              :maxchar => "#{service.class::MAX_CHARACTERS}",
+                              :data  => {:toggle=>'tooltip', :placement=>'bottom'}
             %a{ :href => "#question_mark_pane", :class => 'question_mark', :rel => 'facebox', :title => t('shared.public_explain.manage') }
               .icons-monotone_wrench_settings
 
@@ -74,7 +75,7 @@
                   = aspect_dropdown_list_item(aspect, !all_aspects_selected?(selected_aspects) && selected_aspects.include?(aspect) )
 
           %button{ :disabled => ("disabled" if publisher_hidden_text.blank?), :class => 'button post_preview_button'}
-            = t('.preview') 
+            = t('.preview')
 
           = status.submit t('.share'), :disabled => publisher_hidden_text.blank?, :class => 'button creation', :tabindex => 2