Merge pull request #1694 from ticho/tag-list-has-unfollow-icon

Add a "unfollow" icon to each tag in followed tags listing

app/controllers/tag_followings_controller.rb

@@ -22,11 +22,23 @@ class TagFollowingsController < ApplicationController
     @tag = ActsAsTaggableOn::Tag.find_by_name(params[:name])
     @tag_following = current_user.tag_followings.where(:tag_id => @tag.id).first
     if @tag_following && @tag_following.destroy
+      @tag_unfollowed = true
+    else
+      @tag_unfollowed = false
+    end
+
+    if params[:remote]
+      respond_to do |format|
+        format.all{}
+        format.js{ render 'tags/update' }
+      end
+    else
+      if @tag_unfollowed
         flash[:notice] = I18n.t('tag_followings.destroy.success', :name => params[:name])
       else
         flash[:error] = I18n.t('tag_followings.destroy.failure', :name => params[:name])
       end
-
       redirect_to tag_path(:name => params[:name])
     end
+  end
 end

app/views/aspects/index.html.haml

@@ -21,7 +21,7 @@
   .section
     = render 'aspects/aspect_listings'
 
-  .section
+  .section#followed_tags_listing
     = render 'tags/followed_tags_listings'
 
 .span-13.append-1

app/views/tags/_followed_tags_listings.haml

@@ -10,7 +10,9 @@
     %ul.sub_nav
       - if current_user.followed_tags.size > 0
         - for tg in current_user.followed_tags
-          %li
+          %li.unfollow{:id => tg.name}
+            .unfollow_icon.hidden
+              = link_to image_tag("icons/monotone_close_exit_delete.png", :height => 12), tag_tag_followings_path(:name => tg.name, :remote => true), :confirm => t('are_you_sure'), :method => :delete, :remote => true, :id => "unfollow_" + tg.name
             =link_to "##{tg.name}", tag_path(:name => tg.name), :class => "tag_selector"
       - else
         %li

app/views/tags/update.js.erb

@@ -0,0 +1 @@
+$("#followed_tags_listing").first().html("<%= escape_javascript(render('tags/followed_tags_listings')) =%>");

config/assets.yml

@@ -70,6 +70,7 @@ javascripts:
     - public/javascripts/publisher.js
     - public/javascripts/aspect-filters.js
     - public/javascripts/aspect-edit-pane.js
+    - public/javascripts/tag-followings.js
     - public/javascripts/fileuploader-custom.js
   people:
     - public/javascripts/vendor/jquery.autoSuggest.custom.js

config/locales/diaspora/en.yml

@@ -159,6 +159,7 @@ en:
       your_aspects: "Your Aspects"
       tags_following: "Followed Tags"
       no_tags: "+ Find a tag to follow"
+      unfollow_tag: "Stop following #%{tag}"
       handle_explanation: "This is your diaspora id. Like an email address, you can give this to people to reach you."
       no_contacts: "No contacts"
       post_a_message: "post a message >>"

features/follows_tags.feature

@@ -34,5 +34,10 @@ Feature: posting
     And I go to the home page
     Then I should not see "#boss" within ".left_nav"
 
-
-
+  Scenario:
+    When I go to the home page
+    And I preemptively confirm the alert
+    And I hover over the ".tag_selector"
+    And I follow "unfollow_boss"
+    And I wait for the ajax to finish
+    Then I should not see "#boss" within ".left_nav"

public/javascripts/tag-followings.js

@@ -0,0 +1,18 @@
+/*   Copyright (c) 2011, Diaspora Inc.  This file is
+*   licensed under the Affero General Public License version 3 or later.  See
+*   the COPYRIGHT file.
+*/
+
+var TagFollowings = {
+  initialize: function(){
+    $('.unfollow').live('mouseover', function(){
+      $(this).find('.unfollow_icon').removeClass('hidden');
+    }).live('mouseout', function(){
+      $(this).find('.unfollow_icon').addClass('hidden');
+    });
+  }
+};
+
+$(document).ready(function() {
+  TagFollowings.initialize();
+});

public/stylesheets/sass/application.sass

@@ -2902,9 +2902,13 @@ ul.left_nav
         :color #666
 
   .contact_count,
-  .edit
+  .edit,
+  .unfollow_icon
     :float right
 
+  .unfollow_icon
+    :margin-top 4px
+
   .edit
     :margin-top 4px
     :display none

spec/controllers/aspects_controller_spec.rb

@@ -70,6 +70,13 @@ describe AspectsController do
       save_fixture(html_for("body"), "aspects_index_with_posts")
     end
 
+    it 'generates a jasmine fixture with a followed tag' do
+      @tag = ActsAsTaggableOn::Tag.create!(:name => "partytimeexcellent")
+      TagFollowing.create!(:tag => @tag, :user => alice )
+      get :index
+      save_fixture(html_for("body"), "aspects_index_with_one_followed_tag")
+    end
+
     context 'with getting_started = true' do
       before do
         alice.getting_started = true

spec/javascripts/support/jasmine.yml

@@ -43,6 +43,7 @@ src_files:
   - public/javascripts/rails.js
   - public/javascripts/aspect-filters.js
   - public/javascripts/content-updater.js
+  - public/javascripts/tag-followings.js
 # stylesheets
 #
 # Return an array of stylesheet filepaths relative to src_dir to include before jasmine specs.

spec/javascripts/tag-followings-spec.js

@@ -0,0 +1,22 @@
+/*   Copyright (c) 2011, Diaspora Inc.  This file is
+*   licensed under the Affero General Public License version 3 or later.  See
+*   the COPYRIGHT file.
+*/
+
+describe("TagFollowings", function() {
+  describe("unfollow", function(){
+    it("tests unfollow icon visibility on mouseover event", function(){
+      spec.loadFixture('aspects_index_with_one_followed_tag');
+      TagFollowings.initialize();
+
+      var tag_li = $('li.unfollow#partytimeexcellent');
+      var icon_div = $('.unfollow_icon');
+
+      expect(icon_div.hasClass('hidden')).toBeTruthy();
+      tag_li.mouseover();
+      expect(icon_div.hasClass('hidden')).toBeFalsy();
+      tag_li.mouseout();
+      expect(icon_div.hasClass('hidden')).toBeTruthy();
+    });
+  });
+});