ajax-loader for dashboard

Dmitriy Zaporozhets
1 parent 8426846d
Showing 4 changed files with 27 additions and 2 deletions Show diff stats
app/assets/images/ajax-loader-facebook.gif
app/assets/javascripts/loader.js
app/assets/stylesheets/projects.css.scss
app/views/dashboard/_menu.html.haml
@@ -0,0 +1,11 @@
+var Loader = { 
+  img_src: "/assets/ajax-loader.gif", 
+
+  html: 
+    function(width) { 
+      img = $("<img>");
+      img.attr("width", width);
+      img.attr("src", this.img_src);
+      return img;
+    }
+}
@@ -581,3 +581,9 @@ h4.middle-panel {
     }
   }
 }
+
+.dashboard-loader { 
+  float:right;
+  margin-right:30px;
+  display:none;
+}
@@ -2,12 +2,20 @@
   = link_to "Activities", dashboard_path, :remote => true, :class => "button-small dash-button #{"active" if current_page?(dashboard_path) || current_page?(root_path) }", :id => "activities_slide"
   = link_to "Issues", dashboard_issues_path, :remote => true, :class => "button-small dash-button #{"active" if current_page?(dashboard_issues_path)}", :id => "issues_slide"
   = link_to "Merge Requests", dashboard_merge_requests_path, :remote => true, :class => "button-small dash-button #{"active" if current_page?(dashboard_merge_requests_path)}", :id => "merge_requests_slide"
-
+  %img{:src => "/assets/ajax-loader-facebook.gif", :class => "dashboard-loader"}
  
 :javascript 
   $(function(){
     $(".dash-button").live("click", function() { 
       $(".dash-button").removeClass("active");
       $(this).addClass("active");
-    })
+    });
+
+    $(".dash-button").live("ajax:before", function() { 
+      $(".dashboard-loader").show();
+    });
+
+    $(".dash-button").live("ajax:complete", function() { 
+      $(".dashboard-loader").hide();
+    });
   });
...	...	@@ -0,0 +1,11 @@
	1	+var Loader = {
	2	+ img_src: "/assets/ajax-loader.gif",
	3	+
	4	+ html:
	5	+ function(width) {
	6	+ img = $("<img>");
	7	+ img.attr("width", width);
	8	+ img.attr("src", this.img_src);
	9	+ return img;
	10	+ }
	11	+}
...	...
...	...	@@ -581,3 +581,9 @@ h4.middle-panel {
581	581	}
582	582	}
583	583	}
	584	+
	585	+.dashboard-loader {
	586	+ float:right;
	587	+ margin-right:30px;
	588	+ display:none;
	589	+}
...	...
...	...	@@ -2,12 +2,20 @@
2	2	= link_to "Activities", dashboard_path, :remote => true, :class => "button-small dash-button #{"active" if current_page?(dashboard_path) \|\| current_page?(root_path) }", :id => "activities_slide"
3	3	= link_to "Issues", dashboard_issues_path, :remote => true, :class => "button-small dash-button #{"active" if current_page?(dashboard_issues_path)}", :id => "issues_slide"
4	4	= link_to "Merge Requests", dashboard_merge_requests_path, :remote => true, :class => "button-small dash-button #{"active" if current_page?(dashboard_merge_requests_path)}", :id => "merge_requests_slide"
5		-
	5	+ %img{:src => "/assets/ajax-loader-facebook.gif", :class => "dashboard-loader"}
6	6
7	7	:javascript
8	8	$(function(){
9	9	$(".dash-button").live("click", function() {
10	10	$(".dash-button").removeClass("active");
11	11	$(this).addClass("active");
12		- })
	12	+ });
	13	+
	14	+ $(".dash-button").live("ajax:before", function() {
	15	+ $(".dashboard-loader").show();
	16	+ });
	17	+
	18	+ $(".dash-button").live("ajax:complete", function() {
	19	+ $(".dashboard-loader").hide();
	20	+ });
13	21	});
...	...