From 0c818c038ee17eaaebe9065b0797f36c4e627a90 Mon Sep 17 00:00:00 2001 From: Jeremy Tuloup Date: Fri, 11 Dec 2020 16:27:24 +0100 Subject: [PATCH 1/2] Make the layout more compact on mobile --- packages/application-extension/src/index.ts | 9 +++ packages/application/package.json | 1 + packages/application/src/app.ts | 37 ++++++++++++ packages/application/src/shell.ts | 63 +++++++++++++-------- packages/application/style/base.css | 4 ++ 5 files changed, 91 insertions(+), 23 deletions(-) diff --git a/packages/application-extension/src/index.ts b/packages/application-extension/src/index.ts index e82afdb1d..8346241a7 100644 --- a/packages/application-extension/src/index.ts +++ b/packages/application-extension/src/index.ts @@ -355,6 +355,15 @@ const topVisibility: JupyterFrontEndPlugin = { if (menu) { menu.viewMenu.addGroup([{ command: CommandIDs.toggleTop }], 2); } + + // listen on format change (mobile and desktop) to make the view more compact + app.formatChanged.connect(() => { + if (app.format === 'desktop') { + classicShell.expandTop(); + } else { + classicShell.collapseTop(); + } + }); }, autoStart: true }; diff --git a/packages/application/package.json b/packages/application/package.json index 23be28044..6738af3b7 100644 --- a/packages/application/package.json +++ b/packages/application/package.json @@ -50,6 +50,7 @@ "@lumino/algorithm": "^1.3.3", "@lumino/coreutils": "^1.5.3", "@lumino/messaging": "^1.4.3", + "@lumino/polling": "^1.3.3", "@lumino/signaling": "^1.4.3", "@lumino/widgets": "^1.14.0", "es6-promise": "~4.2.8" diff --git a/packages/application/src/app.ts b/packages/application/src/app.ts index 24a8bddc7..19bdb882d 100644 --- a/packages/application/src/app.ts +++ b/packages/application/src/app.ts @@ -8,6 +8,8 @@ import { import { PageConfig } from '@jupyterlab/coreutils'; +import { Throttler } from '@lumino/polling'; + import { IClassicShell, ClassicShell } from './shell'; /** @@ -73,6 +75,18 @@ export class App extends JupyterFrontEnd { }; } + /** + * Handle the DOM events for the application. + * + * @param event - The DOM event sent to the application. + */ + handleEvent(event: Event): void { + super.handleEvent(event); + if (event.type === 'resize') { + void this._formatter.invoke(); + } + } + /** * Register plugins from a plugin module. * @@ -106,6 +120,10 @@ export class App extends JupyterFrontEnd { this.registerPluginModule(mod); }); } + + private _formatter = new Throttler(() => { + Private.setFormat(this); + }, 250); } /** @@ -128,3 +146,22 @@ export namespace App { default: JupyterFrontEndPlugin | JupyterFrontEndPlugin[]; } } + +/** + * A namespace for module-private functionality. + */ +namespace Private { + /** + * Media query for mobile devices. + */ + const MOBILE_QUERY = 'only screen and (max-width: 760px)'; + + /** + * Sets the `format` of a Jupyter front-end application. + * + * @param app The front-end application whose format is set. + */ + export function setFormat(app: App): void { + app.format = window.matchMedia(MOBILE_QUERY).matches ? 'mobile' : 'desktop'; + } +} diff --git a/packages/application/src/shell.ts b/packages/application/src/shell.ts index 86bb6216f..83e3bf5cc 100644 --- a/packages/application/src/shell.ts +++ b/packages/application/src/shell.ts @@ -63,18 +63,46 @@ export class ClassicShell extends Widget implements JupyterFrontEnd.IShell { BoxLayout.setStretch(menuWrapper, 0); BoxLayout.setStretch(this._main, 1); - const spacer = new Widget(); - spacer.node.style.minHeight = '16px'; + this._spacer = new Widget(); + this._spacer.id = 'spacer-widget'; rootLayout.spacing = 0; rootLayout.addWidget(topWrapper); rootLayout.addWidget(menuWrapper); - rootLayout.addWidget(spacer); + rootLayout.addWidget(this._spacer); rootLayout.addWidget(this._main); this.layout = rootLayout; } + /** + * A signal emitted when the current widget changes. + */ + get currentChanged(): ISignal { + return this._currentChanged; + } + + /** + * The current widget in the shell's main area. + */ + get currentWidget(): Widget { + return this._main.widgets[0]; + } + + /** + * Get the top area wrapper panel + */ + get top(): Widget { + return this._topWrapper; + } + + /** + * Get the menu area wrapper panel + */ + get menu(): Widget { + return this._menuWrapper; + } + activateById(id: string): void { // no-op } @@ -114,31 +142,19 @@ export class ClassicShell extends Widget implements JupyterFrontEnd.IShell { } /** - * A signal emitted when the current widget changes. + * Collapse the top area and the spacer to make the view more compact. */ - get currentChanged(): ISignal { - return this._currentChanged; + collapseTop(): void { + this._topWrapper.setHidden(true); + this._spacer.setHidden(true); } /** - * The current widget in the shell's main area. + * Expand the top area to show the header and the spacer. */ - get currentWidget(): Widget { - return this._main.widgets[0]; - } - - /** - * Get the top area wrapper panel - */ - get top(): Widget { - return this._topWrapper; - } - - /** - * Get the menu area wrapper panel - */ - get menu(): Widget { - return this._menuWrapper; + expandTop(): void { + this._topWrapper.setHidden(false); + this._spacer.setHidden(false); } /** @@ -160,6 +176,7 @@ export class ClassicShell extends Widget implements JupyterFrontEnd.IShell { private _topHandler: Private.PanelHandler; private _menuWrapper: Panel; private _menuHandler: Private.PanelHandler; + private _spacer: Widget; private _main: Panel; private _currentChanged = new Signal(this); } diff --git a/packages/application/style/base.css b/packages/application/style/base.css index c29b804e2..e69181b99 100644 --- a/packages/application/style/base.css +++ b/packages/application/style/base.css @@ -63,3 +63,7 @@ body { margin-right: auto; max-width: 1200px; } + +#spacer-widget { + min-height: 16px; +} From 12c24d39e713be11b301c5feacd0f6e590c0d5a0 Mon Sep 17 00:00:00 2001 From: Jeremy Tuloup Date: Fri, 11 Dec 2020 16:41:33 +0100 Subject: [PATCH 2/2] Make zen mode even more compact --- packages/application-extension/src/index.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/application-extension/src/index.ts b/packages/application-extension/src/index.ts index 8346241a7..1b9b238fe 100644 --- a/packages/application-extension/src/index.ts +++ b/packages/application-extension/src/index.ts @@ -396,18 +396,16 @@ const zen: JupyterFrontEndPlugin = { ): void => { const { commands } = app; const elem = document.documentElement; - const topArea = classicShell?.top; - const menuArea = classicShell?.menu; const toggleOn = () => { - topArea?.setHidden(true); - menuArea?.setHidden(true); + classicShell?.collapseTop(); + classicShell?.menu.setHidden(true); zenModeEnabled = true; }; const toggleOff = () => { - topArea?.setHidden(false); - menuArea?.setHidden(false); + classicShell?.expandTop(); + classicShell?.menu.setHidden(false); zenModeEnabled = false; };