Merge pull request #244 from jtpio/scrollbar-document

More document-oriented feel for the notebook (scrollbar)

packages/application/style/base.css

@@ -7,6 +7,7 @@
   --jp-private-topbar-height: 28px;
   /* Override the layout-2 color for the dark theme */
   --md-grey-800: #323232;
+  --jp-notebook-max-width: 1200px;
 }
 
 body {
@@ -54,16 +55,28 @@ body {
   padding-right: 5px;
   margin-left: auto;
   margin-right: auto;
-  max-width: 1200px;
+  max-width: var(--jp-notebook-max-width);
 }
 
 #main-panel {
   box-shadow: var(--jp-elevation-z4);
   margin-left: auto;
   margin-right: auto;
-  max-width: 1200px;
+  max-width: var(--jp-notebook-max-width);
 }
 
 #spacer-widget {
   min-height: 16px;
 }
+
+/* Special case notebooks as document oriented pages */
+
+body[data-retro='notebooks'] #main-panel {
+  margin-left: unset;
+  margin-right: unset;
+  max-width: unset;
+}
+
+body[data-retro='notebooks'] #spacer-widget {
+  min-height: unset;
+}

packages/notebook-extension/src/index.ts

@@ -16,7 +16,7 @@ import { NotebookPanel } from '@jupyterlab/notebook';
 
 import { ITranslator } from '@jupyterlab/translation';
 
-import { RetroApp, RetroShell, IRetroShell } from '@retrolab/application';
+import { RetroApp, IRetroShell } from '@retrolab/application';
 
 import { Poll } from '@lumino/polling';
 
@@ -149,7 +149,9 @@ const kernelLogo: JupyterFrontEndPlugin<void> = {
       app.shell.add(widget, 'top', { rank: 10_010 });
     };
 
-    shell.currentChanged.connect(onChange);
+    app.started.then(() => {
+      shell.currentChanged.connect(onChange);
+    });
   }
 };
 
@@ -225,21 +227,6 @@ const paths: JupyterFrontEndPlugin<JupyterFrontEnd.IPaths> = {
   provides: JupyterFrontEnd.IPaths
 };
 
-/**
- * The default RetroLab application shell.
- */
-const shell: JupyterFrontEndPlugin<IRetroShell> = {
-  id: '@retrolab/application-extension:shell',
-  activate: (app: JupyterFrontEnd) => {
-    if (!(app.shell instanceof RetroShell)) {
-      throw new Error(`${shell.id} did not find a RetroShell instance.`);
-    }
-    return app.shell;
-  },
-  autoStart: true,
-  provides: IRetroShell
-};
-
 /**
  * Export the plugins as default.
  */

packages/notebook-extension/style/base.css

@@ -4,6 +4,49 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+@import './variables.css';
+
+/* Document oriented look for the notebook (scrollbar to the right of the page) */
+
+body[data-retro='notebooks'] .jp-NotebookPanel-toolbar {
+  padding-left: calc(calc(100% - var(--jp-notebook-max-width)) * 0.5);
+  padding-right: calc(calc(100% - var(--jp-notebook-max-width)) * 0.5);
+}
+
+body[data-retro='notebooks'] .jp-Notebook > * {
+  background: var(--jp-layout-color0);
+  padding: var(--jp-notebook-padding);
+}
+
+body[data-retro='notebooks']
+  .jp-Notebook.jp-mod-commandMode
+  .jp-Cell.jp-mod-active.jp-mod-selected:not(.jp-mod-multiSelected) {
+  background: var(--jp-layout-color0) !important;
+}
+
+body[data-retro='notebooks'] .jp-Notebook > *:first-child {
+  padding-top: var(--jp-notebook-padding-offset);
+  margin-top: var(--jp-notebook-toolbar-margin-bottom);
+}
+
+body[data-retro='notebooks'] .jp-Notebook {
+  padding-top: unset;
+  padding-bottom: unset;
+  padding-left: calc(calc(100% - var(--jp-notebook-max-width)) * 0.5);
+  padding-right: calc(
+    calc(
+        100% - var(--jp-notebook-max-width) - var(--jp-notebook-padding-offset)
+      ) * 0.5
+  );
+  background: var(--jp-layout-color2);
+}
+
+body[data-retro='notebooks'] .jp-Notebook.jp-mod-scrollPastEnd::after {
+  background: var(--jp-layout-color0);
+}
+
+/* ---- */
+
 .jp-RetroKernelLogo {
   flex: 0 0 auto;
   display: flex;
@@ -19,14 +62,14 @@
 }
 
 .jp-RetroKernelStatus {
-  font-size: var(--jp-ui-font-size1);
   margin: 0;
   font-weight: normal;
+  font-size: var(--jp-ui-font-size1);
   color: var(--jp-ui-font-color0);
   font-family: var(--jp-ui-font-family);
   line-height: var(--jp-private-title-panel-height);
-  padding-left: 5px;
-  padding-right: 5px;
+  padding-left: var(--jp-kernel-status-padding);
+  padding-right: var(--jp-kernel-status-padding);
 }
 
 .jp-RetroKernelStatus-error {
@@ -89,3 +132,7 @@
 body[data-format='mobile'] .jp-RetroCheckpoint {
   display: none;
 }
+
+body[data-format='mobile'] .jp-Notebook > *:first-child {
+  margin-top: 0;
+}

packages/notebook-extension/style/variables.css

@@ -0,0 +1,6 @@
+:root {
+  --jp-notebook-toolbar-margin-bottom: 20px;
+  --jp-notebook-padding-offset: 20px;
+
+  --jp-kernel-status-padding: 5px;
+}

retrolab/templates/notebooks.html

@@ -8,7 +8,7 @@
   <link rel="icon" type="image/x-icon" href="{{ base_url | escape }}static/favicons/favicon-notebook.ico" class="favicon">
   {% endblock %}
 </head>
-<body>
+<body data-retro="notebooks">
 
   {# Copy so we do not modify the page_config with updates. #}
   {% set page_config_full = page_config.copy() %}