Fix busy state loading animation in files

Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>
nextcloud · Sep 21, 2017 · da1dc37 · da1dc37
1 parent 87d1d3e
commit da1dc37
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
@@ -296,11 +296,19 @@ table td.filename a.name {
 	line-height: 50px;
 	padding: 0;
 }
+table td.filename label.icon-loading-small {
+	&:after {
+		z-index: 10;
+	}
+	.thumbnail {
+		opacity: 0.2;
+	}
+}
 table td.filename .thumbnail {
 	display: inline-block;
 	width: 32px;
 	height: 32px;
-	margin-left: 8px;
+	margin-left: 9px;
 	margin-top: 9px;
 	cursor: pointer;
 	float: left;

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
@@ -2540,11 +2540,9 @@
 				$tr.toggleClass('busy', state);
 
 				if (state) {
-					$thumbEl.attr('data-oldimage', $thumbEl.css('background-image'));
-					$thumbEl.css('background-image', 'url('+ OC.imagePath('core', 'loading.gif') + ')');
+					$thumbEl.parent().addClass('icon-loading-small');
 				} else {
-					$thumbEl.css('background-image', $thumbEl.attr('data-oldimage'));
-					$thumbEl.removeAttr('data-oldimage');
+					$thumbEl.parent().addClass('icon-loading-small');
 				}
 			});
 		},