diff --git a/packages/application/style/base.css b/packages/application/style/base.css index e69181b99..491a4f178 100644 --- a/packages/application/style/base.css +++ b/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; +} diff --git a/packages/notebook-extension/src/index.ts b/packages/notebook-extension/src/index.ts index 638d83749..6749b19f6 100644 --- a/packages/notebook-extension/src/index.ts +++ b/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 = { 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 = { provides: JupyterFrontEnd.IPaths }; -/** - * The default RetroLab application shell. - */ -const shell: JupyterFrontEndPlugin = { - 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. */ diff --git a/packages/notebook-extension/style/base.css b/packages/notebook-extension/style/base.css index 51bbb77ae..ed1bc5e01 100644 --- a/packages/notebook-extension/style/base.css +++ b/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; +} diff --git a/packages/notebook-extension/style/variables.css b/packages/notebook-extension/style/variables.css new file mode 100644 index 000000000..e4dd10425 --- /dev/null +++ b/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; +} diff --git a/retrolab/templates/notebooks.html b/retrolab/templates/notebooks.html index 756ac4cce..d70b0e147 100644 --- a/retrolab/templates/notebooks.html +++ b/retrolab/templates/notebooks.html @@ -8,7 +8,7 @@ {% endblock %} - + {# Copy so we do not modify the page_config with updates. #} {% set page_config_full = page_config.copy() %}