inital flex layout of launcher

jupyterlab/extensions.js

@@ -16,6 +16,7 @@ module.exports = [
   require('../lib/imagewidget/plugin').imageHandlerExtension,
   require('../lib/inspector/plugin').inspectorProvider,
   require('../lib/landing/plugin').landingExtension,
+  require('../lib/launcher/plugin').launcherExtension,
   require('../lib/main/plugin').mainExtension,
   require('../lib/mainmenu/plugin').mainMenuProvider,
   require('../lib/markdownwidget/plugin').markdownHandlerExtension,

src/default-theme/index.css

@@ -29,6 +29,7 @@
 @import '../imagewidget/index.css';
 @import '../inspector/index.css';
 @import '../landing/index.css';
+@import '../launcher/index.css';
 @import '../markdownwidget/index.css';
 @import '../notebook/index.css';
 @import '../renderers/index.css';

src/landing/plugin.ts

@@ -134,7 +134,7 @@ function activateLanding(app: JupyterLab, services: IServiceManager, pathTracker
   cwd.appendChild(path);
   dialog.appendChild(cwd);
 
-  app.commands.addCommand('jupyterlab-launcher:show', {
+  app.commands.addCommand('jupyterlab-landing:show', {
     label: 'Show Launcher',
     execute: () => {
       if (!widget.isAttached) {
@@ -146,7 +146,7 @@ function activateLanding(app: JupyterLab, services: IServiceManager, pathTracker
   });
 
   palette.addItem({
-    command: 'jupyterlab-launcher:show',
+    command: 'jupyterlab-landing:show',
     category: 'Help'
   });
 

src/launcher/index.css

@@ -0,0 +1,137 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+.jp-Launcher {
+  position: absolute;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
+  top: 0px;
+  left: 0px;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+
+.jp-Launcher-dialog {
+  padding-bottom: 12px;
+  font-size: var(--jp-ui-font-size1);
+  color: var(--jp-ui-font-color1);
+  background: var(--jp-layout-color1);
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  flex-wrap: wrap;
+  box-shadow: 0 2px 7px 1px #BDBDBD;
+}
+
+
+.jp-Launcher-logo {
+  flex: 0 0 50px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  background-color: var(--jp-layout-color1);
+  background-size: 232px 50px;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-top: 20px;
+
+}
+
+.jp-Launcher-subtitle {
+  background-color: var(--jp-layout-color1);
+  font-size: var(--jp-ui-font-size2);
+  width: 100%;
+  margin-top: 4px;
+  font-weight: 300;
+}
+
+.jp-Launcher-header {
+  padding-top: 16px;
+  padding-bottom: 4px;
+}
+
+
+.jp-Launcher-body {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+
+.jp-Launcher-column {
+  padding-left: 20px;
+  padding-right: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+
+.jp-Launcher-image {
+  flex: 0 0 auto;
+  min-height: 72px;
+  min-width: 56px;
+  max-width: 56px;
+  background-size: 56px 72px;
+  background-repeat: no-repeat;
+
+}
+
+.jp-Launcher-image:hover {
+  cursor: pointer;
+}
+
+.jp-Launcher-text {
+  flex: 0 0 auto;
+  padding-top: 8px;
+}
+
+.jp-Launcher-tour {
+    margin-top: 14px;
+    height: 14px;
+    width: 100%;
+    cursor: pointer;
+    padding-bottom: 14px;
+    border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
+    background-position: top center;
+    background-repeat: no-repeat;
+}
+
+.jp-Launcher-folder {
+  margin-right: 0;
+  float: left;
+  display: inline-block;
+  background-origin: content-box;
+  background-repeat: no-repeat;
+  clear: none;
+  padding-bottom: 2px;
+  height: 12px;
+  width: 12px;
+}
+
+.jp-Launcher-path {
+    padding-left: 8px;
+    color: var(--jp-ui-font-color2);
+}
+
+.jp-Launcher-cwd {
+    float: left;
+    padding-top: 14px;
+    padding-bottom: 14px;
+    margin-right: auto;
+}
+
+

src/launcher/plugin.ts

@@ -0,0 +1,133 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+  Widget
+} from 'phosphor/lib/ui/widget';
+
+import {
+  JupyterLab, JupyterLabPlugin
+} from '../application';
+
+import {
+  ICommandPalette
+} from '../commandpalette';
+
+import {
+  IPathTracker
+} from '../filebrowser';
+
+import {
+  IServiceManager
+} from '../services';
+
+/**
+ * The landing page extension.
+ */
+export
+const launcherExtension: JupyterLabPlugin<void> = {
+  id: 'jupyter.extensions.launcher',
+  requires: [IServiceManager, IPathTracker, ICommandPalette],
+  activate: activateLauncher,
+  autoStart: true
+};
+
+
+function activateLauncher(app: JupyterLab, services: IServiceManager, pathTracker: IPathTracker, palette: ICommandPalette): void {
+  let widget = new Widget();
+  widget.id = 'landing-jupyterlab';
+  widget.title.label = 'Launcher';
+  widget.addClass('jp-Launcher');
+
+  let dialog = document.createElement('div');
+  dialog.className = 'jp-Launcher-dialog';
+  widget.node.appendChild(dialog);
+  
+  let path = document.createElement('span');
+  path.textContent = 'home';
+  pathTracker.pathChanged.connect(() => {
+    if (pathTracker.path.length > 0) {
+      path.textContent = 'home > ';
+      let path2 = pathTracker.path;
+      path2 = path2.replace('/', ' > ');
+      path.textContent += path2;
+    } else {
+      path.textContent = 'home';
+    }
+  });
+  path.className = 'jp-Launcher-path';
+
+  let cwd = document.createElement('div');
+  cwd.className = 'jp-Launcher-cwd';
+  
+  let folderImage = document.createElement('span');
+  folderImage.className = 'jp-Launcher-folder';
+
+
+  cwd.appendChild(folderImage);
+  cwd.appendChild(path);
+  dialog.appendChild(cwd);
+
+  let body = document.createElement('div');
+  body.className = 'jp-Launcher-body';
+  dialog.appendChild(body);
+
+  for (let name of ['Notebook', 'Notebook2', 'Terminal', 'Text Editor', 'Notebook', 'Console', 'Terminal', 'Text Editor']) {
+    let column = document.createElement('div');
+    body.appendChild(column);
+    column.className = 'jp-Launcher-column';
+
+    let img = document.createElement('span');
+    let imgName = name.replace(' ', '');
+    img.className = `jp-Image${imgName} jp-Launcher-image`;
+
+    column.appendChild(img);
+
+    let text = document.createElement('span');
+    text.textContent = name;
+    text.className = 'jp-Launcher-text';
+    column.appendChild(text);
+  }
+
+  let img = body.getElementsByClassName('jp-ImageNotebook')[0];
+  img.addEventListener('click', () => {
+    app.commands.execute('file-operations:new-notebook', void 0);
+  });
+
+  img = body.getElementsByClassName('jp-ImageConsole')[0];
+  img.addEventListener('click', () => {
+    app.commands.execute(`console:create-${services.kernelspecs.default}`, void 0);
+  });
+
+  img = body.getElementsByClassName('jp-ImageTextEditor')[0];
+  img.addEventListener('click', () => {
+    app.commands.execute('file-operations:new-text-file', void 0);
+  });
+
+  img = body.getElementsByClassName('jp-ImageTerminal')[0];
+  img.addEventListener('click', () => {
+    app.commands.execute('terminal:create-new', void 0);
+  });
+
+
+
+
+
+  app.commands.addCommand('jupyterlab-launcher:show', {
+    label: 'Show Launcher',
+    execute: () => {
+      if (!widget.isAttached) {
+        app.shell.addToLeftArea(widget);
+      } else {
+        app.shell.activateMain(widget.id);
+      }
+    }
+  });
+
+  palette.addItem({
+    command: 'jupyterlab-launcher:show',
+    category: 'Help'
+  });
+
+  app.shell.addToLeftArea(widget);
+}