Adding the recent events ticker/scroller on the new glossy flashy sparkly homepage.

12 files changed, 216 insertions, 26 deletions

diff --git a/app/controllers/events_controller.rb b/app/controllers/events_controller.rb
index 6aca641..0e9ddb2 100644
--- a/app/controllers/events_controller.rb
+++ b/app/controllers/events_controller.rb
@@ -40,5 +40,10 @@ class EventsController < ApplicationController
       end
       expires_in 30.minutes
     end
-  end  
+  end
+  
+  def recent_for_homepage
+    @latest_events = Event.latest(8)
+    render :layout => false
+  end
 end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 8e8d6ab..8cd56e1 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -410,18 +410,31 @@ module ApplicationHelper
   def project_summary_box(project)
     summary_box link_to(project.title, project),
       truncate(project.descriptions_first_paragraph, 80),
-      image_tag("avatar_default.png", :width => 30, :height => 30)
+      default_avatar
   end
   
   def team_summary_box(team)
     summary_box link_to(team.name, group_path(team)),
-      "Team text", 
-      image_tag("avatar_default.png", :width => 30, :height => 30)
+      "Team text",
+      default_avatar
   end
   
   def user_summary_box(user)
     summary_box link_to(user.login, user),
       "User text",
-      avatar(user, :size => 30, :default => "images/avatar_default.png") + "<span></span>"
+      glossy_homepage_avatar(user)
+  end
+  
+  def glossy_homepage_avatar(user)
+    avatar_wrapper(avatar(user, :size => 30, :default => "images/avatar_default.png") + "<span></span>")
+  end
+  
+  def default_avatar
+    avatar_wrapper(image_tag("avatar_default.png", :width => 30, :height => 30))
+  end
+  
+  # This is pretty ugly, the 'avatar' helper should do this. But we need backwards compability.
+  def avatar_wrapper(avatar)
+    content_tag(:div, avatar, :class => "glossy_avatar_wrapper")
   end
 end
diff --git a/app/helpers/events_helper.rb b/app/helpers/events_helper.rb
index 52aa35e..bad2f59 100644
--- a/app/helpers/events_helper.rb
+++ b/app/helpers/events_helper.rb
@@ -18,4 +18,14 @@
 #++
 
 module EventsHelper
+  def recent_event_timestamp(time)
+    distance = Time.now - time
+
+    human_distance = case distance
+    when 0..3599
+      "#{distance.ceil / 60} min."
+    else
+      "#{distance.ceil / 60 / 60} h."
+    end
+  end
 end
diff --git a/app/views/events/recent_for_homepage.html.erb b/app/views/events/recent_for_homepage.html.erb
new file mode 100644
index 0000000..2a686c2
--- /dev/null
+++ b/app/views/events/recent_for_homepage.html.erb
@@ -0,0 +1,30 @@
+<div class="recent_activities_bar">
+  <div class="recent_activities_header"></div>
+  
+  <% @latest_events.each do |event| %>
+    <div class="recent_activity">
+      <% action, body, category = action_and_body_for_event(event) %>
+      
+      <div class="recent_activity_timestamp">
+        <div><%= recent_event_timestamp(event.created_at) %></div>
+        ago
+      </div>
+      
+      <div class="recent_activity_avatar">
+        <%= glossy_homepage_avatar(event.user) %>
+      </div>
+  
+      <div class="recent_activity_meta">
+        <div>
+          <% if event.user.nil? %>
+            <%= event.actor_display %>
+          <% else %>
+            <%= link_to h(event.user.title), user_path(event.user) %>
+          <% end %>
+        </div>
+  
+        <%= action %>
+      </div>
+    </div>
+  <% end %>
+</div>
\ No newline at end of file
diff --git a/app/views/layouts/second_generation/application.html.erb b/app/views/layouts/second_generation/application.html.erb
index ccbfaff..969a196 100644
--- a/app/views/layouts/second_generation/application.html.erb
+++ b/app/views/layouts/second_generation/application.html.erb
@@ -57,11 +57,7 @@
     </div>
   </div>
   
-  <div id="recent_activities">
-    <div class="marginizer">
-      Recent activities
-    </div>
-  </div>
+  <div id="recent_activities"><div id="recent_activities_container"></div></div>
   
   <div id="main">
     <div class="marginizer">
diff --git a/config/routes.rb b/config/routes.rb
index e4a591a..6dcd998 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -109,7 +109,7 @@ ActionController::Routing::Routes.draw do |map|
     end
   end
   
-  map.resources  :events, :member => {:commits => :get}
+  map.resources  :events, :member => {:commits => :get}, :collection => {:recent_for_homepage => :get}
   
   map.open_id_complete '/sessions', :controller => "sessions", :action=> "create",:requirements => { :method => :get }
 
