; + } +} ``` - 定时任务 Stub (尚未实现) ```diff diff --git a/packages/jldbq-extenison/src/TaskViewWidget.tsx b/packages/jldbq-extenison/src/TaskViewWidget.tsx new file mode 100644 index 0000000000..9497654443 --- /dev/null +++ b/packages/jldbq-extenison/src/TaskViewWidget.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { ReactWidget } from '@jupyterlab/apputils'; + +export default class TaskViewWidget extends ReactWidget { + render(): JSX.Element { + return

; + } +} ``` - Backend API 相关代码 ```diff diff --git a/packages/jldbq-extenison/src/api/config.ts b/packages/jldbq-extenison/src/api/config.ts new file mode 100644 index 0000000000..78b468134b --- /dev/null +++ b/packages/jldbq-extenison/src/api/config.ts @@ -0,0 +1,5 @@ +const config = { + endpoint: 'http://192.168.51.19:5000' +}; + +export default config; diff --git a/packages/jldbq-extenison/src/api/datasource.ts b/packages/jldbq-extenison/src/api/datasource.ts new file mode 100644 index 0000000000..8927b678bb --- /dev/null +++ b/packages/jldbq-extenison/src/api/datasource.ts @@ -0,0 +1,106 @@ +import useSWR from 'swr'; +import config from './config'; + +type DbEnc = 'utf8'; +type DbType = 'mysql' | 'hive'; + +export interface IDatasource { + host: string; + user: string; + port: number; + password: string; + charset: DbEnc; + manager: string; + source: DbType; + databasename: string; + sourcename: string; +} + +interface IDatasourceResponse { + datasources?: IDatasource[]; + loading: boolean; + error?: any; + refresh: () => void; +} + +export type ITableData = Record>; + +export const useDatasourceList = (manager: string): IDatasourceResponse => { + const endpoint = config.endpoint; + const item = encodeURIComponent(manager); + const url = `${endpoint}/managelist/item=${item}`; + const { data, error, mutate } = useSWR(url, (...args) => + fetch(...args).then(res => res.json()) + ); + return { + datasources: data, + loading: !error && !data, + error, + refresh: mutate + }; +}; + +export const setDatasource = async ( + datasource: IDatasource +): Promise => { + const endpoint = config.endpoint; + const url = `${endpoint}/manage`; + try { + const resp = await fetch(url, { + method: 'post', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(datasource) + }); + if (!resp.ok) { + return 'error'; + } + const data = await resp.text(); + return data; + } catch (e) { + console.error(e); + return 'error'; + } +}; + +export const fetchTables = async ( + ds: IDatasource +): Promise<'error' | string[]> => { + const endpoint = config.endpoint; + const item = encodeURIComponent( + `${ds.manager};${ds.sourcename};${ds.databasename}` + ); + const url = `${endpoint}/show/${ds.source}/tables/item=${item}`; + try { + const resp = await fetch(url); + if (!resp.ok) { + return 'error'; + } + const data = (await resp.json()) as string[]; + return data; + } catch (e) { + console.error(e); + return 'error'; + } +}; + +export const fetchTableContent = async ( + ds: IDatasource, + t: string +): Promise => { + const endpoint = config.endpoint; + const item = encodeURIComponent( + `${ds.manager};${ds.sourcename};${ds.databasename};${t}` + ); + const url = `${endpoint}/show/${ds.source}/results/item=${item}`; + try { + const resp = await fetch(url); + if (!resp.ok) { + return 'error'; + } + const data = (await resp.json()) as ITableData; + return data; + } catch (e) { + console.error(e); + return 'error'; + } +}; diff --git a/packages/jldbq-extenison/src/api/index.ts b/packages/jldbq-extenison/src/api/index.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/jldbq-extenison/src/icons.ts b/packages/jldbq-extenison/src/icons.ts new file mode 100644 index 0000000000..9e2b76f812 --- /dev/null +++ b/packages/jldbq-extenison/src/icons.ts @@ -0,0 +1,19 @@ +import { LabIcon } from '@jupyterlab/ui-components'; +import cliSvgStr from '../style/icons/cli.svg'; +import timerSvgStr from '../style/icons/timer.svg'; +import monitorSvgStr from '../style/icons/monitor.svg'; + +export const cliIcon = new LabIcon({ + name: 'cli', + svgstr: cliSvgStr +}); + +export const timerIcon = new LabIcon({ + name: 'timer', + svgstr: timerSvgStr +}); + +export const monitorIcon = new LabIcon({ + name: 'monitor', + svgstr: monitorSvgStr +}); ``` - 实现数据开发的 JupyterLab 插件 (添加左侧侧边栏) ```diff diff --git a/packages/jldbq-extenison/src/index.ts b/packages/jldbq-extenison/src/index.ts new file mode 100644 index 0000000000..28da880058 --- /dev/null +++ b/packages/jldbq-extenison/src/index.ts @@ -0,0 +1,71 @@ +/** + * @packageDocumentation + * @module jldbq-extension + */ + +import { + JupyterFrontEnd, + JupyterFrontEndPlugin +} from '@jupyterlab/application'; +import { MainAreaWidget } from '@jupyterlab/apputils'; +import { ISettingRegistry } from '@jupyterlab/settingregistry'; +import DataViewWidget from './DataViewWidget'; +import DataTableWidget from './DataTableWidget'; +import TaskViewWidget from './TaskViewWidget'; +import MonitorViewWidget from './MonitorViewWidget'; +import { cliIcon, monitorIcon, timerIcon } from './icons'; +import config from './api/config'; + +const PLUGIN_ID = '@jupyterlab/jldbq-extension:plugin'; + +const plugin: JupyterFrontEndPlugin = { + id: PLUGIN_ID, + autoStart: true, + requires: [ISettingRegistry], + activate: async (app: JupyterFrontEnd, registry: ISettingRegistry) => { + registry.pluginChanged.connect(async (_sender, plugin) => { + if (plugin === PLUGIN_ID) { + await updateConfig(registry); + } + }); + await updateConfig(registry); + + const manager = 'test1'; // TODO: 读取当前用户 + + const dataViewWidget = new DataViewWidget(manager); + dataViewWidget.id = 'jldbq-data'; + dataViewWidget.title.icon = cliIcon; + dataViewWidget.title.caption = '数据开发'; + dataViewWidget.title.label = '数据开发'; + dataViewWidget.tableOpened.connect((_sender, { datasource, tableName }) => { + const content = new DataTableWidget(datasource, tableName); + const widget = new MainAreaWidget({ content }); + widget.title.label = tableName; + widget.title.icon = cliIcon; + app.shell.add(widget, 'main'); + }); + app.shell.add(dataViewWidget, 'left', { rank: 100 }); + + const taskViewWidget = new TaskViewWidget(); + taskViewWidget.id = 'jldbq-sync'; + taskViewWidget.title.icon = timerIcon; + taskViewWidget.title.caption = '定时任务'; + taskViewWidget.title.label = '定时任务'; + app.shell.add(taskViewWidget, 'left', { rank: 1000 }); + + const monitorViewWidget = new MonitorViewWidget(); + monitorViewWidget.id = 'jldbq-monitor'; + monitorViewWidget.title.icon = monitorIcon; + monitorViewWidget.title.caption = '调度监控'; + monitorViewWidget.title.label = '调度监控'; + app.shell.add(monitorViewWidget, 'left', { rank: 1100 }); + } +}; + +export default plugin; + +async function updateConfig(registry: ISettingRegistry) { + const settings = await registry.load(PLUGIN_ID); + const endpoint = settings.composite['flaskBackend'] as string; + config.endpoint = endpoint; +} ``` - 数据开发的相关样式代码 ```diff diff --git a/packages/jldbq-extenison/src/png.d.ts b/packages/jldbq-extenison/src/png.d.ts new file mode 100644 index 0000000000..1c5923252c --- /dev/null +++ b/packages/jldbq-extenison/src/png.d.ts @@ -0,0 +1,4 @@ +declare module '*.png' { + const value: string; + export default value; +} diff --git a/packages/jldbq-extenison/src/svg.d.ts b/packages/jldbq-extenison/src/svg.d.ts new file mode 100644 index 0000000000..0ca27598c5 --- /dev/null +++ b/packages/jldbq-extenison/src/svg.d.ts @@ -0,0 +1,4 @@ +declare module "*.svg" { + const value: string; + export default value; +} diff --git a/packages/jldbq-extenison/style/base.css b/packages/jldbq-extenison/style/base.css new file mode 100644 index 0000000000..e2026de0cb --- /dev/null +++ b/packages/jldbq-extenison/style/base.css @@ -0,0 +1,9 @@ +/* + See the JupyterLab Developer Guide for useful CSS Patterns: + + https://jupyterlab.readthedocs.io/en/stable/developer/css.html +*/ + +@import './syncform.css'; +@import './button.css'; +@import './dsform.css'; diff --git a/packages/jldbq-extenison/style/button.css b/packages/jldbq-extenison/style/button.css new file mode 100644 index 0000000000..ea9c093f0b --- /dev/null +++ b/packages/jldbq-extenison/style/button.css @@ -0,0 +1,31 @@ +.jldbq-btn { + width: 95px; + height: 33px; + padding: 0; + border: none; + background-color: #edf0f6; + color: #4a4a4a; + border-radius: 0; +} + +.jldbq-btn.jldbq-btn-current { + background-color: #d1e4f6; +} + +.jldbq-btn:hover:not(.jldbq-btn-current) { + opacity: 0.8; +} + +.jldbq-btn-add { + display: flex; + align-items: center; + padding: 0; + background: none; + border: none; + color: #147bd1; + cursor: pointer; +} + +.jldbq-btn-add:hover { + opacity: 0.8; +} diff --git a/packages/jldbq-extenison/style/dsform.css b/packages/jldbq-extenison/style/dsform.css new file mode 100644 index 0000000000..f952bc34f4 --- /dev/null +++ b/packages/jldbq-extenison/style/dsform.css @@ -0,0 +1,105 @@ +.jldbq-form { + display: flex; + flex-direction: column; +} + +.jldbq-form label { + margin-bottom: 30px; + display: flex; + align-items: center; +} + +.jldbq-form label:last-child { + margin-bottom: 0; +} + +.jldbq-form label.jldbq-form-error:last-child { + border: 1px solid #ed5555; +} + +.jldbq-form .jldbq-form-label { + color: #4a4a4a; + width: 75px; + text-align: end; +} + +.jldbq-form .jldbq-form-switcher { + margin-left: 15px; + display: flex; + justify-content: space-around; + align-items: center; + width: 320px; +} + +.jldbq-form .jldbq-form-input { + font-family: inherit; + box-sizing: border-box; + width: 320px; + height: 32px; + border-radius: 2px; + border: 1px solid #c8d3e9; + margin-left: 15px; + padding: 0 15px; + font-size: 12px; + transition: all 100ms; + outline: 1px solid transparent; +} + +.jldbq-form .jldbq-form-input:focus { + outline-color: #147bd1; +} + +.jldbq-form .react-select-container { + width: 320px; + margin-left: 15px; +} + +.jldbq-form .react-select__control { + border-radius: 2px; + border: 1px solid #c8d3e9; + min-height: 32px; +} + +.jldbq-form .react-select__control:hover { + border-color: #c8d3e9; +} + +.jldbq-form .react-select__indicator-separator { + background-color: #c8d3e9; + margin: 4px 0; +} + +.jldbq-form .react-select__indicator { + color: #4883fb; + padding: 0 8px; +} + +.jldbq-form .react-select__value-container { + padding: 0 15px; + font-size: 12px; +} + +.jldbq-form .react-select__single-value { + padding: 0; + margin: 0; +} + +.jldbq-form .react-select__placeholder { + padding: 0; + margin: 0; +} + +.jldbq-form .react-select__input-container { + padding: 0; + margin: 0; +} + +.jldbq-form .react-select__menu-notice { + font-size: 12px; +} + +.jldbq-form .react-select__option { + font-size: 12px; + padding-left: 16px; + padding-right: 16px; +} diff --git a/packages/jldbq-extenison/style/icons/cli.svg b/packages/jldbq-extenison/style/icons/cli.svg new file mode 100644 index 0000000000..d712aada18 --- /dev/null +++ b/packages/jldbq-extenison/style/icons/cli.svg @@ -0,0 +1,10 @@ + + \ No newline at end of file diff --git a/packages/jldbq-extenison/style/icons/clock-fill.svg b/packages/jldbq-extenison/style/icons/clock-fill.svg new file mode 100644 index 0000000000..7cece1ee7b --- /dev/null +++ b/packages/jldbq-extenison/style/icons/clock-fill.svg @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/packages/jldbq-extenison/style/icons/database-solid-ghost.svg b/packages/jldbq-extenison/style/icons/database-solid-ghost.svg new file mode 100644 index 0000000000..8edad9815c --- /dev/null +++ b/packages/jldbq-extenison/style/icons/database-solid-ghost.svg @@ -0,0 +1,43 @@ + + diff --git a/packages/jldbq-extenison/style/icons/database-solid.svg b/packages/jldbq-extenison/style/icons/database-solid.svg new file mode 100644 index 0000000000..e867c2bf34 --- /dev/null +++ b/packages/jldbq-extenison/style/icons/database-solid.svg @@ -0,0 +1,5 @@ + + \ No newline at end of file diff --git a/packages/jldbq-extenison/style/icons/monitor.svg b/packages/jldbq-extenison/style/icons/monitor.svg new file mode 100644 index 0000000000..5cd7ad7c83 --- /dev/null +++ b/packages/jldbq-extenison/style/icons/monitor.svg @@ -0,0 +1,9 @@ + + \ No newline at end of file diff --git a/packages/jldbq-extenison/style/icons/timer.svg b/packages/jldbq-extenison/style/icons/timer.svg new file mode 100644 index 0000000000..94d2d8509f --- /dev/null +++ b/packages/jldbq-extenison/style/icons/timer.svg @@ -0,0 +1,9 @@ + + \ No newline at end of file diff --git a/packages/jldbq-extenison/style/img/arrow.png b/packages/jldbq-extenison/style/img/arrow.png new file mode 100644 index 0000000000..50c9571f4e Binary files /dev/null and b/packages/jldbq-extenison/style/img/arrow.png differ diff --git a/packages/jldbq-extenison/style/img/delete.png b/packages/jldbq-extenison/style/img/delete.png new file mode 100644 index 0000000000..a64b86a722 Binary files /dev/null and b/packages/jldbq-extenison/style/img/delete.png differ diff --git a/packages/jldbq-extenison/style/index.css b/packages/jldbq-extenison/style/index.css new file mode 100644 index 0000000000..2257bf1a6e --- /dev/null +++ b/packages/jldbq-extenison/style/index.css @@ -0,0 +1,12 @@ +/*----------------------------------------------------------------------------- +| Copyright (c) Jupyter Development Team. +| Distributed under the terms of the Modified BSD License. +|----------------------------------------------------------------------------*/ + +/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */ +@import url('~@lumino/widgets/style/index.css'); +@import url('~@jupyterlab/ui-components/style/index.css'); +@import url('~@jupyterlab/apputils/style/index.css'); +@import url('~@jupyterlab/application/style/index.css'); + +@import url('./base.css'); diff --git a/packages/jldbq-extenison/style/index.js b/packages/jldbq-extenison/style/index.js new file mode 100644 index 0000000000..6f57f28e14 --- /dev/null +++ b/packages/jldbq-extenison/style/index.js @@ -0,0 +1,12 @@ +/*----------------------------------------------------------------------------- +| Copyright (c) Jupyter Development Team. +| Distributed under the terms of the Modified BSD License. +|----------------------------------------------------------------------------*/ + +/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */ +import '@lumino/widgets/style/index.js'; +import '@jupyterlab/ui-components/style/index.js'; +import '@jupyterlab/apputils/style/index.js'; +import '@jupyterlab/application/style/index.js'; + +import './base.css'; diff --git a/packages/jldbq-extenison/style/syncform.css b/packages/jldbq-extenison/style/syncform.css new file mode 100644 index 0000000000..701d4a2e25 --- /dev/null +++ b/packages/jldbq-extenison/style/syncform.css @@ -0,0 +1,45 @@ +@import '~antd/dist/antd.css'; + +.arrow { + display: inline-flex; + width: 10%; + height: 300px; + justify-content: center; + align-items: center; +} + +.plane { + height: 265px; + border: 1px solid #d9d9d9; + margin-top: 10px; + padding: 10px 0 0 10px; + overflow-y: scroll; +} + +.line { + height: 307px; + border-left: 1px solid #d9d9d9; + margin: 0 5%; +} + +.mappings { + width: 30%; + height: 307px; + border: 1px solid #d9d9d9; + padding-left: 15px; +} + +.mappings__title { + height: 32px; + line-height: 32px; + font-weight: 500; +} + +.mappings__content { + height: 260px; + overflow-y: scroll; +} + +#datasyncForm > .ant-form-item:last-child { + margin-bottom: 0; +} ``` - 去除一些不符合需求的组件 ```diff diff --git a/packages/launcher-extension/src/index.ts b/packages/launcher-extension/src/index.ts index 94dd0d7538..da8d738526 100644 --- a/packages/launcher-extension/src/index.ts +++ b/packages/launcher-extension/src/index.ts @@ -32,9 +32,9 @@ const plugin: JupyterFrontEndPlugin = { activate, id: '@jupyterlab/launcher-extension:plugin', requires: [ITranslator], - optional: [ILabShell, ICommandPalette], - provides: ILauncher, - autoStart: true + optional: [ILabShell, ICommandPalette] + // provides: ILauncher, + // autoStart: true }; /** diff --git a/packages/metapackage/package.json b/packages/metapackage/package.json index 2832703b72..921f346507 100644 --- a/packages/metapackage/package.json +++ b/packages/metapackage/package.json @@ -15,13 +15,16 @@ "sideEffects": false, "main": "lib/index.js", "types": "lib/index.d.ts", + "style": "style/index.css", "directories": { "lib": "lib/" }, "files": [ "lib/*.d.ts", "lib/*.js.map", - "lib/*.js" + "lib/*.js", + "style/index.css", + "style/index.js" ], "scripts": { "build": "tsc -b", @@ -75,6 +78,7 @@ "@jupyterlab/inspector": "^3.4.3", "@jupyterlab/inspector-extension": "^3.4.3", "@jupyterlab/javascript-extension": "^3.4.3", + "@jupyterlab/jldbq-extension": "^1.0.0", "@jupyterlab/json-extension": "^3.4.3", "@jupyterlab/launcher": "^3.4.3", "@jupyterlab/launcher-extension": "^3.4.3", @@ -86,6 +90,7 @@ "@jupyterlab/markdownviewer-extension": "^3.4.3", "@jupyterlab/mathjax2": "^3.4.3", "@jupyterlab/mathjax2-extension": "^3.4.3", + "@jupyterlab/mytest-extension": "^1.0.0", "@jupyterlab/nbconvert-css": "^3.4.3", "@jupyterlab/nbformat": "^3.4.3", "@jupyterlab/notebook": "^3.4.3", @@ -110,7 +115,6 @@ "@jupyterlab/statusbar-extension": "^3.4.3", "@jupyterlab/terminal": "^3.4.3", "@jupyterlab/terminal-extension": "^3.4.3", - "@jupyterlab/theme-dark-extension": "^3.4.3", "@jupyterlab/theme-light-extension": "^3.4.3", "@jupyterlab/toc": "^5.4.3", "@jupyterlab/toc-extension": "^5.4.3", @@ -132,5 +136,6 @@ }, "publishConfig": { "access": "public" - } + }, + "styleModule": "style/index.js" } diff --git a/packages/theme-dark-extension/style/theme.css b/packages/metapackage/style/index.css similarity index 52% rename from packages/theme-dark-extension/style/theme.css rename to packages/metapackage/style/index.css index 4761c94d2b..b2f19abe63 100644 --- a/packages/theme-dark-extension/style/theme.css +++ b/packages/metapackage/style/index.css @@ -3,15 +3,6 @@ | Distributed under the terms of the Modified BSD License. |----------------------------------------------------------------------------*/ -@import './variables.css'; - -/* Set the default typography for monospace elements */ -tt, -code, -kbd, -samp, -pre { - font-family: var(--jp-code-font-family); - font-size: var(--jp-code-font-size); - line-height: var(--jp-code-line-height); -} +/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */ +@import url('~@jupyterlab/jldbq-extension/style/index.css'); +@import url('~@jupyterlab/mytest-extension/style/index.css'); diff --git a/packages/metapackage/style/index.js b/packages/metapackage/style/index.js new file mode 100644 index 0000000000..cae86f17db --- /dev/null +++ b/packages/metapackage/style/index.js @@ -0,0 +1,8 @@ +/*----------------------------------------------------------------------------- +| Copyright (c) Jupyter Development Team. +| Distributed under the terms of the Modified BSD License. +|----------------------------------------------------------------------------*/ + +/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */ +import '@jupyterlab/jldbq-extension/style/index.js'; +import '@jupyterlab/mytest-extension/style/index.js'; ``` - 修改 Notebook 的样式和布局, 匹配前端原型 ```diff diff --git a/packages/notebook-extension/src/index.ts b/packages/notebook-extension/src/index.ts index 39a8057b24..c1524b80ad 100644 --- a/packages/notebook-extension/src/index.ts +++ b/packages/notebook-extension/src/index.ts @@ -21,7 +21,6 @@ import { MainAreaWidget, sessionContextDialogs, showDialog, - Toolbar, WidgetTracker } from '@jupyterlab/apputils'; import { Cell, CodeCell, ICellModel, MarkdownCell } from '@jupyterlab/cells'; @@ -94,7 +93,8 @@ import { } from '@lumino/coreutils'; import { DisposableSet, IDisposable } from '@lumino/disposable'; import { Message, MessageLoop } from '@lumino/messaging'; -import { Menu, Panel } from '@lumino/widgets'; +// import { Menu, Panel } from '@lumino/widgets'; +import { Panel } from '@lumino/widgets'; import { logNotebookOutput } from './nboutput'; /** @@ -270,7 +270,7 @@ const FACTORY = 'Notebook'; * The excluded Export To ... * (returned from nbconvert's export list) */ -const FORMAT_EXCLUDE = ['notebook', 'python', 'custom']; +// const FORMAT_EXCLUDE = ['notebook', 'python', 'custom']; /** * Setting Id storing the customized toolbar definition. @@ -477,111 +477,111 @@ export const executionIndicator: JupyterFrontEndPlugin = { /** * A plugin providing export commands in the main menu and command palette */ -export const exportPlugin: JupyterFrontEndPlugin = { - id: '@jupyterlab/notebook-extension:export', - autoStart: true, - requires: [ITranslator, INotebookTracker], - optional: [IMainMenu, ICommandPalette], - activate: ( - app: JupyterFrontEnd, - translator: ITranslator, - tracker: INotebookTracker, - mainMenu: IMainMenu | null, - palette: ICommandPalette | null - ) => { - const trans = translator.load('jupyterlab'); - const { commands, shell } = app; - const services = app.serviceManager; - - const isEnabled = (): boolean => { - return Private.isEnabled(shell, tracker); - }; - - commands.addCommand(CommandIDs.exportToFormat, { - label: args => { - const formatLabel = args['label'] as string; - return args['isPalette'] - ? trans.__('Save and Export Notebook: %1', formatLabel) - : formatLabel; - }, - execute: args => { - const current = getCurrent(tracker, shell, args); - - if (!current) { - return; - } - - const url = PageConfig.getNBConvertURL({ - format: args['format'] as string, - download: true, - path: current.context.path - }); - const { context } = current; - - if (context.model.dirty && !context.model.readOnly) { - return context.save().then(() => { - window.open(url, '_blank', 'noopener'); - }); - } - - return new Promise(resolve => { - window.open(url, '_blank', 'noopener'); - resolve(undefined); - }); - }, - isEnabled - }); - - // Add a notebook group to the File menu. - let exportTo: Menu | null | undefined; - if (mainMenu) { - exportTo = mainMenu.fileMenu.items.find( - item => - item.type === 'submenu' && - item.submenu?.id === 'jp-mainmenu-file-notebookexport' - )?.submenu; - } - - void services.nbconvert.getExportFormats().then(response => { - if (response) { - const formatLabels: any = Private.getFormatLabels(translator); - - // Convert export list to palette and menu items. - const formatList = Object.keys(response); - formatList.forEach(function (key) { - const capCaseKey = trans.__(key[0].toUpperCase() + key.substr(1)); - const labelStr = formatLabels[key] ? formatLabels[key] : capCaseKey; - let args = { - format: key, - label: labelStr, - isPalette: false - }; - if (FORMAT_EXCLUDE.indexOf(key) === -1) { - if (exportTo) { - exportTo.addItem({ - command: CommandIDs.exportToFormat, - args: args - }); - } - if (palette) { - args = { - format: key, - label: labelStr, - isPalette: true - }; - const category = trans.__('Notebook Operations'); - palette.addItem({ - command: CommandIDs.exportToFormat, - category, - args - }); - } - } - }); - } - }); - } -}; +// export const exportPlugin: JupyterFrontEndPlugin = { +// id: '@jupyterlab/notebook-extension:export', +// autoStart: true, +// requires: [ITranslator, INotebookTracker], +// optional: [IMainMenu, ICommandPalette], +// activate: ( +// app: JupyterFrontEnd, +// translator: ITranslator, +// tracker: INotebookTracker, +// mainMenu: IMainMenu | null, +// palette: ICommandPalette | null +// ) => { +// const trans = translator.load('jupyterlab'); +// const { commands, shell } = app; +// const services = app.serviceManager; + +// const isEnabled = (): boolean => { +// return Private.isEnabled(shell, tracker); +// }; + +// commands.addCommand(CommandIDs.exportToFormat, { +// label: args => { +// const formatLabel = args['label'] as string; +// return args['isPalette'] +// ? trans.__('Save and Export Notebook: %1', formatLabel) +// : formatLabel; +// }, +// execute: args => { +// const current = getCurrent(tracker, shell, args); + +// if (!current) { +// return; +// } + +// const url = PageConfig.getNBConvertURL({ +// format: args['format'] as string, +// download: true, +// path: current.context.path +// }); +// const { context } = current; + +// if (context.model.dirty && !context.model.readOnly) { +// return context.save().then(() => { +// window.open(url, '_blank', 'noopener'); +// }); +// } + +// return new Promise(resolve => { +// window.open(url, '_blank', 'noopener'); +// resolve(undefined); +// }); +// }, +// isEnabled +// }); + +// // Add a notebook group to the File menu. +// let exportTo: Menu | null | undefined; +// if (mainMenu) { +// exportTo = mainMenu.fileMenu.items.find( +// item => +// item.type === 'submenu' && +// item.submenu?.id === 'jp-mainmenu-file-notebookexport' +// )?.submenu; +// } + +// void services.nbconvert.getExportFormats().then(response => { +// if (response) { +// const formatLabels: any = Private.getFormatLabels(translator); + +// // Convert export list to palette and menu items. +// const formatList = Object.keys(response); +// formatList.forEach(function (key) { +// const capCaseKey = trans.__(key[0].toUpperCase() + key.substr(1)); +// const labelStr = formatLabels[key] ? formatLabels[key] : capCaseKey; +// let args = { +// format: key, +// label: labelStr, +// isPalette: false +// }; +// if (FORMAT_EXCLUDE.indexOf(key) === -1) { +// if (exportTo) { +// exportTo.addItem({ +// command: CommandIDs.exportToFormat, +// args: args +// }); +// } +// if (palette) { +// args = { +// format: key, +// label: labelStr, +// isPalette: true +// }; +// const category = trans.__('Notebook Operations'); +// palette.addItem({ +// command: CommandIDs.exportToFormat, +// category, +// args +// }); +// } +// } +// }); +// } +// }); +// } +// }; /** * A plugin that adds a notebook trust status item to the status bar. @@ -682,7 +682,7 @@ const plugins: JupyterFrontEndPlugin[] = [ factory, trackerPlugin, executionIndicator, - exportPlugin, + // exportPlugin, tools, commandEditItem, notebookTrustItem, @@ -844,13 +844,6 @@ function activateWidgetFactory( toolbarRegistry.registerFactory(FACTORY, 'cellType', panel => ToolbarItems.createCellTypeItem(panel, translator) ); - toolbarRegistry.registerFactory(FACTORY, 'kernelName', panel => - Toolbar.createKernelNameItem( - panel.sessionContext, - sessionContextDialogs, - translator - ) - ); toolbarRegistry.registerFactory( FACTORY, diff --git a/packages/notebook/src/default-toolbar.tsx b/packages/notebook/src/default-toolbar.tsx index bf94760cc6..5e931bb525 100644 --- a/packages/notebook/src/default-toolbar.tsx +++ b/packages/notebook/src/default-toolbar.tsx @@ -278,15 +278,7 @@ export namespace ToolbarItems { widget: createRestartRunAllButton(panel, sessionDialogs, translator) }, { name: 'cellType', widget: createCellTypeItem(panel, translator) }, - { name: 'spacer', widget: Toolbar.createSpacerItem() }, - { - name: 'kernelName', - widget: Toolbar.createKernelNameItem( - panel.sessionContext, - sessionDialogs, - translator - ) - } + { name: 'spacer', widget: Toolbar.createSpacerItem() } ]; } } diff --git a/packages/notebook/src/panel.ts b/packages/notebook/src/panel.ts index e1f70352f4..a30e01bd00 100644 --- a/packages/notebook/src/panel.ts +++ b/packages/notebook/src/panel.ts @@ -17,6 +17,7 @@ import { TranslationBundle } from '@jupyterlab/translation'; import { each } from '@lumino/algorithm'; +import { BoxLayout } from '@lumino/widgets'; import { Token } from '@lumino/coreutils'; import { INotebookModel } from './model'; import { Notebook, StaticNotebook } from './widget'; @@ -54,6 +55,8 @@ export class NotebookPanel extends DocumentWidget { // Set up CSS classes this.addClass(NOTEBOOK_PANEL_CLASS); this.toolbar.addClass(NOTEBOOK_PANEL_TOOLBAR_CLASS); + BoxLayout.setSizeBasis(this.toolbar, 42); + (this.layout as BoxLayout).spacing = 10; this.content.addClass(NOTEBOOK_PANEL_NOTEBOOK_CLASS); // Set up things related to the context @@ -136,7 +139,7 @@ export class NotebookPanel extends DocumentWidget { /** * Set URI fragment identifier. */ - setFragment(fragment: string) { + setFragment(fragment: string): void { void this.context.ready.then(() => { this.content.setFragment(fragment); }); @@ -154,7 +157,7 @@ export class NotebookPanel extends DocumentWidget { * Prints the notebook by converting to HTML with nbconvert. */ [Printing.symbol]() { - return async () => { + return async (): Promise => { // Save before generating HTML if (this.context.model.dirty && !this.context.model.readOnly) { await this.context.save(); diff --git a/packages/notebook/style/base.css b/packages/notebook/style/base.css index 4d90131c53..11b23e5da2 100644 --- a/packages/notebook/style/base.css +++ b/packages/notebook/style/base.css @@ -28,6 +28,7 @@ .jp-NotebookPanel { display: block; height: 100%; + padding: 20px; } .jp-NotebookPanel.jp-Document { @@ -36,7 +37,7 @@ } .jp-Notebook { - padding: var(--jp-notebook-padding); + padding-right: var(--jp-notebook-padding); outline: none; overflow: auto; background: var(--jp-layout-color0); @@ -95,7 +96,7 @@ /* cell is active */ .jp-Notebook .jp-Cell.jp-mod-active .jp-Collapser { - background: var(--jp-brand-color1); + background: #147bd1; } /* cell is dirty */ diff --git a/packages/notebook/style/toolbar.css b/packages/notebook/style/toolbar.css index c1a3259af0..28a4859c59 100644 --- a/packages/notebook/style/toolbar.css +++ b/packages/notebook/style/toolbar.css @@ -17,8 +17,16 @@ | Styles |----------------------------------------------------------------------------*/ -.jp-NotebookPanel-toolbar { - padding: var(--jp-notebook-toolbar-padding); +.jp-Toolbar.jp-NotebookPanel-toolbar { + align-items: center; + background-color: #f7f9fd; + border: none; + box-shadow: none; + padding: 0 24px; +} + +.jp-Toolbar.jp-NotebookPanel-toolbar > .jp-Toolbar-item { + height: auto; } .jp-Toolbar-item.jp-Notebook-toolbarCellType .jp-select-wrapper.jp-mod-focused { ``` - 去除不符合需求的组件和菜单项 ```diff diff --git a/packages/running-extension/src/index.ts b/packages/running-extension/src/index.ts index fa4e785803..5a8efd480b 100644 --- a/packages/running-extension/src/index.ts +++ b/packages/running-extension/src/index.ts @@ -68,7 +68,7 @@ function activate( addKernelRunningSessionManager(runningSessionManagers, translator, app); // Rank has been chosen somewhat arbitrarily to give priority to the running // sessions widget in the sidebar. - app.shell.add(running, 'left', { rank: 200 }); + // app.shell.add(running, 'left', { rank: 200 }); return runningSessionManagers; } diff --git a/packages/statusbar/src/statusbar.ts b/packages/statusbar/src/statusbar.ts index 58da932baa..dadfbfcdc1 100644 --- a/packages/statusbar/src/statusbar.ts +++ b/packages/statusbar/src/statusbar.ts @@ -116,7 +116,7 @@ export class StatusBar extends Widget implements IStatusBar { /** * Dispose of the status bar. */ - dispose() { + dispose(): void { this._leftRankItems.length = 0; this._rightRankItems.length = 0; this._disposables.dispose(); @@ -126,7 +126,7 @@ export class StatusBar extends Widget implements IStatusBar { /** * Handle an 'update-request' message to the status bar. */ - protected onUpdateRequest(msg: Message) { + protected onUpdateRequest(msg: Message): void { this._refreshAll(); super.onUpdateRequest(msg); } diff --git a/packages/terminal-extension/src/index.ts b/packages/terminal-extension/src/index.ts index 6aca46fbd2..5a18f9f165 100644 --- a/packages/terminal-extension/src/index.ts +++ b/packages/terminal-extension/src/index.ts @@ -17,7 +17,8 @@ import { WidgetTracker } from '@jupyterlab/apputils'; import { ILauncher } from '@jupyterlab/launcher'; -import { IFileMenu, IMainMenu } from '@jupyterlab/mainmenu'; +// import { IFileMenu, IMainMenu } from '@jupyterlab/mainmenu'; +import { IMainMenu } from '@jupyterlab/mainmenu'; import { IRunningSessionManagers, IRunningSessions } from '@jupyterlab/running'; import { Terminal, TerminalAPI } from '@jupyterlab/services'; import { ISettingRegistry } from '@jupyterlab/settingregistry'; @@ -27,7 +28,7 @@ import * as WidgetModuleType from '@jupyterlab/terminal/lib/widget'; import { ITranslator } from '@jupyterlab/translation'; import { terminalIcon } from '@jupyterlab/ui-components'; import { toArray } from '@lumino/algorithm'; -import { Menu } from '@lumino/widgets'; +// import { Menu } from '@lumino/widgets'; /** * The command IDs used by the terminal plugin. @@ -85,7 +86,8 @@ function activate( runningSessionManagers: IRunningSessionManagers | null ): ITerminalTracker { const trans = translator.load('jupyterlab'); - const { serviceManager, commands } = app; + // const { serviceManager, commands } = app; + const { serviceManager } = app; const category = trans.__('Terminal'); const namespace = 'terminal'; const tracker = new WidgetTracker>({ @@ -171,57 +173,57 @@ function activate( addCommands(app, tracker, settingRegistry, translator, options); - if (mainMenu) { - // Add "Terminal Theme" menu below "Theme" menu. - const themeMenu = new Menu({ commands }); - themeMenu.title.label = trans._p('menu', 'Terminal Theme'); - themeMenu.addItem({ - command: CommandIDs.setTheme, - args: { - theme: 'inherit', - displayName: trans.__('Inherit'), - isPalette: false - } - }); - themeMenu.addItem({ - command: CommandIDs.setTheme, - args: { - theme: 'light', - displayName: trans.__('Light'), - isPalette: false - } - }); - themeMenu.addItem({ - command: CommandIDs.setTheme, - args: { theme: 'dark', displayName: trans.__('Dark'), isPalette: false } - }); - - // Add some commands to the "View" menu. - mainMenu.settingsMenu.addGroup( - [ - { command: CommandIDs.increaseFont }, - { command: CommandIDs.decreaseFont }, - { type: 'submenu', submenu: themeMenu } - ], - 40 - ); - - // Add terminal creation to the file menu. - mainMenu.fileMenu.newMenu.addItem({ - command: CommandIDs.createNew, - rank: 20 - }); - - // Add terminal close-and-shutdown to the file menu. - mainMenu.fileMenu.closeAndCleaners.add({ - tracker, - closeAndCleanupLabel: (n: number) => trans.__('Shutdown Terminal'), - closeAndCleanup: (current: MainAreaWidget) => { - // The widget is automatically disposed upon session shutdown. - return current.content.session.shutdown(); - } - } as IFileMenu.ICloseAndCleaner>); - } + // if (mainMenu) { + // // Add "Terminal Theme" menu below "Theme" menu. + // const themeMenu = new Menu({ commands }); + // themeMenu.title.label = trans._p('menu', 'Terminal Theme'); + // themeMenu.addItem({ + // command: CommandIDs.setTheme, + // args: { + // theme: 'inherit', + // displayName: trans.__('Inherit'), + // isPalette: false + // } + // }); + // themeMenu.addItem({ + // command: CommandIDs.setTheme, + // args: { + // theme: 'light', + // displayName: trans.__('Light'), + // isPalette: false + // } + // }); + // themeMenu.addItem({ + // command: CommandIDs.setTheme, + // args: { theme: 'dark', displayName: trans.__('Dark'), isPalette: false } + // }); + + // // Add some commands to the "View" menu. + // mainMenu.settingsMenu.addGroup( + // [ + // { command: CommandIDs.increaseFont }, + // { command: CommandIDs.decreaseFont }, + // { type: 'submenu', submenu: themeMenu } + // ], + // 40 + // ); + + // // Add terminal creation to the file menu. + // mainMenu.fileMenu.newMenu.addItem({ + // command: CommandIDs.createNew, + // rank: 20 + // }); + + // // Add terminal close-and-shutdown to the file menu. + // mainMenu.fileMenu.closeAndCleaners.add({ + // tracker, + // closeAndCleanupLabel: (n: number) => trans.__('Shutdown Terminal'), + // closeAndCleanup: (current: MainAreaWidget) => { + // // The widget is automatically disposed upon session shutdown. + // return current.content.session.shutdown(); + // } + // } as IFileMenu.ICloseAndCleaner>); + // } if (palette) { // Add command palette items. diff --git a/packages/theme-dark-extension/README.md b/packages/theme-dark-extension/README.md deleted file mode 100644 index 6c19ca27cd..0000000000 --- a/packages/theme-dark-extension/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# @jupyterlab/theme-dark-extension - -A JupyterLab theme extension which provides the default dark-colored theme. diff --git a/packages/theme-dark-extension/package.json b/packages/theme-dark-extension/package.json deleted file mode 100644 index eaded8c880..0000000000 --- a/packages/theme-dark-extension/package.json +++ /dev/null @@ -1,50 +0,0 @@ -{ - "name": "@jupyterlab/theme-dark-extension", - "version": "3.4.3", - "description": "JupyterLab - Default Dark Theme", - "homepage": "https://github.com/jupyterlab/jupyterlab", - "bugs": { - "url": "https://github.com/jupyterlab/jupyterlab/issues" - }, - "repository": { - "type": "git", - "url": "https://github.com/jupyterlab/jupyterlab.git" - }, - "license": "BSD-3-Clause", - "author": "Project Jupyter", - "sideEffects": true, - "main": "lib/index.js", - "types": "lib/index.d.ts", - "directories": { - "lib": "lib/" - }, - "files": [ - "lib/*.d.ts", - "lib/*.js.map", - "lib/*.js", - "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}", - "style/index.js" - ], - "scripts": { - "build": "tsc -b", - "clean": "rimraf lib && rimraf tsconfig.tsbuildinfo", - "watch": "tsc -b --watch" - }, - "dependencies": { - "@jupyterlab/application": "^3.4.3", - "@jupyterlab/apputils": "^3.4.3", - "@jupyterlab/translation": "^3.4.3" - }, - "devDependencies": { - "rimraf": "~3.0.0", - "typedoc": "~0.21.2", - "typescript": "~4.1.3" - }, - "publishConfig": { - "access": "public" - }, - "jupyterlab": { - "extension": true, - "themePath": "style/theme.css" - } -} diff --git a/packages/theme-dark-extension/src/index.ts b/packages/theme-dark-extension/src/index.ts deleted file mode 100644 index 6f20ea8e9a..0000000000 --- a/packages/theme-dark-extension/src/index.ts +++ /dev/null @@ -1,40 +0,0 @@ -// Copyright (c) Jupyter Development Team. -// Distributed under the terms of the Modified BSD License. -/** - * @packageDocumentation - * @module theme-dark-extension - */ - -import { - JupyterFrontEnd, - JupyterFrontEndPlugin -} from '@jupyterlab/application'; -import { IThemeManager } from '@jupyterlab/apputils'; -import { ITranslator } from '@jupyterlab/translation'; - -/** - * A plugin for the Jupyter Dark Theme. - */ -const plugin: JupyterFrontEndPlugin = { - id: '@jupyterlab/theme-dark-extension:plugin', - requires: [IThemeManager, ITranslator], - activate: ( - app: JupyterFrontEnd, - manager: IThemeManager, - translator: ITranslator - ) => { - const trans = translator.load('jupyterlab'); - const style = '@jupyterlab/theme-dark-extension/index.css'; - manager.register({ - name: 'JupyterLab Dark', - displayName: trans.__('JupyterLab Dark'), - isLight: false, - themeScrollbars: true, - load: () => manager.loadCSS(style), - unload: () => Promise.resolve(undefined) - }); - }, - autoStart: true -}; - -export default plugin; diff --git a/packages/theme-dark-extension/style/variables.css b/packages/theme-dark-extension/style/variables.css deleted file mode 100644 index ff87a764c3..0000000000 --- a/packages/theme-dark-extension/style/variables.css +++ /dev/null @@ -1,410 +0,0 @@ -/*----------------------------------------------------------------------------- -| Copyright (c) Jupyter Development Team. -| Distributed under the terms of the Modified BSD License. -|----------------------------------------------------------------------------*/ - -/* -The following CSS variables define the main, public API for styling JupyterLab. -These variables should be used by all plugins wherever possible. In other -words, plugins should not define custom colors, sizes, etc unless absolutely -necessary. This enables users to change the visual theme of JupyterLab -by changing these variables. - -Many variables appear in an ordered sequence (0,1,2,3). These sequences -are designed to work well together, so for example, `--jp-border-color1` should -be used with `--jp-layout-color1`. The numbers have the following meanings: - -* 0: super-primary, reserved for special emphasis -* 1: primary, most important under normal situations -* 2: secondary, next most important under normal situations -* 3: tertiary, next most important under normal situations - -Throughout JupyterLab, we are mostly following principles from Google's -Material Design when selecting colors. We are not, however, following -all of MD as it is not optimized for dense, information rich UIs. -*/ - -:root { - /* Elevation - * - * We style box-shadows using Material Design's idea of elevation. These particular numbers are taken from here: - * - * https://github.com/material-components/material-components-web - * https://material-components-web.appspot.com/elevation.html - */ - - /* The dark theme shadows need a bit of work, but this will probably also require work on the core layout - * colors used in the theme as well. */ - --jp-shadow-base-lightness: 32; - --jp-shadow-umbra-color: rgba( - var(--jp-shadow-base-lightness), - var(--jp-shadow-base-lightness), - var(--jp-shadow-base-lightness), - 0.2 - ); - --jp-shadow-penumbra-color: rgba( - var(--jp-shadow-base-lightness), - var(--jp-shadow-base-lightness), - var(--jp-shadow-base-lightness), - 0.14 - ); - --jp-shadow-ambient-color: rgba( - var(--jp-shadow-base-lightness), - var(--jp-shadow-base-lightness), - var(--jp-shadow-base-lightness), - 0.12 - ); - --jp-elevation-z0: none; - --jp-elevation-z1: 0px 2px 1px -1px var(--jp-shadow-umbra-color), - 0px 1px 1px 0px var(--jp-shadow-penumbra-color), - 0px 1px 3px 0px var(--jp-shadow-ambient-color); - --jp-elevation-z2: 0px 3px 1px -2px var(--jp-shadow-umbra-color), - 0px 2px 2px 0px var(--jp-shadow-penumbra-color), - 0px 1px 5px 0px var(--jp-shadow-ambient-color); - --jp-elevation-z4: 0px 2px 4px -1px var(--jp-shadow-umbra-color), - 0px 4px 5px 0px var(--jp-shadow-penumbra-color), - 0px 1px 10px 0px var(--jp-shadow-ambient-color); - --jp-elevation-z6: 0px 3px 5px -1px var(--jp-shadow-umbra-color), - 0px 6px 10px 0px var(--jp-shadow-penumbra-color), - 0px 1px 18px 0px var(--jp-shadow-ambient-color); - --jp-elevation-z8: 0px 5px 5px -3px var(--jp-shadow-umbra-color), - 0px 8px 10px 1px var(--jp-shadow-penumbra-color), - 0px 3px 14px 2px var(--jp-shadow-ambient-color); - --jp-elevation-z12: 0px 7px 8px -4px var(--jp-shadow-umbra-color), - 0px 12px 17px 2px var(--jp-shadow-penumbra-color), - 0px 5px 22px 4px var(--jp-shadow-ambient-color); - --jp-elevation-z16: 0px 8px 10px -5px var(--jp-shadow-umbra-color), - 0px 16px 24px 2px var(--jp-shadow-penumbra-color), - 0px 6px 30px 5px var(--jp-shadow-ambient-color); - --jp-elevation-z20: 0px 10px 13px -6px var(--jp-shadow-umbra-color), - 0px 20px 31px 3px var(--jp-shadow-penumbra-color), - 0px 8px 38px 7px var(--jp-shadow-ambient-color); - --jp-elevation-z24: 0px 11px 15px -7px var(--jp-shadow-umbra-color), - 0px 24px 38px 3px var(--jp-shadow-penumbra-color), - 0px 9px 46px 8px var(--jp-shadow-ambient-color); - - /* Borders - * - * The following variables, specify the visual styling of borders in JupyterLab. - */ - - --jp-border-width: 1px; - --jp-border-color0: var(--md-grey-700); - --jp-border-color1: var(--md-grey-700); - --jp-border-color2: var(--md-grey-800); - --jp-border-color3: var(--md-grey-900); - --jp-inverse-border-color: var(--md-grey-600); - --jp-border-radius: 2px; - - /* UI Fonts - * - * The UI font CSS variables are used for the typography all of the JupyterLab - * user interface elements that are not directly user generated content. - * - * The font sizing here is done assuming that the body font size of --jp-ui-font-size1 - * is applied to a parent element. When children elements, such as headings, are sized - * in em all things will be computed relative to that body size. - */ - - --jp-ui-font-scale-factor: 1.2; - --jp-ui-font-size0: 0.83333em; - --jp-ui-font-size1: 13px; /* Base font size */ - --jp-ui-font-size2: 1.2em; - --jp-ui-font-size3: 1.44em; - - --jp-ui-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, - Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; - - /* - * Use these font colors against the corresponding main layout colors. - * In a light theme, these go from dark to light. - */ - - /* Defaults use Material Design specification */ - --jp-ui-font-color0: rgba(255, 255, 255, 1); - --jp-ui-font-color1: rgba(255, 255, 255, 0.87); - --jp-ui-font-color2: rgba(255, 255, 255, 0.54); - --jp-ui-font-color3: rgba(255, 255, 255, 0.38); - - /* - * Use these against the brand/accent/warn/error colors. - * These will typically go from light to darker, in both a dark and light theme. - */ - - --jp-ui-inverse-font-color0: rgba(0, 0, 0, 1); - --jp-ui-inverse-font-color1: rgba(0, 0, 0, 0.8); - --jp-ui-inverse-font-color2: rgba(0, 0, 0, 0.5); - --jp-ui-inverse-font-color3: rgba(0, 0, 0, 0.3); - - /* Content Fonts - * - * Content font variables are used for typography of user generated content. - * - * The font sizing here is done assuming that the body font size of --jp-content-font-size1 - * is applied to a parent element. When children elements, such as headings, are sized - * in em all things will be computed relative to that body size. - */ - - --jp-content-line-height: 1.6; - --jp-content-font-scale-factor: 1.2; - --jp-content-font-size0: 0.83333em; - --jp-content-font-size1: 14px; /* Base font size */ - --jp-content-font-size2: 1.2em; - --jp-content-font-size3: 1.44em; - --jp-content-font-size4: 1.728em; - --jp-content-font-size5: 2.0736em; - - /* This gives a magnification of about 125% in presentation mode over normal. */ - --jp-content-presentation-font-size1: 17px; - - --jp-content-heading-line-height: 1; - --jp-content-heading-margin-top: 1.2em; - --jp-content-heading-margin-bottom: 0.8em; - --jp-content-heading-font-weight: 500; - - /* Defaults use Material Design specification */ - --jp-content-font-color0: rgba(255, 255, 255, 1); - --jp-content-font-color1: rgba(255, 255, 255, 1); - --jp-content-font-color2: rgba(255, 255, 255, 0.7); - --jp-content-font-color3: rgba(255, 255, 255, 0.5); - - --jp-content-link-color: var(--md-blue-300); - - --jp-content-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', - Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol'; - - /* - * Code Fonts - * - * Code font variables are used for typography of code and other monospaces content. - */ - - --jp-code-font-size: 13px; - --jp-code-line-height: 1.3077; /* 17px for 13px base */ - --jp-code-padding: 5px; /* 5px for 13px base, codemirror highlighting needs integer px value */ - --jp-code-font-family-default: Menlo, Consolas, 'DejaVu Sans Mono', monospace; - --jp-code-font-family: var(--jp-code-font-family-default); - - /* This gives a magnification of about 125% in presentation mode over normal. */ - --jp-code-presentation-font-size: 16px; - - /* may need to tweak cursor width if you change font size */ - --jp-code-cursor-width0: 1.4px; - --jp-code-cursor-width1: 2px; - --jp-code-cursor-width2: 4px; - - /* Layout - * - * The following are the main layout colors use in JupyterLab. In a light - * theme these would go from light to dark. - */ - - --jp-layout-color0: #111111; - --jp-layout-color1: var(--md-grey-900); - --jp-layout-color2: var(--md-grey-800); - --jp-layout-color3: var(--md-grey-700); - --jp-layout-color4: var(--md-grey-600); - - /* Inverse Layout - * - * The following are the inverse layout colors use in JupyterLab. In a light - * theme these would go from dark to light. - */ - - --jp-inverse-layout-color0: white; - --jp-inverse-layout-color1: white; - --jp-inverse-layout-color2: var(--md-grey-200); - --jp-inverse-layout-color3: var(--md-grey-400); - --jp-inverse-layout-color4: var(--md-grey-600); - - /* Brand/accent */ - - --jp-brand-color0: var(--md-blue-700); - --jp-brand-color1: var(--md-blue-500); - --jp-brand-color2: var(--md-blue-300); - --jp-brand-color3: var(--md-blue-100); - --jp-brand-color4: var(--md-blue-50); - - --jp-accent-color0: var(--md-green-700); - --jp-accent-color1: var(--md-green-500); - --jp-accent-color2: var(--md-green-300); - --jp-accent-color3: var(--md-green-100); - - /* State colors (warn, error, success, info) */ - - --jp-warn-color0: var(--md-orange-700); - --jp-warn-color1: var(--md-orange-500); - --jp-warn-color2: var(--md-orange-300); - --jp-warn-color3: var(--md-orange-100); - - --jp-error-color0: var(--md-red-700); - --jp-error-color1: var(--md-red-500); - --jp-error-color2: var(--md-red-300); - --jp-error-color3: var(--md-red-100); - - --jp-success-color0: var(--md-green-700); - --jp-success-color1: var(--md-green-500); - --jp-success-color2: var(--md-green-300); - --jp-success-color3: var(--md-green-100); - - --jp-info-color0: var(--md-cyan-700); - --jp-info-color1: var(--md-cyan-500); - --jp-info-color2: var(--md-cyan-300); - --jp-info-color3: var(--md-cyan-100); - - /* Cell specific styles */ - - --jp-cell-padding: 5px; - - --jp-cell-collapser-width: 8px; - --jp-cell-collapser-min-height: 20px; - --jp-cell-collapser-not-active-hover-opacity: 0.6; - - --jp-cell-editor-background: var(--jp-layout-color1); - --jp-cell-editor-border-color: var(--md-grey-700); - --jp-cell-editor-box-shadow: inset 0 0 2px var(--md-blue-300); - --jp-cell-editor-active-background: var(--jp-layout-color0); - --jp-cell-editor-active-border-color: var(--jp-brand-color1); - - --jp-cell-prompt-width: 64px; - --jp-cell-prompt-font-family: var(--jp-code-font-family-default); - --jp-cell-prompt-letter-spacing: 0px; - --jp-cell-prompt-opacity: 1; - --jp-cell-prompt-not-active-opacity: 1; - --jp-cell-prompt-not-active-font-color: var(--md-grey-300); - - /* A custom blend of MD grey and blue 600 - * See https://meyerweb.com/eric/tools/color-blend/#546E7A:1E88E5:5:hex */ - --jp-cell-inprompt-font-color: #307fc1; - /* A custom blend of MD grey and orange 600 - * https://meyerweb.com/eric/tools/color-blend/#546E7A:F4511E:5:hex */ - --jp-cell-outprompt-font-color: #bf5b3d; - - /* Notebook specific styles */ - - --jp-notebook-padding: 10px; - --jp-notebook-select-background: var(--jp-layout-color1); - --jp-notebook-multiselected-color: rgba(33, 150, 243, 0.24); - - /* The scroll padding is calculated to fill enough space at the bottom of the - notebook to show one single-line cell (with appropriate padding) at the top - when the notebook is scrolled all the way to the bottom. We also subtract one - pixel so that no scrollbar appears if we have just one single-line cell in the - notebook. This padding is to enable a 'scroll past end' feature in a notebook. - */ - --jp-notebook-scroll-padding: calc( - 100% - var(--jp-code-font-size) * var(--jp-code-line-height) - - var(--jp-code-padding) - var(--jp-cell-padding) - 1px - ); - - /* Rendermime styles */ - - --jp-rendermime-error-background: rgba(244, 67, 54, 0.28); - --jp-rendermime-table-row-background: var(--md-grey-900); - --jp-rendermime-table-row-hover-background: rgba(3, 169, 244, 0.2); - - /* Dialog specific styles */ - - --jp-dialog-background: rgba(0, 0, 0, 0.6); - - /* Console specific styles */ - - --jp-console-padding: 10px; - - /* Toolbar specific styles */ - - --jp-toolbar-border-color: var(--jp-border-color2); - --jp-toolbar-micro-height: 8px; - --jp-toolbar-background: var(--jp-layout-color1); - --jp-toolbar-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.8); - --jp-toolbar-header-margin: 4px 4px 0px 4px; - --jp-toolbar-active-background: var(--jp-layout-color0); - - /* Statusbar specific styles */ - - --jp-statusbar-height: 24px; - - /* Input field styles */ - - --jp-input-box-shadow: inset 0 0 2px var(--md-blue-300); - --jp-input-active-background: var(--jp-layout-color0); - --jp-input-hover-background: var(--jp-layout-color2); - --jp-input-background: var(--md-grey-800); - --jp-input-border-color: var(--jp-inverse-border-color); - --jp-input-active-border-color: var(--jp-brand-color1); - --jp-input-active-box-shadow-color: rgba(19, 124, 189, 0.3); - - /* General editor styles */ - - --jp-editor-selected-background: var(--jp-layout-color2); - --jp-editor-selected-focused-background: rgba(33, 150, 243, 0.24); - --jp-editor-cursor-color: var(--jp-ui-font-color0); - - /* Code mirror specific styles */ - - --jp-mirror-editor-keyword-color: var(--md-green-500); - --jp-mirror-editor-atom-color: var(--md-blue-300); - --jp-mirror-editor-number-color: var(--md-green-400); - --jp-mirror-editor-def-color: var(--md-blue-600); - --jp-mirror-editor-variable-color: var(--md-grey-300); - --jp-mirror-editor-variable-2-color: var(--md-blue-400); - --jp-mirror-editor-variable-3-color: var(--md-green-600); - --jp-mirror-editor-punctuation-color: var(--md-blue-400); - --jp-mirror-editor-property-color: var(--md-blue-400); - --jp-mirror-editor-operator-color: #aa22ff; - --jp-mirror-editor-comment-color: #408080; - --jp-mirror-editor-string-color: #ff7070; - --jp-mirror-editor-string-2-color: var(--md-purple-300); - --jp-mirror-editor-meta-color: #aa22ff; - --jp-mirror-editor-qualifier-color: #555; - --jp-mirror-editor-builtin-color: var(--md-green-600); - --jp-mirror-editor-bracket-color: #997; - --jp-mirror-editor-tag-color: var(--md-green-700); - --jp-mirror-editor-attribute-color: var(--md-blue-700); - --jp-mirror-editor-header-color: var(--md-blue-500); - --jp-mirror-editor-quote-color: var(--md-green-300); - --jp-mirror-editor-link-color: var(--md-blue-700); - --jp-mirror-editor-error-color: #f00; - --jp-mirror-editor-hr-color: #999; - - /* Vega extension styles */ - - --jp-vega-background: var(--md-grey-400); - - /* Sidebar-related styles */ - - --jp-sidebar-min-width: 250px; - - /* Search-related styles */ - - --jp-search-toggle-off-opacity: 0.6; - --jp-search-toggle-hover-opacity: 0.8; - --jp-search-toggle-on-opacity: 1; - --jp-search-selected-match-background-color: rgb(255, 225, 0); - --jp-search-selected-match-color: black; - --jp-search-unselected-match-background-color: var( - --jp-inverse-layout-color0 - ); - --jp-search-unselected-match-color: var(--jp-ui-inverse-font-color0); - - /* scrollbar related styles. Supports every browser except Edge. */ - - /* colors based on JetBrain's Darcula theme */ - - --jp-scrollbar-background-color: #3f4244; - --jp-scrollbar-thumb-color: 88, 96, 97; /* need to specify thumb color as an RGB triplet */ - - --jp-scrollbar-endpad: 3px; /* the minimum gap between the thumb and the ends of a scrollbar */ - - /* hacks for setting the thumb shape. These do nothing in Firefox */ - - --jp-scrollbar-thumb-margin: 3.5px; /* the space in between the sides of the thumb and the track */ - --jp-scrollbar-thumb-radius: 9px; /* set to a large-ish value for rounded endcaps on the thumb */ - - /* Icon colors that work well with light or dark backgrounds */ - --jp-icon-contrast-color0: var(--md-purple-600); - --jp-icon-contrast-color1: var(--md-green-600); - --jp-icon-contrast-color2: var(--md-pink-600); - --jp-icon-contrast-color3: var(--md-blue-600); -} diff --git a/packages/theme-dark-extension/typedoc.json b/packages/theme-dark-extension/typedoc.json deleted file mode 100644 index 7ddb378afe..0000000000 --- a/packages/theme-dark-extension/typedoc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "out": "../../docs/api/theme-dark-extension", - "theme": "../../typedoc-theme" -} diff --git a/packages/toc-extension/src/index.ts b/packages/toc-extension/src/index.ts index 334a5a2a2d..94ac4441ed 100644 --- a/packages/toc-extension/src/index.ts +++ b/packages/toc-extension/src/index.ts @@ -85,7 +85,7 @@ async function activateTOC( toc.node.setAttribute('role', 'region'); toc.node.setAttribute('aria-label', trans.__('Table of Contents section')); - app.shell.add(toc, 'left', { rank: 400 }); + // app.shell.add(toc, 'left', { rank: 400 }); app.commands.addCommand(CommandIDs.runCells, { execute: args => { ``` - 更改默认的 Locale 为 zh_CN ```diff diff --git a/packages/translation-extension/schema/plugin.json b/packages/translation-extension/schema/plugin.json index 2ef8ed8bb7..b6cf3f74e9 100644 --- a/packages/translation-extension/schema/plugin.json +++ b/packages/translation-extension/schema/plugin.json @@ -34,7 +34,7 @@ "type": "string", "title": "Language locale", "description": "Set the interface display language. Examples: 'es_CO', 'fr'.", - "default": "en" + "default": "zh_CN" }, "stringsPrefix": { "type": "string", diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json index beb11f76d7..78abe9a098 100644 --- a/packages/ui-components/package.json +++ b/packages/ui-components/package.json @@ -50,6 +50,7 @@ "@lumino/commands": "^1.19.0", "@lumino/coreutils": "^1.11.0", "@lumino/disposable": "^1.10.0", + "@lumino/messaging": "^1.10.0", "@lumino/signaling": "^1.10.0", "@lumino/virtualdom": "^1.14.0", "@lumino/widgets": "^1.30.0", ``` - 修正中间面板 Tab 的 z-index ```diff diff --git a/packages/ui-components/src/icon/widgets/tabbarsvg.ts b/packages/ui-components/src/icon/widgets/tabbarsvg.ts index fbcae09f57..330b751260 100644 --- a/packages/ui-components/src/icon/widgets/tabbarsvg.ts +++ b/packages/ui-components/src/icon/widgets/tabbarsvg.ts @@ -7,6 +7,8 @@ import { LabIconStyle } from '../../style'; import { classes } from '../../utils'; import { addIcon, closeIcon } from '../iconimports'; import { ITranslator, nullTranslator } from '@jupyterlab/translation'; +import { Message } from '@lumino/messaging'; +import { ElementInlineStyle, VirtualDOM } from '@lumino/virtualdom'; /** * a widget which displays titles as a single row or column of tabs. @@ -29,6 +31,20 @@ export class TabBarSvg extends TabBar { title: trans.__('New Launcher') }); } + + protected onUpdateRequest(msg: Message): void { + let titles = this.titles; + let renderer = this.renderer; + let currentTitle = this.currentTitle; + let content = new Array(titles.length); + for (let i = 0, n = titles.length; i < n; ++i) { + let title = titles[i]; + let current = title === currentTitle; + let zIndex = current ? 3 : 0; + content[i] = renderer.renderTab({ title, current, zIndex }); + } + VirtualDOM.render(content, this.contentNode); + } } export namespace TabBarSvg { @@ -59,6 +75,13 @@ export namespace TabBarSvg { closeIcon ) as unknown) as VirtualElement; } + + createTabStyle(data: TabBar.IRenderData): ElementInlineStyle { + if (data.zIndex === 0) { + return {}; + } + return { zIndex: `${data.zIndex}` }; + } } export const defaultRenderer = new Renderer(); ```