Use SVG for file icons

Author: fcollonval

package.json

@@ -54,6 +54,7 @@
     "@jupyterlab/codemirror": "^2.0.0",
     "@jupyterlab/console": "^2.0.0",
     "@jupyterlab/coreutils": "^4.0.0",
+    "@jupyterlab/docregistry": "^2.0.0",
     "@jupyterlab/filebrowser": "^2.0.0",
     "@jupyterlab/mainmenu": "^2.0.0",
     "@jupyterlab/nbformat": "^2.0.0",

src/components/FileItem.tsx

@@ -106,6 +106,7 @@ export class FileItem extends React.Component<IFileItemProps> {
         )}
         <FilePath
           filepath={this.props.file.to}
+          filetype={this.props.file.type}
           selected={this.props.selected}
         />
         {this.props.actions}

src/components/FilePath.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { classes } from 'typestyle';
 import {
-  fileIconStyle,
+  // fileIconStyle,
   fileLabelStyle,
   folderLabelStyle
 } from '../style/FilePathStyle';
-import { extractFilename, getFileIconClassName } from '../utils';
+import { extractFilename } from '../utils';
+import { LabIcon } from '@jupyterlab/ui-components';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
 
 /**
  * FilePath component properties
@@ -15,19 +17,16 @@ export interface IFilePathProps {
    * File path
    */
   filepath: string;
+  /**
+   * File type
+   */
+  filetype: DocumentRegistry.IFileType;
   /**
    * Is file selected? - impact style of the icon
    */
   selected?: boolean;
 }
 
