feat(new-ui): make spinner more visible in gallery view

rnicholus · rnicholus · commit e2dfce486823 · 2015-03-18T11:24:53.000-05:00
This was done by making the thumbnail a bit opaque when the spinner is visible. The opacity of the thumbnail is changed via CSS when the file's LI contains a "qq-in-progress" class. The templating module adds this class to the file container when the spinner is shown, and removes it when the spinner is hidden. FineUploader#1297
diff --git a/client/fineuploader-gallery.css b/client/fineuploader-gallery.css
@@ -61,6 +61,7 @@
     text-align: center;
     top: 45%;
     opacity: 0.25;
+    filter: alpha(opacity=25);
 }
 .qq-gallery .qq-upload-drop-area, .qq-upload-extra-drop-area {
     position: absolute;
@@ -397,6 +398,11 @@
 
 /* Thumbnail
 ------------------------------------------ */
+.qq-gallery .qq-in-progress .qq-thumbnail-wrapper {
+    /* makes the spinner on top of the thumbnail more visible */
+    opacity: 0.5;
+    filter: alpha(opacity=50);
+}
 .qq-gallery .qq-thumbnail-wrapper {
     overflow: hidden;
     position: relative;
diff --git a/client/js/templating.js b/client/js/templating.js
@@ -18,6 +18,7 @@ qq.Templating = function(spec) {
         // This variable is duplicated in the DnD module since it can function as a standalone as well
         HIDE_DROPZONE_ATTR = "qq-hide-dropzone",
         DROPZPONE_TEXT_ATTR = "qq-drop-area-text",
+        IN_PROGRESS_CLASS = "qq-in-progress",
         isCancelDisabled = false,
         generatedThumbnails = 0,
         thumbnailQueueMonitorRunning = false,
@@ -938,10 +939,12 @@ qq.Templating = function(spec) {
         },
 
         hideSpinner: function(id) {
+            qq(getFile(id)).removeClass(IN_PROGRESS_CLASS);
             hide(getSpinner(id));
         },
 
         showSpinner: function(id) {
+            qq(getFile(id)).addClass(IN_PROGRESS_CLASS);
             show(getSpinner(id));
         },
 
diff --git a/client/js/uploader.api.js b/client/js/uploader.api.js
@@ -365,6 +365,7 @@
                 }
                 else {
                     qq(fileContainer).addClass(self._classes.fail);
+                    templating.showCancel(id);
 
                     if (templating.isRetryPossible() && !self._preventRetries[id]) {
                         qq(fileContainer).addClass(self._classes.retryable);
diff --git a/test/unit/templating.js b/test/unit/templating.js
@@ -175,9 +175,11 @@ describe("templating.js", function() {
         it("hides and shows spinner", function() {
             templating.hideSpinner(0);
             assert.ok($(fileContainer0).find(".qq-upload-spinner-selector").hasClass(HIDE_CSS));
+            assert.ok(!$(fileContainer0).hasClass("qq-in-progress"));
 
             templating.showSpinner(0);
             assert.ok(!$(fileContainer0).find(".qq-upload-spinner-selector").hasClass(HIDE_CSS));
+            assert.ok($(fileContainer0).hasClass("qq-in-progress"));
         });
 
         it("updates status text", function() {

Original file line number	Diff line number	Diff line change
`@@ -365,6 +365,7 @@`
`365`	`365`	`}`
`366`	`366`	`else {`
`367`	`367`	`qq(fileContainer).addClass(self._classes.fail);`
	`368`	`+ templating.showCancel(id);`
`368`	`369`
`369`	`370`	`if (templating.isRetryPossible() && !self._preventRetries[id]) {`
`370`	`371`	`qq(fileContainer).addClass(self._classes.retryable);`