[filebrowser] etter extension handling, icon for known types, misc bugfixes

bin/style.css

@@ -4480,7 +4480,7 @@ fancy-toolbar.shadow {
   position: relative;
   background-color: #272727;
   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
-  z-index: 999;
+  z-index: 1;
 }
 fancy-button {
   position: relative;
@@ -5327,6 +5327,7 @@ fancy-gallery {
   min-width: 0;
   min-height: 0;
   width: 100%;
+  height: 100%;
 }
 fancy-gallery,
 fancy-gallery * {
@@ -5360,9 +5361,10 @@ fancy-gallery fancy-scroll fancy-item-container fancy-item:hover {
 fancy-gallery fancy-scroll fancy-item-container fancy-item.details {
   padding: 0;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   box-shadow: unset;
   border-radius: unset;
+  gap: 0.2em;
 }
 fancy-gallery fancy-scroll fancy-item-container fancy-item fancy-thumbnail {
   flex: 0 1;
@@ -5370,6 +5372,13 @@ fancy-gallery fancy-scroll fancy-item-container fancy-item fancy-thumbnail {
   width: 100%;
   height: 100%;
 }
+fancy-gallery fancy-scroll fancy-item-container fancy-item .icon-placement {
+  position: absolute;
+  color: white;
+  bottom: 2px;
+  right: 2px;
+  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.7));
+}
 fancy-gallery fancy-scroll fancy-item-container fancy-item .thumb {
   transform: unset;
 }
@@ -5401,9 +5410,16 @@ fancy-gallery fancy-scroll fancy-item-container fancy-item fancy-name {
 fancy-gallery fancy-scroll fancy-item-container fancy-item.details fancy-name {
   position: relative;
   height: auto;
-  flex: 1 1;
   text-align: left;
 }
+fancy-gallery fancy-scroll fancy-item-container fancy-item.details .icon-placement {
+  position: relative;
+  flex: 0 1;
+  filter: unset;
+  color: #AAA;
+  margin-left: 0.2em;
+  font-size: 0.8em;
+}
 fancy-image {
   display: block;
   width: 100%;

bin/style.less

@@ -5324,7 +5324,7 @@ fancy-toolbar {
 		position: relative;
 		background-color: #272727;
 		box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
-		z-index: 999;
+		z-index: 1;
 	}
 
 	padding-left: 0.25em;
@@ -6404,6 +6404,7 @@ fancy-gallery {
 	min-height: 0;
 
 	width: 100%;
+	height: 100%;
 
 	&,* {
 		box-sizing: border-box;
@@ -6443,10 +6444,13 @@ fancy-gallery {
 				&.details {
 					padding: 0;
 					display: flex;
-					align-items: center;
+					align-items: flex-end;
 
 					box-shadow: unset;
 					border-radius: unset;
+
+					gap: 0.2em;
+
 				}
 
 				fancy-thumbnail {
@@ -6456,9 +6460,16 @@ fancy-gallery {
 					height: 100%;
 				}
 
+				.icon-placement {
+					position: absolute;
+					color: white;
+					bottom: 2px;
+					right: 2px;
+					filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 70%));
+				}
+
 				.thumb {
 					transform: unset;
-
 				}
 
 				.loading {
@@ -6493,9 +6504,16 @@ fancy-gallery {
 				&.details fancy-name {
 					position: relative;
 					height: auto;
-					flex: 1 1;
 					text-align: left;
+				}
 
+				&.details .icon-placement {
+					position: relative;
+					flex: 0 1;
+					filter: unset;
+					color : #AAA;
+					margin-left: 0.2em;
+					font-size: 0.8em;
 				}
 			}
 		}

hide/comp/FancyGallery.hx

@@ -8,7 +8,7 @@ enum GalleryRefreshFlag {
 
 typedef GalleryRefreshFlags = haxe.EnumFlags<GalleryRefreshFlag>;
 
-typedef GalleryItemData<GalleryItem> = {item: GalleryItem, name: String, element: js.html.Element, iconStringCache: String};
+typedef GalleryItemData<GalleryItem> = {item: GalleryItem, name: String, element: js.html.Element, thumbnailStringCache: String, iconStringCache: String};
 
 class FancyGallery<GalleryItem> extends hide.comp.Component {
 
@@ -99,6 +99,10 @@ class FancyGallery<GalleryItem> extends hide.comp.Component {
 		return "";
 	}
 
+	public dynamic function getThumbnail(item: GalleryItem) : String {
+		return null;
+	}
+
 	public dynamic function getIcon(item: GalleryItem) : String {
 		return null;
 	}
@@ -241,7 +245,7 @@ class FancyGallery<GalleryItem> extends hide.comp.Component {
 		if (currentRefreshFlags.has(RegenHeader) && data.element != null) {
 			data.element.remove();
 			data.element = null;
-			data.iconStringCache = null;
+			data.thumbnailStringCache = null;
 		}
 
 		if (data.element == null) {
@@ -250,7 +254,8 @@ class FancyGallery<GalleryItem> extends hide.comp.Component {
 
 			data.element.innerHTML = '
 				<fancy-thumbnail></fancy-thumbnail>
-				<fancy-name><fancy-name>
+				<fancy-name></fancy-name>
+				<div class="icon-placement"></div>
 			';
 
 			data.element.ondblclick = (e) -> {
@@ -277,10 +282,17 @@ class FancyGallery<GalleryItem> extends hide.comp.Component {
 		}
 
 		var img = data.element.querySelector("fancy-thumbnail");
-		var imgString = getIcon(data.item) ?? '<fancy-image style="background-image:url(\'res/icons/svg/unknown_file.svg\')"></fancy-image>';
-		if (imgString != data.iconStringCache) {
+		var imgString = getThumbnail(data.item) ?? '<fancy-image style="background-image:url(\'res/icons/svg/unknown_file.svg\')"></fancy-image>';
+		if (imgString != data.thumbnailStringCache) {
 			img.innerHTML = imgString;
-			data.iconStringCache = imgString;
+			data.thumbnailStringCache = imgString;
+		}
+
+		var icon = data.element.querySelector(".icon-placement");
+		var iconString = getIcon(data.item);
+		if (iconString != data.iconStringCache) {
+			icon.innerHTML = iconString;
+			data.iconStringCache = iconString;
 		}
 
 		return data.element;
@@ -294,6 +306,7 @@ class FancyGallery<GalleryItem> extends hide.comp.Component {
 				item: item,
 				name: getName(item),
 				element: null,
+				thumbnailStringCache: null,
 				iconStringCache: null,
 			});
 

hide/tools/FileManager.hx

@@ -156,7 +156,7 @@ class FileManager {
 		onReady is called back with the path of the loaded miniature, or null if the miniature couldn't be loaded
 	**/
 	public function renderMiniature(path: String, onReady: MiniatureReadyCallback) {
-		var ext = path.split(".").pop();
+		var ext = path.split(".").pop().toLowerCase();
 		switch(ext) {
 			case "prefab" | "fbx" | "l3d" | "fx" | "shgraph" | "jpg" | "jpeg" | "png":
 				if (!onReadyCallbacks.exists(path)) {

hide/tools/ThumbnailGenerator.hx

@@ -198,7 +198,7 @@ class ThumbnailGenerator {
 	static public function getThumbPath(basePath: String) : haxe.io.Path {
 		basePath = StringTools.replace(basePath, hide.Ide.inst.resourceDir, "");
 		var path = new haxe.io.Path(haxe.io.Path.join([hide.Ide.inst.resourceDir, thumbRoot, basePath]));
-		path.ext = thumbExt;
+		path.ext += "." + thumbExt;
 		return path;
 	}
 
@@ -212,7 +212,7 @@ class ThumbnailGenerator {
 		var ctx = new hide.prefab.ContextShared(null, sceneRoot);
 		ctx.scene = renderCanvas;
 
-		var ext = toRender.path.split(".").pop();
+		var ext = toRender.path.split(".").pop().toLowerCase();
 
 		var abort = false;
 		if (ext == "fbx") {
@@ -394,7 +394,7 @@ class ThumbnailGenerator {
 
 		var toRender = miniaturesToRender.pop();
 
-		var ext = toRender.path.split(".").pop();
+		var ext = toRender.path.split(".").pop().toLowerCase();
 		switch(ext) {
 			case "prefab" | "fbx" | "l3d" | "fx" | "shgraph":
 				handleModel(toRender);

hide/view/FileBrowser.hx

@@ -254,7 +254,7 @@ class FileBrowser extends hide.ui.View<FileBrowserState> {
 
 		fancyGallery.getName = (item : FileEntry) -> item.name;
 
-		fancyGallery.getIcon = (item : FileEntry) -> {
+		fancyGallery.getThumbnail = (item : FileEntry) -> {
 			if (item.kind == Dir) {
 				return '<fancy-image style="background-image:url(\'res/icons/svg/big_folder.svg\')"></fancy-image>';
 
@@ -271,6 +271,16 @@ class FileBrowser extends hide.ui.View<FileBrowserState> {
 			}
 		};
 
+		fancyGallery.getIcon = (item : FileEntry) -> {
+			var ext = @:privateAccess hide.view.FileTree.getExtension(item.name);
+			if (ext != null) {
+				if (ext?.options.icon != null) {
+					return '<div class="ico ico-${ext.options.icon}" title="${ext.component.split(".").pop()}"></div>';
+				}
+			}
+			return null;
+		}
+
 		fancyGallery.onDoubleClick = (item: FileEntry) -> {
 			if (item.kind == File) {
 				ide.openFile(getFileEntryPath(item));