Add colours for files in browser

Author: krassowski

src/browserDecorations.ts

@@ -0,0 +1,61 @@
+import { Git, IGitExtension } from './tokens';
+import * as fileStyle from './style/BrowserFile';
+import { DirListing, FileBrowser } from '@jupyterlab/filebrowser';
+import { Contents } from '@jupyterlab/services';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { ITranslator } from '@jupyterlab/translation';
+
+const statusStyles: Map<Git.StatusCode, string> = new Map([
+  ['M', fileStyle.modified],
+  ['A', fileStyle.added],
+  ['D', fileStyle.deleted],
+  ['R', fileStyle.modified],
+  ['C', fileStyle.modified],
+  ['U', fileStyle.modified],
+  ['?', fileStyle.untracked],
+  ['!', fileStyle.ignored]
+]);
+
+class GitListingRenderer extends DirListing.Renderer {
+  constructor(private gitExtension: IGitExtension) {
+    super();
+  }
+
+  updateItemNode(
+    node: HTMLElement,
+    model: Contents.IModel,
+    fileType?: DocumentRegistry.IFileType,
+    translator?: ITranslator
+  ) {
+    super.updateItemNode(node, model, fileType, translator);
+    const file = this.gitExtension.getFile(model.path);
+    console.log(model.path, 'file status', file?.status);
+    let status_code: Git.StatusCode = null;
+    if (file) {
+      status_code = file.status === 'staged' ? file.x : file.y;
+      console.log(model.path, 'file x, y', file.x, file.y);
+      console.log(model.path, 'file status code', status_code);
+    }
+
+    for (const [otherStatus, className] of statusStyles.entries()) {
+      if (status_code === otherStatus) {
+        node.classList.add(className);
+      } else {
+        node.classList.remove(className);
+      }
+    }
+  }
+}
+
+export function substituteListingRenderer(
+  extension: IGitExtension,
+  fileBrowser: FileBrowser
+): void {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const listing: DirListing = fileBrowser._listing;
+  const renderer = new GitListingRenderer(extension);
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  listing._renderer = renderer;
+}

src/components/FileItem.tsx

@@ -13,16 +13,16 @@ import {
 import { Git } from '../tokens';
 import { FilePath } from './FilePath';
 
-// Git status codes https://git-scm.com/docs/git-status
-export const STATUS_CODES = {
+export const STATUS_CODES: Record<Git.StatusCode, string> = {
   M: 'Modified',
   A: 'Added',
   D: 'Deleted',
   R: 'Renamed',
   C: 'Copied',
   U: 'Updated',
   '?': 'Untracked',
-  '!': 'Ignored'
+  '!': 'Ignored',
+  ' ': 'Unchanged'
 };
 
 /**
@@ -124,7 +124,7 @@ export interface IFileItemProps {
 }
 
 export class FileItem extends React.PureComponent<IFileItemProps> {
-  protected _getFileChangedLabel(change: keyof typeof STATUS_CODES): string {
+  protected _getFileChangedLabel(change: Git.StatusCode): string {
     return STATUS_CODES[change];
   }
 
@@ -157,7 +157,7 @@ export class FileItem extends React.PureComponent<IFileItemProps> {
   render(): JSX.Element {
     const { file } = this.props;
     const status_code = file.status === 'staged' ? file.x : file.y;
-    const status = this._getFileChangedLabel(status_code as any);
+    const status = this._getFileChangedLabel(status_code);
 
     return (
       <div

src/index.ts

@@ -25,6 +25,7 @@ import { GitWidget } from './widgets/GitWidget';
 import { addStatusBarWidget } from './widgets/StatusWidget';
 
 export { Git, IGitExtension } from './tokens';
+import { substituteListingRenderer } from './browserDecorations';
 
 /**
  * The default running sessions extension.
@@ -181,6 +182,8 @@ async function activate(
       app.commands,
       app.contextMenu
     );
+
+    substituteListingRenderer(gitExtension, factory.defaultBrowser);
   }
 
   return gitExtension;

src/style/BrowserFile.ts

@@ -0,0 +1,64 @@
+import { style } from 'typestyle';
+
+export const modified = style({
+  $nest: {
+    '&:not(.jp-mod-selected)': {
+      $nest: {
+        '.jp-DirListing-itemText': {
+          color: 'var(--md-blue-700)'
+        }
+      }
+    }
+  }
+});
+
+export const untracked = style({
+  $nest: {
+    '&:not(.jp-mod-selected)': {
+      $nest: {
+        '.jp-DirListing-itemText': {
+          color: 'var(--md-red-700)'
+        }
+      }
+    }
+  }
+});
+
+export const added = style({
+  $nest: {
+    '&:not(.jp-mod-selected)': {
+      $nest: {
+        '.jp-DirListing-itemText': {
+          color: 'var(--md-green-700)'
+        }
+      }
+    }
+  }
+});
+
+export const ignored = style({
+  $nest: {
+    '&:not(.jp-mod-selected)': {
+      $nest: {
+        '.jp-DirListing-itemText': {
+          color: 'var(--md-grey-700)'
+        }
+      }
+    }
+  }
+});
+
+export const deleted = style({
+  $nest: {
+    '&:not(.jp-mod-selected)': {
+      $nest: {
+        '.jp-DirListing-itemText': {
+          color: 'var(--md-grey-700)'
+        }
+      }
+    },
+    '.jp-DirListing-itemText': {
+      textDecoration: 'line-through'
+    }
+  }
+});

src/tokens.ts

@@ -604,8 +604,8 @@ export namespace Git {
    * has the status of each changed file
    */
   export interface IStatusFileResult {
-    x: string;
-    y: string;
+    x: StatusCode;
+    y: StatusCode;
     to: string;
     from: string;
     is_binary: boolean | null;
@@ -750,6 +750,11 @@ export namespace Git {
     | 'partially-staged'
     | null;
 
+  /**
+   * Git status codes https://git-scm.com/docs/git-status
+   */
+  export type StatusCode = 'M' | 'A' | 'D' | 'R' | 'C' | 'U' | '?' | '!' | ' ';
+
   export interface ITagResult {
     code: number;
     message?: string;

tests/test-components/FileItem.spec.tsx

@@ -7,7 +7,7 @@ describe('FileItem', () => {
   const props: IFileItemProps = {
     contextMenu: () => {},
     file: {
-      x: '',
+      x: ' ',
       y: 'M',
       to: 'some/file/path/file-name',
       from: '',