Add extra columns (#12)

* Headers added outside scroll area

* Using CSS grid to handle layout constraints

* Application can display size and last modified on

* Moved column sizes to DirectoryWrapper's state

* Directory item arranges size and modified on in columns

* File size and last modified by info styled

* All sections of the directory item act as buttons

* Correct height is stored on changing terminal size

* Implemented new tests

package.json

@@ -1,7 +1,7 @@
 {
   "name": "freeman",
   "productName": "FreeMAN",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "A free, extensible, cross-platform file manager for power users",
   "main": "app/main.js",
   "build": {
@@ -105,9 +105,11 @@
     "electron-fswin": "^2.18.2",
     "electron-log": "^2.2.13",
     "file-icons-js": "github:websemantics/file-icons-js",
+    "format-number": "^3.0.0",
     "fuzzysearch": "^1.0.3",
     "immutable": "^3.8.2",
     "inversify": "^4.9.0",
+    "moment": "^2.21.0",
     "ncp": "^2.0.0",
     "node-pty": "^0.7.4",
     "prop-types": "^15.6.0",

resources/freeman.themes/dark.json

@@ -28,5 +28,9 @@
     },
     "inputItem": {
         "invalidInput": "rgb(224, 47, 31)"
+    },
+    "directoryHeader": {
+        "backgroundColour": "rgb(39, 40, 34)",
+        "foregroundColour": "rgb(234, 248, 229)"
     }
 }

src/common/managers/DirectoryManager.ts

@@ -66,8 +66,10 @@ class DirectoryManager implements IDirectoryManager {
             return {
                 isDirectory: fileStats.isDirectory(),
                 isHidden: await this.isHidden(fullPath, options.hideUnixStyleHiddenItems),
+                lastModified: fileStats.mtime,
                 name: fileName,
-                path: fullPath
+                path: fullPath,
+                size: !fileStats.isDirectory() && fileStats.size || undefined
             } as IDirectoryItem;
         });
 

src/common/settings/internal/themes/dark.ts

