Finish minimal running plugin

examples/lab/index.js

@@ -1,12 +1,12 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-'use strict';
 
 var phosphide = require('phosphide/lib/core/application');
 
 // ES6 Promise polyfill
 require('es6-promise').polyfill();
 
+require('font-awesome/css/font-awesome.min.css');
 require('jupyterlab/lib/default-theme/index.css');
 
 var app = new phosphide.Application({
@@ -19,7 +19,9 @@ var app = new phosphide.Application({
     require('jupyterlab/lib/imagewidget/plugin').imageHandlerExtension,
     require('jupyterlab/lib/landing/plugin').landingExtension,
     require('jupyterlab/lib/main/plugin').mainExtension,
+    require('jupyterlab/lib/mainmenu/plugin').mainMenuExtension,
     require('jupyterlab/lib/notebook/plugin').notebookHandlerExtension,
+    require('jupyterlab/lib/running/plugin').runningSessionsExtension,
     require('jupyterlab/lib/shortcuts/plugin').shortcutsExtension,
     require('jupyterlab/lib/terminal/plugin').terminalExtension,
     require('jupyterlab/lib/widgets/plugin').widgetManagerExtension,
@@ -29,6 +31,7 @@ var app = new phosphide.Application({
     require('jupyterlab/lib/clipboard/plugin').clipboardProvider,
     require('jupyterlab/lib/docregistry/plugin').docRegistryProvider,
     require('jupyterlab/lib/notebook/plugin').notebookTrackerProvider,
+    require('jupyterlab/lib/mainmenu/plugin').mainMenuProvider,
     require('jupyterlab/lib/rendermime/plugin').renderMimeProvider,
     require('jupyterlab/lib/services/plugin').servicesProvider,
   ]

examples/lab/package.json

@@ -1,22 +1,32 @@
 {
   "private": true,
-  "name": "jupyterlab-example",
-  "scripts": {
-    "build": "webpack --config webpack.conf.js",
-    "clean": "rimraf build && rimraf node_modules",
-    "postinstall": "npm dedupe",
-    "update": "rimraf node_modules/jupyterlab && npm install",
-    "watch": "watch 'npm run update && npm run build' ../../src --wait 10"
-  },
+  "name": "lab-example",
+  "version": "0.0.1",
+  "description": "JupyterLab extension",
   "dependencies": {
     "es6-promise": "^3.1.2",
+    "font-awesome": "^4.6.1",
     "jupyter-js-services": "^0.14.0",
     "jupyterlab": "file:../../",
     "phosphide": "^0.9.5"
   },
   "devDependencies": {
-    "rimraf": "^2.5.2",
-    "watch": "^0.18.0",
-    "webpack": "^1.13.1"
-  }
+    "css-loader": "^0.23.1",
+    "file-loader": "^0.8.5",
+    "json-loader": "^0.5.4",
+    "rimraf": "^2.5.0",
+    "style-loader": "^0.13.0",
+    "typescript": "^1.7.5",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.12.11"
+  },
+  "scripts": {
+    "clean": "rimraf build",
+    "update": "rimraf node_modules/jupyterlab && npm install",
+    "build": "webpack --config webpack.conf.js",
+    "postinstall": "npm dedupe",
+    "test": "echo 'no tests specified'"
+  },
+  "author": "Project Jupyter",
+  "license": "BSD-3-Clause"
 }

examples/lab/webpack.conf.js

@@ -1,24 +1,36 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+// Support for Node 0.10
+// See https://github.com/webpack/css-loader/issues/144
+require('es6-promise').polyfill();
 
 module.exports = {
   entry: './index.js',
   output: {
     path: __dirname + "/build",
     filename: "bundle.js",
-    publicPath: "./build/"
+    publicPath: "lab/"
   },
   node: {
     fs: "empty"
   },
   debug: true,
-  devtool: 'source-map',
   bail: true,
+  devtool: 'inline-source-map',
   module: {
     loaders: [
       { test: /\.css$/, loader: 'style-loader!css-loader' },
       { test: /\.json$/, loader: 'json-loader' },
-      { test: /\.html$/, loader: 'file' },
-      // Handle image
-      { test: /\.(jpg|png|gif|svg)$/, loader: "file" },
+      { test: /\.html$/, loader: 'file'},
+      // jquery-ui loads some images
+      { test: /\.(jpg|png|gif)$/, loader: "file" },
+      // required to load font-awesome
+      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/font-woff" },
+      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/font-woff" },
+      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/octet-stream" },
+      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
+      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=image/svg+xml" }
     ]
   }
 }

src/default-theme/index.css

@@ -6,6 +6,8 @@
 @import url('~jupyterlab/lib/notebook/theme.css');
 @import url('~jupyterlab/lib/index.css');
 @import url('~jupyterlab/lib/theme.css');
+@import url('~jupyterlab/lib/running/index.css');
+@import url('~jupyterlab/lib/running/theme.css');
 
 @import './about.css';
 @import './commandpalette.css';

src/running/index.css

@@ -2,10 +2,10 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
 .jp-RunningSessions {
   display: flex;
   flex-direction: column;
-  min-width: 300px;
 }
 
 
@@ -28,7 +28,7 @@
 
 .jp-RunningSessions-section {
   display: flex;
-  flex: 1 1 auto;
+  flex: 0 1 auto;
   flex-direction: column;
 }
 
@@ -47,6 +47,8 @@
 
 
 .jp-RunningSessions-sectionList {
+  margin: 0;
+  padding: 0;
   list-style-type: none;
 }
 

src/running/index.ts

@@ -25,8 +25,6 @@ import {
   hitTestNodes, findElement
 } from '../utils';
 
-import './index.css';
-
 
 /**
  * The class name added to a running widget.
@@ -144,7 +142,6 @@ class RunningSessions extends Widget {
     let refresh = document.createElement('span');
     refresh.className = REFRESH_CLASS;
     header.appendChild(refresh);
-    refresh.textContent = 'REFRESH';
 
     node.appendChild(header);
     node.appendChild(terminals);

src/running/theme.css

@@ -0,0 +1,113 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+.jp-RunningSessions {
+  min-width: 300px;
+  color: #333;
+  background-color: #fff;
+  font-size: 13px;
+}
+
+
+.jp-RunningSessions-header {
+  background: white;
+}
+
+
+.jp-RunningSessions-headerTitle {
+  padding: 6px;
+  font-size: 12px;
+  vertical-align: middle;
+}
+
+
+.jp-RunningSessions-headerRefresh {
+  margin: 2px;
+  padding: 1px 5px;
+  border-radius: 1px;
+  border: 1px solid #ccc;
+  line-height: 1.5;
+}
+
+
+.jp-RunningSessions-headerRefresh:before {
+  font-family: FontAwesome;
+  content: '\f021'; /* refresh */
+  font-size: 12px;
+}
+
+
+.jp-RunningSessions-headerRefresh:hover {
+  background: #F5F5F5;
+  border-color: #D0D0D0;
+  z-index: 1; /* raise overlapping border */
+}
+
+
+.jp-RunningSessions-sectionHeader {
+  background: #EEE;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 7px;
+  padding-right: 7px;
+  line-height: 22px;
+}
+
+
+.jp-RunningSessions-item {
+  color: #337ab7;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 7px;
+  padding-right: 7px;
+  line-height: 22px;
+}
+
+
+.jp-RunningSessions-item:hover {
+    background: #F5F5F5;
+}
+
+
+.jp-RunningSessions-itemIcon {
+  font-size: 14px;
+  font-family: FontAwesome;
+  color: #5e5e5e;
+  margin-right: 7px;
+  margin-left: 7px;
+  line-height: 22px;
+  vertical-align: baseline;
+}
+
+.jp-RunningSessions-itemIcon.jp-mod-notebook:before {
+  content: '\f02d'; 
+}
+
+
+.jp-RunningSessions-itemIcon.jp-mod-file:before {
+  content: '\f016'; 
+}
+
+
+.jp-RunningSessions-itemIcon.jp-mod-terminal:before {
+  content: '\f120'; 
+}
+
+
+.jp-RunningSessions-itemKernelName {
+  margin-right: 7px;
+}
+
+
+.jp-RunningSessions-itemShutdown {
+  padding: 4px;
+  color: #ffffff;
+  background: #f0ad4e;
+  padding: 2px 5px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 1px;
+  cursor: pointer;
+}