Merge pull request #158 from dgilperez/issue-156

Añadir initial.js para mostrar Gmail-ish avatares - issue #156

Gemfile

@@ -30,6 +30,7 @@ gem 'simple_captcha2', require: 'simple_captcha'
 gem 'ckeditor'
 gem 'cancancan'
 gem 'social-share-button'
+gem 'initialjs-rails'
 gem 'unicorn'
 
 group :development, :test do
@@ -61,4 +62,3 @@ end
 group :test do
   gem 'email_spec'
 end
-

Gemfile.lock

@@ -140,6 +140,8 @@ GEM
       i18n
       term-ansicolor (>= 1.3.2)
       terminal-table (>= 1.5.1)
+    initialjs-rails (0.1.0)
+      railties (>= 3.1, < 5.0)
     jquery-rails (4.0.4)
       rails-dom-testing (~> 1.0)
       railties (>= 4.2.0)
@@ -314,6 +316,7 @@ DEPENDENCIES
   factory_girl_rails
   foundation-rails
   i18n-tasks
+  initialjs-rails
   jquery-rails
   launchy
   letter_opener_web (~> 1.2.0)

app/assets/javascripts/application.js

@@ -16,17 +16,20 @@
 //= require turbolinks
 //= require ckeditor/init
 //= require social-share-button
+//= require initial
 //= require app
 //= require_tree .
 
 var initialize_modules = function() {
   App.Comments.initialize();
+  App.Users.initialize();
   App.Votes.initialize();
 };
 
 $(function(){
   $(document).foundation();
 
-  $(document).ready(initialize_modules)
+  $(document).ready(initialize_modules);
-  $(document).on('page:load', initialize_modules)
+  $(document).on('page:load', initialize_modules);
+  $(document).on('ajax:complete', initialize_modules);
 });

app/assets/javascripts/comments.js.coffee

@@ -17,7 +17,17 @@ App.Comments =
     $("#js-comment-form-#{id}").toggle()
 
   initialize: ->
-    $('body').on 'click', '.js-add-comment-link', ->
+    # $('body').on 'click', '.js-add-comment-link', ->
-      id = $(this).data().id
+    #   id = $(this).data().id
-      App.Comments.toggle_form(id)
+    #   App.Comments.toggle_form(id)
-      false
+    #   false
+    #
+    $('body .js-add-comment-link').each ->
+      $this = $(this)
+
+      unless $this.data('initialized') is 'yes'
+        $this.on('click', ->
+          id = $(this).data().id
+          App.Comments.toggle_form(id)
+          false
+        ).data 'initialized', 'yes'

app/assets/javascripts/users.js.coffee

@@ -0,0 +1,5 @@
+App.Users =
+
+  initialize: ->
+    $('.initialjs-avatar').initial();
+    false

app/assets/stylesheets/debates.scss

@@ -371,13 +371,8 @@
   }
 
   .author-photo {
-    border-radius: 2px;
-    display: inline-block;
-    height: 32px;
     line-height: $line-height*2;
     margin-right: $line-height/4;
-    vertical-align: middle;
-    width: 32px;
   }
 
   .author {
@@ -524,16 +519,6 @@
       }
     }
 
-    .user-photo {
-      border-radius: 2px;
-      display: inline-block;
-      height: 32px;
-      line-height: $line-height*2;
-      margin-right: rem-calc(6);
-      vertical-align: top;
-      width: 32px;
-    }
-
     .comment-body {
       margin-left: $line-height*1.6;
 
@@ -569,4 +554,4 @@
       }
     }
   }
-}
+}

app/assets/stylesheets/participacion.scss

@@ -484,7 +484,7 @@ form {
     opacity: .5;
   }
 
-  .avatar {
+  .initialjs-avatar {
     margin-bottom: $line-height;
   }
 
@@ -522,4 +522,4 @@ form {
       }
     }
   }
-}
+}

app/views/account/show.html.erb

@@ -36,13 +36,15 @@
 
         <div class="small-12 medium-6 column">
           <h3><%= t("account.show.avatar")%></h3>
-          <%= image_tag('user_default_big.jpg', class: "avatar", size: "100x100") %>
+          <%= avatar_image(@account, size: 100) %>
 
           <h3><%= t("account.show.notifications")%></h3>
+
           <%= f.label :email_on_debate_comment do %>
             <%= f.check_box :email_on_debate_comment %>
             <span class="checkbox"><%= t("account.show.email_on_debate_comment_label") %></span>
           <% end %>
+
           <%= f.label :email_on_comment_reply do %>
             <%= f.check_box :email_on_comment_reply %>
             <span class="checkbox"><%= t("account.show.email_on_comment_reply_label") %></span>
@@ -55,4 +57,4 @@
       </div>
     <% end %>
   </div>
-</div>
+</div>

app/views/comments/_comment.html.erb

@@ -1,7 +1,7 @@
 <div class="row">
   <div id="comment-<%= comment.id %>" class="comment small-12 column">
 
-    <%= image_tag('user_default_2.jpg', class: 'user-photo left', size: '32x32') %>
+    <%= avatar_image(comment.user, size: 32, class: 'left') %>
 
     <div class="comment-body">
       <span class="comment-info">

app/views/debates/show.html.erb

@@ -14,7 +14,7 @@
       <h1><%= @debate.title %></h1>
 
       <div class="debate-info">
-        <%= image_tag('user_default.jpg', class: 'author-photo', size: '32x32') %>
+        <%= avatar_image(@debate.author, size: 32, class: 'author-photo') %>
         <span class="author">
             <%= @debate.author.name %>
         </span>
@@ -62,4 +62,4 @@
       <%= render @debate.root_comments.recent %>
     </div>
   </div>
-</section>
+</section>

spec/features/account_spec.rb

@@ -4,20 +4,22 @@ feature 'Account' do
 
   background do
     @user = create(:user, first_name: "Manuela", last_name:"Colau")
+    login_as(@user)
   end
 
   scenario 'Show' do
-    login_as(@user)
     visit root_path
+
     click_link "My account"
+
     expect(current_path).to eq(account_path)
 
     expect(page).to have_selector("input[value='Manuela']")
     expect(page).to have_selector("input[value='Colau']")
+    expect(page).to have_selector(avatar('Manuela Colau'), count: 1)
   end
 
   scenario "Failed Edit" do
-    login_as(@user)
     visit account_path
 
     fill_in 'account_first_name', with: ''
@@ -31,7 +33,6 @@ feature 'Account' do
   end
 
   scenario 'Edit' do
-    login_as(@user)
     visit account_path
 
     fill_in 'account_first_name', with: 'Larry'

spec/features/comments_spec.rb

@@ -17,6 +17,7 @@ feature 'Comments' do
       expect(page).to have_content comment.user.name
       expect(page).to have_content time_ago_in_words(comment.created_at)
       expect(page).to have_content comment.body
+      expect(page).to have_selector(avatar(comment.user.name), count: 1)
     end
   end
 

spec/features/debates_spec.rb

@@ -25,6 +25,7 @@ feature 'Debates' do
     expect(page).to have_content "Debate description"
     expect(page).to have_content debate.author.name
     expect(page).to have_content I18n.l(Date.today)
+    expect(page).to have_selector(avatar(debate.author.name), count: 1)
 
     within('.social-share-button') do
       expect(page.all('a').count).to be(3) # Twitter, Facebook, Google+

spec/support/common_actions.rb

@@ -56,4 +56,8 @@ module CommonActions
     SimpleCaptcha::SimpleCaptchaData.first.value
   end
 
+  def avatar(name)
+    "img.initialjs-avatar[data-name='#{name}']"
+  end
+
 end