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

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

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