Update notebook style

package.json

@@ -10,7 +10,7 @@
     "jquery-ui": "^1.10.5",
     "jupyter-js-docmanager": "^0.2.1",
     "jupyter-js-filebrowser": "^0.9.0",
-    "jupyter-js-notebook": "^0.5.0",
+    "jupyter-js-notebook": "^0.5.7",
     "jupyter-js-services": "^0.5.0",
     "jupyter-js-terminal": "^0.1.15",
     "jupyter-js-utils": "^0.3.0",

src/default-theme/index.css

@@ -407,3 +407,50 @@ body {
 .p-Menu-item.p-type-submenu > .p-Menu-itemSubmenuIcon::before {
   content: '\f0da';
 }
+
+
+.CodeMirror.cm-s-default {
+  line-height: 1.21429em;
+  /* Changed from 1em to our global default */
+  font-size: 14px;
+  height: auto;
+  /* Changed to auto to autogrow */
+  background: none;
+  /* Changed from white to allow our bg to show through */
+}
+
+
+.CodeMirror-scroll {
+  /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
+  /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+
+
+.CodeMirror-lines {
+  /* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
+  /* we have set a different line-height and want this to scale with that. */
+  padding: 0.4em;
+}
+
+
+.CodeMirror-linenumber {
+  padding: 0 8px 0 4px;
+}
+
+
+
+.CodeMirror-gutters {
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
+}
+
+
+.CodeMirror pre {
+  /* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
+  /* .CodeMirror-lines */
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+}

src/default-theme/notebook.css

@@ -2,17 +2,41 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
-.p-Widget .jp-NotebookWidget {
+.p-Widget.jp-NotebookWidget {
   min-width: 50px;
   min-height: 50px;
 }
 
-.p-Widget .jp-NotebookContainer {
+
+.p-Widget.jp-NotebookContainer {
   overflow: auto;
 }
 
-.p-Widget .jp-NotebookWidget-body {
+
+.p-Widget.jp-NotebookWidget-body {
   padding: 0.5em;
   font-size: 11px;
 }
 
+
+.jp-InputAreaWidget > .jp-CodeMirrorWidget {
+  border: 1px solid #cfcfcf;
+  border-radius: 2px;
+  background: #f7f7f7;
+  line-height: 1.21429em;
+}
+
+
+.jp-Cell.jp-mod-selected {
+  border-color: #ababab;
+  border-left-width: 0px;
+  padding-left: 6px;
+  background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 5px, transparent 5px, transparent 100%);
+}
+
+
+.jp-Cell {
+  padding-top: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+}

src/notebook/plugin.ts

@@ -33,7 +33,7 @@ import {
 } from 'phosphor-panel';
 
 import {
-  Property
+  IChangedArgs, Property
 } from 'phosphor-properties';
 
 import {
@@ -57,6 +57,12 @@ let selectPreviousCellCommandId = 'notebook:select-previous-cell';
 let notebookContainerClass = 'jp-NotebookContainer';
 
 
+/**
+ * The class name added to a dirty documents.
+ */
+const DIRTY_CLASS = 'jp-mod-dirty';
+
+
 /**
  * Register the plugin contributions.
  *
@@ -139,7 +145,7 @@ function messageToModel(msg: IKernelMessage) {
 /**
  * Execute the selected cell in a notebook.
  */
-function executeSelectedCell(model: NotebookModel, session: INotebookSession)  {
+function executeSelectedCell(model: INotebookModel, session: INotebookSession)  {
   let cell = model.cells.get(model.selectedCellIndex);
   if (isCodeCellModel(cell)) {
     let exRequest = {
@@ -160,6 +166,7 @@ function executeSelectedCell(model: NotebookModel, session: INotebookSession)  {
         output.add(model)
       }
     });
+    model.selectNextCell();
     ex.onReply = (msg => {console.log('a', msg)});
     ex.onDone = (msg => {console.log('b', msg)});
   }
@@ -169,7 +176,7 @@ function executeSelectedCell(model: NotebookModel, session: INotebookSession)  {
 /**
  * Render the selected cell in a notebook.
  */
-function renderSelectedCell(model: NotebookModel)  {
+function renderSelectedCell(model: INotebookModel)  {
   let cell = model.cells.get(model.selectedCellIndex);
   if (isMarkdownCellModel(cell)) {
     cell.rendered = true;
@@ -188,6 +195,7 @@ class NotebookContainer extends Panel {
   constructor() {
     super();
     this._model = new NotebookModel();
+    this._model.stateChanged.connect(this._onModelChanged, this);
     let widgetarea = new Widget();
     this._manager = new WidgetManager(widgetarea.node);
     let widget = new NotebookWidget(this._model);
@@ -202,7 +210,7 @@ class NotebookContainer extends Panel {
    * #### Notes
    * This is a read-only property.
    */
-  get model(): NotebookModel {
+  get model(): INotebookModel {
     return this._model;
   }
 
@@ -238,6 +246,16 @@ class NotebookContainer extends Panel {
     });
   }
 
+  private _onModelChanged(model: INotebookModel, args: IChangedArgs<INotebookModel>): void {
+    if (args.name == 'dirty') {
+      if (args.newValue) {
+        this.addClass(DIRTY_CLASS);
+      } else {
+        this.removeClass(DIRTY_CLASS);
+      }
+    }
+  }
+
   private _manager: WidgetManager = null;
   private _model: INotebookModel = null;
   private _session: INotebookSession = null;

src/shortcuts.ts

@@ -50,7 +50,7 @@ const SHORTCUTS: IShortcutItem[] = [
   },
   {
     command: 'notebook:render-selected-cell',
-    selector: '.jp-MarkdownCel',
+    selector: '.jp-MarkdownCell',
     sequence: ['Shift Enter']
   }