@@ -1,6 +1,10 @@
 import { ITheme } from "models";
 
 export default {
+    directoryHeader: {
+        backgroundColour: "rgb(39, 40, 34)",
+        foregroundColour: "rgb(234, 248, 229)"
+    },
     directoryItem: {
         backgroundColour: "rgb(39, 40, 34)",
         chosenColour: "rgb(226, 220, 43)",

src/interfaces/models/IColumnSizes.ts

@@ -0,0 +1,14 @@
+/** Describes the sizes of the directory list columns. */
+interface IColumnSizes {
+
+    /** The size of the 'name' column. */
+    name: number;
+
+    /** The size of the 'size' column. */
+    size: number;
+
+    /** The size of the 'last modified' column. */
+    lastModified: number;
+}
+
+export default IColumnSizes;

src/interfaces/models/IDirectoryItem.ts

@@ -12,6 +12,12 @@ interface IDirectoryItem {
 
     /** Whether the directory item is hidden. */
     isHidden: boolean;
+
+    /** The size (in bytes) of the file, if any. */
+    size?: number;
+
+    /** The last time the directory item was modified. */
+    lastModified: Date;
 }
 
 export default IDirectoryItem;

src/interfaces/models/ITheme.ts

@@ -21,6 +21,14 @@ interface ITheme {
         backgroundColour: string;
     };
 
+    /** The colours of the DirectoryHeader component. */
+    directoryHeader: {
+        /** The foreground colour of the directory header. */
+        foregroundColour: string;
+        /** The background colour of the directory header. */
+        backgroundColour: string;
+    };
+
     /** The colours of the DirectoryItem component. */
     directoryItem: {
         /** The colour of a file-type directory item. */

src/interfaces/models/index.ts

@@ -1,5 +1,6 @@
 import IApplicationCommands from "./IApplicationCommands";
 import IAttributes from "./IAttributes";
+import IColumnSizes from "./IColumnSizes";
 import IDirectoryItem from "./IDirectoryItem";
 import IHandlers from "./IHandlers";
 import IItemClipboard from "./IItemClipboard";
@@ -12,6 +13,7 @@ import ITheme from "./ITheme";
 export {
     IApplicationCommands,
     IAttributes,
+    IColumnSizes,
     IDirectoryItem,
     IHandlers,
     IItemClipboard,

src/interfaces/props/blocks/IDirectoryItemProps.ts

@@ -1,8 +1,8 @@
 import { IDirectoryItem } from "models";
-import { IThemeableProps } from "props/common";
+import { IColumnProps, IThemeableProps } from "props/common";
 
 /** Describes the properties of a directory item component. */
-interface IDirectoryItemProps extends IThemeableProps {
+interface IDirectoryItemProps extends IThemeableProps, IColumnProps {
 
     /** The underlying model for a DirectoryItem component. */
     model: IDirectoryItem;

src/interfaces/props/common/IColumnProps.ts

@@ -0,0 +1,10 @@
+import { IColumnSizes } from "models";
+
+/** Describes column properties of any components that contain columns. */
+interface IColumnProps {
+
+    /** Sizes of the columns within the directory list. */
+    columnSizes: IColumnSizes;
+}
+
+export default IColumnProps;

src/interfaces/props/common/index.ts

@@ -1,4 +1,5 @@
 import ICloseableProps from "./ICloseableProps";
+import IColumnProps from "./IColumnProps";
 import IDirectoryCommonProps from "./IDirectoryCommonProps";
 import IDirectoryManageableProps from "./IDirectoryManageableProps";
 import IOpenableProps from "./IOpenableProps";
@@ -8,6 +9,7 @@ import IThemeableProps from "./IThemeableProps";
 
 export {
     ICloseableProps,
+    IColumnProps,
     IDirectoryCommonProps,
     IDirectoryManageableProps,
     IOpenableProps,

src/interfaces/props/panels/IDirectoryHeaderProps.ts

@@ -0,0 +1,16 @@
+import { IColumnProps, IThemeableProps } from "props/common";
+
+/** Describes properties for the DirectoryHeader component. */
+interface IDirectoryHeaderProps extends IColumnProps, IThemeableProps {
+
+    /**
+     * Updates the directory list column sizes with the ones given (in pixels).
+     *
+     * @param nameColumnSize - the size that the 'name' column should become
+     * @param sizeColumnSize - the size that the 'size' column should become
+     * @param lastModifiedSize - the size that the 'last modified on' column should become
+     */
+    updateColumnSizes(nameColumnSize: number, sizeColumnSize: number, lastModifiedSize: number): void;
+}
+
+export default IDirectoryHeaderProps;

src/interfaces/props/panels/IDirectoryListProps.ts

@@ -1,4 +1,5 @@
 import {
+    IColumnProps,
     IDirectoryCommonProps,
     IDirectoryManageableProps,
     ISettingsManageableProps,
@@ -12,7 +13,8 @@ interface IDirectoryListProps extends
     IDirectoryManageableProps,
     IStatusNotifiableProps,
     ISettingsManageableProps,
-    IThemeableProps {
+    IThemeableProps,
+    IColumnProps {
 
     /** The path to the directory the pane displays. */
     path: string;

src/interfaces/props/panels/index.ts

@@ -1,10 +1,12 @@
+import IDirectoryHeaderProps from "./IDirectoryHeaderProps";
 import IDirectoryListProps from "./IDirectoryListProps";
 import IPathPanelProps from "./IPathPanelProps";
 import IStatusProps from "./IStatusProps";
 import ITerminalHeaderProps from "./ITerminalHeaderProps";
 import ITerminalPaneProps from "./ITerminalPaneProps";
 
 export {
+    IDirectoryHeaderProps,
     IDirectoryListProps,
     IPathPanelProps,
     IStatusProps,

src/interfaces/states/panels/IDirectoryWrapperState.ts

@@ -1,3 +1,5 @@
+import { IColumnSizes } from "models";
+
 /** Describes the internal state of the DirectoryPane. */
 interface IDirectoryWrapperState {
 
@@ -6,6 +8,9 @@ interface IDirectoryWrapperState {
 
     /** Whether the integrated terminal is open. */
     isTerminalOpen: boolean;
+
+    /** The sizes of the columns visible in the directory list. */
+    columnSizes: IColumnSizes;
 }
 
 export default IDirectoryWrapperState;

src/renderer/components/App.tsx

@@ -33,9 +33,9 @@ class App extends React.Component<IAppProps, IAppState> {
     /**
      * Defines how the main app component is rendered.
      *
-     * @param - the props for the component
+     * @param props the props for the component
      *
-     * @returns - a JSX element representing the app view
+     * @returns a JSX element representing the app view
      */
     constructor(props: IAppProps) {
         super(props);
@@ -60,43 +60,43 @@ class App extends React.Component<IAppProps, IAppState> {
     /**
      * Defines how the main application component is rendered
      *
-     * @returns - a JSX element representing the main application view
+     * @returns a JSX element representing the main application view
      */
     public render(): JSX.Element {
         const { directoryManager, keysManager, settingsManager, themeManager } = this.props;
         const appStyle = { color: themeManager.theme.primaryColour };
-        const splitPaneStyle: React.CSSProperties = { height: "97vh" };
         const resizerStyle: React.CSSProperties = {
             backgroundColor: this.props.themeManager.theme.resizers.colour
         };
 
         return <div>
             <HotKeys keyMap={keysManager.keyMap} handlers={this.handlers}>
                 <div className="App" style={appStyle}>
-                    <SplitPane
-                        split="vertical"
-                        defaultSize="50vw"
-                        style={splitPaneStyle}
-                        resizerStyle={resizerStyle}>
-                        <DirectoryWrapper
-                            id="left"
-                            initialPath={os.homedir()}
-                            isSelectedPane={this.state.selectedPane === "left"}
-                            sendSelectedPaneUp={this.selectPane}
-                            directoryManager={directoryManager}
-                            statusNotifier={this.statusNotifier}
-                            settingsManager={settingsManager}
-                            theme={themeManager.theme} />
-                        <DirectoryWrapper
-                            id="right"
-                            initialPath={os.homedir()}
-                            isSelectedPane={this.state.selectedPane === "right"}
-                            sendSelectedPaneUp={this.selectPane}
-                            directoryManager={directoryManager}
-                            statusNotifier={this.statusNotifier}
-                            settingsManager={settingsManager}
-                            theme={themeManager.theme} />
-                    </SplitPane>
+                    <div className="main">
+                        <SplitPane
+                            split="vertical"
+                            defaultSize="50vw"
+                            resizerStyle={resizerStyle}>
+                            <DirectoryWrapper
+                                id="left"
+                                initialPath={os.homedir()}
+                                isSelectedPane={this.state.selectedPane === "left"}
+                                sendSelectedPaneUp={this.selectPane}
+                                directoryManager={directoryManager}
+                                statusNotifier={this.statusNotifier}
+                                settingsManager={settingsManager}
+                                theme={themeManager.theme} />
+                            <DirectoryWrapper
+                                id="right"
+                                initialPath={os.homedir()}
+                                isSelectedPane={this.state.selectedPane === "right"}
+                                sendSelectedPaneUp={this.selectPane}
+                                directoryManager={directoryManager}
+                                statusNotifier={this.statusNotifier}
+                                settingsManager={settingsManager}
+                                theme={themeManager.theme} />
+                        </SplitPane>
+                    </div>
                     <Status {...this.state.status} theme={themeManager.theme} />
                 </div>
             </HotKeys>
@@ -127,8 +127,8 @@ class App extends React.Component<IAppProps, IAppState> {
     /**
      * Handles updating the status component's message.
      *
-     * @param updateType - the type of the status update
-     * @param payload - the data to use in the status update
+     * @param updateType the type of the status update
+     * @param payload the data to use in the status update
      */
     @autobind
     private updateStatus(updateType: StatusUpdate, payload: string | number) {
@@ -166,7 +166,7 @@ class App extends React.Component<IAppProps, IAppState> {
     /**
      * Handles selecting the given pane.
      *
-     * @param paneToSelect - the pane to select, if not currently selected
+     * @param paneToSelect the pane to select, if not currently selected
      */
     @autobind
     private selectPane(paneToSelect: DirectoryPaneSide) {