Fix download spinner to work with CSS styles

A recent change replaced img elements with CSS icons for file actions.
This fix adjusts the logic to work properly with CSS icons instead of
images.

3 files changed, 42 insertions, 10 deletions

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index b65af1fa0f3..bfa5340fe09 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -793,6 +793,19 @@ html.ie8 #controls .button.new {
 	background-size: 16px 16px;
 }
 
+#filestable .filename .action .icon.hidden,
+#filestable .selectedActions a .icon.hidden,
+#controls .actions .button .icon.hidden {
+	display: none;
+}
+
+#filestable .filename .action .icon.loading,
+#filestable .selectedActions a .icon.loading,
+#controls .actions .button .icon.loading {
+	width: 15px;
+	height: 15px;
+}
+
 .app-files .actions .button.new .icon {
 	margin-bottom: 2px;
 }
diff --git a/apps/files/js/fileactions.js b/apps/files/js/fileactions.js
index 05ff2f0cbfa..69e32d500c4 100644
--- a/apps/files/js/fileactions.js
+++ b/apps/files/js/fileactions.js
@@ -659,19 +659,18 @@
 	 * Replaces the download icon with a loading spinner and vice versa
 	 * - also adds the class disabled to the passed in element
 	 *
-	 * @param downloadButtonElement download fileaction
+	 * @param {jQuery} $downloadButtonElement download fileaction
 	 * @param {boolean} showIt whether to show the spinner(true) or to hide it(false)
 	 */
-	OCA.Files.FileActions.updateFileActionSpinner = function(downloadButtonElement, showIt) {
-		var icon = downloadButtonElement.find('img'),
-			sourceImage = icon.attr('src');
-
-		if(showIt) {
-			downloadButtonElement.addClass('disabled');
-			icon.attr('src', sourceImage.replace('actions/download.svg', 'loading-small.gif'));
+	OCA.Files.FileActions.updateFileActionSpinner = function($downloadButtonElement, showIt) {
+		var $icon = $downloadButtonElement.find('.icon');
+		if (showIt) {
+			var $loadingIcon = $('<span class="icon loading"></span>');
+			$icon.after($loadingIcon);
+			$icon.addClass('hidden');
 		} else {
-			downloadButtonElement.removeClass('disabled');
-			icon.attr('src', sourceImage.replace('loading-small.gif', 'actions/download.svg'));
+			$downloadButtonElement.find('.loading').remove();
+			$downloadButtonElement.find('.icon').removeClass('hidden');
 		}
 	};
 
diff --git a/apps/files/tests/js/fileactionsSpec.js b/apps/files/tests/js/fileactionsSpec.js
index 470f2854f43..3f46a27d1f9 100644
--- a/apps/files/tests/js/fileactionsSpec.js
+++ b/apps/files/tests/js/fileactionsSpec.js
@@ -656,4 +656,24 @@ describe('OCA.Files.FileActions tests', function() {
 			});
 		});
 	});
+	describe('download spinner', function() {
+		var FileActions = OCA.Files.FileActions;
+		var $el;
+
+		beforeEach(function() {
+			$el = $('<a href="#"><span class="icon icon-download"></span><span>Download</span></a>');
+		});
+
+		it('replaces download icon with spinner', function() {
+			FileActions.updateFileActionSpinner($el, true);
+			expect($el.find('.icon.loading').length).toEqual(1);
+			expect($el.find('.icon.icon-download').hasClass('hidden')).toEqual(true);
+		});
+		it('replaces spinner back with download icon with spinner', function() {
+			FileActions.updateFileActionSpinner($el, true);
+			FileActions.updateFileActionSpinner($el, false);
+			expect($el.find('.icon.loading').length).toEqual(0);
+			expect($el.find('.icon.icon-download').hasClass('hidden')).toEqual(false);
+		});
+	});
 });