✨ Optional list view in fsDisp

* Add optional list view in file browser, which also displays file type, size and last accessed timestamp
* Add Ctrl+Shift+L keyboard shortcut to toggle list view
* Add fsListView setting - defaults to false

Author: GitSquared

src/_boot.js

@@ -78,6 +78,7 @@ if (!fs.existsSync(settingsFile)) {
         allowWindowed: false,
         excludeThreadsFromToplist: true,
         hideDotfiles: false,
+        fsListView: false,
         experimentalGlobeFeatures: false,
         experimentalFeatures: false
     }, 4));

src/_renderer.js

@@ -337,7 +337,7 @@ async function initUI() {
 
     document.getElementById("main_shell").setAttribute("style", "opacity: 0;");
     document.body.innerHTML += `
-    <section id="filesystem" style="width: 0px;" class="${window.settings.hideDotfiles ? "hideDotfiles" : ""}">
+    <section id="filesystem" style="width: 0px;" class="${window.settings.hideDotfiles ? "hideDotfiles" : ""} ${window.settings.fsListView ? "list-view" : ""}">
     </section>
     <section id="keyboard" style="opacity:0;">
     </section>`;
@@ -705,6 +705,14 @@ window.openSettings = async () => {
                             <option>${!window.settings.hideDotfiles}</option>
                         </select></td>
                     </tr>
+                    <tr>
+                        <td>fsListView</td>
+                        <td>Show files in a more detailed list instead of an icon grid</td>
+                        <td><select id="settingsEditor-fsListView">
+                            <option>${window.settings.fsListView}</option>
+                            <option>${!window.settings.fsListView}</option>
+                        </select></td>
+                    </tr>
                     <tr>
                         <td>experimentalGlobeFeatures</td>
                         <td>Toggle experimental features for the network globe</td>
@@ -758,6 +766,7 @@ window.writeSettingsFile = () => {
         allowWindowed: (document.getElementById("settingsEditor-allowWindowed").value === "true"),
         excludeThreadsFromToplist: (document.getElementById("settingsEditor-excludeThreadsFromToplist").value === "true"),
         hideDotfiles: (document.getElementById("settingsEditor-hideDotfiles").value === "true"),
+        fsListView: (document.getElementById("settingsEditor-fsListView").value === "true"),
         experimentalGlobeFeatures: (document.getElementById("settingsEditor-experimentalGlobeFeatures").value === "true"),
         experimentalFeatures: (document.getElementById("settingsEditor-experimentalFeatures").value === "true")
     };
@@ -924,6 +933,11 @@ function registerKeyboardShortcuts() {
         window.fsDisp.toggleHidedotfiles();
     });
 
+    // Toggle list view in fsDisp
+    globalShortcut.register("Control+Shift+L", () => {
+        window.fsDisp.toggleListview();
+    });
+
     // Hide on-screen keyboard visual feedback (#394)
     globalShortcut.register("Control+Shift+P", () => {
         window.keyboard.togglePasswordMode();

src/assets/css/filesystem.css

@@ -97,6 +97,52 @@ div#fs_disp_container > * > h3 {
     overflow: hidden;
 }
 
+section#filesystem:not(.list-view) > div#fs_disp_container > div > h4 {
+    display: none;
+}
+
+section#filesystem.list-view > div#fs_disp_container {
+    grid-template-columns: 1fr;
+    grid-auto-rows: 2vh;
+    grid-gap: 0.5vh;
+    padding-right: 0.5vh;
+}
+
+section#filesystem.list-view > div#fs_disp_container:not(.disks) > * {
+    width: auto;
+    height: 2vh;
+    flex-direction: row;
+    justify-content: flex-start;
+}
+
+section#filesystem.list-view > div#fs_disp_container:not(.disks) > div > svg {
+    height: 2vh;
+    margin: 0;
+    width: auto;
+    margin-right: 2%;
+}
+
+section#filesystem.list-view > div#fs_disp_container:not(.disks) > div > h3 {
+    max-height: unset;
+    padding-top: .2vh;
+    text-align: left;
+    width: 32%;
+}
+
+section#filesystem.list-view > div#fs_disp_container:not(.disks) > div > h4 {
+    font-size: 1.3vh;
+    font-weight: normal;
+    padding-top: .2vh;
+    text-align: right;
+    overflow: hidden;
+}
+
+section#filesystem.list-view > div#fs_disp_container:not(.disks) > div > h4:nth-of-type(1) { width: 15%; }
+
+section#filesystem.list-view > div#fs_disp_container:not(.disks) > div > h4:nth-of-type(2) { width: 10%; }
+
+section#filesystem.list-view > div#fs_disp_container:not(.disks) > div > h4:nth-of-type(3) { width: 38%; }
+
 div#fs_disp_container.disks {
     display: flex;
     align-items: center;
@@ -108,7 +154,7 @@ div#fs_disp_container.disks > * {
     max-width: 8vw;
 }
 