-function getFileIconClass(props: IFilePathProps) {
-  return classes(
-    fileIconStyle,
-    getFileIconClassName(props.filepath, props.selected)
-  );
-}
-
 export const FilePath: React.FunctionComponent<IFilePathProps> = (
   props: IFilePathProps
 ) => {
@@ -38,7 +37,12 @@ export const FilePath: React.FunctionComponent<IFilePathProps> = (
 
   return (
     <React.Fragment>
-      <span className={getFileIconClass(props)} />
+      <LabIcon.resolveReact
+        icon={props.filetype.icon}
+        iconClass={classes(props.filetype.iconClass, 'jp-Icon')}
+        elementPosition="center"
+        tag="span"
+      />
       <span className={fileLabelStyle}>
         {filename}
         <span className={folderLabelStyle}>{folder}</span>

src/components/SinglePastCommitInfo.tsx

@@ -245,7 +245,7 @@ export class SinglePastCommitInfo extends React.Component<
         onClick={this._onDiffClickFactory(path, flg)}
         title={path}
       >
-        <FilePath filepath={path} />
+        <FilePath filepath={path} filetype={file.type} />
         {flg ? (
           <ActionButton iconName="git-diff" title="View file changes" />
         ) : null}

src/components/diff/DiffWidget.tsx

@@ -2,10 +2,10 @@ import { ReactWidget, showDialog } from '@jupyterlab/apputils';
 import { PathExt } from '@jupyterlab/coreutils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import * as React from 'react';
-import { style } from 'typestyle';
+import { GitExtension } from '../../model';
+import { diffIcon } from '../../style/icons';
 import { Diff, isDiffSupported, RenderMimeProvider } from './Diff';
 import { getRefValue, IDiffContext } from './model';
-import { GitExtension } from '../../model';
 
 /**
  * Method to open a main menu panel to show the diff of a given Notebook file.
@@ -48,9 +48,7 @@ export async function openDiffView(
       );
       nbDiffWidget.id = id;
       nbDiffWidget.title.label = PathExt.basename(filePath);
-      nbDiffWidget.title.iconClass = style({
-        backgroundImage: 'var(--jp-icon-diff)'
-      });
+      nbDiffWidget.title.icon = diffIcon;
       nbDiffWidget.title.closable = true;
       nbDiffWidget.addClass('jp-git-diff-parent-diff-widget');
 

src/model.ts

@@ -10,6 +10,7 @@ import { httpGitRequest } from './git';
 import { IGitExtension, Git } from './tokens';
 import { decodeStage } from './utils';
 import { Dialog, showErrorMessage } from '@jupyterlab/apputils';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
 
 // Default refresh interval (in milliseconds) for polling the current Git status (NOTE: this value should be the same value as in the plugin settings schema):
 const DEFAULT_REFRESH_INTERVAL = 3000; // ms
@@ -635,7 +636,14 @@ export class GitExtension implements IGitExtension {
         const data = await response.json();
         throw new ServerConnection.ResponseError(response, data.message);
       }
-      return response.json();
+
+      // lookup filetypes
+      const data: Git.ISingleCommitFilePathInfo = await response.json();
+      data.modified_files = data.modified_files.map(f => {
+        f.type = this._resolveFileType(f.modified_file_path);
+        return f;
+      });
+      return data;
     } catch (err) {
       throw new ServerConnection.NetworkError(err);
     }
@@ -854,7 +862,11 @@ export class GitExtension implements IGitExtension {
 
       this._setStatus(
         (data as Git.IStatusResult).files.map(file => {
-          return { ...file, status: decodeStage(file.x, file.y) };
+          return {
+            ...file,
+            type: this._resolveFileType(file.to),
+            status: decodeStage(file.x, file.y)
+          };
         })
       );
     } catch (err) {
@@ -1009,6 +1021,21 @@ export class GitExtension implements IGitExtension {
     }
   }
 
+  /**
+   * Resolve path to filetype
+   */
+  protected _resolveFileType(path: string): DocumentRegistry.IFileType {
+    // test if directory
+    if (path.endsWith('/')) {
+      return DocumentRegistry.defaultDirectoryFileType;
+    }
+
+    return (
+      this._app.docRegistry.getFileTypesForPath(path)[0] ||
+      DocumentRegistry.defaultTextFileType
+    );
+  }
+
   /**
    * Set repository status
    *

src/style/FileItemStyle.ts

@@ -34,6 +34,12 @@ export const selectedFileStyle = style({
     },
     '&:hover .jp-icon-selectable[stroke]': {
       stroke: 'var(--jp-layout-color2)'
+    },
+    '& .jp-icon-selectable[fill]': {
+      fill: '#fff'
+    },
+    '& .jp-icon-selectable-inverse[fill]': {
+      fill: 'var(--jp-brand-color1)'
     }
   }
 });

src/style/FileListStyle.ts

@@ -7,83 +7,3 @@ export const fileListWrapperClass = style({
   overflow: 'hidden',
   overflowY: 'auto'
 });
-
-export const notebookFileIconStyle = style({
-  backgroundImage: 'var(--jp-icon-notebook)'
-});
-
-export const folderFileIconStyle = style({
-  backgroundImage: 'var(--jp-icon-directory)'
-});
-
-export const genericFileIconStyle = style({
-  backgroundImage: 'var(--jp-icon-file)'
-});
-
-export const yamlFileIconStyle = style({
-  backgroundImage: 'var(--jp-icon-yaml)'
-});
-
-export const markdownFileIconStyle = style({
-  backgroundImage: 'var(--jp-icon-markdown)'
-});
-
-export const imageFileIconStyle = style({
-  backgroundImage: 'var(--jp-icon-image)'
-});
-
-export const spreadsheetFileIconStyle = style({
-  backgroundImage: 'var(--jp-icon-spreadsheet)'
-});
-
-export const jsonFileIconStyle = style({
-  backgroundImage: 'var(--jp-icon-json)'
-});
-
-export const pythonFileIconStyle = style({
-  backgroundImage: 'var(--jp-icon-python)'
-});
-
-export const kernelFileIconStyle = style({
-  backgroundImage: 'var(--jp-icon-r)'
-});
-
-export const notebookFileIconSelectedStyle = style({
-  backgroundImage: 'var(--jp-icon-notebook-selected)'
-});
-
-export const folderFileIconSelectedStyle = style({
-  backgroundImage: 'var(--jp-icon-directory-selected)'
-});
-
-export const genericFileIconSelectedStyle = style({
-  backgroundImage: 'var(--jp-icon-file-selected)'
-});
-
-export const yamlFileIconSelectedStyle = style({
-  backgroundImage: 'var(--jp-icon-yaml-selected)'
-});
-
-export const markdownFileIconSelectedStyle = style({
-  backgroundImage: 'var(--jp-icon-markdown-selected)'
-});
-
-export const imageFileIconSelectedStyle = style({
-  backgroundImage: 'var(--jp-icon-image-selected)'
-});
-
-export const spreadsheetFileIconSelectedStyle = style({
-  backgroundImage: 'var(--jp-icon-spreadsheet-selected)'
-});
-
-export const jsonFileIconSelectedStyle = style({
-  backgroundImage: 'var(--jp-icon-json-selected)'
-});
-
-export const pythonFileIconSelectedStyle = style({
-  backgroundImage: 'var(--jp-icon-python-selected)'
-});
-
-export const kernelFileIconSelectedStyle = style({
-  backgroundImage: 'var(--jp-icon-r-selected)'
-});

src/tokens.ts

@@ -1,4 +1,5 @@
 import { IChangedArgs } from '@jupyterlab/coreutils';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { Token, JSONObject } from '@lumino/coreutils';
 import { IDisposable } from '@lumino/disposable';
 import { ISignal } from '@lumino/signaling';
@@ -374,6 +375,8 @@ export namespace Git {
     to: string;
     from: string;
     is_binary: boolean | null;
+    // filetype as determined by app.docRegistry
+    type?: DocumentRegistry.IFileType;
   }
 
   /**
@@ -411,6 +414,8 @@ export namespace Git {
     insertion: string;
     deletion: string;
     is_binary: boolean | null;
+    // filetype as determined by app.docRegistry
+    type?: DocumentRegistry.IFileType;
   }
 
   /** Interface for GitDetailedLog request result,
@@ -422,15 +427,15 @@ export namespace Git {
     modified_files_count?: string;
     number_of_insertions?: string;
     number_of_deletions?: string;
-    modified_files?: [ICommitModifiedFile];
+    modified_files?: ICommitModifiedFile[];
   }
 
   /** Interface for GitLog request result,
    * has the info of all past commits
    */
   export interface ILogResult {
     code: number;
-    commits?: [ISingleCommitInfo];
+    commits?: ISingleCommitInfo[];
   }
 
   export interface IIdentity {

src/utils.ts

@@ -1,28 +1,6 @@
 import { Dialog, showDialog } from '@jupyterlab/apputils';
 import { PathExt } from '@jupyterlab/coreutils';
 import { GitExtension } from './model';
-import {
-  folderFileIconSelectedStyle,
-  folderFileIconStyle,
-  genericFileIconSelectedStyle,
-  genericFileIconStyle,
-  imageFileIconSelectedStyle,
-  imageFileIconStyle,
-  jsonFileIconSelectedStyle,
-  jsonFileIconStyle,
-  kernelFileIconSelectedStyle,
-  kernelFileIconStyle,
-  markdownFileIconSelectedStyle,
-  markdownFileIconStyle,
-  pythonFileIconSelectedStyle,
-  pythonFileIconStyle,
-  spreadsheetFileIconSelectedStyle,
-  spreadsheetFileIconStyle,
-  yamlFileIconSelectedStyle,
-  yamlFileIconStyle,
-  notebookFileIconSelectedStyle,
-  notebookFileIconStyle
-} from './style/FileListStyle';
 import { Git } from './tokens';
 
 /** Get the filename from a path */
@@ -78,47 +56,3 @@ export async function openListedFile(
     console.error(`Fail to open ${to}.`);
   }
 }
-
-/**
- * Get the extension of a given file
- *
- * @param path File path for which the icon should be found
- * @param selected Is the file selected? Optional: default is false
- */
-export function getFileIconClassName(path: string, selected = false): string {
-  if (path[path.length - 1] === '/') {
-    return selected ? folderFileIconSelectedStyle : folderFileIconStyle;
-  }
-  const fileExtension = PathExt.extname(path).toLocaleLowerCase();
-  switch (fileExtension) {
-    case '.md':
-      return selected ? markdownFileIconSelectedStyle : markdownFileIconStyle;
-    case '.py':
-      return selected ? pythonFileIconSelectedStyle : pythonFileIconStyle;
-    case '.ipynb':
-      return selected ? notebookFileIconSelectedStyle : notebookFileIconStyle;
-    case '.json':
-      return selected ? jsonFileIconSelectedStyle : jsonFileIconStyle;
-    case '.csv':
-    case '.xls':
-    case '.xlsx':
-      return selected
-        ? spreadsheetFileIconSelectedStyle
-        : spreadsheetFileIconStyle;
-    case '.r':
-      return selected ? kernelFileIconSelectedStyle : kernelFileIconStyle;
-    case '.yml':
-    case '.yaml':
-      return selected ? yamlFileIconSelectedStyle : yamlFileIconStyle;
-    case '.svg':
-    case '.tiff':
-    case '.jpeg':
-    case '.jpg':
-    case '.gif':
-    case '.png':
-    case '.raw':
-      return selected ? imageFileIconSelectedStyle : imageFileIconStyle;
-    default:
-      return selected ? genericFileIconSelectedStyle : genericFileIconStyle;
-  }
-}