fix: fix loading icon display for NZB uploads in light and dark mode

nzbgetcom · Jan 5, 2025 · 8427e30 · 8427e30
1 parent a0e2702
commit 8427e30
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/webui/style.css b/webui/style.css
@@ -123,6 +123,11 @@ body {
     -moz-animation:spin 1s linear infinite;
     animation:spin 1s linear infinite;
 }
+
+.spinner.material-icon {
+    color: inherit;
+}
+
 @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
 @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
 @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

diff --git a/webui/upload.js b/webui/upload.js
@@ -195,9 +195,12 @@ var Upload = (new function($)
 			var file = selectedFiles[i];
 			var filename = file.name.replace(/\.queued$/g, '');
 			var html = '<a class="link-black" href="#" onclick="Upload.renameClick(' + files.length + ')" title="Click to rename">'+
-				'<table><tr><td width="18px" valign="top"><i class="material-icon">'+
-				'draft</i><img class="hide" style="vertical-align:top;margin-top:1px;" src="img/transmit-file.gif" width="16px" height="16px"></td>'+
-				'<td id="AddDialog_File' + files.length + '">' + Util.formatNZBName(filename) + '</td></tr></table></a>';
+				'<table><tr><td width="18px" valign="top">'+
+				'<i class="material-icon material-icon--draft">draft</i>'+
+				'<i class="material-icon material-icon--success hide">check_circle</i>'+
+				'<i class="material-icon material-icon--error hide">error</i>'+
+				'<i class="material-icon material-icon--progress spinner hide">progress_activity</i>'+
+				'</td><td id="AddDialog_File' + files.length + '">' + Util.formatNZBName(filename) + '</td></tr></table></a>';
 			$('#AddDialog_Files').append(html);
 			files.push(file);
 
@@ -334,8 +337,8 @@ var Upload = (new function($)
 			return;
 		}
 
-		$('#AddDialog_Files table:eq(' + index + ') img').show();
-		$('#AddDialog_Files table:eq(' + index + ') i').hide();
+		$('#AddDialog_Files table:eq(' + index + ') i.material-icon--progress').toggleClass('hide');
+		$('#AddDialog_Files table:eq(' + index + ') i.material-icon--draft').toggleClass('hide');
 
 		var reader = new FileReader();
 		reader.onload = function (event)
@@ -376,10 +379,13 @@ var Upload = (new function($)
 		if (result)
 		{
 			filesSuccess.push(files[index]);
+			$('#AddDialog_Files table:eq(' + index + ') i.material-icon--success').toggleClass('hide');
 		}
-		$('#AddDialog_Files table:eq(' + index + ') img').hide();
-		$('#AddDialog_Files table:eq(' + index + ') i').removeClass('icon-file').addClass(
-			result ? 'icon-ok' : 'icon-remove').show();
+		else
+		{
+			$('#AddDialog_Files table:eq(' + index + ') i.material-icon--error').toggleClass('hide');
+		}
+		$('#AddDialog_Files table:eq(' + index + ') i.material-icon--progress').toggleClass('hide');
 		index++;
 		fileNext();
 	}