-div.fs_disp_showDisks > svg, div.fs_disp_up > svg {
+section#filesystem:not(.list-view) div.fs_disp_showDisks > svg, section#filesystem:not(.list-view) div.fs_disp_up > svg {
     width: 4vh !important;
     margin-bottom: 0.5vh;
     margin-top: 0.5vh;

src/classes/filesystem.class.js

@@ -6,6 +6,7 @@ class FilesystemDisplay {
         const path = require("path");
         this.cwd = [];
         this.iconcolor = `rgb(${window.theme.r}, ${window.theme.g}, ${window.theme.b})`;
+        this._formatBytes = (a,b) => {if(0==a)return"0 Bytes";var c=1024,d=b||2,e=["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"],f=Math.floor(Math.log(a)/Math.log(c));return parseFloat((a/Math.pow(c,f)).toFixed(d))+" "+e[f]};
         this.fileIconsMatcher = require("./assets/misc/file-icons-match.js");
         this.icons = require("./assets/icons/file-icons.json");
         this.edexIcons = {
@@ -127,14 +128,24 @@ class FilesystemDisplay {
 
         this.toggleHidedotfiles = () => {
             if (window.settings.hideDotfiles) {
-                container.setAttribute("class", "");
+                container.classList.remove("hideDotfiles");
                 window.settings.hideDotfiles = false;
             } else {
-                container.setAttribute("class", "hideDotfiles");
+                container.classList.add("hideDotfiles");
                 window.settings.hideDotfiles = true;
             }
         };
 
+        this.toggleListview = () => {
+            if (window.settings.fsListView) {
+                container.classList.remove("list-view");
+                window.settings.fsListView = false;
+            } else {
+                container.classList.add("list-view");
+                window.settings.fsListView = true;
+            }
+        };
+
         this.readFS = async dir => {
             if (this.failed === true || this._reading) return false;
             this._reading = true;
@@ -182,6 +193,8 @@ class FilesystemDisplay {
                     };
 
                     if (typeof fstat !== "undefined") {
+                        e.lastAccessed = fstat.mtime;
+
                         if (fstat.isDirectory()) {
                             e.category = "dir";
                             e.type = "dir";
@@ -197,6 +210,7 @@ class FilesystemDisplay {
                         if (fstat.isFile()) {
                             e.category = "file";
                             e.type = "file";
+                            e.size = fstat.size;
                         }
                     } else {
                         e.type = "system";
@@ -332,12 +346,17 @@ class FilesystemDisplay {
                 }
 
                 let icon = "";
+                let type = "";
                 switch(e.type) {
                     case "showDisks":
                         icon = this.icons.showDisks;
+                        type = "--";
+                        e.category = "showDisks";
                         break;
                     case "up":
                         icon = this.icons.up;
+                        type = "--";
+                        e.category = "up";
                         break;
                     case "symlink":
                         icon = this.icons.symlink;
@@ -353,35 +372,64 @@ class FilesystemDisplay {
                         break;
                     case "edex-theme":
                         icon = this.edexIcons.theme;
+                        type = "eDEX-UI theme";
                         break;
                     case "edex-kblayout":
                         icon = this.edexIcons.kblayout;
+                        type = "eDEX-UI keyboard layout";
                         break;
                     case "edex-settings":
+                        icon = this.edexIcons.settings;
+                        type = "eDEX-UI config file";
+                        break;
                     case "system":
                         icon = this.edexIcons.settings;
                         break;
                     case "edex-themesDir":
                         icon = this.edexIcons.themesDir;
+                        type = "eDEX-UI themes folder";
                         break;
                     case "edex-kblayoutsDir":
                         icon = this.edexIcons.kblayoutsDir;
+                        type = "eDEX-UI keyboards folder";
                         break;
                     default:
-                        icon = this.icons[this.fileIconsMatcher(e.name)];
+                        if (e.type === "dir") type = "folder";
+                        let iconName = this.fileIconsMatcher(e.name);
+                        icon = this.icons[iconName];
                         if (typeof icon === "undefined") {
                             if (e.type === "file") icon = this.icons.file;
-                            if (e.type === "dir") icon = this.icons.dir;
+                            if (e.type === "dir") {
+                                icon = this.icons.dir;
+                            }
                             if (typeof icon === "undefined") icon = this.icons.other;
+                        } else {
+                            type = iconName.replace("icon-", "");
                         }
                         break;
                 }
 
+                if (type === "") type = e.type;
+
+                if (typeof e.size === "number") {
+                    e.size = this._formatBytes(e.size);
+                } else {
+                    e.size = "--";
+                }
+                if (typeof e.lastAccessed === "object") {
+                    e.lastAccessed = e.lastAccessed.toString().substr(0, e.lastAccessed.toString().indexOf(" ("));
+                } else {
+                    e.lastAccessed = "--";
+                }
+
                 filesDOM += `<div class="fs_disp_${e.type}${hidden} animationWait" onclick="${cmd}">
                                 <svg viewBox="0 0 ${icon.width} ${icon.height}" fill="${this.iconcolor}">
                                     ${icon.svg}
                                 </svg>
                                 <h3>${e.name}</h3>
+                                <h4>${type}</h4>
+                                <h4>${e.size}</h4>
+                                <h4>${e.lastAccessed}</h4>
                             </div>`;
             });
             this.filesContainer.innerHTML = filesDOM;