Added an ajax indicator for all ajax calls. Also removed highlight effects on my page layout edition.

git-svn-id: http://redmine.rubyforge.org/svn/trunk@485 e93f8b46-1217-0410-a6f0-8f06a7374b81

app/views/layouts/base.rhtml

@@ -115,12 +115,16 @@
 			</ul>
 		<% end %>
 	</div>
-
+	
 	<div id="content">
 		<% if flash[:notice] %><p style="color: green"><%= flash[:notice] %></p><% end %>		
 		<%= yield %>	
 	</div>
 	
+	<div id="ajax-indicator" style="display:none;">
+	   <span><%= l(:label_loading) %></span>
+	</div>
+
 	<div id="footer">
 		<p><a href="http://redmine.rubyforge.org/">redMine</a> <small><%= Redmine::VERSION %> &copy 2006-2007 Jean-Philippe Lang</small></p>
 	</div>

app/views/my/_block.rhtml

@@ -3,9 +3,7 @@
     <div style="float:right;margin-right:16px;z-index:500;">
     <%= link_to_remote "", {
         :url => { :action => "remove_block", :block => block_name },
-        :complete => "removeBlock('block_#{block_name}')",
+        :complete => "removeBlock('block_#{block_name}')" },
-        :loading => "Element.show('indicator')",
-        :loaded => "Element.hide('indicator')" },
         :class => "close-icon"
          %>        
     </div>

app/views/my/page_layout.rhtml

