Make path label more obvious

circuitpython · Aug 5, 2024 · e6b6652 · e6b6652
1 parent e4853b2
commit e6b6652
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/js/common/file_dialog.js b/js/common/file_dialog.js
@@ -42,7 +42,7 @@ const extensionMap = {
     "mp4":  {style: FA_STYLE_REGULAR, icon: "file-video", type: "bin"},
     "mpy":  {style: FA_STYLE_REGULAR, icon: "file", type: "bin"},
     "pdf":  {style: FA_STYLE_REGULAR, icon: "file-pdf", type: "bin"},
-    "py":   {style: FA_STYLE_REGULAR, icon: "file-lines", type: "text"},
+    "py":   {style: FA_STYLE_REGULAR, icon: "file-code", type: "text"},
     "toml": {style: FA_STYLE_REGULAR, icon: "file-lines", type: "text"},
     "txt":  {style: FA_STYLE_REGULAR, icon: "file-lines", type: "text"},
     "wav":  {style: FA_STYLE_REGULAR, icon: "file-audio", type: "bin"},
@@ -57,6 +57,9 @@ const FILESIZE_UNITS = ["bytes", "KB", "MB", "GB", "TB"];
 const COMPACT_UNITS = ["", "K", "M", "G", "T"];
 
 function getFileExtension(filename) {
+    if (filename === null) {
+        return null;
+    }
     let extension = filename.split('.').pop();
     if (extension !== null) {
         return String(extension).toLowerCase();
@@ -189,7 +192,7 @@ class FileDialog extends GenericModal {
             this._currentPath = path;
         }
         const currentPathLabel = this._getElement('currentPathLabel');
-        currentPathLabel.innerHTML = this._currentPath;
+        currentPathLabel.innerHTML = `<i class="${FA_STYLE_REGULAR} fa-folder-open"></i> ` + this._currentPath;
 
         if (this._currentPath != "/") {
             this._addFile({path: "..", isDir: true}, "fa-folder-open");

diff --git a/js/script.js b/js/script.js
@@ -5,6 +5,7 @@ import {indentWithTab} from "@codemirror/commands"
 import { python } from "@codemirror/lang-python";
 import { syntaxHighlighting, indentUnit } from "@codemirror/language";
 import { classHighlighter } from "@lezer/highlight";
+import { getFileIcon } from "./common/file_dialog.js";
 
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
@@ -237,7 +238,13 @@ async function checkReadOnly() {
 
 /* Update the filename and update the UI */
 function setFilename(path) {
+    // Use the extension_map to figure out the file icon
     let filename = path;
+
+    // Prepend an icon to the path
+    const [style, icon] = getFileIcon(path);
+    filename = `<i class="${style} ${icon}"></i> ` + filename;
+
     if (path === null) {
         filename = "[New Document]";
         btnSave.forEach((b) => b.style.display = 'none');