diff --git a/Changelog.md b/Changelog.md index e8d44746a..0893c75e6 100644 --- a/Changelog.md +++ b/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) diff --git a/app/assets/images/icons/circle.png b/app/assets/images/icons/circle.png new file mode 100644 index 000000000..944a88391 Binary files /dev/null and b/app/assets/images/icons/circle.png differ diff --git a/app/assets/images/icons/mention.png b/app/assets/images/icons/mention.png new file mode 100644 index 000000000..234f7c2df Binary files /dev/null and b/app/assets/images/icons/mention.png differ diff --git a/app/assets/images/icons/message.png b/app/assets/images/icons/message.png new file mode 100644 index 000000000..a1f852f0c Binary files /dev/null and b/app/assets/images/icons/message.png differ diff --git a/app/assets/javascripts/people.js b/app/assets/javascripts/people.js index d5e32715e..a2cf5a9ab 100644 --- a/app/assets/javascripts/people.js +++ b/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'}); +}); diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index d95c635e1..f6dfa4c8b 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/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 diff --git a/app/assets/stylesheets/profile.css.scss b/app/assets/stylesheets/profile.css.scss new file mode 100644 index 000000000..af69ee70a --- /dev/null +++ b/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; + } + } +} diff --git a/app/helpers/people_helper.rb b/app/helpers/people_helper.rb index bf019f997..ea018ba78 100644 --- a/app/helpers/people_helper.rb +++ b/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 - image_tag('icons/check_yes_ok.png') + - content_tag(:span, I18n.t('people.helper.is_sharing', :name => person.name)) + content_tag(:div, :class => 'sharing_message_container', :title => I18n.t('people.helper.is_sharing', :name => person.name)) do + content_tag(:div, nil, :class => 'icons-check_yes_ok', :id => 'sharing_message') + 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 diff --git a/app/views/people/_profile_sidebar.html.haml b/app/views/people/_profile_sidebar.html.haml index 2d8cdf981..4e7b7c30e 100644 --- a/app/views/people/_profile_sidebar.html.haml +++ b/app/views/people/_profile_sidebar.html.haml @@ -8,15 +8,26 @@ - if user_signed_in? - if person != current_user.person - = sharing_message(@person, @contact) + %div#profile_buttons{ :class => profile_buttons_class(@contact, @block) } + = sharing_message(@person, @contact) - - if @contact && @contact.receiving? - %br - = link_to t('people.show.mention'), new_status_message_path(:person_id => @person.id), :class => 'button', :rel => 'facebox' + - if @contact.receiving? + .profile_button + = 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' - %br + // remove the following line when adding the ignore button + .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 diff --git a/config/locales/diaspora/en.yml b/config/locales/diaspora/en.yml index 5506ceae1..009ef6228 100644 --- a/config/locales/diaspora/en.yml +++ b/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: diff --git a/features/connects_users.feature b/features/connects_users.feature index ad524106a..7756ee74d 100644 --- a/features/connects_users.feature +++ b/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 not see "Message" within "#profile" + Then I should see "Besties" + 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" diff --git a/features/step_definitions/custom_web_steps.rb b/features/step_definitions/custom_web_steps.rb index 042aea251..ac2e49931 100644 --- a/features/step_definitions/custom_web_steps.rb +++ b/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 diff --git a/spec/helpers/people_helper_spec.rb b/spec/helpers/people_helper_spec.rb index e5e61f43e..e17d55b09 100644 --- a/spec/helpers/people_helper_spec.rb +++ b/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