File details can now be hidden

src/web/stylesheets/layout/_io.css

@@ -563,6 +563,43 @@
     height: 100%;
 }
 
+.file-details-toggle-shown,
+.file-details-toggle-hidden {
+    width: 8px;
+    height: 40px;
+    border: 1px solid var(--secondary-border-colour);
+    position: absolute;
+    top: calc(50% - 20px);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--secondary-border-colour);
+    color: var(--subtext-font-colour);
+    z-index: 1;
+}
+
+.file-details-toggle-shown {
+    left: 0;
+    border-left: none;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+.file-details-toggle-hidden {
+    left: -8px;
+    border-right: none;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+}
+
+.file-details-toggle-shown:hover,
+.file-details-toggle-hidden:hover {
+    background-color: var(--primary-border-colour);
+    border-color: var(--primary-border-colour);
+    color: var(--primary-font-colour);
+}
+
 .file-details-heading {
     font-weight: bold;
     margin: 10px 0 10px 0;

src/web/utils/fileDetails.mjs

@@ -23,6 +23,8 @@ class FileDetailsPanel {
         this.status = opts?.status;
         this.buffer = opts?.buffer;
         this.renderPreview = opts?.renderPreview;
+        this.toggleHandler = opts?.toggleHandler;
+        this.hidden = opts?.hidden;
         this.dom = this.buildDOM();
         this.renderFileThumb();
     }
@@ -37,6 +39,11 @@ class FileDetailsPanel {
         dom.className = "cm-file-details";
         const fileThumb = require("../static/images/file-128x128.png");
         dom.innerHTML = `
+            <div class="${this.hidden ? "file-details-toggle-hidden" : "file-details-toggle-shown"}"
+                data-toggle="tooltip"
+                title="${this.hidden ? "Show" : "Hide"} file details">
+                ${this.hidden ? "&#10096;" : "&#10097;"}
+            </div>
             <p class="file-details-heading">File details</p>
             <img aria-hidden="true" src="${fileThumb}" alt="File icon" class="file-details-thumbnail"/>
             <table class="file-details-data">
@@ -67,6 +74,9 @@ class FileDetailsPanel {
             </table>
         `;
 
+        dom.querySelector(".file-details-toggle-shown,.file-details-toggle-hidden")
+            .addEventListener("click", this.toggleHandler, false);
+
         return dom;
     }
 
@@ -116,8 +126,11 @@ function makePanel(opts) {
     return (view) => {
         return {
             dom: fdPanel.dom,
-            width: 200,
+            width: opts?.hidden ? 1 : 200,
             update(update) {
+            },
+            mount() {
+                $("[data-toggle='tooltip']").tooltip();
             }
         };
     };

src/web/waiters/InputWaiter.mjs

@@ -548,7 +548,9 @@ class InputWaiter {
             progress: inputData.progress,
             status: inputData.status,
             buffer: inputData.buffer,
-            renderPreview: this.app.options.imagePreview
+            renderPreview: this.app.options.imagePreview,
+            toggleHandler: this.toggleFileDetails.bind(this),
+            hidden: false
         };
         this.inputEditorView.dispatch({
             effects: this.inputEditorConf.fileDetailsPanel.reconfigure(
@@ -572,6 +574,20 @@ class InputWaiter {
         });
     }
 
+    /**
+     * Handler for file details toggle clicks
+     * @param {event} e
+     */
+    toggleFileDetails(e) {
+        $("[data-toggle='tooltip']").tooltip("hide");
+        this.fileDetails.hidden = !this.fileDetails.hidden;
+        this.inputEditorView.dispatch({
+            effects: this.inputEditorConf.fileDetailsPanel.reconfigure(
+                fileDetailsPanel(this.fileDetails)
+            )
+        });
+    }
+
     /**
      * Update file details when a file completes loading
      *