Add sharing status in hovercards, fixes #6542

closes #8317

Changelog.md

@@ -21,6 +21,7 @@
 * Add podmin mail address to the footer [#8242](https://github.com/diaspora/diaspora/pull/8242)
 * Add username to password-reset mail [#8037](https://github.com/diaspora/diaspora/pull/8037)
 * Resend account migration and deletion for closed recipients [#8309](https://github.com/diaspora/diaspora/pull/8309)
+* Add sharing status to hovercards [#8317](https://github.com/diaspora/diaspora/pull/8317)
 
 # 0.7.15.0
 

app/assets/javascripts/app/helpers/handlebars-helpers.js

@@ -44,7 +44,7 @@ Handlebars.registerHelper('linkToPerson', function(context, block) {
 // relationship indicator for profile page
 Handlebars.registerHelper("sharingMessage", function(person) {
   var i18nScope = "people.helper.is_not_sharing";
-  var icon = "circle";
+  var icon = "entypo-record";
   if( person.is_sharing ) {
     i18nScope = "people.helper.is_sharing";
     icon = "entypo-check";

app/assets/javascripts/app/views/hovercard_view.js

@@ -107,11 +107,12 @@ app.views.Hovercard = app.views.Base.extend({
       if( !person || person.length === 0 ) {
         throw new Error("received data is not a person object");
       }
-
-      if (app.currentUser.authenticated()) {
-        self.aspectMembershipDropdown = new app.views.AspectMembership({person: new app.models.Person(person)});
-      }
+      var personModel = new app.models.Person(person);
+      person.is_sharing = personModel.isSharing();
       self.person = person;
+      if (app.currentUser.authenticated()) {
+        self.aspectMembershipDropdown = new app.views.AspectMembership({person: personModel});
+      }
       self.render();
 
       if( !self.showMe ) {

app/assets/stylesheets/color_themes/_color_theme_override_dark.scss

@@ -55,8 +55,8 @@ body {
 
   .tag:hover { background-color: desaturate(darken($link-color, 35%), 20%); }
 
-  #profile_container .profile_header {
-    #author_info #sharing_message.entypo-check { color: lighten($green, 10%); }
+  #sharing_message.entypo-check {
+    color: lighten($green, 10%);
   }
 
   #invitationsModal #email_invitation { border-top: 1px dashed $gray-light; }

app/assets/stylesheets/hovercard.scss

@@ -33,6 +33,12 @@
     text-overflow: ellipsis;
   }
 
+  .status-container {
+    align-items: center;
+    display: flex;
+    margin-bottom: 5px;
+  }
+
   #hovercard_dropdown_container {
     overflow: visible !important; /* otherwise the aspect dropdown is cropped */
   }
@@ -53,10 +59,7 @@
 
   .handle {
     color: $text-grey;
-    line-height: 18px;
-    padding-top: 0px;
-    margin-top: 0px;
-    margin-bottom: 5px;
+    margin-right: 2px;
   }
 
   .btn-group.aspect-membership-dropdown { margin: 0 !important; }

app/assets/stylesheets/people.scss

@@ -5,6 +5,7 @@
   }
   .invitations-button { padding-left: 0; }
 }
+
 #people-stream {
   .media, .media-body {
     overflow: visible;
@@ -28,6 +29,7 @@
     .info { font-size: $font-size-small; }
   }
 }
+
 #blocked_people {
   .blocked-person {
     border-bottom: 1px solid $border-grey;
@@ -45,3 +47,13 @@
     .btn-danger { margin-top: 9px; }
   }
 }
+
+#sharing_message {
+  &.entypo-check {
+    color: darken($brand-success, 20%);
+  }
+
+  &.entypo-record {
+    color: $text-grey;
+  }
+}

app/assets/stylesheets/profile.scss

@@ -28,11 +28,6 @@
       #sharing_message {
         cursor: default;
         font-size: 20px;
-        &.circle {
-          color: $text-grey;
-          &:before { content: '\26aa'; }
-        }
-        &.entypo-check { color: darken($brand-success,20%); }
       }
       .description {
         margin-bottom: 20px;

app/assets/templates/hovercard_tpl.jst.hbs

@@ -6,7 +6,10 @@
   <h4>
     <a class="person" href="{{urlTo 'person' guid}}">{{name}}</a>
   </h4>
-  <div class="handle">{{diaspora_id}}</div>
+  <div class="status-container">
+    <div class="handle">{{diaspora_id}}</div>
+    {{{sharingMessage this}}}
+  </div>
   <div id="hovercard_dropdown_container"></div>
   <div class="card-footer">
     <div class="footer-container">

app/presenters/person_presenter.rb

@@ -24,7 +24,7 @@ class PersonPresenter < BasePresenter
   end
 
   def hovercard
-    base_hash_with_contact.merge(profile: ProfilePresenter.new(profile).for_hovercard)
+    full_hash.merge(profile: ProfilePresenter.new(profile).for_hovercard)
   end
 
   def metas_attributes

features/desktop/hovercards.feature

@@ -49,3 +49,21 @@ Feature: Hovercards
     Then I should see a hovercard
     And I should see "#first" hashtag in the hovercard
     And I should see "#second" hashtag in the hovercard
+
+  Scenario: Hovercards contain the aspect membership and the sharing status
+    Given a user with email "alice@alice.alice" is connected with "bob@bob.bob"
+    And I sign in as "alice@alice.alice"
+    And I am on "bob@bob.bob"'s page
+    When I activate the first hovercard
+    Then I should see a hovercard
+    And I should see "Besties" within ".aspect-membership-dropdown"
+    And I should see a "[title='Bob Jones is sharing with you']" within ".status-container"
+    And I should see a ".entypo-check" within ".sharing_message_container"
+
+  Scenario: Hovercards contain sharing status when not sharing
+    Given I sign in as "alice@alice.alice"
+    And I am on "bob@bob.bob"'s page
+    When I activate the first hovercard
+    Then I should see a hovercard
+    And I should see a "[title='Bob Jones is not sharing with you']" within ".status-container"
+    And I should see a ".entypo-record" within ".sharing_message_container"

spec/javascripts/app/views/hovercard_view_spec.js

@@ -90,6 +90,36 @@ describe("app.views.Hovercard", function() {
         expect(first.first()[0].href).toContain(Routes.tag("first"));
         expect(second.first()[0].href).toContain(Routes.tag("second"));
       });
+
+      it("indicates when the user is sharing with me", function() {
+        this.view._populateHovercard();
+        jasmine.Ajax.requests.mostRecent().respondWith({
+          status: 200,
+          responseText: JSON.stringify({
+            id: 1337,
+            guid: "ba64fce01b04013aa8db34c93d7886ce",
+            name: "Edward Snowden",
+            relationship: "sharing"
+          })
+        });
+        var message = this.view.$el.find("#sharing_message");
+        expect(message).toHaveClass("entypo-check");
+      });
+
+      it("indicates when the user is not sharing with me", function() {
+        this.view._populateHovercard();
+        jasmine.Ajax.requests.mostRecent().respondWith({
+          status: 200,
+          responseText: JSON.stringify({
+            id: 1337,
+            guid: "ba64fce01b04013aa8db34c93d7886ce",
+            name: "Edward Snowden",
+            relationship: "receiving"
+          })
+        });
+        var message = this.view.$el.find("#sharing_message");
+        expect(message).toHaveClass("entypo-record");
+      });
     });
   });
 });