Add palette and clean up plugins

examples/lab/index.css

@@ -9,7 +9,6 @@ body {
   overflow: hidden;
 }
 
-
 .p-AppShell.p-Widget {
   position: absolute;
   top: 0;
@@ -19,6 +18,11 @@ body {
 }
 
 
+.p-CommandPalette {
+  font-family: "Helvetica Neue", Helvetica;
+}
+
+
 .p-SideBar {
   min-width: 36px;
   max-width: 36px;
@@ -260,6 +264,83 @@ body {
 }
 
 
+.editor-CodeMirrorWidget {
+  border: 1px solid #C0C0C0;
+  min-width: 100px;
+  min-height: 100px;
+}
+
+
+.p-CommandPalette {
+  background: #white;
+  min-width: 150px;
+  min-height: 50px;
+  padding: 4px 4px 0px 4px;
+}
+
+
+.p-CommandPalette .p-header {
+  color: #757575;
+  font-size: 11px;
+  font-weight: 500;
+  margin-top: 12px;
+}
+
+
+.p-CommandPalette .p-header hr {
+  height: 1px;
+  border-width: 0;
+  background-color: #e0e0e0;
+}
+
+
+.p-CommandPalette .p-search {
+  margin-bottom: 4px;
+}
+
+
+.p-CommandPalette .p-search .p-input-wrapper {
+  border: 1px solid #e0e0e0;
+  padding: 4px;
+}
+
+
+.p-CommandPalette .p-search input {
+  width: 100%;
+  border: none;
+  outline: none;
+}
+
+
+.p-CommandPalette .p-command {
+  color: #757575;
+  font-weight: 500;
+  font-size: 13px;
+  padding: 3px 0px;
+}
+
+
+.p-CommandPalette .p-command .p-description {
+  color: #9e9e9e;
+  font-weight: 400;
+  font-size: 10px;
+}
+
+
+.p-CommandPalette .p-command .p-shortcut {
+  margin-right: 15px;
+}
+
+
+.p-CommandPalette .p-command:focus,
+.p-CommandPalette .p-command:focus .p-description,
+.p-CommandPalette .p-command:focus .p-shortcut {
+  outline: 0;
+  background: #2196f3;
+  color: #fff;
+}
+
+
 .p-MenuBar {
   padding-left: 5px;
   background: #FEFEFE;

examples/lab/index.ts

@@ -9,6 +9,8 @@ var di = require('phosphor-di');
 function main() {
    phosphide.loadPlugins(new di.Container(), [
     require('phosphide/lib/appshell/plugin'),
+    require('phosphide/lib/commandregistry/plugin'),
+    require('phosphide/lib/commandpalette/plugin'),
     require('../lib/terminal/plugin'),
     require('../lib/editor/plugin'),
     require('../lib/filebrowser/plugin'),

examples/lab/plugin.ts

@@ -3,15 +3,23 @@
 'use strict';
 
 import {
-  IAppShell
+  FileBrowser
+} from 'jupyter-js-filebrowser';
+
+import {
+  IAppShell, ICommandPalette, ICommandRegistry
 } from 'phosphide';
 
+import {
+  ICommand, DelegateCommand
+} from 'phosphor-command';
+
 import {
   Container, Token
 } from 'phosphor-di';
 
 import {
-  ITerminalProvider
+  ITerminalProvider, IFileBrowserProvider
 } from '../lib';
 
 
@@ -37,31 +45,54 @@ class DefaultHandler {
   /**
    * The dependencies required by the default plugin.
    */
-  static requires: Token<any>[] = [IAppShell, ITerminalProvider];
+  static requires: Token<any>[] = [IAppShell, ITerminalProvider, ICommandPalette, ICommandRegistry, IFileBrowserProvider];
 
   /**
    * Create a default plugin instance..
    */
-  static create(shell: IAppShell, term: ITerminalProvider): DefaultHandler {
-    return new DefaultHandler(shell, term);
+  static create(shell: IAppShell, term: ITerminalProvider, palette: ICommandPalette, registry: ICommandRegistry, browser: IFileBrowserProvider): DefaultHandler {
+    return new DefaultHandler(shell, term, palette, registry, browser);
   }
 
   /**
    * Construct a new default plugin.
    */
-  constructor(shell: IAppShell, term: ITerminalProvider) {
+  constructor(shell: IAppShell, term: ITerminalProvider, palette: ICommandPalette, registry: ICommandRegistry, browser: IFileBrowserProvider) {
     this._shell = shell;
     this._term = term;
+    this._palette = palette;
+    this._registry = registry;
+    this._browser = browser.fileBrowser;
   }
 
   /**
    * Create a terminal and add it to the main shell area.
    */
   run() {
-    let term = this._term.createTerminal();
-    this._shell.addToMainArea(term);
+    let commandItem = {
+      id: 'jupyter-plugins:new-terminal',
+      command: new DelegateCommand(() => {
+        let term = this._term.createTerminal();
+        this._shell.addToMainArea(term);
+      })
+    }
+    this._registry.add([commandItem]);
+    let paletteItem = {
+      id: 'jupyter-plugins:new-terminal',
+      title: 'New Terminal',
+      caption: ''
+    }
+    let section = {
+      text: 'Open...',
+      items: [paletteItem]
+    }
+    this._palette.add([section]);
+    this._shell.addToLeftArea(this._browser, { rank: 10 });
   }
 
   private _term: ITerminalProvider = null;
   private _shell: IAppShell = null;
+  private _palette: ICommandPalette = null;
+  private _registry: ICommandRegistry = null;
+  private _browser: FileBrowser;
 }

examples/lab/tsconfig.json

@@ -11,6 +11,7 @@
     "../typings/es6-promise.d.ts",
     "../typings/codemirror/codemirror.d.ts",
     "../typings/requirejs/requirejs.d.ts",
-    "index.ts"
+    "index.ts",
+    "plugin.ts"
   ]
 }

package.json

@@ -10,8 +10,9 @@
     "jupyter-js-services": "^0.3.0-alpha",
     "jupyter-js-terminal": "^0.1.3",
     "jupyter-js-utils": "^0.1.0",
-    "phosphide": "0.0.6",
-    "phosphor-codemirror": "0.0.1",
+    "phosphide": "^0.0.7",
+    "phosphor-codemirror": "^0.0.1",
+    "phosphor-command": "^0.5.0",
     "phosphor-di": "^0.9.0"
   },
   "devDependencies": {

src/filebrowser/plugin.ts

@@ -39,15 +39,6 @@ function register(container: Container): void {
 }
 
 
-/**
- * Resolve the default file provider.
- */
-export
-function resolve(container: Container): Promise<void> {
-  return container.resolve(FileBrowserProvider).then(() => { return; });
-}
-
-
 /**
  * An implementation of the FileBrowserProvider provider.
  */
@@ -71,21 +62,7 @@ class FileBrowserProvider implements IFileBrowserProvider {
   constructor(shell: IAppShell, services: IServicesProvider, editor: IEditorHandler) {
     this._shell = shell;
     this._editor = editor;
-    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 });
-    model.changed.connect((instance, change) => {
-      if (change.name === 'open' && change.newValue.type === 'file') {
-        let newEditor = editor.createEditor();
-        editor.setModeByFileName(newEditor, change.newValue.name);
-        editor.setText(newEditor, change.newValue.content);
-        newEditor.title.text = change.newValue.name;
-        this._shell.addToMainArea(newEditor);
-      }
-    });
+    this._services = services;
   }
 
   /**
@@ -95,11 +72,18 @@ class FileBrowserProvider implements IFileBrowserProvider {
    * This is a read-only property.
    */
   get fileBrowser(): FileBrowser {
+    if (this._browser === null) {
+      let contents = this._services.contentsManager;
+      let sessions = this._services.notebookSessionManager;
+      let model = new FileBrowserModel('', contents, sessions);
+      this._browser = new FileBrowser(model);
+      this._browser.title.text = 'Files';
+    }
     return this._browser;
   }
 
   private _shell: IAppShell = null;
   private _editor: IEditorHandler = null;
   private _browser: FileBrowser = null;
-
+  private _services: IServicesProvider;
 }

src/services/index.ts

@@ -19,19 +19,19 @@ export
 interface IServicesProvider {
 
   /**
-   * Create a new kernel manager instance.
+   * Get the kernel manager instance.
    */
-  createKernelManager(): IKernelManager;
+  kernelManager: IKernelManager;
 
   /**
-   * Create a new session manager instance.
+   * Get the session manager instance.
    */
-  createNotebookSessionManager(): INotebookSessionManager;
+  notebookSessionManager: INotebookSessionManager;
 
   /**
-   * Create a new contents manager instance.
+   * Get the contents manager instance.
    */
-  createContentsManager(): IContentsManager;
+  contentsManager: IContentsManager;
 }
 
 

src/services/plugin.ts

@@ -55,33 +55,45 @@ class ServicesProvider implements IServicesProvider {
    * Construct a new services provider.
    */
   constructor() {
-    this._baseUrl = getConfigOption('baseUrl');
-    this._ajaxSettings = getConfigOption('ajaxSettings');
+    let baseUrl = getConfigOption('baseUrl');
+    let ajaxSettings = getConfigOption('ajaxSettings');
+    let options = { baseUrl, ajaxSettings };
+    this._kernelManager = new KernelManager(options);
+    this._sessionManager = new NotebookSessionManager(options);
+    this._contentsManager = new ContentsManager(baseUrl, ajaxSettings);
   }
 
   /**
-   * Create a new kernel manager instance.
+   * Get kernel manager instance.
+   *
+   * #### Notes
+   * This is a read-only property.
    */
-  createKernelManager(): IKernelManager {
-    let options = { baseUrl: this._baseUrl, ajaxSettings: this._ajaxSettings };
-    return new KernelManager(options);
+  get kernelManager(): IKernelManager {
+    return this._kernelManager;
   }
 
   /**
-   * Create a new session manager instance.
+   * Get the session manager instance.
+   *
+   * #### Notes
+   * This is a read-only property.
    */
-  createNotebookSessionManager(): INotebookSessionManager {
-    let options = { baseUrl: this._baseUrl, ajaxSettings: this._ajaxSettings };
-    return new NotebookSessionManager(options);
+  get notebookSessionManager(): INotebookSessionManager {
+    return this._sessionManager;
   }
 
   /**
-   * Create a new contents manager instance.
+   * Get the contents manager instance.
+   *
+   * #### Notes
+   * This is a read-only property.
    */
-  createContentsManager(): IContentsManager {
-    return new ContentsManager(this._baseUrl, this._ajaxSettings);
+  get contentsManager(): IContentsManager {
+    return this._contentsManager;
   }
 
-  private _baseUrl = '';
-  private _ajaxSettings: any = null;
+  private _kernelManager: IKernelManager = null;
+  private _sessionManager: INotebookSessionManager = null;
+  private _contentsManager: IContentsManager = null;
 }