Merge pull request #6291 from AugierLe42e/change-actions-icons-mobile

Use entypo icons on mobile posts

Changelog.md

@@ -45,6 +45,7 @@ With the port to Bootstrap 3, app/views/terms/default.haml has a new structure.
 * Replace MBP.autogrow with autosize on mobile [#6261](https://github.com/diaspora/diaspora/pull/6261)
 * Improve mobile drawer transition [#6233](https://github.com/diaspora/diaspora/pull/6233)
 * Remove unused header icons and an unused favicon  [#6283](https://github.com/diaspora/diaspora/pull/6283)
+* Replace mobile icons for post interactions with Entypo icons [#6291](https://github.com/diaspora/diaspora/pull/6291)
 
 ## Bug fixes
 * Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852)

app/assets/javascripts/mobile/mobile.js

@@ -56,7 +56,7 @@ $(document).ready(function(){
   });
 
   /* Heart toggle */
-  $(".like_action", ".stream").bind("tap click", function(evt){
+  $(".like-action", ".stream").bind("tap click", function(evt){
     evt.preventDefault();
     var link = $(this),
         likeCounter = $(this).closest(".stream_element").find("like_count"),
@@ -99,7 +99,7 @@ $(document).ready(function(){
   });
 
   /* Reshare */
-  $(".reshare_action", ".stream").bind("tap click", function(evt){
+  $(".reshare-action", ".stream").bind("tap click", function(evt){
     evt.preventDefault();
 
     var link = $(this),

app/assets/javascripts/mobile/mobile_comments.js

@@ -39,7 +39,7 @@ $(document).ready(function() {
     var bottomBar = toggleReactionsLink.closest(".bottom_bar").first(),
         commentsContainer = commentsContainerLazy(bottomBar),
         existingCommentsContainer = commentsContainer(),
-        commentActionLink = bottomBar.find("a.comment_action");
+        commentActionLink = bottomBar.find("a.comment-action");
     if (existingCommentsContainer.length > 0) {
       showLoadedComments(toggleReactionsLink, existingCommentsContainer, commentActionLink);
     } else {
@@ -73,7 +73,7 @@ $(document).ready(function() {
     };
   }
 
-  $(".stream").on("tap click", "a.comment_action", function(evt) {
+  $(".stream").on("tap click", "a.comment-action", function(evt) {
     evt.preventDefault();
     showCommentBox(this);
     var bottomBar = $(this).closest(".bottom_bar").first();
@@ -157,7 +157,7 @@ $(document).ready(function() {
   function handleCommentShowing(form, bottomBar) {
     var formContainer = form.parent();
     formContainer.remove();
-    var commentActionLink = bottomBar.find("a.comment_action").first();
+    var commentActionLink = bottomBar.find("a.comment-action").first();
     commentActionLink.addClass("inactive");
     var toggleReactionsLink = bottomBar.find(".show_comments").first();
     showComments(toggleReactionsLink);

app/assets/stylesheets/mobile/comments.scss

+.bottom_bar {
+  border-radius: 0 0 5px 5px;
+  z-index: 3;
+  display: block;
+  position: relative;
+  padding: 8px 10px 10px;
+  background: $background-grey;
+  margin-top: 10px;
+  border-top: 1px solid $border-grey;
+  min-height: 22px;
+
+  > a, .show_comments {
+    @include transition(color);
+    color: $text-grey;
+    font-weight: bold;
+  }
+
+  .show_comments {
+    position: relative;
+    top: 3px;
+  }
+
+  a.show_comments.active:not(.bottom_collapse) {
+    color: $text;
+    padding-right: 14px;
+    background: {
+      image: image-url("mobile/arrow_down_small.png");
+      position: center right;
+      repeat: no-repeat;
+    }
+  }
+
+  .floater {
+    top: -5px;
+    float: right;
+    height: 28px;
+    overflow: hidden;
+    position: relative;
+
+    [class^="entypo"] {
+      height: 90%;
+      margin: 0 4px;
+      color: $text-grey;
+      font-size: 24px;
+      &:hover, &:active, &:focus{ text-decoration: none; }
+      &:last-child { margin-right: 1px; }
+      &.entypo-reshare.active { color: $blue; }
+      &.entypo-heart.active { color: $red; }
+    }
+  }
+}

app/assets/stylesheets/mobile/mobile.scss

@@ -11,6 +11,7 @@
 @import "mobile/conversations";
 @import "mobile/settings";
 @import "mobile/stream_element";
+@import "mobile/comments";
 
 a {
   color: #2489ce;
@@ -369,87 +370,6 @@ h3 {  margin-top: 0; }
   float: right;
 }
 
-.bottom_bar {
-  border-radius: 0 0 5px 5px;
-  z-index: 3;
-  display: block;
-  position: relative;
-  padding: 10px;
-  padding-top: 8px;
-  background: $background-grey;
-
-  margin: {
-    top: 10px; };
-
-  border: {
-    top: 1px solid $border-grey;
-  };
-
-  min-height: 22px;
-
-  > a,
-  .show_comments {
-    @include transition(color);
-    color: $text-grey;
-    font-weight: bold;
-  }
-
-  .show_comments {
-    position: relative;
-    top: 3px;
-    color: #ccc;
-  }
-
-  a.show_comments {
-    color: $text-grey;
-
-    &.active:not(.bottom_collapse) {
-      color: #444;
-      padding: {
-        right: 14px;
-      }
-      background: {
-        image: image-url("mobile/arrow_down_small.png");
-        position: center right;
-        repeat: no-repeat;
-      }
-    }
-  }
-
-  #bottom_bar_tabs {
-    display: table;
-    width: 100%;
-    text: {
-      align: center;
-    }
-    border: {
-      bottom: 1px solid #ccc;
-    }
-    font: {
-      size: 28px;
-    }
-    color: #ccc;
-
-    .tab {
-      display: table-cell;
-      position:relative;
-      top: -5px;
-
-      border: {
-        right: 1px solid #ccc;
-      }
-
-      &:last-child {
-        border: none;
-      }
-    }
-  }
-}
-
-.floater {
-  float: right;
-}
-
 .photo_area {
   border-radius: 3px;
   text-align: center; }
@@ -476,27 +396,6 @@ h3 {  margin-top: 0; }
   }
 }
 
-.reshare_action {
-  background-image: image-url("mobile/reshare_mobile.png");
-  &.active {
-    background-image: image-url("mobile/reshare_mobile_active.png");
-  }
-}
-
-.like_action {
-  background-image: image-url("mobile/heart_mobile_grey.png");
-  &.active {
-    background-image: image-url("mobile/heart_mobile_red.png");
-  }
-}
-
-.comment_action.image_link {
-  background-image: image-url("mobile/pencil_mobile_grey_active.png");
-  &.inactive {
-    background-image: image-url("mobile/pencil_mobile_grey.png");
-  }
-}
-
 #new_status_message {
   margin: 0;
 

app/helpers/mobile_helper.rb

 module MobileHelper
-  def aspect_select_options(aspects, selected)
-    selected_id = selected == :all ? "" : selected.id
-    '<option value="" >All</option>\n'.html_safe + options_from_collection_for_select(aspects, "id", "name", selected_id)
-  end
-
   def mobile_reshare_icon(post)
     if (post.public? || reshare?(post)) && (user_signed_in? && post.author != current_user.person)
       absolute_root = reshare?(post) ? post.absolute_root : post
 
       if absolute_root && absolute_root.author != current_user.person
-        reshare = Reshare.where(:author_id => current_user.person_id,
-                                :root_guid => absolute_root.guid).first
+        reshare = Reshare.where(author_id: current_user.person_id,
+                                root_guid: absolute_root.guid).first
         klass = reshare.present? ? "active" : "inactive"
-        link_to '', reshares_path(:root_guid => absolute_root.guid), :title => t('reshares.reshare.reshare_confirmation', :author => absolute_root.author_name), :class => "image_link reshare_action #{klass}"
+        link_to "", reshares_path(root_guid: absolute_root.guid),
+                title: t("reshares.reshare.reshare_confirmation", author: absolute_root.author_name),
+                class: "entypo-reshare reshare-action #{klass}"
       end
     end
   end
 
   def mobile_like_icon(post)
     if current_user && current_user.liked?(post)
-      link_to '', post_like_path(post.id, current_user.like_for(post).id), :class => "image_link like_action active"
+      link_to "", post_like_path(post.id, current_user.like_for(post).id), class: "entypo-heart like-action active"
     else
-      link_to '', post_likes_path(post.id), :class => "image_link like_action inactive"
+      link_to "", post_likes_path(post.id), class: "entypo-heart like-action inactive"
     end
   end
 
   def mobile_comment_icon(post)
-    link_to '', new_post_comment_path(post), :class => "image_link comment_action inactive"
+    link_to "", new_post_comment_path(post), class: "entypo-comment comment-action inactive"
   end
 
   def reactions_link(post)
     reactions_count = post.comments_count + post.likes_count
     if reactions_count > 0
-      link_to "#{t('reactions', :count => reactions_count)}", post_comments_path(post, :format => "mobile"), :class => 'show_comments'
+      link_to "#{t('reactions', count: reactions_count)}",
+              post_comments_path(post, format: "mobile"),
+              class: "show_comments"
     else
       html = "<span class='show_comments'>"
-      html << "#{t('reactions', :count => reactions_count)}"
+      html << "#{t('reactions', count: reactions_count)}"
       html << "</span>"
     end
   end

features/mobile/activity_stream.feature

@@ -16,7 +16,7 @@ Feature: Viewing my activity on the steam mobile page
     And I should not see "Hello! I am #newhere"
 
   Scenario: Show post on my activity
-    When I click on selector "a.image_link.like_action.inactive"
+    When I click on selector "a.like-action.inactive"
     And I open the drawer
     And I follow "My activity"
     Then I should see "My activity"

features/mobile/logged_out_browsing.feature

@@ -8,7 +8,7 @@ Feature: Browsing Diaspora as a logged out user mobile
       Given a user named "Bob Jones" with email "bob@bob.bob"
       And "bob@bob.bob" has a public post with text "public stuff"
       And I sign in as "bob@bob.bob"
-      And I click on selector "a.image_link.comment_action.inactive"
+      And I click on selector "a.comment-action.inactive"
       And I fill in the following:
           | text            | this also    |
       And I press "Comment"

features/mobile/not_safe_for_work.feature

@@ -45,7 +45,7 @@ Feature: Not safe for work
     And I toggle all nsfw posts
     And I follow "Reshare"
     And I confirm the alert
-    Then I should see a "a.image_link.reshare_action.active"
+    Then I should see a "a.reshare-action.active"
 
     When I go to the home page
     Then I should not see "Sexy Senators Gone Wild!"
@@ -59,7 +59,7 @@ Feature: Not safe for work
     And I toggle all nsfw posts
     And I follow "Reshare"
     And I confirm the alert
-    Then I should see a "a.image_link.reshare_action.active"
+    Then I should see a "a.reshare-action.active"
 
     When I go to the home page
     Then I should not see "Sexy Senators Gone Wild!"
@@ -73,7 +73,7 @@ Feature: Not safe for work
     And I toggle all nsfw posts
     And I follow "Reshare"
     And I confirm the alert
-    Then I should see a "a.image_link.reshare_action.active"
+    Then I should see a "a.reshare-action.active"
 
     When I go to the home page
     Then I should not see "Sexy Senators Gone Wild!"

features/mobile/reactions.feature

@@ -16,15 +16,15 @@ Feature: reactions mobile post
   Scenario: like on a mobile post
     When I should see "No reactions" within ".show_comments"
     And I click on selector "span.show_comments"
-    And I click on selector "a.image_link.like_action.inactive"
-    Then I should see a "a.image_link.like_action.active"
+    And I click on selector "a.like-action.inactive"
+    Then I should see a "a.like-action.active"
     When I go to the stream page
     And I should see "1 reaction" within ".show_comments"
     And I click on selector "a.show_comments"
     Then I should see "1" within ".like_count"
 
   Scenario: comment and delete a mobile post
-    When I click on selector "a.image_link.comment_action.inactive"
+    When I click on selector "a.comment-action.inactive"
     And I fill in the following:
         | text            | is that a poodle?    |
     And I press "Comment"
@@ -33,7 +33,7 @@ Feature: reactions mobile post
     And I should see "1 reaction" within ".show_comments"
     And I click on selector "a.show_comments"
     And I should see "1" within ".comment_count"
-    When I click on selector "a.image_link.comment_action"
+    When I click on selector "a.comment-action"
     And I click on selector "a.remove"
     And I confirm the alert
     Then I should not see "1 reaction" within ".show_comments"

features/mobile/reshare.feature

@@ -16,18 +16,18 @@ Feature: resharing from the mobile
     And I sign in as "alice@alice.alice"
 
   Scenario: Resharing a post from a single post page
-    And I click on selector "a.image_link.reshare_action.inactive"
+    And I click on selector "a.reshare-action.inactive"
     And I confirm the alert
-    Then I should see a "a.image_link.reshare_action.active"
+    Then I should see a "a.reshare-action.active"
     When I go to the stream page
     Then I should see "Reshared via" within ".reshare_via"
 
   Scenario: Resharing a post from a single post page that is reshared
     Given the post with text "reshare this!" is reshared by "eve@eve.eve"
     And a user with email "alice@alice.alice" is connected with "eve@eve.eve"
-    And I click on the first selector "a.image_link.reshare_action.inactive"
+    And I click on the first selector "a.reshare-action.inactive"
     And I confirm the alert
-    Then I should see a "a.image_link.reshare_action.active"
+    Then I should see a "a.reshare-action.active"
     When I go to the stream page
     Then I should see "Reshared via" within ".reshare_via"
 

spec/helpers/mobile_helper_spec.rb

-#   Copyright (c) 2010-2011, Diaspora Inc.  This file is
-#   licensed under the Affero General Public License version 3 or later.  See
-#   the COPYRIGHT file.
-
-require 'spec_helper'
-
-describe MobileHelper, :type => :helper do
-  
-  describe "#aspect_select_options" do
-    it "adds an all option to the list of aspects" do
-      # options_from_collection_for_select(@aspects, "id", "name", @aspect.id)
-      
-      n = FactoryGirl.create(:aspect)
-      
-      options = aspect_select_options([n], n).split('\n')
-      expect(options.first).to match(/All/)
-    end
-  end
-end
\ No newline at end of file