Added dropdown to add/remove people from/to aspects in mobile view

Changelog.md

@@ -163,6 +163,7 @@ diaspora.yml file**. The existing settings from 0.4.x and before will not work a
 * Add HTML view for pod statistics [#5464](https://github.com/diaspora/diaspora/pull/5464)
 * Added/Moved hide, block user, report and delete button in SPV [#5547](https://github.com/diaspora/diaspora/pull/5547)
 * Added keyboard shortcuts r(reshare), m(expand Post), o(open first link in post) [#5602](https://github.com/diaspora/diaspora/pull/5602)
+* Added dropdown to add/remove people from/to aspects in mobile view [#5594](https://github.com/diaspora/diaspora/pull/5594)
 * Dynamically compute minimum and maximum valid year for birthday field [#5639](https://github.com/diaspora/diaspora/pull/5639)
 * Show hovercard on mentions [#5652](https://github.com/diaspora/diaspora/pull/5652)
 * Make help sections linkable [#5667](https://github.com/diaspora/diaspora/pull/5667)

app/assets/javascripts/mobile/mobile.js

@@ -5,6 +5,7 @@
  *   the COPYRIGHT file.
  */
 //= require jquery.charcount
+//= require js-routes
 //= require mbp-modernizr-custom
 //= require mbp-respond.min
 //= require mbp-helper
@@ -16,6 +17,7 @@
 //= require helpers/i18n
 //= require widgets/timeago
 //= require mobile/mobile_file_uploader
+//= require mobile/profile_aspects
 
 $(document).ready(function(){
 
@@ -115,7 +117,7 @@ $(document).ready(function(){
             },
             error: function(){
               removeLoader(link);
-              alert("Failed to reshare!");
+              alert(Diaspora.I18n.t('failed_to_reshare'));
             }
           });
         }
@@ -300,6 +302,5 @@ $(document).ready(function(){
     evt.preventDefault();
     $("#new_status_message").submit();
   });
-
 });
 // @license-end

app/assets/javascripts/mobile/profile_aspects.js

@@ -0,0 +1,84 @@
+$(document).ready(function(){
+  /* profile page: aspect-dropdown */
+
+  // renders the cover text for the dropdown
+  function profileAspectDropdown_refresh($el) {
+    var cover_text, num_selected = $el.find('option.selected').length;
+    if(num_selected === 0) {
+      $el.removeClass('has_connection');
+      cover_text = Diaspora.I18n.t('aspect_dropdown.add_to_aspect');
+    } else {
+      $el.addClass('has_connection');
+      if(num_selected === 1) {
+        cover_text = $el.find('option.selected').data('name');
+      } else {
+        cover_text = Diaspora.I18n.t('aspect_dropdown.toggle', { 'count' : num_selected });
+      }
+    }
+    $el.find('option.list_cover').text(cover_text);
+  }
+
+  // onchange handler for aspect dropdown instances
+  var profileAspectDropDown_onchange = function() {
+    var $el      = $(this),
+        selected = $el.find('option:selected');
+    $el.find('option.list_cover').text(Diaspora.I18n.t('aspect_dropdown.updating'));
+    $el.val('list_cover'); // switch back to cover
+
+    if(selected.hasClass('selected')) {
+      // remove from aspect
+      var membership_id = selected.data('membership_id');
+
+      $.ajax({
+        url: Routes.aspect_membership_path(membership_id),
+        type: 'DELETE',
+        dataType: 'json',
+        headers: {
+          'Accept': "application/json, text/javascript, */*; q=0.01"
+        }
+      }).done(function() {
+        selected.text("– " + Diaspora.I18n.t('aspect_dropdown.mobile_row_unchecked', {name: selected.data('name')}));
+        selected.removeClass('selected');
+        profileAspectDropdown_refresh($el);
+      }).fail(function() {
+        alert(Diaspora.I18n.t('aspect_dropdown.error_remove'));
+        profileAspectDropdown_refresh($el);
+      });
+
+    } else {
+      // add to aspect
+      var person_id = $el.data('person-id');
+
+      $.ajax({
+        url: Routes.aspect_memberships_path(),
+        data: JSON.stringify({
+          "person_id": person_id,
+          "aspect_id": parseInt(selected.val(), 10)
+        }),
+        processData: false,
+        type: 'POST',
+        dataType: 'json',
+        headers: {
+          'Accept': "application/json, text/javascript, */*; q=0.01"
+        },
+        contentType: "application/json; charset=UTF-8"
+      }).done(function(data) {
+        selected.data('membership_id', data.id); // remember membership-id
+        selected.text("✓ " + Diaspora.I18n.t('aspect_dropdown.mobile_row_checked', {name: selected.data('name')}));
+        selected.addClass('selected');
+        profileAspectDropdown_refresh($el);
+      }).fail(function() {
+        alert(Diaspora.I18n.t('aspect_dropdown.error'));
+        profileAspectDropdown_refresh($el);
+      });
+
+    }
+  };
+
+  // initialize list_cover and register eventhandler for every user_aspect dropdown there is
+  $('.user_aspects').each(function() {
+    profileAspectDropdown_refresh($(this));
+    $(this).change(profileAspectDropDown_onchange);
+  });
+});
+

app/assets/stylesheets/colors.css.scss

@@ -19,6 +19,7 @@ $text-dark-grey: #666666;
 $white: white;
 $black: black;
 $green: #8EDE3D;
+$light-green: lighten($green,20%);
 $red: #A80000;
 $blue: #3F8FBA;
 $dark-blue: darken(#0984C8,10%);

app/assets/stylesheets/mobile/mobile.css.scss

@@ -1166,3 +1166,14 @@ select#aspect_ids_ {
   }
 }
 
+// Styles for mobile profile of other users
+.user_aspects {
+  width: auto !important;
+  float: right;
+  margin: 0 10px 0 0;
+  padding: 3px;
+
+  &.has_connection {
+    background-color: $light-green;
+  }
+}

app/views/aspect_memberships/_aspect_membership_dropdown.mobile.haml

@@ -0,0 +1,13 @@
+%div
+  %select{:name => 'user_aspects', :class => 'user_aspects', 'data-person-id' => @person.id}
+    %option{:value => 'list_cover', :class => 'list_cover', :disabled => 'true', :selected => 'true'}
+      = t("add_contact")
+    - contact = current_user.contact_for(@person)
+    - current_user.aspects.each do |aspect|
+      - if contact.try(:in_aspect?, aspect)
+        - membership_id = contact.aspect_memberships.where(:aspect_id => aspect.id).limit(1).pluck(:id).first
+        %option{:value => aspect.id, 'data-name' => aspect.name, 'data-membership_id' => membership_id, :class => 'selected'}
+          = "✓ #{t('shared.aspect_dropdown.mobile_row_checked', name: aspect.name)}"
+      - else
+        %option{:value => aspect.id, 'data-name' => aspect.name}
+          = "– #{t('shared.aspect_dropdown.mobile_row_unchecked', name: aspect.name)}"

app/views/people/show.mobile.haml

@@ -10,6 +10,8 @@
         = @person.name
       %span.description
         = @person.diaspora_handle
+      - if user_signed_in? && @person != current_user.person
+        = render 'aspect_memberships/aspect_membership_dropdown'
       .clear
     .bottom_bar
       - if !@person.tag_string.blank? && user_signed_in?

config/locales/diaspora/en.yml

@@ -293,9 +293,9 @@ en:
 
   aspect_memberships:
     destroy:
-      success: "Successfully removed person from aspect"
+      success: "Successfully removed person from aspect."
-      failure: "Failed to remove person from aspect"
+      failure: "Failed to remove person from aspect."
-      no_membership: "Could not find the selected person in that aspect"
+      no_membership: "Could not find the selected person in that aspect."
 
   bookmarklet:
     heading: "Bookmarklet"
@@ -1106,6 +1106,8 @@ en:
   shared:
     aspect_dropdown:
       add_to_aspect: "Add contact"
+      mobile_row_checked: "%{name} (remove)"
+      mobile_row_unchecked: "%{name} (add)"
       toggle:
         zero: "Add contact"
         one: "In %{count} aspect"

config/locales/javascript/javascript.en.yml

@@ -80,6 +80,9 @@ en:
       add_to_aspect: "Add contact"
       select_aspects: "Select aspects"
       all_aspects: "All aspects"
+      updating: "updating..."
+      mobile_row_checked: "<%= name %> (remove)"
+      mobile_row_unchecked: "<%= name %> (add)"
       stopped_sharing_with: "You have stopped sharing with <%= name %>."
       started_sharing_with: "You have started sharing with <%= name %>!"
       error: "Couldn’t start sharing with <%= name %>.  Are you ignoring them?"
@@ -90,6 +93,7 @@ en:
         other: "In <%= count %> aspects"
     show_more: "Show more"
     failed_to_like: "Failed to like!"
+    failed_to_reshare: "Failed to reshare!"
     failed_to_post_message: "Failed to post message!"
     failed_to_remove: "Failed to remove the entry!"
     comments:

features/mobile/people_aspects.feature

@@ -0,0 +1,43 @@
+@javascript
+Feature: adding and removing people from aspects
+    In order to add people to my contacts
+    As a mobile user
+    I want to add and remove people from my contacts
+
+    Background:
+      Given following users exist:
+        | username   |
+        | bob        |
+        | alice      |
+      And I toggle the mobile view
+      And I sign in as "bob@bob.bob" on the mobile website
+
+    Scenario: verify different states of the cover button
+      When I am on "alice@alice.alice"'s page
+      Then the aspect dropdown within "#author_info" should be labeled "Add contact"
+
+      When I select "Unicorns" from "user_aspects" within "#author_info"
+      Then the aspect dropdown within "#author_info" should be labeled "Unicorns"
+
+      When I select "Besties" from "user_aspects" within "#author_info"
+      Then the aspect dropdown within "#author_info" should be labeled "In 2 aspects"
+
+    Scenario: add contact to aspect
+      When I am on "alice@alice.alice"'s page
+      And I select "Unicorns" from "user_aspects" within "#author_info"
+      Then the aspect dropdown within "#author_info" should be labeled "Unicorns"
+      Then I should have 1 contacts in "Unicorns"
+
+    Scenario: remove contact to aspect
+      When I am on "alice@alice.alice"'s page
+      And I select "Unicorns" from "user_aspects" within "#author_info"
+      Then the aspect dropdown within "#author_info" should be labeled "Unicorns"
+
+      And I select "Besties" from "user_aspects" within "#author_info"
+      Then the aspect dropdown within "#author_info" should be labeled "In 2 aspects"
+      Then I should have 1 contacts in "Unicorns"
+
+      When I am on "alice@alice.alice"'s page
+      And I select "Unicorns" from "user_aspects" within "#author_info"
+      Then the aspect dropdown within "#author_info" should be labeled "Besties"
+      Then I should have 0 contacts in "Unicorns"

features/step_definitions/mobile_steps.rb

@@ -33,3 +33,9 @@ end
 When /^I open the drawer$/ do
   find('#menu_badge').click
 end
+
+Then /^the aspect dropdown within "([^"]*)" should be labeled "([^"]*)"/ do |selector, label|
+  within(selector) do
+    current_scope.should have_css("option.list_cover", :text => label)
+  end
+end

features/step_definitions/profile_steps.rb

@@ -10,4 +10,3 @@ When(/^I delete a photo$/) do
   find('.photo.loaded .thumbnail', :match => :first).hover
   find('.delete', :match => :first).click
 end
-