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
This commit is contained in:
parent
c1a18a2889
commit
5db3396c07
|
@ -121,6 +121,10 @@
|
|||
<%= 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 %> © 2006-2007 Jean-Philippe Lang</small></p>
|
||||
</div>
|
||||
|
|
|
@ -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}')",
|
||||
:loading => "Element.show('indicator')",
|
||||
:loaded => "Element.hide('indicator')" },
|
||||
:complete => "removeBlock('block_#{block_name}')" },
|
||||
:class => "close-icon"
|
||||
%>
|
||||
</div>
|
||||
|
|
|
@ -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-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-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-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, 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, 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();",
|
||||
:loading => "Element.show('indicator')",
|
||||
:loaded => "Element.hide('indicator')"
|
||||
:complete => "afterAddBlock();"
|
||||
}, :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" },
|
||||
:loading => "Element.show('indicator')",
|
||||
:loaded => "Element.hide('indicator')"
|
||||
:url => { :action => "order_blocks", :group => "top" }
|
||||
%>
|
||||
|
||||
|
||||
|
@ -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" },
|
||||
:loading => "Element.show('indicator')",
|
||||
:loaded => "Element.hide('indicator')" %>
|
||||
:url => { :action => "order_blocks", :group => "left" }
|
||||
%>
|
||||
|
||||
<%= 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" },
|
||||
:loading => "Element.show('indicator')",
|
||||
:loaded => "Element.hide('indicator')" %>
|
||||
:url => { :action => "order_blocks", :group => "right" }
|
||||
%>
|
||||
|
||||
<%= javascript_tag "updateSelect()" %>
|
|
@ -18,12 +18,8 @@
|
|||
{ :url => { :controller => 'wiki', :action => 'preview', :id => @project, :page => @page.title },
|
||||
:method => 'get',
|
||||
:update => 'preview',
|
||||
:with => "Form.serialize('wiki_form')",
|
||||
:loading => "Element.show('indicator')",
|
||||
:loaded => "Element.hide('indicator')"
|
||||
} %>
|
||||
<span id="indicator" style="display:none"><%= image_tag "loading.gif", :align => "absmiddle" %></span>
|
||||
</p>
|
||||
:with => "Form.serialize('wiki_form')"
|
||||
} %></p>
|
||||
|
||||
<% end %>
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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: 変更
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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: 提交
|
||||
|
|
|
@ -31,3 +31,17 @@ function showTab(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');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue