[ARVADOS] updated: 953c8ece5b55913bd965a29e6a6ce08ccb7c935d
git at public.curoverse.com
git at public.curoverse.com
Tue Feb 11 18:59:22 EST 2014
Summary of changes:
.../app/assets/javascripts/application.js | 7 +-
apps/workbench/app/assets/stylesheets/loading.css | 390 ++------------------
.../app/views/layouts/application.html.erb | 7 +-
apps/workbench/app/views/users/home.js.erb | 2 +-
4 files changed, 37 insertions(+), 369 deletions(-)
via 953c8ece5b55913bd965a29e6a6ce08ccb7c935d (commit)
from 4893194033b3d1765be13f9bf21058ebc91cf42e (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 953c8ece5b55913bd965a29e6a6ce08ccb7c935d
Author: Tom Clegg <tom at curoverse.com>
Date: Tue Feb 11 15:58:57 2014 -0800
Replace weird "loading" animation with a nice plain glyphicon.
diff --git a/apps/workbench/app/assets/javascripts/application.js b/apps/workbench/app/assets/javascripts/application.js
index 4c83198..bb988d7 100644
--- a/apps/workbench/app/assets/javascripts/application.js
+++ b/apps/workbench/app/assets/javascripts/application.js
@@ -43,12 +43,9 @@ jQuery(function($){
});
$(document).
on('ajax:send', function(e, xhr) {
- $('.loading').show();
+ $('.loading').fadeTo('fast', 1);
}).
on('ajax:complete', function(e, status) {
- $('.loading').hide();
+ $('.loading').fadeOut('fast', 0);
});
})(jQuery);
-
-
-
diff --git a/apps/workbench/app/assets/stylesheets/loading.css b/apps/workbench/app/assets/stylesheets/loading.css
index c76f104..7a0736a 100644
--- a/apps/workbench/app/assets/stylesheets/loading.css
+++ b/apps/workbench/app/assets/stylesheets/loading.css
@@ -1,374 +1,46 @@
-/* http://codepen.io/alucard11/pen/IxLDJ */
-
.loading {
- background: #1b1b1b;
-}
-
-.loading .socket{
- width: 200px;
- height: 200px;
- position: absolute;
- left: 50%;
- margin-left: -100px;
- top: 50%;
- margin-top: -100px;
-}
-
-.loading .hex-brick{
- background: #ABF8FF;
- width: 30px;
- height: 17px;
- position: absolute;
- top: 5px;
- animation-name: fade;
- animation-duration: 2s;
- animation-iteration-count: infinite;
- -webkit-animation-name: fade;
- -webkit-animation-duration: 2s;
- -webkit-animation-iteration-count: infinite;
-}
-
-.loading .h2{
- transform: rotate(60deg);
- -webkit-transform: rotate(60deg);
-}
-
-.loading .h3{
- transform: rotate(-60deg);
- -webkit-transform: rotate(-60deg);
-}
-
-.loading .gel{
- height: 30px;
- width: 30px;
- transition: all .3s;
- -webkit-transition: all .3s;
- position: absolute;
- top: 50%;
- left: 50%;
-}
-
-.loading .center-gel{
- margin-left: -15px;
- margin-top: -15px;
-
- animation-name: pulse;
- animation-duration: 2s;
- animation-iteration-count: infinite;
- -webkit-animation-name: pulse;
- -webkit-animation-duration: 2s;
- -webkit-animation-iteration-count: infinite;
-}
-
-.loading .c1{
- margin-left: -47px;
- margin-top: -15px;
-}
-
-.loading .c2{
- margin-left: -31px;
- margin-top: -43px;
-}
-
-.loading .c3{
- margin-left: 1px;
- margin-top: -43px;
-}
-
-.loading .c4{
- margin-left: 17px;
- margin-top: -15px;
-}
-.loading .c5{
- margin-left: -31px;
- margin-top: 13px;
-}
-
-.loading .c6{
- margin-left: 1px;
- margin-top: 13px;
-}
-
-.loading .c7{
- margin-left: -63px;
- margin-top: -43px;
-}
-
-.loading .c8{
- margin-left: 33px;
- margin-top: -43px;
-}
-
-.loading .c9{
- margin-left: -15px;
- margin-top: 41px;
-}
-
-.loading .c10{
- margin-left: -63px;
- margin-top: 13px;
-}
-
-.loading .c11{
- margin-left: 33px;
- margin-top: 13px;
-}
-
-.loading .c12{
- margin-left: -15px;
- margin-top: -71px;
-}
-
-.loading .c13{
- margin-left: -47px;
- margin-top: -71px;
-}
-
-.loading .c14{
- margin-left: 17px;
- margin-top: -71px;
-}
-
-.loading .c15{
- margin-left: -47px;
- margin-top: 41px;
-}
-
-.loading .c16{
- margin-left: 17px;
- margin-top: 41px;
-}
-
-.c17{
- margin-left: -79px;
- margin-top: -15px;
-}
-
-.loading .c18{
- margin-left: 49px;
- margin-top: -15px;
-}
-
-.loading .c19{
- margin-left: -63px;
- margin-top: -99px;
-}
-
-.loading .c20{
- margin-left: 33px;
- margin-top: -99px;
-}
-
-.loading .c21{
- margin-left: 1px;
- margin-top: -99px;
-}
-
-.loading .c22{
- margin-left: -31px;
- margin-top: -99px;
-}
-
-.loading .c23{
- margin-left: -63px;
- margin-top: 69px;
-}
-
-.loading .c24{
- margin-left: 33px;
- margin-top: 69px;
-}
-
-.loading .c25{
- margin-left: 1px;
- margin-top: 69px;
-}
-
-.loading .c26{
- margin-left: -31px;
- margin-top: 69px;
-}
-
-.loading .c27{
- margin-left: -79px;
- margin-top: -15px;
-}
-
-.loading .c28{
- margin-left: -95px;
- margin-top: -43px;
-}
-
-.loading .c29{
- margin-left: -95px;
- margin-top: 13px;
-}
-
-.loading .c30{
- margin-left: 49px;
- margin-top: 41px;
+ opacity: 0;
}
-.loading .c31{
- margin-left: -79px;
- margin-top: -71px;
-}
-
-.loading .c32{
- margin-left: -111px;
- margin-top: -15px;
-}
-
-.loading .c33{
- margin-left: 65px;
- margin-top: -43px;
-}
-
-.loading .c34{
- margin-left: 65px;
- margin-top: 13px;
-}
-
-.loading .c35{
- margin-left: -79px;
- margin-top: 41px;
-}
-
-.loading .c36{
- margin-left: 49px;
- margin-top: -71px;
-}
-
-.loading .c37{
- margin-left: 81px;
- margin-top: -15px;
-}
-
-.loading .r1{
- animation-name: pulse;
+.rotating {
+ animation-name: rotateThis;
animation-duration: 2s;
animation-iteration-count: infinite;
- animation-delay: .2s;
- -webkit-animation-name: pulse;
- -webkit-animation-duration: 2s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-delay: .2s;
-}
+ animation-timing-function: linear;
+ -moz-animation-name: rotateThis;
+ -moz-animation-duration: 2s;
+ -moz-animation-iteration-count: infinite;
+ -moz-animation-timing-function: linear;
+ -ms-animation-name: rotateThis;
+ -ms-animation-duration: 2s;
+ -ms-animation-iteration-count: infinite;
+ -ms-animation-timing-function: linear;
+ /* Chrome, at least in Linux, renders a horrible shaky mess -- better
+ not to bother.
-.loading .r2{
- animation-name: pulse;
- animation-duration: 2s;
- animation-iteration-count: infinite;
- animation-delay: .4s;
- -webkit-animation-name: pulse;
- -webkit-animation-duration: 2s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-delay: .4s;
-}
-
-.loading .r3{
- animation-name: pulse;
- animation-duration: 2s;
- animation-iteration-count: infinite;
- animation-delay: .6s;
- -webkit-animation-name: pulse;
- -webkit-animation-duration: 2s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-delay: .6s;
+ -webkit-animation-name: rotateThis;
+ -webkit-animation-duration: 2s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-timing-function: linear;
+ */
}
-.loading .r1 > .hex-brick{
- animation-name: fade;
- animation-duration: 2s;
- animation-iteration-count: infinite;
- animation-delay: .2s;
- -webkit-animation-name: fade;
- -webkit-animation-duration: 2s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-delay: .2s;
-}
-
-.loading .r2 > .hex-brick{
- animation-name: fade;
- animation-duration: 2s;
- animation-iteration-count: infinite;
- animation-delay: .4s;
- -webkit-animation-name: fade;
- -webkit-animation-duration: 2s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-delay: .4s;
-}
-
-.loading .r3 > .hex-brick{
- animation-name: fade;
- animation-duration: 2s;
- animation-iteration-count: infinite;
- animation-delay: .6s;
- -webkit-animation-name: fade;
- -webkit-animation-duration: 2s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-delay: .6s;
-}
-
-
- at keyframes pulse{
- 0%{
- -webkit-transform: scale(1);
- transform: scale(1);
- }
-
- 50%{
- -webkit-transform: scale(0.01);
- transform: scale(0.01);
- }
-
- 100%{
- -webkit-transform: scale(1);
- transform: scale(1);
- }
+ at keyframes rotateThis {
+ from { transform: rotate( 0deg ); }
+ to { transform: rotate( 360deg ); }
}
- at keyframes fade{
- 0%{
- background: #ABF8FF;
- }
-
- 50%{
- background: #90BBBF;
- }
-
- 100%{
- background: #ABF8FF;
- }
+ at -webkit-keyframes rotateThis {
+ from { -webkit-transform: rotate( 0deg ); }
+ to { -webkit-transform: rotate( 360deg ); }
}
- at -webkit-keyframes pulse{
- 0%{
- -webkit-transform: scale(1);
- transform: scale(1);
- }
-
- 50%{
- -webkit-transform: scale(0.01);
- transform: scale(0.01);
- }
-
- 100%{
- -webkit-transform: scale(1);
- transform: scale(1);
- }
+ at -moz-keyframes rotateThis {
+ from { -moz-transform: rotate( 0deg ); }
+ to { -moz-transform: rotate( 360deg ); }
}
- at -webkit-keyframes fade{
- 0%{
- background: #ABF8FF;
- }
-
- 50%{
- background: #389CA6;
- }
-
- 100%{
- background: #ABF8FF;
- }
+ at -ms-keyframes rotateThis {
+ from { -ms-transform: rotate( 0deg ); }
+ to { -ms-transform: rotate( 360deg ); }
}
diff --git a/apps/workbench/app/views/layouts/application.html.erb b/apps/workbench/app/views/layouts/application.html.erb
index 30d454e..24991cd 100644
--- a/apps/workbench/app/views/layouts/application.html.erb
+++ b/apps/workbench/app/views/layouts/application.html.erb
@@ -114,13 +114,11 @@
<ul class="nav navbar-nav navbar-right">
- <% if current_user %>
<li>
- <div class="loading" style="transform: translate(-20px,20px) scale(0.1,0.1); -ms-transform: translate(-20px,20px) scale(0.1,0.1); -webkit-transform: translate(-20px,20px) scale(0.1,0.1); display: none">
- <%= render partial: 'loading' %>
- </div>
+ <a><i class="rotating loading glyphicon glyphicon-refresh"></i></a>
</li>
+ <% if current_user %>
<!-- XXX placeholder for this when search is implemented
<li>
<form class="navbar-form" role="search">
@@ -247,5 +245,6 @@
<%= javascript_tag do %>
<%= yield :footer_js %>
<% end %>
+
</body>
</html>
diff --git a/apps/workbench/app/views/users/home.js.erb b/apps/workbench/app/views/users/home.js.erb
index 401c6b1..b67a933 100644
--- a/apps/workbench/app/views/users/home.js.erb
+++ b/apps/workbench/app/views/users/home.js.erb
@@ -1,4 +1,4 @@
var new_content = "<%= escape_javascript(render partial: 'tables') %>";
if ($('div#home-tables').html() != new_content)
$('div#home-tables').html(new_content);
-$('.loading').hide();
+$(document).trigger('ajax:complete');
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list