Render alternative icon while loading an icon

xcmd-io · Sep 9, 2023 · 39dd5ae · 39dd5ae
1 parent 3d3e0e4
commit 39dd5ae
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 12 deletions.
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
@@ -50,3 +50,5 @@ jobs:
       uses: tauri-apps/tauri-action@v0
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+        TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
diff --git a/xcmd-base/src/lib.rs b/xcmd-base/src/lib.rs
@@ -114,6 +114,9 @@ pub struct FileInfo {
 	/// String identifying an icon. The value depends on icon type.
 	pub icon: String,
 
+	/// String identifying an alternative icon.
+	pub icon_alt: Option<String>,
+
 	/// "file" to use file at specified path to get an icon from operating system; "shell" to use just a path
 	pub icon_type: String,
 

diff --git a/xcmd-fs/src/main.rs b/xcmd-fs/src/main.rs
@@ -192,6 +192,7 @@ fn get_local_file(
 			if is_dir { "folder" } else { "file" },
 			encode(path.to_string_lossy().into_owned().as_str())
 		),
+		icon_alt: Some((if is_dir { "folder" } else { "file" }).to_string()),
 		icon_type: "file".to_string(),
 		name: name.clone(),
 		extension,

diff --git a/xcmd-s3/src/main.rs b/xcmd-s3/src/main.rs
@@ -194,6 +194,7 @@ async fn list_files(request: ListRequest) -> Result<ListResponse, Box<dyn Error>
 			date: 0,
 			extension: "".to_string(),
 			icon: "region".to_string(),
+			icon_alt: None,
 			icon_type: "".to_string(),
 			is_directory: true,
 			is_active: false,
@@ -226,6 +227,7 @@ async fn list_files(request: ListRequest) -> Result<ListResponse, Box<dyn Error>
 					date: 0,
 					extension: "".to_string(),
 					icon: "bucket".to_string(),
+					icon_alt: None,
 					icon_type: "".to_string(),
 					is_directory: true,
 					is_active,
@@ -252,6 +254,7 @@ async fn list_files(request: ListRequest) -> Result<ListResponse, Box<dyn Error>
 					date: 0,
 					extension: "".to_string(),
 					icon: "object".to_string(),
+					icon_alt: None,
 					icon_type: "".to_string(),
 					is_directory: true,
 					is_active,
@@ -275,6 +278,7 @@ async fn list_files(request: ListRequest) -> Result<ListResponse, Box<dyn Error>
 				date: 0,
 				extension: "".to_string(),
 				icon: "region".to_string(),
+				icon_alt: None,
 				icon_type: "".to_string(),
 				is_directory: true,
 				is_active,

diff --git a/xcmd-ssh/src/main.rs b/xcmd-ssh/src/main.rs
@@ -162,11 +162,8 @@ fn get_local_file(
 	Ok(FileInfo {
 		key: format!("{}{}", name, if is_dir { "/" } else { "" }),
 		is_directory: is_dir,
-		icon: if is_dir {
-			"folder".to_string()
-		} else {
-			"file".to_string()
-		}, // full_path,
+		icon: (if is_dir { "folder" } else { "file" }).to_string(), // full_path,
+		icon_alt: None,
 		icon_type: "file".to_string(),
 		name,
 		extension,

diff --git a/xcmd-tauri/dist/vtable/vtable.js b/xcmd-tauri/dist/vtable/vtable.js
@@ -254,10 +254,17 @@ class VTable {
 		this.tBody.dataset.range = range.toString();
 
 		const fns = {
-			icon: (item) => {
-				return this.dataSource.port
-					? `http://localhost:${this.dataSource.port}/icons/${item.icon}`
-					: (item.isDirectory ? 'folder.svg' : 'file.svg');
+			icon: (item, slot) => {
+				if (!this.dataSource.port) {
+					return item.isDirectory ? 'folder.svg' : 'file.svg';
+				}
+				if (item.iconAlt) {
+					const image = slot.cloneNode();
+					image.src = `http://localhost:${this.dataSource.port}/icons/${item.icon}`;
+					image.onload = function() { slot.parentNode.replaceChild(image, slot); };
+					return `http://localhost:${this.dataSource.port}/icons/${item.iconAlt}`;
+				}
+				return `http://localhost:${this.dataSource.port}/icons/${item.icon}`;
 			},
 			match: (item) => {
 				const text = item.name;
@@ -297,13 +304,13 @@ class VTable {
 				slot.src = item[slot.dataset.src];
 			}
 			for (const slot of tBodyRow.querySelectorAll('*[data-text-fn]')) {
-				slot.textContent = fns[slot.dataset.textFn](item);
+				slot.textContent = fns[slot.dataset.textFn](item, slot);
 			}
 			for (const slot of tBodyRow.querySelectorAll('*[data-html-fn]')) {
-				slot.innerHTML = fns[slot.dataset.htmlFn](item);
+				slot.innerHTML = fns[slot.dataset.htmlFn](item, slot);
 			}
 			for (const slot of tBodyRow.querySelectorAll('*[data-src-fn]')) {
-				slot.src = fns[slot.dataset.srcFn](item);
+				slot.src = fns[slot.dataset.srcFn](item, slot);
 			}
 			newTBody.appendChild(tBodyRow);
 		}