diff --git a/public/images/border_pixel_v.gif b/public/images/border_pixel_v.gif
new file mode 100755
index 0000000..bb52dd9
--- /dev/null
+++ b/public/images/border_pixel_v.gif
diff --git a/public/images/list_head_activities.png b/public/images/list_head_activities.png
new file mode 100755
index 0000000..1faf101
--- /dev/null
+++ b/public/images/list_head_activities.png
diff --git a/public/images/ticker_bg.png b/public/images/ticker_bg.png
new file mode 100755
index 0000000..89b9369
--- /dev/null
+++ b/public/images/ticker_bg.png
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index 876cf0c..224b73c 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -209,6 +209,65 @@ Event.observe(window, "load", function(e){
     
     nativeSubmitButton.insert({after: awesomeSubmitButton});
   }
+  
+  var recentActivitiesTarget = $("recent_activities_container");
+  if (recentActivitiesTarget) {
+    var RECENT_ACTIVITY_WIDTH     = 280;
+    var NUM_RECENT_ACTIVITIES     = 8;
+    var RECENT_ACTIVITIES_HEADER  = 186 + (20 * 2);
+    var BAR_WIDTH                 = (RECENT_ACTIVITY_WIDTH * NUM_RECENT_ACTIVITIES) + RECENT_ACTIVITIES_HEADER;
+    
+    var FPS                       = 30;
+    var ANIMATION_STEP            = 2;
+    var LOAD_MORE_OFFSET          = 400;
+    
+    var currentIteration          = 0;
+    var shouldMonitorScroll       = true;
+    
+
+    var getWindowWidth = function(){
+      return (window.innerWidth || document.documentElement.clientWidth);
+    }
+    
+    recentActivitiesTarget.setStyle({left: getWindowWidth() + "px"});
+    
+    var fetchNewBar = function(callback){
+      new Ajax.Request("/events/recent_for_homepage", {
+        onSuccess: function(response) {
+          currentIteration++;
+          shouldMonitorScroll = true;
+          
+          // Expand the width of the container
+          recentActivitiesTarget.setStyle({width: BAR_WIDTH + parseInt(recentActivitiesTarget.getStyle("width")) + "px"});
+          
+          // Append the new bar
+          var newBar = response.responseText;
+          Element.insert(recentActivitiesTarget, newBar);
+          $$(".recent_activities_bar").each(function(element){
+            element.setStyle({width: BAR_WIDTH + "px"});
+          });
+          
+          if (callback) { callback.call() }
+        }
+      });
+    }
+    
+    fetchNewBar(function(){
+      var animateBar = function(){
+        var currentOffset = parseInt(recentActivitiesTarget.getStyle("left"));
+        var newOffset = currentOffset - ANIMATION_STEP
+        recentActivitiesTarget.setStyle({left: newOffset + "px"});
+        
+        if (shouldMonitorScroll && BAR_WIDTH - getWindowWidth() + (newOffset / currentIteration) <= LOAD_MORE_OFFSET) {
+          shouldMonitorScroll = false;
+          fetchNewBar();
+        }
+        
+        setTimeout(animateBar, FPS);
+      }
+      animateBar();
+    });
+  }
 });
 
 
diff --git a/public/stylesheets/screen.css b/public/stylesheets/screen.css
index 2b16713..f353e8e 100644
--- a/public/stylesheets/screen.css
+++ b/public/stylesheets/screen.css
@@ -253,8 +253,69 @@ Recent activities
 #recent_activities{
   float:left;
   width:100%;
-  background-color:#EBEFF2;
-  padding:20px 0;
+  background-image:url(../images/ticker_bg.png);
+  background-repeat:repeat-x;
+  background-position:top left;
+  background-color:#fff;
+  height:108px;
+  overflow:hidden;
+  position:relative;
+}
+
+#recent_activities_container{
+  position:absolute;
+  left:0;
+  top:13px;
+  height:60px;
+}
+
+.recent_activities_bar{
+  float:left;
+}
+
+.recent_activities_header{
+  width:186px;
+  margin:0 20px;
+  height:60px;
+  background-image:url(../images/list_head_activities.png);
+  background-repeat:no-repeat;
+  background-position:left center;
+  float:left;
+}
+
+.recent_activity{
+  background-image:url(../images/border_pixel_v.gif);
+  background-repeat:repeat-y;
+  background-position:top right;
+  width:240px;
+  padding:0 20px;
+  height:60px;
+  float:left;
+  font-size:11px;
+}
+
+.recent_activity_timestamp{
+  float:left;
+  width:40px;
+  margin-top:15px;
+  text-align:center;
+  font-weight:bold;
+}
+
+.recent_activity_avatar{
+  float:left;
+  margin-top:12px;
+  margin-right:5px;
+}
+
+.recent_activity_meta{
+  float:left;
+  width:150px;
+  margin-top:10px;
+}
+
+.recent_activity_meta strong{
+  font-weight:normal;
 }
 
 /*####################
@@ -311,27 +372,14 @@ Homepage lists
 
 .homepage_listing .summary_box_image{
   float:left;
-  position:relative;
   margin:0 10px;
 }
 
-.homepage_listing .summary_box_image span{
-  position:absolute;
-  top:0;
-  left:0;
-  z-index:2;
-  width:30px;
-  height:30px;
-  background-image:url(../images/avatar_mask.png);
-  background-repeat:no-repeat;
-}
-
 .homepage_listing .summary_box_content{
   float:left;
   width:250px;
 }
 
-
 /*####################
 Main
 ####################*/
@@ -356,6 +404,25 @@ Footer
 }
 
 /*####################
+Avatars
+####################*/
+
+.glossy_avatar_wrapper{
+  position:relative;
+}
+
+.glossy_avatar_wrapper span{
+  position:absolute;
+  top:0;
+  left:0;
+  z-index:2;
+  width:30px;
+  height:30px;
+  background-image:url(../images/avatar_mask.png);
+  background-repeat:no-repeat;
+}
+
+/*####################
 Lists
 ####################*/
 
diff --git a/test/functional/events_controller_test.rb b/test/functional/events_controller_test.rb
index ac8868c..85eec18 100644
--- a/test/functional/events_controller_test.rb
+++ b/test/functional/events_controller_test.rb
@@ -59,4 +59,14 @@ class EventsControllerTest < ActionController::TestCase
       assert_equal "max-age=1800, private", @response.headers['Cache-Control']
     end
   end
+  
+  context '#recent' do
+    should "render recent_for_homepage" do
+      get :recent_for_homepage
+      assert_response :success
+      assert_template "events/recent_for_homepage"
+      assert assigns(:latest_events)
+      assert !@response.layout
+    end
+  end
 end