Add the filebrowser plugin and plugin css

examples/lab/index.css

@@ -2,9 +2,90 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
-.jp-CodeMirrorWidget {
-  min-width: 50px;
-  min-height: 50px;
+
+.p-MenuBar {
+  padding-left: 5px;
+  background: #FEFEFE;
+  color: rgba(0, 0, 0, 0.87);
+  border-bottom: 1px solid #DDDDDD;
+  font: 13px Helvetica, Arial, sans-serif;
+}
+
+
+.p-MenuBar-menu {
+  transform: translateY(-1px);
+}
+
+
+.p-MenuBar-item {
+  padding: 4px 8px;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+}
+
+
+.p-MenuBar-item.p-mod-active {
+  background: #E5E5E5;
+}
+
+
+.p-MenuBar-item.p-mod-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+
+.p-MenuBar-item.p-mod-separator-type {
+  margin: 2px;
+  padding: 0;
+  border: none;
+  border-left: 1px solid #DDDDDD;
+}
+
+
+.p-MenuBar.p-mod-active .p-MenuBar-item.p-mod-active {
+  z-index: 1000000;
+  background: white;
+  border-left: 1px solid #C0C0C0;
+  border-right: 1px solid #C0C0C0;
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
+}
+
+
+.p-Menu {
+  background: white;
+  color: rgba(0, 0, 0, 0.87);
   border: 1px solid #C0C0C0;
-  z-index: 0;
+  font: 12px Helvetica, Arial, sans-serif;
+  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
+}
+
+
+.p-Menu-item.p-mod-active {
+  background: #E5E5E5;
+}
+
+
+.p-Menu-item.p-mod-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+
+.p-Menu-item.p-mod-separator-type > span::after {
+  border-top: 1px solid #DDDDDD;
+}
+
+
+.p-Menu-item-icon::before,
+.p-Menu-item-submenu::before {
+  font-family: FontAwesome;
+}
+
+
+.p-Menu-item.p-mod-check-type.p-mod-checked > .p-Menu-item-icon::before {
+  content: '\f00c';
+}
+
+
+.p-Menu-item.p-mod-submenu-type > .p-Menu-item-submenu::before {
+  content: '\f0da';
 }

src/editor/plugin.css

@@ -0,0 +1,10 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+.p-CodeMirrorWidget {
+  min-width: 50px;
+  min-height: 50px;
+  border: 1px solid #C0C0C0;
+  z-index: 0;
+}

src/editor/plugin.ts

@@ -21,6 +21,8 @@ import {
   IEditor, IEditorFactory
 } from './index';
 
+import './plugin.css';
+
 
 /**
  * Bundle common modes.

src/filebrowser/index.ts

@@ -0,0 +1,27 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+'use strict';
+
+import {
+  Token
+} from 'phosphor-di';
+
+import {
+  FileBrowser
+} from 'jupyter-js-filebrowser';
+
+
+/**
+ * A singleton FileBrowser provider.
+ */
+export
+interface IFileBrowser {
+  fileBrowser: FileBrowser;
+}
+
+
+/**
+ * The dependency token for the `IFileBrowser` interface.
+ */
+export
+const IFileBrowser = new Token<IFileBrowser>('jupyter-js-plugins.IFileBrowser');

src/filebrowser/plugin.css

@@ -0,0 +1,191 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+.jp-FileBrowser {
+  background-color: #F5F5F5;
+  color: #757575;
+  font: 13px Helvetica, Arial, sans-serif;
+  height: 500px;
+}
+
+
+.jp-BreadCrumbs-item {
+  margin-right: 5px;
+  padding-bottom: 8px;
+  border: 1px solid transparent;
+}
+
+
+.jp-FileButtons {
+  border-bottom: 1px solid #757575;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-bottom: 8px;
+}
+
+
+.jp-FileButtons-icon {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+.jp-FileButtons-item {
+  background-color: #FAFAFA;
+  font-size: 16px;
+  border: 1px solid #757575;
+  height: 30px;
+  border-radius: 3px;
+  margin-right: 3px;
+  max-width: 100px;
+}
+
+
+.jp-DirListing-item {
+  padding: 4px 8px;
+  border: 1px solid transparent;
+}
+
+
+.jp-DirListing-itemFile {
+  min-width: 200px;
+}
+
+
+.jp-DirListing-itemFileIcon {
+  width: 21px;
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
+
+.jp-DirListing-itemFileText {
+  position: absolute;
+  left: 21px;
+  right: 21px;
+  padding-left: 2px;
+}
+
+
+.jp-DirListing-itemModified {
+  padding-right: 5px;
+  width: 70px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+
+.jp-FileButtons-item.jp-mod-selected {
+  background-color: #2196F3;
+  color: #F5F5F5;
+}
+
+
+.jp-DirListing-item.jp-mod-drop-target {
+  border: 1px solid #757575;
+}
+
+
+.jp-BreadCrumbs-item.jp-mod-drop-target {
+  border: 1px solid #757575;
+}
+
+
+.jp-DirListing-item.jp-mod-selected {
+  background-color: #2196F3;
+  color: #F5F5F5;
+}
+
+
+.jp-DirListing-item.jp-mod-selected.jp-mod-cut {
+  background-color: #F1C40F;
+  color: #F5F5F5;
+}
+
+
+.jp-DirListing-itemFileIcon {
+  font-family: FontAwesome;
+}
+
+
+.jp-DirListing-folderIcon:before {
+  content: "\f114";
+}
+
+
+.jp-DirListing-fileIcon:before {
+  content: "\f016";
+}
+
+
+.jp-DirListing-nbIcon:before {
+  content: "\f02d";
+}
+
+
+.jp-DirListing-nbIcon.jp-mod-running:before {
+  color: #27AE60;
+}
+
+
+.jp-EditorWidget {
+  height: 400px;
+}
+
+
+.p-SplitPanel {
+  height: 400px;
+}
+
+
+.p-Dialog {
+  padding-left: 3px;
+  background: rgba(245, 245, 245, .6);
+}
+
+
+.p-Dialog-content {
+  background-color: #F5F5F5;
+  min-width: 50%;
+  border: 1px solid #757575;
+  border-radius: 5px;
+}
+
+
+.p-Dialog-header {
+  padding: 5px;
+  border-bottom: 1px solid #757575;
+}
+
+
+.p-Dialog-body {
+  padding: 5px;
+}
+
+
+.p-Dialog-footer {
+  padding: 5px;
+}
+
+
+.p-Dialog-button {
+  margin-left: 5px;
+  padding: 5px;
+  border: 1px solid #757575;
+  font-size: 16px;
+  background-color: #FAFAFA;
+  line-height: 20px;
+  border-radius: 3px;
+  max-width: 100px;
+}
+
+.p-Dialog-close {
+  line-height: 21px;
+}
+
+
+.p-Dialog-close:before {
+  content: '\f00d';
+  font-family: FontAwesome;
+}

src/filebrowser/plugin.ts

@@ -0,0 +1,85 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+'use strict';
+
+import {
+  FileBrowser, FileBrowserModel
+} from 'jupyter-js-filebrowser';
+
+import {
+  IAppShell
+} from 'phosphide';
+
+import {
+  Container, Token
+} from 'phosphor-di';
+
+import {
+  IFileBrowser
+} from './index';
+
+import {
+  IServicesFactory
+} from '../index';
+
+import './plugin.css';
+
+
+/**
+ * Register the plugin contributions.
+ *
+ * @param container - The di container for type registration.
+ *
+ * #### Notes
+ * This is called automatically when the plugin is loaded.
+ */
+export
+function register(container: Container): void {
+  container.register(IFileBrowser, FileBrowserProvider);
+}
+
+
+/**
+ * An implementation of the IFileBrowser provider.
+ */
+class FileBrowserProvider implements IFileBrowser {
+
+  /**
+   * The dependencies required by the application shell.
+   */
+  static requires: Token<any>[] = [IAppShell, IServicesFactory];
+
+  /**
+   * Create a new application shell instance.
+   */
+  static create(shell: IAppShell, services: IServicesFactory): IServicesFactory {
+    return new IServicesFactory(shell, services);
+  }
+
+  /**
+   * Construct a new filebrowser provider instance.
+   */
+  constructor(shell: IAppShell, services: IServicesFactory) {
+    this._shell = shell;
+    let contents = services.createContentsManager();
+    let sessions = services.createNotebookSessionManager();
+    let model = new FileBrowserModel('', contents, sessions);
+    this._browser = new FileBrowser(model);
+    this._browser.title.text = 'File Browser';
+    this._shell.addToLeftArea(this._browser, { rank: 10 });
+  }
+
+  /**
+   * Get the filebrowser instance.
+   *
+   * #### Notes
+   * This is a read-only property.
+   */
+  get fileBrowser(): FileBrowser {
+    return this._browser;
+  }
+
+  private _shell: IAppShell = null;
+  private _browser: FileBrowser = null;
+
+}

src/terminal/plugin.css

@@ -0,0 +1,13 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+.jp-TerminalWidget {
+  min-width: 50px;
+  min-height: 50px;
+}
+
+.jp-TerminalWidget-body {
+  padding: 0.5em;
+  font-size: 11px;
+}

src/terminal/plugin.ts

@@ -14,6 +14,8 @@ import {
   ITerminalFactory
 } from './index';
 
+import './plugin.css';
+
 
 /**
  * Register the plugin contributions.

src/tsconfig.json

@@ -14,6 +14,7 @@
     "../typings/codemirror/codemirror.d.ts",
     "index.ts",
     "editor/index.ts",
+    "filebrowser/index.ts",
     "services/index.ts",
     "terminal/index.ts"
   ]