[ARVADOS] created: 289a84cacdb0d3c9ab1d9876610af5ca6c224a88
git at public.curoverse.com
git at public.curoverse.com
Fri Jun 27 10:20:27 EDT 2014
at 289a84cacdb0d3c9ab1d9876610af5ca6c224a88 (commit)
commit 289a84cacdb0d3c9ab1d9876610af5ca6c224a88
Author: Tom Clegg <tom at curoverse.com>
Date: Fri Jun 27 10:17:09 2014 -0400
3099: Fix up loading spinners.
* Work around Rails asset pipeline bug by avoiding "-" in image filenames.
* Always use asset helpers: src="/assets/foo.gif" only works in dev mode.
* Center loading spinners.
* Use a "spinner" class to identify spinners in "remove spinner" code.
diff --git a/apps/workbench/app/assets/images/ajax-loader.gif b/apps/workbench/app/assets/images/spinner_32px.gif
similarity index 100%
rename from apps/workbench/app/assets/images/ajax-loader.gif
rename to apps/workbench/app/assets/images/spinner_32px.gif
diff --git a/apps/workbench/app/assets/javascripts/infinite_scroll.js b/apps/workbench/app/assets/javascripts/infinite_scroll.js
index 00db2ba..44584d9 100644
--- a/apps/workbench/app/assets/javascripts/infinite_scroll.js
+++ b/apps/workbench/app/assets/javascripts/infinite_scroll.js
@@ -14,7 +14,7 @@ function maybe_load_more_content() {
return;
// Don't start another request until this one finishes
$(container).attr('data-infinite-content-href', null);
- $(container).append('<img src="/assets/ajax-loader.gif" class="infinite-scroller-spinner"></img>');
+ $(container).append('<div class="spinner spinner-32px spinner-h-center infinite-scroller-spinner"></div>');
$.ajax(src,
{dataType: 'json',
type: 'GET',
@@ -33,7 +33,7 @@ function maybe_load_more_content() {
$(this.container).attr('data-infinite-content-href', this.src);
}).
done(function(data, status, jqxhr) {
- $(this.container).find(".infinite-scroller-spinner").detach();
+ $(this.container).find(".spinner").detach();
$(this.container).append(data.content);
$(this.container).attr('data-infinite-content-href', data.next_page_href);
});
diff --git a/apps/workbench/app/assets/javascripts/select_modal.js b/apps/workbench/app/assets/javascripts/select_modal.js
index 9107a01..0a58213 100644
--- a/apps/workbench/app/assets/javascripts/select_modal.js
+++ b/apps/workbench/app/assets/javascripts/select_modal.js
@@ -16,7 +16,7 @@ $(document).on('click', '.selectable', function() {
prop('disabled', !any);
if ($this.hasClass('active')) {
- $(".modal-dialog-preview-pane").html('<img src="/assets/ajax-loader.gif"></img>');
+ $(".modal-dialog-preview-pane").html('<div class="spinner spinner-32px spinner-h-center spinner-v-center"></div>');
$.ajax($this.attr('data-preview-href'),
{dataType: "html"}).
done(function(data, status, jqxhr) {
diff --git a/apps/workbench/app/assets/stylesheets/loading.css b/apps/workbench/app/assets/stylesheets/loading.css.scss.erb
similarity index 78%
rename from apps/workbench/app/assets/stylesheets/loading.css
rename to apps/workbench/app/assets/stylesheets/loading.css.scss.erb
index 640f702..9f74866 100644
--- a/apps/workbench/app/assets/stylesheets/loading.css
+++ b/apps/workbench/app/assets/stylesheets/loading.css.scss.erb
@@ -2,6 +2,27 @@
opacity: 0;
}
+.spinner {
+ /* placeholder for stuff like $.find('.spinner').detach() */
+}
+
+.spinner-32px {
+ background-image: url('<%= asset_path('spinner_32px.gif') %>');
+ background-repeat: no-repeat;
+ width: 32px;
+ height: 32px;
+}
+
+.spinner-h-center {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.spinner-v-center {
+ position: relative;
+ top: 45%;
+}
+
.rotating {
color: #f00;
/* Chrome and Firefox, at least in Linux, render a horrible shaky
diff --git a/apps/workbench/app/views/application/_choose.js.erb b/apps/workbench/app/views/application/_choose.js.erb
index 6521b0c..b033c9b 100644
--- a/apps/workbench/app/views/application/_choose.js.erb
+++ b/apps/workbench/app/views/application/_choose.js.erb
@@ -6,7 +6,7 @@ $('body > .modal-container .modal .modal-footer .btn-primary').
attr('data-method', '<%= j params[:action_method] %>').
data('action-data', <%= raw params[:action_data] %>);
$(".chooser-show-project").on("click", function() {
- $("#choose-scroll").html("<%=j image_tag 'ajax-loader.gif' %>");
+ $("#choose-scroll").html("<div class=\"spinner spinner-32px spinner-h-center\"></div>");
$(".modal-dialog-preview-pane").html('');
var t = $(this);
var d = {
diff --git a/apps/workbench/app/views/application/_content.html.erb b/apps/workbench/app/views/application/_content.html.erb
index 02f2e6f..c9522de 100644
--- a/apps/workbench/app/views/application/_content.html.erb
+++ b/apps/workbench/app/views/application/_content.html.erb
@@ -85,7 +85,7 @@
<%= render(partial: 'show_' + pane.downcase,
locals: { comparable: comparable, objects: @objects }) %>
<% else %>
- <%= image_tag 'ajax-loader.gif' %>
+ <div class="spinner spinner-32px spinner-h-center"></div>
<% end %>
</div>
</div>
diff --git a/apps/workbench/app/views/jobs/_show_log.html.erb b/apps/workbench/app/views/jobs/_show_log.html.erb
index 743045c..f1466aa 100644
--- a/apps/workbench/app/views/jobs/_show_log.html.erb
+++ b/apps/workbench/app/views/jobs/_show_log.html.erb
@@ -43,16 +43,16 @@ var makeFilter = function() {
<% logcollection = Collection.find @object.log %>
<% if logcollection %>
$.ajax('<%=j url_for logcollection %>/<%=j logcollection.files[0][1] %>').
- done(function(data, status, jqxhr) {
- logViewer.filter();
- addToLogViewer(logViewer, data.split("\n"), taskState);
- logViewer.filter(makeFilter());
- generateJobOverview("#log-viewer-overview", logViewer, taskState);
- $("#logloadspinner").detach();
- }).
- fail(function(jqxhr, status, error) {
- $("#logloadspinner").detach();
- });
+ done(function(data, status, jqxhr) {
+ logViewer.filter();
+ addToLogViewer(logViewer, data.split("\n"), taskState);
+ logViewer.filter(makeFilter());
+ generateJobOverview("#log-viewer-overview", logViewer, taskState);
+ $("#log-viewer .spinner").detach();
+ }).
+ fail(function(jqxhr, status, error) {
+ $("#log-viewer .spinner").detach();
+ });
<% end %>
<% else %>
<%# Live log loading not implemented yet. %>
@@ -204,7 +204,7 @@ $("#set-show-failed-only").on("click", function() {
</table>
<% if @object.log and logcollection %>
- <%= image_tag 'ajax-loader.gif', id: "logloadspinner" %>
+ <div class="spinner spinner-32px"></div>
<% end %>
</div>
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list