From 2b36ca8c1129a4aa8f980c38fbc7ddaba8aa6c5e Mon Sep 17 00:00:00 2001 From: Jeremy Tuloup Date: Thu, 10 Dec 2020 23:38:05 +0100 Subject: [PATCH 1/2] About and keyboard shortcuts --- builder/index.js | 1 + builder/package.json | 1 + packages/application/src/app.ts | 5 +- packages/help-extension/package.json | 57 ++++++ packages/help-extension/src/index.tsx | 166 ++++++++++++++++++ packages/help-extension/style/base.css | 47 +++++ packages/help-extension/style/index.css | 1 + packages/help-extension/style/index.js | 1 + packages/help-extension/tsconfig.json | 8 + packages/lab-extension/src/index.ts | 2 +- .../ui-components/style/icons/jupyter.svg | 80 ++++----- 11 files changed, 321 insertions(+), 48 deletions(-) create mode 100644 packages/help-extension/package.json create mode 100644 packages/help-extension/src/index.tsx create mode 100644 packages/help-extension/style/base.css create mode 100644 packages/help-extension/style/index.css create mode 100644 packages/help-extension/style/index.js create mode 100644 packages/help-extension/tsconfig.json diff --git a/builder/index.js b/builder/index.js index 1b5adecab..53d9077f7 100644 --- a/builder/index.js +++ b/builder/index.js @@ -71,6 +71,7 @@ async function main() { // @jupyterlab-classic plugins require('@jupyterlab-classic/application-extension'), require('@jupyterlab-classic/docmanager-extension'), + require('@jupyterlab-classic/help-extension'), require('@jupyterlab-classic/notebook-extension'), // to handle opening new tabs after creating a new terminal require('@jupyterlab-classic/terminal-extension'), diff --git a/builder/package.json b/builder/package.json index 28cf7098d..1fbf3f65e 100644 --- a/builder/package.json +++ b/builder/package.json @@ -13,6 +13,7 @@ "@jupyterlab-classic/application": "^0.1.0", "@jupyterlab-classic/application-extension": "^0.1.0", "@jupyterlab-classic/docmanager-extension": "^0.1.0", + "@jupyterlab-classic/help-extension": "^0.1.0", "@jupyterlab-classic/notebook-extension": "^0.1.0", "@jupyterlab-classic/terminal-extension": "^0.1.0", "@jupyterlab-classic/tree-extension": "^0.1.0", diff --git a/packages/application/src/app.ts b/packages/application/src/app.ts index 23e06a1e6..24a8bddc7 100644 --- a/packages/application/src/app.ts +++ b/packages/application/src/app.ts @@ -28,7 +28,7 @@ export class App extends JupyterFrontEnd { /** * The name of the application. */ - readonly name = 'JupyterLab Custom App'; + readonly name = 'JupyterLab Classic'; /** * A namespace/prefix plugins may use to denote their provenance. @@ -38,7 +38,8 @@ export class App extends JupyterFrontEnd { /** * The version of the application. */ - readonly version = 'unknown'; + + readonly version = PageConfig.getOption('appVersion') ?? 'unknown'; /** * The JupyterLab application paths dictionary. diff --git a/packages/help-extension/package.json b/packages/help-extension/package.json new file mode 100644 index 000000000..4ec1f1b8b --- /dev/null +++ b/packages/help-extension/package.json @@ -0,0 +1,57 @@ +{ + "name": "@jupyterlab-classic/help-extension", + "version": "0.1.0", + "description": "JupyterLab Classic - Help Extension", + "homepage": "https://github.com/jtpio/jupyterlab-classic", + "bugs": { + "url": "https://github.com/jtpio/jupyterlab-classic/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/jtpio/jupyterlab-classic.git" + }, + "license": "BSD-3-Clause", + "author": "Project Jupyter", + "sideEffects": [ + "style/**/*.css", + "style/index.js" + ], + "main": "lib/index.js", + "types": "lib/index.d.ts", + "style": "style/index.css", + "styleModule": "style/index.js", + "directories": { + "lib": "lib/" + }, + "files": [ + "lib/*.d.ts", + "lib/*.js.map", + "lib/*.js", + "schema/*.json", + "style/**/*.css", + "style/index.js" + ], + "scripts": { + "build": "tsc -b", + "clean": "rimraf lib && rimraf tsconfig.tsbuildinfo", + "docs": "typedoc src", + "prepublishOnly": "npm run build", + "watch": "tsc -b --watch" + }, + "dependencies": { + "@jupyterlab-classic/ui-components": "^0.1.0", + "@jupyterlab/application": "^3.0.0-rc.13", + "@jupyterlab/apputils": "^3.0.0-rc.13", + "@jupyterlab/mainmenu": "^3.0.0-rc.13" + }, + "devDependencies": { + "rimraf": "~3.0.0", + "typescript": "~4.0.2" + }, + "publishConfig": { + "access": "public" + }, + "jupyterlab": { + "extension": true + } +} diff --git a/packages/help-extension/src/index.tsx b/packages/help-extension/src/index.tsx new file mode 100644 index 000000000..f3ee7838a --- /dev/null +++ b/packages/help-extension/src/index.tsx @@ -0,0 +1,166 @@ +// Copyright (c) Jupyter Development Team. +// Distributed under the terms of the Modified BSD License. + +import { + JupyterFrontEnd, + JupyterFrontEndPlugin +} from '@jupyterlab/application'; + +import { showDialog, Dialog } from '@jupyterlab/apputils'; + +import { IMainMenu } from '@jupyterlab/mainmenu'; + +import { jupyterIcon } from '@jupyterlab-classic/ui-components'; + +import * as React from 'react'; + +/** + * A list of resources to show in the help menu. + */ +const RESOURCES = [ + { + text: 'About Jupyter', + url: 'https://jupyter.org' + }, + { + text: 'Markdown Reference', + url: 'https://commonmark.org/help/' + } +]; + +/** + * The command IDs used by the help plugin. + */ +namespace CommandIDs { + export const open = 'help:open'; + + export const shortcuts = 'help:shortcuts'; + + export const about = 'help:about'; +} + +/** + * The help plugin. + */ +const plugin: JupyterFrontEndPlugin = { + id: '@jupyterlab-classic/help-extension:plugin', + autoStart: true, + optional: [IMainMenu], + activate: (app: JupyterFrontEnd, menu: IMainMenu): void => { + const { commands } = app; + + commands.addCommand(CommandIDs.open, { + label: args => args['text'] as string, + execute: args => { + const url = args['url'] as string; + window.open(url); + } + }); + + commands.addCommand(CommandIDs.shortcuts, { + label: 'Keyboard Shortcuts', + execute: () => { + const title = ( + +
+ Keyboard Shortcuts +
+ + ); + + const body = ( + + + + + + + + + {commands.keyBindings + .filter(binding => commands.isEnabled(binding.command)) + .map((binding, i) => ( + + + + + ))} + +
NameShortcut
{commands.label(binding.command)} + 
{binding.keys.join(', ')}
+
+ ); + + return showDialog({ + title, + body, + buttons: [ + Dialog.createButton({ + label: 'Dismiss', + className: + 'jp-AboutClassic-about-button jp-mod-reject jp-mod-styled' + }) + ] + }); + } + }); + + commands.addCommand(CommandIDs.about, { + label: `About ${app.name}`, + execute: () => { + const title = ( + <> + + + + + ); + + const classicNotebookURL = + 'https://github.com/jtpio/jupyterlab-classic'; + const externalLinks = ( + + + JUPYTERLAB CLASSIC ON GITHUB + + + ); + const body = ( + <> + JupyterLab Classic + Version: {app.version} +
{externalLinks}
+ + ); + + return showDialog({ + title, + body, + buttons: [ + Dialog.createButton({ + label: 'Dismiss', + className: + 'jp-AboutClassic-about-button jp-mod-reject jp-mod-styled' + }) + ] + }); + } + }); + + const resourcesGroup = RESOURCES.map(args => ({ + args, + command: CommandIDs.open + })); + + menu.helpMenu.addGroup([{ command: CommandIDs.about }]); + menu.helpMenu.addGroup([{ command: CommandIDs.shortcuts }]); + menu.helpMenu.addGroup(resourcesGroup); + } +}; + +export default plugin; diff --git a/packages/help-extension/style/base.css b/packages/help-extension/style/base.css new file mode 100644 index 000000000..d64af94f5 --- /dev/null +++ b/packages/help-extension/style/base.css @@ -0,0 +1,47 @@ +.jp-AboutClassic-header { + display: flex; + flex-direction: row; + align-items: center; + height: calc(1.5 * var(--jp-private-topbar-height)); +} + +.jp-AboutClassic-header-text { + margin-left: 16px; +} + +.jp-AboutClassic-body { + display: flex; + font-size: var(--jp-ui-font-size3); + padding: var(--jp-flat-button-padding); + color: var(--jp-ui-font-color1); + text-align: left; + flex-direction: column; + min-width: 360px; + overflow: hidden; +} + +.jp-AboutClassic-about-body pre { + white-space: pre-wrap; +} + +.jp-AboutClassic-about-externalLinks { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + padding-top: 12px; + color: var(--jp-warn-color0); +} + +.jp-AboutClassic-shortcuts { + padding: 10px; +} + +.jp-AboutClassic-shortcuts pre { + padding: 5px; + margin: 0 0 10px; + background: var(--jp-layout-color2); + border: 1px solid var(--jp-border-color0); + border-radius: 2px; + word-break: break-all; +} diff --git a/packages/help-extension/style/index.css b/packages/help-extension/style/index.css new file mode 100644 index 000000000..f5246e666 --- /dev/null +++ b/packages/help-extension/style/index.css @@ -0,0 +1 @@ +@import url('./base.css'); diff --git a/packages/help-extension/style/index.js b/packages/help-extension/style/index.js new file mode 100644 index 000000000..a028a7640 --- /dev/null +++ b/packages/help-extension/style/index.js @@ -0,0 +1 @@ +import './base.css'; diff --git a/packages/help-extension/tsconfig.json b/packages/help-extension/tsconfig.json new file mode 100644 index 000000000..399b75b7a --- /dev/null +++ b/packages/help-extension/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../tsconfigbase", + "compilerOptions": { + "outDir": "lib", + "rootDir": "src" + }, + "include": ["src/**/*"] +} diff --git a/packages/lab-extension/src/index.ts b/packages/lab-extension/src/index.ts index 1ee39b1f5..07f2c0695 100644 --- a/packages/lab-extension/src/index.ts +++ b/packages/lab-extension/src/index.ts @@ -76,7 +76,7 @@ const openClassic: JupyterFrontEndPlugin = { optional: [INotebookTracker, ICommandPalette, IMainMenu], activate: ( app: JupyterFrontEnd, - notebookTracker: INotebookTracker, + notebookTracker: INotebookTracker | null, palette: ICommandPalette | null, menu: IMainMenu | null ) => { diff --git a/packages/ui-components/style/icons/jupyter.svg b/packages/ui-components/style/icons/jupyter.svg index d1fe65484..ca73a3c5f 100644 --- a/packages/ui-components/style/icons/jupyter.svg +++ b/packages/ui-components/style/icons/jupyter.svg @@ -1,79 +1,69 @@ - - - - - image/svg+xml - - logo.svg - - - - logo.svg - Created using Figma 0.90 -