@@ -5,9 +5,9 @@ function recreateSortables() {
     Sortable.destroy('list-left');
     Sortable.destroy('list-right');
     
-	Sortable.create("list-top", {constraint:false, containment:['list-top','list-left','list-right'], dropOnEmpty:true, handle:'handle', onUpdate:function(){new Ajax.Request('/my/order_blocks?group=top', {asynchronous:true, evalScripts:true, onComplete:function(request){new Effect.Highlight("list-top",{});}, onLoaded:function(request){Element.hide('indicator')}, onLoading:function(request){Element.show('indicator')}, parameters:Sortable.serialize("list-top")})}, only:'mypage-box', tag:'div'})
+	Sortable.create("list-top", {constraint:false, containment:['list-top','list-left','list-right'], dropOnEmpty:true, handle:'handle', onUpdate:function(){new Ajax.Request('/my/order_blocks?group=top', {asynchronous:true, evalScripts:true, parameters:Sortable.serialize("list-top")})}, only:'mypage-box', tag:'div'})
-	Sortable.create("list-left", {constraint:false, containment:['list-top','list-left','list-right'], dropOnEmpty:true, handle:'handle', onUpdate:function(){new Ajax.Request('/my/order_blocks?group=left', {asynchronous:true, evalScripts:true, onComplete:function(request){new Effect.Highlight("list-left",{});}, onLoaded:function(request){Element.hide('indicator')}, onLoading:function(request){Element.show('indicator')}, parameters:Sortable.serialize("list-left")})}, only:'mypage-box', tag:'div'})
+	Sortable.create("list-left", {constraint:false, containment:['list-top','list-left','list-right'], dropOnEmpty:true, handle:'handle', onUpdate:function(){new Ajax.Request('/my/order_blocks?group=left', {asynchronous:true, evalScripts:true, parameters:Sortable.serialize("list-left")})}, only:'mypage-box', tag:'div'})
-	Sortable.create("list-right", {constraint:false, containment:['list-top','list-left','list-right'], dropOnEmpty:true, handle:'handle', onUpdate:function(){new Ajax.Request('/my/order_blocks?group=right', {asynchronous:true, evalScripts:true, onComplete:function(request){new Effect.Highlight("list-right",{});}, onLoaded:function(request){Element.hide('indicator')}, onLoading:function(request){Element.show('indicator')}, parameters:Sortable.serialize("list-right")})}, only:'mypage-box', tag:'div'})
+	Sortable.create("list-right", {constraint:false, containment:['list-top','list-left','list-right'], dropOnEmpty:true, handle:'handle', onUpdate:function(){new Ajax.Request('/my/order_blocks?group=right', {asynchronous:true, evalScripts:true, parameters:Sortable.serialize("list-right")})}, only:'mypage-box', tag:'div'})
 }
 
 function updateSelect() {
@@ -35,7 +35,6 @@ function removeBlock(block) {
 </script>
 
 <div class="contextual">
-<span id="indicator" style="display:none"><%= image_tag "loading.gif", :align => "absmiddle" %></span>
 <% form_tag({:action => "add_block"}, :id => "block-form") do %>
 <%= select_tag 'block', "<option></option>" + options_for_select(@block_options), :id => "block-select" %>
 <%= link_to_remote l(:button_add),
@@ -43,9 +42,7 @@ function removeBlock(block) {
             :with => "Form.serialize('block-form')",
             :update => "list-top",
             :position => :top,
-            :complete => "afterAddBlock();",
+            :complete => "afterAddBlock();"
-            :loading => "Element.show('indicator')",
-            :loaded => "Element.hide('indicator')"
            }, :class => 'icon icon-add'
              %>
 <% end %>
@@ -83,10 +80,7 @@ function removeBlock(block) {
       :dropOnEmpty => true,
       :containment => ['list-top', 'list-left', 'list-right'],
       :constraint => false,
-      :complete => visual_effect(:highlight, 'list-top'), 
+      :url => { :action => "order_blocks", :group => "top" }
-      :url => { :action => "order_blocks", :group => "top" },
-      :loading => "Element.show('indicator')",
-      :loaded => "Element.hide('indicator')"
        %>
       
       
@@ -97,10 +91,8 @@ function removeBlock(block) {
       :dropOnEmpty => true,
       :containment => ['list-top', 'list-left', 'list-right'],
       :constraint => false,
-      :complete => visual_effect(:highlight, 'list-left'), 
+      :url => { :action => "order_blocks", :group => "left" }
-      :url => { :action => "order_blocks", :group => "left" },
+       %>
-      :loading => "Element.show('indicator')",
-      :loaded => "Element.hide('indicator')" %>
       
 <%= sortable_element 'list-right', 
       :tag => 'div',
@@ -109,9 +101,7 @@ function removeBlock(block) {
       :dropOnEmpty => true,
       :containment => ['list-top', 'list-left', 'list-right'],
       :constraint => false,
-      :complete => visual_effect(:highlight, 'list-right'), 
+      :url => { :action => "order_blocks", :group => "right" }
-      :url => { :action => "order_blocks", :group => "right" },
+       %>
-      :loading => "Element.show('indicator')",
-      :loaded => "Element.hide('indicator')" %>
       
-<%= javascript_tag "updateSelect()" %>
+<%= javascript_tag "updateSelect()" %>

app/views/wiki/edit.rhtml

@@ -18,12 +18,8 @@
                        { :url => { :controller => 'wiki', :action => 'preview', :id => @project, :page => @page.title },
                          :method => 'get',
                          :update => 'preview',
-                         :with => "Form.serialize('wiki_form')",
+                         :with => "Form.serialize('wiki_form')"
-                         :loading => "Element.show('indicator')",
+                       } %></p>
-                         :loaded => "Element.hide('indicator')"
-                       } %>
-   <span id="indicator" style="display:none"><%= image_tag "loading.gif", :align => "absmiddle" %></span>
-</p>
 
 <% end %>
 

lang/de.yml

@@ -362,6 +362,7 @@ label_permissions_report: Permissions report
 label_watched_issues: Watched issues
 label_related_issues: Related issues
 label_applied_status: Applied status
+label_loading: Loading...
 
 button_login: Einloggen
 button_submit: OK

lang/en.yml

@@ -362,6 +362,7 @@ label_permissions_report: Permissions report
 label_watched_issues: Watched issues
 label_related_issues: Related issues
 label_applied_status: Applied status
+label_loading: Loading...
 
 button_login: Login
 button_submit: Submit

lang/es.yml

@@ -362,6 +362,7 @@ label_permissions_report: Permissions report
 label_watched_issues: Watched issues
 label_related_issues: Related issues
 label_applied_status: Applied status
+label_loading: Loading...
 
 button_login: Conexión
 button_submit: Someter

lang/fr.yml

@@ -362,6 +362,7 @@ label_permissions_report: Synthèse des permissions
 label_watched_issues: Demandes surveillées
 label_related_issues: Demandes liées
 label_applied_status: Statut appliqué
+label_loading: Chargement...
 
 button_login: Connexion
 button_submit: Soumettre

lang/it.yml

@@ -362,6 +362,7 @@ label_permissions_report: Report permessi
 label_watched_issues: Watched issues
 label_related_issues: Related issues
 label_applied_status: Applied status
+label_loading: Loading...
 
 button_login: Login
 button_submit: Invia

lang/ja.yml

@@ -363,6 +363,7 @@ label_permissions_report: 権限レポート
 label_watched_issues: Watched issues
 label_related_issues: Related issues
 label_applied_status: Applied status
+label_loading: Loading...
 
 button_login: ログイン
 button_submit: 変更

lang/pt.yml

@@ -362,6 +362,7 @@ label_permissions_report: Relatorio de permissoes
 label_watched_issues: Watched issues
 label_related_issues: Related issues
 label_applied_status: Applied status
+label_loading: Loading...
 
 button_login: Login
 button_submit: Enviar

lang/zh.yml

@@ -365,6 +365,7 @@ label_permissions_report: Permissions report
 label_watched_issues: Watched issues
 label_related_issues: Related issues
 label_applied_status: Applied status
+label_loading: Loading...
 
 button_login: 登录
 button_submit: 提交

public/javascripts/application.js

@@ -30,4 +30,18 @@ function showTab(name) {
 	Element.show('tab-content-' + name);
 	Element.addClassName('tab-' + name, "selected");
 	return false;
-}
+}
+
+/* shows and hides ajax indicator */
+Ajax.Responders.register({
+    onCreate: function(){
+        if ($('ajax-indicator') && Ajax.activeRequestCount > 0) {
+            Element.show('ajax-indicator');
+        }
+    },
+    onComplete: function(){
+        if ($('ajax-indicator') && Ajax.activeRequestCount == 0) {
+            Element.hide('ajax-indicator');
+        }
+    }
+});

public/stylesheets/application.css

@@ -636,3 +636,30 @@ div.wiki code {
 }
 
 #preview .preview { background: #fafbfc url(../images/draft.png); }
+
+#ajax-indicator {
+position: absolute; /* fixed not supported by IE */
+background-color:#eee;
+border: 1px solid #bbb;
+top:35%;
+left:40%;
+width:20%;
+font-weight:bold;
+text-align:center;
+padding:0.6em;
+z-index:100;
+filter:alpha(opacity=50);
+-moz-opacity:0.5;
+opacity: 0.5;
+-khtml-opacity: 0.5;
+}
+
+html>body #ajax-indicator { position: fixed; }
+
+#ajax-indicator span {
+background-position: 0% 40%;
+background-repeat: no-repeat;
+background-image: url(../images/loading.gif);
+padding-left: 26px;
+vertical-align: bottom;
+}