Merge pull request #4374 from svbergerem/profile-message-and-mention-icons

Tidy up profile sidebar

Changelog.md

@@ -13,6 +13,7 @@
 * Extract and factorize the header css in a new file, fix ugly header in registration [#4389](https://github.com/diaspora/diaspora/pull/4389)
 * Move contact list on profile to profile information, show user his own contacts on profile [#4360](https://github.com/diaspora/diaspora/pull/4360)
 * Refactor metas, HTML is now valid [#4356](https://github.com/diaspora/diaspora/pull/4356)
+* Improve sharing message and mention/message buttons on profile [#4374](https://github.com/diaspora/diaspora/pull/4374)
 
 ## Bug fixes
 * Check twitter write access before adding/authorizing it for a user. [#4124](https://github.com/diaspora/diaspora/issues/4124)

app/assets/javascripts/people.js

@@ -5,3 +5,8 @@
 //= require aspect-edit-pane
 //= require fileuploader-custom
 //= require jquery.autoSuggest.custom
+
+$(document).ready(function() {
+  $('#profile_buttons .profile_button div').tooltip({placement: 'bottom'});
+  $('#profile_buttons .sharing_message_container').tooltip({placement: 'bottom'});
+});

app/assets/stylesheets/application.css.sass

@@ -5,6 +5,7 @@
 @import 'new_styles/_spinner'
 @import 'sidebar.css.scss'
 @import 'header.css.scss'
+@import 'profile.css.scss'
 
 /* ===== sprites ===== */
 
@@ -443,49 +444,6 @@ form.new_comment
     input
       :display block
 
-
-.profile_photo
-  img
-    :height auto
-    :width 200px
-
-#profile
-  h3
-    :margin
-      :bottom 0
-  ul
-    :margin 0
-    :padding 0
-
-  ul#profile_information
-    :margin 1em 0
-    > li
-      :margin
-        :bottom 2em
-        :right 2em
-      h4
-        :font-weight bold
-
-  #image_list
-    .section
-      :margin
-        :bottom 4px
-
-    img
-      :height 45px
-      :width 45px
-
-  #sharing_message
-    :font-size smaller
-    :align middle
-
-    span
-      :vertical-align middle
-
-    img
-      :vertical-align middle
-      :margin 0.5em
-
 #photo_container
   :text
     :align center

app/assets/stylesheets/profile.css.scss

@@ -0,0 +1,127 @@
+
+.profile_photo {
+  img {
+    height: auto;
+    width: 200px;
+  }
+}
+
+#profile {
+  h3 { margin-bottom: 0; }
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  ul#profile_information {
+    margin: 1em 0;
+    > li {
+        margin-bottom: 2em;
+        margin-right: 2em;
+      h4 { font-weight: bold; }
+      }
+  }
+
+  #image_list {
+    .section {
+      margin-bottom: 4px;
+    }
+    img {
+      height: 45px;
+      width: 45px;
+    }
+  }
+
+  .blocked {
+    background-color: rgb(244, 42, 42);
+    .profile_button {
+      width: 150px;
+    }
+  }
+  .mutual {
+    background-color: rgb(142, 222, 61);
+    .profile_button {
+      //width: 50px;
+      width: 75px;
+    }
+  }
+  .only_sharing {
+    background-color: rgb(142, 222, 61);
+    .profile_button {
+      width: 150px;
+    }
+  }
+  .receiving {
+    background-color: rgb(211, 211, 211);
+    .profile_button {
+      //width: 75px;
+      width: 150px;
+    }
+  }
+  .not_sharing {
+    background-color: rgb(211, 211, 211);
+    .profile_button {
+      width: 150px;
+    }
+  }
+
+  #profile_buttons {
+    width: 190px;
+    padding-right: 10px;
+    height: 28px;
+    text-align: center;
+    @include border-bottom-radius(8px);
+
+    .sharing_message_container {
+      float: left;
+      padding: 5px 1px;
+      @include opacity(0.3);
+      background-color: white;
+      @include border-bottom-left-radius(8px);
+    }
+    
+    .profile_button {
+      display: inline-block;
+      text-align: center;
+    }
+
+    a { @include opacity(0.5); }
+    a:hover { @include opacity(1); }
+    
+    .icons-check_yes_ok { 
+      display: inline-block;
+      height: 18px;
+      width: 18px;
+    }
+    .icons-circle { 
+      display: inline-block;
+      height: 18px;
+      width: 18px;
+    }
+    .icons-ignoreuser {
+      display: inline-block;
+      height: 14px;
+      width: 14px;
+      margin: 7px 0;
+    }
+    .icons-mention {
+      display: inline-block;
+      height: 18px;
+      width: 19px;
+      margin: 5px 0;
+    }
+    .icons-message {
+      display: inline-block;
+      height: 18px;
+      width: 25px;
+      margin: 5px 0;
+    }
+    .white_bar {
+      display: inline-block;
+      height: 18px;
+      width: 1px;
+      background-color: white;
+      margin: 5px 0;
+    }
+  }
+}

app/helpers/people_helper.rb

@@ -90,10 +90,27 @@ module PeopleHelper
 
   def sharing_message(person, contact)
     if contact.sharing?
-      content_tag(:div, :id => 'sharing_message') do
+      content_tag(:div, :class => 'sharing_message_container', :title => I18n.t('people.helper.is_sharing', :name => person.name)) do
-        image_tag('icons/check_yes_ok.png') +
+        content_tag(:div, nil, :class => 'icons-check_yes_ok', :id => 'sharing_message')
-        content_tag(:span, I18n.t('people.helper.is_sharing', :name => person.name))
+      end
+    else
+      content_tag(:div, :class => 'sharing_message_container', :title => I18n.t('people.helper.is_not_sharing', :name => person.name)) do
+        content_tag(:div, nil, :class => 'icons-circle', :id => 'sharing_message')
       end
     end
   end
+
+  def profile_buttons_class(contact, block)
+    if block.present?
+      'blocked'
+    elsif contact.mutual?
+      'mutual'
+    elsif contact.sharing?
+      'only_sharing'
+    elsif contact.receiving?
+      'receiving'
+    else
+      'not_sharing'
+    end
+  end
 end

app/views/people/_profile_sidebar.html.haml

@@ -8,15 +8,26 @@
 
   - if user_signed_in?
     - if person != current_user.person
+      %div#profile_buttons{ :class => profile_buttons_class(@contact, @block) }
         = sharing_message(@person, @contact)
 
-      - if @contact && @contact.receiving?
+        - if @contact.receiving?
-        %br
+          .profile_button
-        = link_to t('people.show.mention'), new_status_message_path(:person_id => @person.id), :class => 'button', :rel => 'facebox'
+            = link_to content_tag(:div, nil, :class => 'icons-mention', :title => t('people.show.mention'), :id => 'mention_button'), new_status_message_path(:person_id => @person.id), :rel => 'facebox'
+          //.white_bar
+        
         - if @contact.mutual?
-          = link_to t('people.show.message'), new_conversation_path(:contact_id => @contact.id, :name => @contact.person.name), :class => 'button', :rel => 'facebox'
+          // remove the following line when adding the ignore button
-      %br
+          .white_bar
+          .profile_button
+            = link_to content_tag(:div, nil, :class => 'icons-message', :title => t('people.show.message'), :id => 'message_button'), new_conversation_path(:contact_id => @contact.id, :name => @contact.person.name), :rel => 'facebox'
+          //.white_bar
+        
+        //.profile_button
+        //  = link_to content_tag(:div, nil, :class => 'icons-ignoreuser', :title => t('people.show.message'), :id => 'block_user_button'), '/block', :rel => 'facebox'     
+        
       %br
+
     -if contact.sharing? || person == current_user.person
       %ul#profile_information
       

config/locales/diaspora/en.yml

@@ -597,6 +597,7 @@ en:
       results_for: " results for %{params}"
       people_on_pod_are_aware_of: " people on pod are aware of"
       is_sharing: "%{name} is sharing with you"
+      is_not_sharing: "%{name} is not sharing with you"
     aspect_list:
       edit_membership: "edit aspect membership"
     add_contact_small:

features/connects_users.feature

@@ -87,15 +87,17 @@ Feature: following and being followed
     When I sign in as "bob@bob.bob"
     And I am on "alice@alice.alice"'s page
 
-    Then I should see "Besties" and "Mention"
+    Then I should see "Besties" 
-    Then I should not see "Message" within "#profile"
+    Then  I should see a "#mention_button" within "#profile"
+    Then I should not see a "#message_button" within "#profile"
 
   Scenario: interacting with the profile page of someone who follows you but who you do not follow
     Given I sign in as "alice@alice.alice"
     And I am on "bob@bob.bob"'s page
 
     Then I should see "Add contact"
-    Then I should not see "Mention" and "Message" within "#profile"
+    Then I should not see a "#mention_button" within "#profile"
+    Then I should not see a "#message_button" within "#profile"
 
   Scenario: interacting with the profile page of someone you follow who also follows you
     Given I sign in as "alice@alice.alice"
@@ -105,4 +107,6 @@ Feature: following and being followed
     And I add the person to my "Unicorns" aspect
 
     When I go to "bob@bob.bob"'s page
-    Then I should see "All Aspects" and "Mention" and "Message"
+    Then I should see "All Aspects" 
+    Then I should see a "#mention_button" within "#profile" 
+    Then I should see a "#message_button" within "#profile"

features/step_definitions/custom_web_steps.rb

@@ -115,7 +115,7 @@ When /^I append "([^"]*)" to the publisher mobile$/ do |stuff|
 end
 
 And /^I want to mention (?:him|her) from the profile$/ do
-  click_link("Mention")
+  find('#mention_button').click
   within('#facebox') do
     click_publisher
   end

spec/helpers/people_helper_spec.rb

@@ -132,9 +132,10 @@ describe PeopleHelper do
     end
 
     context 'when the contact is not sharing' do
-      it 'does not show the sharing message' do
+      it 'does show the not sharing message' do
+        message = I18n.t('people.helper.is_not_sharing', :name => @person.name)
         @contact.stub(:sharing?).and_return(false)
-        sharing_message(@person, @contact).should be_blank
+        sharing_message(@person, @contact).should include(message)
       end
     end
   end