From f4ee9be939888f797c3794227b6b3f67816ffe7b Mon Sep 17 00:00:00 2001 From: Jeremy Tuloup Date: Fri, 8 Oct 2021 13:56:50 +0200 Subject: [PATCH 1/2] Document oriented scrollbar for the notebook --- packages/application/style/base.css | 17 ++++++- packages/notebook-extension/src/index.ts | 21 ++------ packages/notebook-extension/style/base.css | 48 +++++++++++++++++-- .../notebook-extension/style/variables.css | 6 +++ retrolab/templates/notebooks.html | 2 +- 5 files changed, 71 insertions(+), 23 deletions(-) create mode 100644 packages/notebook-extension/style/variables.css 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..2223f7022 100644 --- a/packages/notebook-extension/style/base.css +++ b/packages/notebook-extension/style/base.css @@ -4,6 +4,44 @@ | Distributed under the terms of the Modified BSD License. |----------------------------------------------------------------------------*/ +@import './variables.css'; + +.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); +} + +.jp-Notebook > * { + background: var(--jp-layout-color0); + padding: var(--jp-notebook-padding); +} + +.jp-Notebook.jp-mod-commandMode + .jp-Cell.jp-mod-active.jp-mod-selected:not(.jp-mod-multiSelected) { + background: var(--jp-layout-color0) !important; +} + +.jp-Notebook > *:first-child { + padding-top: var(--jp-notebook-padding-offset); + margin-top: var(--jp-notebook-toolbar-margin-bottom); +} + +.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); +} + +.jp-Notebook.jp-mod-scrollPastEnd::after { + background: var(--jp-layout-color0); +} + .jp-RetroKernelLogo { flex: 0 0 auto; display: flex; @@ -19,14 +57,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 +127,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() %} From 105245c5cb6b81ad85a8039f21aa50d5e1f1c3b3 Mon Sep 17 00:00:00 2001 From: Jeremy Tuloup Date: Sun, 10 Oct 2021 10:23:53 +0200 Subject: [PATCH 2/2] More CSS scoping --- packages/notebook-extension/style/base.css | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/notebook-extension/style/base.css b/packages/notebook-extension/style/base.css index 2223f7022..ed1bc5e01 100644 --- a/packages/notebook-extension/style/base.css +++ b/packages/notebook-extension/style/base.css @@ -6,27 +6,30 @@ @import './variables.css'; -.jp-NotebookPanel-toolbar { +/* 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); } -.jp-Notebook > * { +body[data-retro='notebooks'] .jp-Notebook > * { background: var(--jp-layout-color0); padding: var(--jp-notebook-padding); } -.jp-Notebook.jp-mod-commandMode +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; } -.jp-Notebook > *:first-child { +body[data-retro='notebooks'] .jp-Notebook > *:first-child { padding-top: var(--jp-notebook-padding-offset); margin-top: var(--jp-notebook-toolbar-margin-bottom); } -.jp-Notebook { +body[data-retro='notebooks'] .jp-Notebook { padding-top: unset; padding-bottom: unset; padding-left: calc(calc(100% - var(--jp-notebook-max-width)) * 0.5); @@ -38,10 +41,12 @@ background: var(--jp-layout-color2); } -.jp-Notebook.jp-mod-scrollPastEnd::after { +body[data-retro='notebooks'] .jp-Notebook.jp-mod-scrollPastEnd::after { background: var(--jp-layout-color0); } +/* ---- */ + .jp-RetroKernelLogo { flex: 0 0 auto; display: flex;