diff --git a/.eslintignore b/.eslintignore index 92d914575bb6..345066118daa 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,24 +1,25 @@ -node_modules -**/node_modules -**/lib **/build +**/lib +**/node_modules **/static -jupyterlab/schemas -jupyterlab/themes -jupyterlab/geckodriver -jupyterlab/staging/yarn.js -jupyterlab/chrome-test.js -jupyterlab/staging/index.js +tests/**/coverage + dev_mode/index.js dev_mode/schemas +!dev_mode/static/index.out.js dev_mode/static dev_mode/themes dev_mode/workspaces +docs/_build +docs/api examples/app/build -examples/app/themes examples/app/schemas +examples/app/themes examples/chrome-example-test.js -tests/**/coverage -docs/_build -docs/api -!dev_mode/static/index.out.js +jupyterlab/chrome-test.js +jupyterlab/geckodriver +jupyterlab/schemas +jupyterlab/staging/index.js +jupyterlab/staging/yarn.js +jupyterlab/themes +packages/ui-components/src/icon/iconimports.ts diff --git a/.prettierignore b/.prettierignore index 8b925a8240e5..c330e1cc8fee 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,23 +1,24 @@ -node_modules +**/build **/node_modules **/lib -**/build +**/package.json **/static -jupyterlab/schemas -jupyterlab/themes -jupyterlab/geckodriver -jupyterlab/staging/yarn.js -jupyterlab/staging/index.js +tests/**/coverage + +.eggs dev_mode/index.js dev_mode/schemas dev_mode/static dev_mode/themes dev_mode/workspaces +docs/_build +docs/api examples/app/build examples/app/themes examples/app/schemas -tests/**/coverage -docs/_build -docs/api -**/package.json -.eggs +jupyterlab/schemas +jupyterlab/themes +jupyterlab/geckodriver +jupyterlab/staging/yarn.js +jupyterlab/staging/index.js +packages/ui-components/src/icon/iconimports.ts diff --git a/buildutils/package.json b/buildutils/package.json index ad176c3bf67d..538f7caf82bf 100644 --- a/buildutils/package.json +++ b/buildutils/package.json @@ -38,7 +38,7 @@ "watch": "tsc -w --listEmittedFiles" }, "dependencies": { - "@lumino/coreutils": "^1.4.0", + "@lumino/coreutils": "^1.4.2", "@yarnpkg/lockfile": "^1.1.0", "child_process": "~1.0.2", "commander": "~4.0.1", diff --git a/buildutils/src/ensure-package.ts b/buildutils/src/ensure-package.ts index e764512769f4..fd953ea9ea81 100644 --- a/buildutils/src/ensure-package.ts +++ b/buildutils/src/ensure-package.ts @@ -21,17 +21,13 @@ const HEADER_TEMPLATE = ` `; const ICON_IMPORTS_TEMPLATE = ` -import { Icon } from './interfaces'; +import { JLIcon } from './jlicon'; // icon svg import statements {{iconImportStatements}} -// defaultIcons definition -export namespace IconImports { - export const defaultIcons: ReadonlyArray = [ - {{iconModelDeclarations}} - ]; -} +// JLIcon instance construction +{{jliconConstruction}} `; const ICON_CSS_CLASSES_TEMPLATE = ` @@ -368,7 +364,7 @@ export async function ensureUiComponents( // build the per-icon import code let _iconImportStatements: string[] = []; - let _iconModelDeclarations: string[] = []; + let _jliconConstruction: string[] = []; svgs.forEach(svg => { const name = utils.stem(svg); const svgpath = path @@ -376,29 +372,33 @@ export async function ensureUiComponents( .split(path.sep) .join('/'); + const svgname = utils.camelCase(name) + 'Svg'; + const iconname = utils.camelCase(name) + 'Icon'; + if (dorequire) { // load the icon svg using `require` - _iconModelDeclarations.push( - `{ name: '${name}', svg: require('${svgpath}').default }` + _jliconConstruction.push( + `export const ${iconname} = new JLIcon({ name: '${name}', svgstr: require('${svgpath}').default });` ); } else { // load the icon svg using `import` - const nameCamel = utils.camelCase(name) + 'Svg'; + _iconImportStatements.push(`import ${svgname} from '${svgpath}';`); - _iconImportStatements.push(`import ${nameCamel} from '${svgpath}';`); - _iconModelDeclarations.push(`{ name: '${name}', svg: ${nameCamel} }`); + _jliconConstruction.push( + `export const ${iconname} = new JLIcon({ name: '${name}', svgstr: ${svgname} });` + ); } }); const iconImportStatements = _iconImportStatements.join('\n'); - const iconModelDeclarations = _iconModelDeclarations.join(',\n'); + const jliconConstruction = _jliconConstruction.join('\n'); // generate the actual contents of the iconImports file const iconImportsPath = path.join(iconSrcDir, 'iconimports.ts'); const iconImportsContents = utils.fromTemplate( HEADER_TEMPLATE + ICON_IMPORTS_TEMPLATE, - { funcName, iconImportStatements, iconModelDeclarations } + { funcName, iconImportStatements, jliconConstruction } ); - messages.push(...ensureFile(iconImportsPath, iconImportsContents)); + messages.push(...ensureFile(iconImportsPath, iconImportsContents, false)); /* support for deprecated icon CSS classes */ const iconCSSDir = path.join(pkgPath, 'style'); diff --git a/buildutils/src/ensure-repo.ts b/buildutils/src/ensure-repo.ts index 6d3e2ce04d9d..9e47aaf7698c 100644 --- a/buildutils/src/ensure-repo.ts +++ b/buildutils/src/ensure-repo.ts @@ -33,7 +33,11 @@ let UNUSED: Dict = { '@jupyterlab/application': ['font-awesome'], '@jupyterlab/apputils-extension': ['es6-promise'], '@jupyterlab/services': ['node-fetch', 'ws'], - '@jupyterlab/testutils': ['node-fetch', 'identity-obj-proxy'], + '@jupyterlab/testutils': [ + 'node-fetch', + 'identity-obj-proxy', + 'jest-raw-loader' + ], '@jupyterlab/test-csvviewer': ['csv-spectrum'], '@jupyterlab/vega5-extension': ['vega', 'vega-lite'], '@jupyterlab/ui-components': ['@blueprintjs/icons'] diff --git a/dev_mode/package.json b/dev_mode/package.json index 8de123796414..b5981a72f60d 100644 --- a/dev_mode/package.json +++ b/dev_mode/package.json @@ -170,18 +170,18 @@ "@jupyterlab/vdom": "~2.0.0-alpha.4", "@jupyterlab/vdom-extension": "~2.0.0-alpha.4", "@jupyterlab/vega5-extension": "~2.0.0-alpha.4", - "@lumino/algorithm": "^1.2.1", - "@lumino/application": "^1.7.4", - "@lumino/commands": "^1.9.0", - "@lumino/coreutils": "^1.4.0", - "@lumino/disposable": "^1.3.2", - "@lumino/domutils": "^1.1.5", - "@lumino/dragdrop": "^1.4.2", - "@lumino/messaging": "^1.3.1", - "@lumino/properties": "^1.1.4", - "@lumino/signaling": "^1.3.2", - "@lumino/virtualdom": "^1.2.1", - "@lumino/widgets": "^1.9.4", + "@lumino/algorithm": "^1.2.3", + "@lumino/application": "^1.7.7", + "@lumino/commands": "^1.9.1", + "@lumino/coreutils": "^1.4.2", + "@lumino/disposable": "^1.3.4", + "@lumino/domutils": "^1.1.7", + "@lumino/dragdrop": "^1.4.4", + "@lumino/messaging": "^1.3.3", + "@lumino/properties": "^1.1.6", + "@lumino/signaling": "^1.3.4", + "@lumino/virtualdom": "^1.4.0", + "@lumino/widgets": "^1.9.7", "react": "~16.9.0", "react-dom": "~16.9.0" }, diff --git a/examples/cell/package.json b/examples/cell/package.json index e2c49735c7b5..7a510addda4a 100644 --- a/examples/cell/package.json +++ b/examples/cell/package.json @@ -15,8 +15,8 @@ "@jupyterlab/rendermime": "^2.0.0-alpha.4", "@jupyterlab/services": "^5.0.0-alpha.4", "@jupyterlab/theme-light-extension": "^2.0.0-alpha.4", - "@lumino/commands": "^1.9.0", - "@lumino/widgets": "^1.9.4", + "@lumino/commands": "^1.9.1", + "@lumino/widgets": "^1.9.7", "es6-promise": "~4.2.8" }, "devDependencies": { diff --git a/examples/console/package.json b/examples/console/package.json index 908c249f2339..0ed59f7eb290 100644 --- a/examples/console/package.json +++ b/examples/console/package.json @@ -13,8 +13,8 @@ "@jupyterlab/rendermime": "^2.0.0-alpha.4", "@jupyterlab/services": "^5.0.0-alpha.4", "@jupyterlab/theme-light-extension": "^2.0.0-alpha.4", - "@lumino/commands": "^1.9.0", - "@lumino/widgets": "^1.9.4", + "@lumino/commands": "^1.9.1", + "@lumino/widgets": "^1.9.7", "es6-promise": "~4.2.8" }, "devDependencies": { diff --git a/examples/filebrowser/package.json b/examples/filebrowser/package.json index cb5a701caa59..98c475bfba38 100644 --- a/examples/filebrowser/package.json +++ b/examples/filebrowser/package.json @@ -16,10 +16,9 @@ "@jupyterlab/fileeditor": "^2.0.0-alpha.4", "@jupyterlab/services": "^5.0.0-alpha.4", "@jupyterlab/theme-light-extension": "^2.0.0-alpha.4", - "@jupyterlab/ui-components": "^2.0.0-alpha.4", - "@lumino/algorithm": "^1.2.1", - "@lumino/commands": "^1.9.0", - "@lumino/widgets": "^1.9.4", + "@lumino/algorithm": "^1.2.3", + "@lumino/commands": "^1.9.1", + "@lumino/widgets": "^1.9.7", "es6-promise": "~4.2.8" }, "devDependencies": { diff --git a/examples/filebrowser/src/index.ts b/examples/filebrowser/src/index.ts index 3f6b31f88182..66e7efb47bb9 100644 --- a/examples/filebrowser/src/index.ts +++ b/examples/filebrowser/src/index.ts @@ -34,8 +34,6 @@ import { FileBrowser, FileBrowserModel } from '@jupyterlab/filebrowser'; import { FileEditorFactory } from '@jupyterlab/fileeditor'; -import { defaultIconRegistry } from '@jupyterlab/ui-components'; - function main(): void { let manager = new ServiceManager(); void manager.ready.then(() => { @@ -88,8 +86,7 @@ function createApp(manager: ServiceManager.IManager): void { let commands = new CommandRegistry(); let fbModel = new FileBrowserModel({ - manager: docManager, - iconRegistry: defaultIconRegistry + manager: docManager }); let fbWidget = new FileBrowser({ id: 'filebrowser', @@ -98,7 +95,7 @@ function createApp(manager: ServiceManager.IManager): void { // Add a creator toolbar item. let creator = new ToolbarButton({ - iconClassName: 'jp-AddIcon jp-Icon jp-Icon-16', + iconClass: 'jp-AddIcon jp-Icon jp-Icon-16', onClick: () => { void docManager .newUntitled({ diff --git a/examples/notebook/package.json b/examples/notebook/package.json index afb5a5d3c8f1..8727311b6353 100644 --- a/examples/notebook/package.json +++ b/examples/notebook/package.json @@ -18,8 +18,8 @@ "@jupyterlab/rendermime": "^2.0.0-alpha.4", "@jupyterlab/services": "^5.0.0-alpha.4", "@jupyterlab/theme-light-extension": "^2.0.0-alpha.4", - "@lumino/commands": "^1.9.0", - "@lumino/widgets": "^1.9.4", + "@lumino/commands": "^1.9.1", + "@lumino/widgets": "^1.9.7", "es6-promise": "~4.2.8" }, "devDependencies": { diff --git a/examples/notebooks/OutputExamples.ipynb b/examples/notebooks/OutputExamples.ipynb index 952126ccac32..c4391a70e4c1 100644 --- a/examples/notebooks/OutputExamples.ipynb +++ b/examples/notebooks/OutputExamples.ipynb @@ -796,7 +796,7 @@ "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", - "version": "3.7.3" + "version": "3.7.4" } }, "nbformat": 4, diff --git a/examples/terminal/package.json b/examples/terminal/package.json index 125ab533824d..cf7de61477b9 100644 --- a/examples/terminal/package.json +++ b/examples/terminal/package.json @@ -11,7 +11,7 @@ "@jupyterlab/services": "^5.0.0-alpha.4", "@jupyterlab/terminal": "^2.0.0-alpha.4", "@jupyterlab/theme-light-extension": "^2.0.0-alpha.4", - "@lumino/widgets": "^1.9.4", + "@lumino/widgets": "^1.9.7", "es6-promise": "~4.2.8" }, "devDependencies": { diff --git a/jupyterlab/tests/mock_packages/mimeextension/package.json b/jupyterlab/tests/mock_packages/mimeextension/package.json index 51661b13c3c3..2cc9669064f2 100644 --- a/jupyterlab/tests/mock_packages/mimeextension/package.json +++ b/jupyterlab/tests/mock_packages/mimeextension/package.json @@ -3,7 +3,7 @@ "version": "0.3.0", "private": true, "dependencies": { - "@lumino/widgets": "^1.9.4" + "@lumino/widgets": "^1.9.7" }, "jupyterlab": { "mimeExtension": true diff --git a/packages/application-extension/package.json b/packages/application-extension/package.json index 629adf5a868c..84843cb9a720 100644 --- a/packages/application-extension/package.json +++ b/packages/application-extension/package.json @@ -42,10 +42,11 @@ "@jupyterlab/property-inspector": "^2.0.0-alpha.4", "@jupyterlab/settingregistry": "^2.0.0-alpha.4", "@jupyterlab/statedb": "^2.0.0-alpha.4", - "@lumino/algorithm": "^1.2.1", - "@lumino/coreutils": "^1.4.0", - "@lumino/disposable": "^1.3.2", - "@lumino/widgets": "^1.9.4", + "@jupyterlab/ui-components": "^2.0.0-alpha.4", + "@lumino/algorithm": "^1.2.3", + "@lumino/coreutils": "^1.4.2", + "@lumino/disposable": "^1.3.4", + "@lumino/widgets": "^1.9.7", "react": "~16.9.0" }, "devDependencies": { diff --git a/packages/application-extension/src/index.tsx b/packages/application-extension/src/index.tsx index 1e65ae9b75dd..d9cf0a57085b 100644 --- a/packages/application-extension/src/index.tsx +++ b/packages/application-extension/src/index.tsx @@ -26,15 +26,17 @@ import { import { PathExt, URLExt } from '@jupyterlab/coreutils'; -import { IStateDB } from '@jupyterlab/statedb'; - -import { ISettingRegistry } from '@jupyterlab/settingregistry'; - import { IPropertyInspectorProvider, SideBarPropertyInspectorProvider } from '@jupyterlab/property-inspector'; +import { ISettingRegistry } from '@jupyterlab/settingregistry'; + +import { IStateDB } from '@jupyterlab/statedb'; + +import { buildIcon } from '@jupyterlab/ui-components'; + import { each, iter, toArray } from '@lumino/algorithm'; import { PromiseDelegate } from '@lumino/coreutils'; @@ -605,7 +607,7 @@ function addCommands(app: JupyterLab, palette: ICommandPalette): void { commands.addCommand(CommandIDs.close, { label: () => 'Close Tab', isEnabled: () => - !!shell.currentWidget && !!shell.currentWidget.title.closable, + !!shell.currentWidget && shell.currentWidget.title.closable, execute: () => { if (shell.currentWidget) { shell.currentWidget.close(); @@ -673,7 +675,7 @@ function addCommands(app: JupyterLab, palette: ICommandPalette): void { }); app.commands.addCommand(CommandIDs.toggleLeftArea, { - label: args => 'Show Left Sidebar', + label: () => 'Show Left Sidebar', execute: () => { if (shell.leftCollapsed) { shell.expandLeft(); @@ -690,7 +692,7 @@ function addCommands(app: JupyterLab, palette: ICommandPalette): void { palette.addItem({ command: CommandIDs.toggleLeftArea, category }); app.commands.addCommand(CommandIDs.toggleRightArea, { - label: args => 'Show Right Sidebar', + label: () => 'Show Right Sidebar', execute: () => { if (shell.rightCollapsed) { shell.expandRight(); @@ -707,7 +709,7 @@ function addCommands(app: JupyterLab, palette: ICommandPalette): void { palette.addItem({ command: CommandIDs.toggleRightArea, category }); app.commands.addCommand(CommandIDs.togglePresentationMode, { - label: args => 'Presentation Mode', + label: () => 'Presentation Mode', execute: () => { shell.presentationMode = !shell.presentationMode; }, @@ -820,7 +822,7 @@ const propertyInspector: JupyterFrontEndPlugin = { provides: IPropertyInspectorProvider, activate: (app: JupyterFrontEnd, labshell: ILabShell) => { const widget = new SideBarPropertyInspectorProvider(labshell); - widget.title.iconClass = 'jp-BuildIcon jp-SideBar-tabIcon'; + widget.title.iconRenderer = buildIcon; widget.title.caption = 'Property Inspector'; widget.id = 'jp-property-inspector'; labshell.add(widget, 'left'); diff --git a/packages/application-extension/style/index.css b/packages/application-extension/style/index.css index 1e65b648f035..581688a62f01 100644 --- a/packages/application-extension/style/index.css +++ b/packages/application-extension/style/index.css @@ -5,6 +5,7 @@ /* 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/application/style/index.css'); @import url('~@jupyterlab/property-inspector/style/index.css'); diff --git a/packages/application-extension/tsconfig.json b/packages/application-extension/tsconfig.json index 593f06c68dab..cc2e9d477858 100644 --- a/packages/application-extension/tsconfig.json +++ b/packages/application-extension/tsconfig.json @@ -23,6 +23,9 @@ }, { "path": "../statedb" + }, + { + "path": "../ui-components" } ] } diff --git a/packages/application/package.json b/packages/application/package.json index f18ed5eea7f0..bbac27914406 100644 --- a/packages/application/package.json +++ b/packages/application/package.json @@ -43,16 +43,16 @@ "@jupyterlab/services": "^5.0.0-alpha.4", "@jupyterlab/statedb": "^2.0.0-alpha.4", "@jupyterlab/ui-components": "^2.0.0-alpha.4", - "@lumino/algorithm": "^1.2.1", - "@lumino/application": "^1.7.4", - "@lumino/commands": "^1.9.0", - "@lumino/coreutils": "^1.4.0", - "@lumino/disposable": "^1.3.2", - "@lumino/messaging": "^1.3.1", - "@lumino/polling": "^1.0.1", - "@lumino/properties": "^1.1.4", - "@lumino/signaling": "^1.3.2", - "@lumino/widgets": "^1.9.4", + "@lumino/algorithm": "^1.2.3", + "@lumino/application": "^1.7.7", + "@lumino/commands": "^1.9.1", + "@lumino/coreutils": "^1.4.2", + "@lumino/disposable": "^1.3.4", + "@lumino/messaging": "^1.3.3", + "@lumino/polling": "^1.0.3", + "@lumino/properties": "^1.1.6", + "@lumino/signaling": "^1.3.4", + "@lumino/widgets": "^1.9.7", "font-awesome": "~4.7.0" }, "devDependencies": { diff --git a/packages/application/src/shell.ts b/packages/application/src/shell.ts index ed166cfab93d..3a00cf5fc3b3 100644 --- a/packages/application/src/shell.ts +++ b/packages/application/src/shell.ts @@ -3,7 +3,7 @@ import { DocumentRegistry } from '@jupyterlab/docregistry'; -import { DockPanelSvg, TabBarSvg } from '@jupyterlab/ui-components'; +import { DockPanelSvg, JLIcon } from '@jupyterlab/ui-components'; import { ArrayExt, find, IIterator, iter, toArray } from '@lumino/algorithm'; @@ -179,9 +179,7 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell { let topHandler = (this._topHandler = new Private.PanelHandler()); let bottomPanel = (this._bottomPanel = new BoxPanel()); let hboxPanel = new BoxPanel(); - let dockPanel = (this._dockPanel = new DockPanelSvg({ - kind: 'dockPanelBar' - })); + let dockPanel = (this._dockPanel = new DockPanelSvg()); MessageLoop.installMessageHook(dockPanel, this._dockChildHook); let hsplitPanel = new SplitPanel(); @@ -769,9 +767,19 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell { ref = find(dock.widgets(), value => value.id === options!.ref!) || null; } + const { title } = widget; // Add widget ID to tab so that we can get a handle on the tab's widget // (for context menu support) - widget.title.dataset = { ...widget.title.dataset, id: widget.id }; + title.dataset = { ...title.dataset, id: widget.id }; + + // set an appropriate style class for the iconRenderer + if (title.iconRenderer instanceof JLIcon) { + title.iconClass = title.iconRenderer.class({ + className: title.iconClass, + justify: 'center', + kind: 'mainAreaTab' + }); + } dock.addWidget(widget, { mode, ref }); @@ -1086,8 +1094,7 @@ namespace Private { * Construct a new side bar handler. */ constructor() { - this._sideBar = new TabBarSvg({ - kind: 'sideBar', + this._sideBar = new TabBar({ insertBehavior: 'none', removeBehavior: 'none', allowDeselect: true @@ -1176,6 +1183,16 @@ namespace Private { // Store the parent id in the title dataset // in order to dispatch click events to the right widget. title.dataset = { id: widget.id }; + + // set an appropriate style class for the iconRenderer + if (title.iconRenderer instanceof JLIcon) { + title.iconClass = title.iconRenderer.class({ + className: title.iconClass, + justify: 'center', + kind: 'sideBar' + }); + } + this._refreshVisibility(); } diff --git a/packages/application/style/base.css b/packages/application/style/base.css index cd55dcffb3a7..bfc7e7da35d9 100644 --- a/packages/application/style/base.css +++ b/packages/application/style/base.css @@ -46,8 +46,6 @@ body { /* Sibling imports */ @import './datagrid.css'; @import './dockpanel.css'; -@import './images.css'; -@import './icons.css'; @import './menus.css'; @import './scrollbar.css'; @import './tabs.css'; diff --git a/packages/application/style/images.css b/packages/application/style/images.css deleted file mode 100644 index 51cedf03ee4b..000000000000 --- a/packages/application/style/images.css +++ /dev/null @@ -1,23 +0,0 @@ -/*----------------------------------------------------------------------------- -| Copyright (c) Jupyter Development Team. -| Distributed under the terms of the Modified BSD License. -|----------------------------------------------------------------------------*/ - -/* CSS for specific icons */ - -.jp-ImageJupyterLab { - background-image: var(--jp-image-jupyterlab); -} - -.jp-ImageJupyterLab-wordmark { - background-image: var(--jp-image-jupyterlab-wordmark); -} - -.jp-JupyterIcon { - background-image: var(--jp-image-jupyter); - background-size: 16px; - margin: 2px; - margin-left: 8px; - margin-right: 0px; - padding-right: 0px; -} diff --git a/packages/application/style/menus.css b/packages/application/style/menus.css index c9139546500e..2e36dac8f8ef 100644 --- a/packages/application/style/menus.css +++ b/packages/application/style/menus.css @@ -134,15 +134,15 @@ } .p-Menu-item.p-mod-toggled > .p-Menu-itemIcon { - background-image: var(--jp-icon-checkmark); + background-image: var(--jp-icon-check); } .p-Menu-item.p-mod-toggled.p-mod-disabled > .p-Menu-itemIcon { - background-image: var(--jp-icon-checkmark-disabled); + background-image: var(--jp-icon-check-disabled); } .p-Menu-item[data-type='submenu'] > .p-Menu-itemSubmenuIcon { - background-image: var(--jp-icon-caretright); + background-image: var(--jp-icon-caret-right); background-size: 18px; background-repeat: no-repeat; background-position: left; diff --git a/packages/application/style/scrollbar.css b/packages/application/style/scrollbar.css index a8630d3c01d3..9e5b1217c26c 100644 --- a/packages/application/style/scrollbar.css +++ b/packages/application/style/scrollbar.css @@ -152,20 +152,24 @@ .p-ScrollBar[data-orientation='horizontal'] .p-ScrollBar-button[data-action='decrement'] { - background-image: var(--jp-image-caretleft); + background-image: var(--jp-icon-caret-left); + background-size: 17px; } .p-ScrollBar[data-orientation='horizontal'] .p-ScrollBar-button[data-action='increment'] { - background-image: var(--jp-image-caretright); + background-image: var(--jp-icon-caret-right); + background-size: 17px; } .p-ScrollBar[data-orientation='vertical'] .p-ScrollBar-button[data-action='decrement'] { - background-image: var(--jp-image-caretup); + background-image: var(--jp-icon-caret-up); + background-size: 17px; } .p-ScrollBar[data-orientation='vertical'] .p-ScrollBar-button[data-action='increment'] { - background-image: var(--jp-image-caretdown); + background-image: var(--jp-icon-caret-down); + background-size: 17px; } diff --git a/packages/application/style/tabs.css b/packages/application/style/tabs.css index 0bba59f83761..9ba63af6e453 100644 --- a/packages/application/style/tabs.css +++ b/packages/application/style/tabs.css @@ -125,12 +125,6 @@ transform: translateX(-1px); } -.p-DockPanel-tabBar .p-TabBar-tabIcon, -.p-DockPanel-tabBar .p-TabBar-tabLabel, -.p-DockPanel-tabBar .p-TabBar-tabCloseIcon { - display: inline-block; -} - .p-DockPanel-tabBar .p-TabBar-tab .p-TabBar-tabIcon, .p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon { width: 14px; @@ -148,31 +142,6 @@ margin-top: 4px; } -.p-DockPanel-tabBar .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon { - margin-left: 4px; - padding-top: 8px; - background-size: 16px; - height: 16px; - width: 16px; - background-image: var(--jp-icon-close); - background-position: center; - background-repeat: no-repeat; -} - -.p-DockPanel-tabBar - .p-TabBar-tab.p-mod-closable.jp-mod-dirty - > .p-TabBar-tabCloseIcon { - background-size: 10px; - background-image: var(--jp-icon-circle); -} - -.p-DockPanel-tabBar - .p-TabBar-tab.p-mod-closable - > .p-TabBar-tabCloseIcon:hover { - background-size: 16px; - background-image: var(--jp-icon-close-circle); -} - .p-TabBar-tab.p-mod-drag-image { background: var(--jp-layout-color1); border: var(--jp-border-width) solid var(--jp-border-color1); @@ -186,7 +155,3 @@ padding: 0px 10px; transform: translateX(-40%) translateY(-58%); } - -/* .p-TabBar-tab.p-mod-drag-image .p-TabBar-tabLabel { - margin-left: 4px; -} */ diff --git a/packages/apputils-extension/package.json b/packages/apputils-extension/package.json index 549c1d31b40d..bd4b05a3c06e 100644 --- a/packages/apputils-extension/package.json +++ b/packages/apputils-extension/package.json @@ -44,12 +44,12 @@ "@jupyterlab/settingregistry": "^2.0.0-alpha.4", "@jupyterlab/statedb": "^2.0.0-alpha.4", "@jupyterlab/ui-components": "^2.0.0-alpha.4", - "@lumino/algorithm": "^1.2.1", - "@lumino/commands": "^1.9.0", - "@lumino/coreutils": "^1.4.0", - "@lumino/disposable": "^1.3.2", - "@lumino/polling": "^1.0.1", - "@lumino/widgets": "^1.9.4", + "@lumino/algorithm": "^1.2.3", + "@lumino/commands": "^1.9.1", + "@lumino/coreutils": "^1.4.2", + "@lumino/disposable": "^1.3.4", + "@lumino/polling": "^1.0.3", + "@lumino/widgets": "^1.9.7", "es6-promise": "~4.2.8" }, "devDependencies": { diff --git a/packages/apputils-extension/src/index.ts b/packages/apputils-extension/src/index.ts index ad68fbe418f3..67e3f4cb6fda 100644 --- a/packages/apputils-extension/src/index.ts +++ b/packages/apputils-extension/src/index.ts @@ -25,7 +25,7 @@ import { URLExt } from '@jupyterlab/coreutils'; import { IStateDB, StateDB } from '@jupyterlab/statedb'; -import { defaultIconRegistry } from '@jupyterlab/ui-components'; +import { jupyterFaviconIcon } from '@jupyterlab/ui-components'; import { PromiseDelegate } from '@lumino/coreutils'; @@ -149,10 +149,9 @@ const splash: JupyterFrontEndPlugin = { galaxy.id = 'galaxy'; logo.id = 'main-logo'; - defaultIconRegistry.icon({ - name: 'jupyter-favicon', + jupyterFaviconIcon.element({ container: logo, - center: true, + justify: 'center', kind: 'splash' }); diff --git a/packages/apputils-extension/src/palette.ts b/packages/apputils-extension/src/palette.ts index 421bc3a11935..453df5e76901 100644 --- a/packages/apputils-extension/src/palette.ts +++ b/packages/apputils-extension/src/palette.ts @@ -4,15 +4,13 @@ |----------------------------------------------------------------------------*/ import { find } from '@lumino/algorithm'; - import { CommandRegistry } from '@lumino/commands'; import { DisposableDelegate, IDisposable } from '@lumino/disposable'; - import { CommandPalette } from '@lumino/widgets'; import { ILayoutRestorer, JupyterFrontEnd } from '@jupyterlab/application'; - import { ICommandPalette, IPaletteItem } from '@jupyterlab/apputils'; +import { paletteIcon } from '@jupyterlab/ui-components'; /** * The command IDs used by the apputils extension. @@ -31,7 +29,7 @@ export class Palette implements ICommandPalette { */ constructor(palette: CommandPalette) { this._palette = palette; - this._palette.title.iconClass = 'jp-PaletteIcon jp-SideBar-tabIcon'; + this._palette.title.iconRenderer = paletteIcon; this._palette.title.label = ''; this._palette.title.caption = 'Command Palette'; } @@ -145,6 +143,7 @@ namespace Private { if (!palette) { palette = new CommandPalette({ commands: app.commands }); palette.id = 'command-palette'; + palette.title.iconRenderer = paletteIcon; palette.title.label = 'Commands'; } diff --git a/packages/apputils/package.json b/packages/apputils/package.json index 2844f797bf8d..bff78dab2709 100644 --- a/packages/apputils/package.json +++ b/packages/apputils/package.json @@ -40,16 +40,16 @@ "@jupyterlab/settingregistry": "^2.0.0-alpha.4", "@jupyterlab/statedb": "^2.0.0-alpha.4", "@jupyterlab/ui-components": "^2.0.0-alpha.4", - "@lumino/algorithm": "^1.2.1", - "@lumino/commands": "^1.9.0", - "@lumino/coreutils": "^1.4.0", - "@lumino/disposable": "^1.3.2", - "@lumino/domutils": "^1.1.5", - "@lumino/messaging": "^1.3.1", - "@lumino/properties": "^1.1.4", - "@lumino/signaling": "^1.3.2", - "@lumino/virtualdom": "^1.2.1", - "@lumino/widgets": "^1.9.4", + "@lumino/algorithm": "^1.2.3", + "@lumino/commands": "^1.9.1", + "@lumino/coreutils": "^1.4.2", + "@lumino/disposable": "^1.3.4", + "@lumino/domutils": "^1.1.7", + "@lumino/messaging": "^1.3.3", + "@lumino/properties": "^1.1.6", + "@lumino/signaling": "^1.3.4", + "@lumino/virtualdom": "^1.4.0", + "@lumino/widgets": "^1.9.7", "@types/react": "~16.9.16", "react": "~16.9.0", "react-dom": "~16.9.0", diff --git a/packages/apputils/src/collapse.ts b/packages/apputils/src/collapse.ts index cf6488aea854..6bbe536d045a 100644 --- a/packages/apputils/src/collapse.ts +++ b/packages/apputils/src/collapse.ts @@ -4,6 +4,7 @@ import { Message } from '@lumino/messaging'; import { ISignal, Signal } from '@lumino/signaling'; import { Widget, Panel, PanelLayout, Title } from '@lumino/widgets'; +import { caretDownIcon, caretUpIcon } from '@jupyterlab/ui-components'; /** * A panel that supports a collapsible header made from the widget's title. @@ -127,7 +128,7 @@ export class Collapse extends Widget { if (this._content) { this._content.hide(); } - this.removeClass('jp-Collapse-open'); + this._setHeader(); this._collapseChanged.emit(void 0); } @@ -136,7 +137,7 @@ export class Collapse extends Widget { if (this._content) { this._content.show(); } - this.addClass('jp-Collapse-open'); + this._setHeader(); this._collapseChanged.emit(void 0); } @@ -148,7 +149,16 @@ export class Collapse extends Widget { * Handle the `changed` signal of a title object. */ private _onTitleChanged(sender: Title): void { - this._header.node.textContent = this._widget.title.label; + this._setHeader(); + } + + private _setHeader(): void { + (this._collapsed ? caretUpIcon : caretDownIcon).element({ + container: this._header.node, + label: this._widget.title.label, + justify: 'right', + height: '28px' + }); } private _collapseChanged = new Signal(this); diff --git a/packages/apputils/src/mainareawidget.ts b/packages/apputils/src/mainareawidget.ts index e63a2374ddef..550c8f94ffaa 100644 --- a/packages/apputils/src/mainareawidget.ts +++ b/packages/apputils/src/mainareawidget.ts @@ -179,6 +179,7 @@ export class MainAreaWidget extends Widget this.title.mnemonic = content.title.mnemonic; this.title.iconClass = content.title.iconClass; this.title.iconLabel = content.title.iconLabel; + this.title.iconRenderer = content.title.iconRenderer; this.title.caption = content.title.caption; this.title.className = content.title.className; this.title.dataset = content.title.dataset; @@ -198,6 +199,7 @@ export class MainAreaWidget extends Widget content.title.mnemonic = this.title.mnemonic; content.title.iconClass = this.title.iconClass; content.title.iconLabel = this.title.iconLabel; + content.title.iconRenderer = this.title.iconRenderer; content.title.caption = this.title.caption; content.title.className = this.title.className; content.title.dataset = this.title.dataset; diff --git a/packages/apputils/src/styling.ts b/packages/apputils/src/styling.ts index e13a6f08ba9e..f4bea9217445 100644 --- a/packages/apputils/src/styling.ts +++ b/packages/apputils/src/styling.ts @@ -1,6 +1,8 @@ // Copyright (c) Jupyter Development Team. // Distributed under the terms of the Modified BSD License. +import { caretDownEmptyIcon } from '@jupyterlab/ui-components'; + /** * A namespace for node styling. */ @@ -65,6 +67,18 @@ export namespace Styling { node.parentElement.replaceChild(wrapper, node); } wrapper.appendChild(node); + + // add the icon node + wrapper.appendChild( + caretDownEmptyIcon.element({ + tag: 'span', + kind: 'select', + right: '15px', + top: '23px', + width: '18px' + }) + ); + return wrapper; } } diff --git a/packages/apputils/src/toolbar.tsx b/packages/apputils/src/toolbar.tsx index a58d84f93505..3d04f51bb7a1 100644 --- a/packages/apputils/src/toolbar.tsx +++ b/packages/apputils/src/toolbar.tsx @@ -1,25 +1,27 @@ // Copyright (c) Jupyter Development Team. // Distributed under the terms of the Modified BSD License. -import { UseSignal, ReactWidget } from './vdom'; - -import { Button, DefaultIconReact } from '@jupyterlab/ui-components'; +import { Text } from '@jupyterlab/coreutils'; +import { + Button, + circleEmptyIcon, + circleIcon, + classes, + JLIcon, + refreshIcon, + stopIcon +} from '@jupyterlab/ui-components'; import { IIterator, find, map, some } from '@lumino/algorithm'; - import { CommandRegistry } from '@lumino/commands'; - +import { ReadonlyJSONObject } from '@lumino/coreutils'; import { Message, MessageLoop } from '@lumino/messaging'; - import { AttachedProperty } from '@lumino/properties'; - import { PanelLayout, Widget } from '@lumino/widgets'; +import * as React from 'react'; import { ISessionContext, sessionContextDialogs } from './sessioncontext'; - -import * as React from 'react'; -import { ReadonlyJSONObject } from '@lumino/coreutils'; -import { Text } from '@jupyterlab/coreutils'; +import { UseSignal, ReactWidget } from './vdom'; /** * The class name added to toolbars. @@ -46,13 +48,6 @@ const TOOLBAR_SPACER_CLASS = 'jp-Toolbar-spacer'; */ const TOOLBAR_KERNEL_STATUS_CLASS = 'jp-Toolbar-kernelStatus'; -/** - * The class name added to a busy kernel indicator. - */ -const TOOLBAR_BUSY_CLASS = 'jp-FilledCircleIcon'; - -const TOOLBAR_IDLE_CLASS = 'jp-CircleIcon'; - /** * A layout for toolbars. * @@ -372,7 +367,7 @@ export namespace Toolbar { sessionContext: ISessionContext ): Widget { return new ToolbarButton({ - iconClassName: 'jp-StopIcon', + iconRenderer: stopIcon, onClick: () => { void sessionContext.session?.kernel?.interrupt(); }, @@ -388,7 +383,7 @@ export namespace Toolbar { dialogs?: ISessionContext.IDialogs ): Widget { return new ToolbarButton({ - iconClassName: 'jp-RefreshIcon', + iconRenderer: refreshIcon, onClick: () => { void (dialogs ?? sessionContextDialogs).restart(sessionContext); }, @@ -453,8 +448,9 @@ export namespace ToolbarButtonComponent { export interface IProps { className?: string; label?: string; - iconClassName?: string; + iconClass?: string; iconLabel?: string; + iconRenderer?: JLIcon; tooltip?: string; onClick?: () => void; enabled?: boolean; @@ -486,6 +482,31 @@ export function ToolbarButtonComponent(props: ToolbarButtonComponent.IProps) { } }; + const Icon = () => { + if (props.iconRenderer) { + return ( + + ); + } else if (props.iconClass) { + return ( + + ); + } else { + return <>; + } + }; + return ( ); @@ -162,7 +158,7 @@ class ReplaceEntry extends React.Component { @@ -257,8 +253,14 @@ class FilterToggle extends React.Component< ); } @@ -501,11 +503,13 @@ class SearchOverlay extends React.Component< , diff --git a/packages/documentsearch/style/base.css b/packages/documentsearch/style/base.css index 514ec178161c..4728c311cfb9 100644 --- a/packages/documentsearch/style/base.css +++ b/packages/documentsearch/style/base.css @@ -98,14 +98,6 @@ width: 5px; } -.jp-DocumentSearch-regex-button { - background-image: var(--jp-icon-search-regex); -} - -.jp-DocumentSearch-case-button { - background-image: var(--jp-icon-search-case-sensitive); -} - .jp-DocumentSearch-input-button:before { display: block; padding-top: 100%; @@ -152,34 +144,19 @@ margin: 1px 7px 2px; } -.jp-DocumentSearch-up-button { - background-image: var(--jp-icon-search-arrow-up); +.jp-DocumentSearch-up-down-button { border-radius: var(--jp-border-radius); } -.jp-DocumentSearch-up-button:hover { +.jp-DocumentSearch-up-down-button:hover { background-color: var(--jp-layout-color2); } -.jp-DocumentSearch-up-button:active { - background-color: var(--jp-layout-color3); -} - -.jp-DocumentSearch-down-button { - background-image: var(--jp-icon-search-arrow-down); - border-radius: var(--jp-border-radius); -} - -.jp-DocumentSearch-down-button:hover { - background-color: var(--jp-layout-color2); -} - -.jp-DocumentSearch-up-down:active { +.jp-DocumentSearch-up-down-button:active { background-color: var(--jp-layout-color3); } .jp-DocumentSearch-ellipses-button { - background-image: var(--jp-icon-ellipses); border-radius: var(--jp-border-radius); } @@ -195,20 +172,6 @@ background-color: var(--jp-layout-color2); } -.jp-DocumentSearch-close-button { - display: inline-block; - background-size: 16px; - background-image: var(--jp-icon-close); - background-repeat: no-repeat; - background-position: center; - vertical-align: middle; -} - -.jp-DocumentSearch-close-button:hover { - background-size: 16px; - background-image: var(--jp-icon-close-circle); -} - .jp-DocumentSearch-search-options { padding: 0 8px; margin-left: 3px; @@ -276,7 +239,6 @@ } .jp-DocumentSearch-replace-toggle-collapsed { - background-image: var(--jp-image-caretright); border-radius: var(--jp-border-radius); } @@ -285,7 +247,6 @@ } .jp-DocumentSearch-replace-toggle-expanded { - background-image: var(--jp-image-caretdown); border-radius: var(--jp-border-radius); } diff --git a/packages/documentsearch/style/index.css b/packages/documentsearch/style/index.css index 589bf07253e5..d0910530be88 100644 --- a/packages/documentsearch/style/index.css +++ b/packages/documentsearch/style/index.css @@ -5,6 +5,7 @@ /* 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('~codemirror/lib/codemirror.css'); diff --git a/packages/documentsearch/tsconfig.json b/packages/documentsearch/tsconfig.json index 51e546dcfb3c..17a7ad629fa5 100644 --- a/packages/documentsearch/tsconfig.json +++ b/packages/documentsearch/tsconfig.json @@ -23,6 +23,9 @@ }, { "path": "../notebook" + }, + { + "path": "../ui-components" } ] } diff --git a/packages/extensionmanager-extension/package.json b/packages/extensionmanager-extension/package.json index 565dc243a84f..4b16c952afa9 100644 --- a/packages/extensionmanager-extension/package.json +++ b/packages/extensionmanager-extension/package.json @@ -40,7 +40,8 @@ "@jupyterlab/apputils": "^2.0.0-alpha.4", "@jupyterlab/extensionmanager": "^2.0.0-alpha.4", "@jupyterlab/mainmenu": "^2.0.0-alpha.4", - "@jupyterlab/settingregistry": "^2.0.0-alpha.4" + "@jupyterlab/settingregistry": "^2.0.0-alpha.4", + "@jupyterlab/ui-components": "^2.0.0-alpha.4" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/extensionmanager-extension/src/index.ts b/packages/extensionmanager-extension/src/index.ts index 72674576edaa..3d6f57c8d20f 100644 --- a/packages/extensionmanager-extension/src/index.ts +++ b/packages/extensionmanager-extension/src/index.ts @@ -7,14 +7,11 @@ import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application'; - import { Dialog, showDialog, ICommandPalette } from '@jupyterlab/apputils'; - -import { IMainMenu } from '@jupyterlab/mainmenu'; - import { ExtensionView } from '@jupyterlab/extensionmanager'; - +import { IMainMenu } from '@jupyterlab/mainmenu'; import { ISettingRegistry } from '@jupyterlab/settingregistry'; +import { extensionIcon } from '@jupyterlab/ui-components'; /** * IDs of the commands added by this extension. @@ -48,7 +45,7 @@ const plugin: JupyterFrontEndPlugin = { const createView = () => { const v = new ExtensionView(serviceManager); v.id = 'extensionmanager.main-view'; - v.title.iconClass = 'jp-ExtensionIcon jp-SideBar-tabIcon'; + v.title.iconRenderer = extensionIcon; v.title.caption = 'Extension Manager'; if (restorer) { restorer.add(v, v.id); @@ -132,11 +129,7 @@ namespace Private { Dialog.warnButton({ label: 'Enable' }) ] }).then(result => { - if (result.button.accept) { - return true; - } else { - return false; - } + return result.button.accept; }); } } diff --git a/packages/extensionmanager-extension/tsconfig.json b/packages/extensionmanager-extension/tsconfig.json index 538160f60806..1cb64aafdcd8 100644 --- a/packages/extensionmanager-extension/tsconfig.json +++ b/packages/extensionmanager-extension/tsconfig.json @@ -20,6 +20,9 @@ }, { "path": "../settingregistry" + }, + { + "path": "../ui-components" } ] } diff --git a/packages/extensionmanager/package.json b/packages/extensionmanager/package.json index b59e650f87a9..61f9997af9d5 100644 --- a/packages/extensionmanager/package.json +++ b/packages/extensionmanager/package.json @@ -38,7 +38,7 @@ "@jupyterlab/apputils": "^2.0.0-alpha.4", "@jupyterlab/services": "^5.0.0-alpha.4", "@jupyterlab/ui-components": "^2.0.0-alpha.4", - "@lumino/messaging": "^1.3.1", + "@lumino/messaging": "^1.3.3", "react": "~16.9.0", "react-paginate": "^6.3.2", "semver": "^6.3.0" diff --git a/packages/extensionmanager/src/widget.tsx b/packages/extensionmanager/src/widget.tsx index 91a78448ad40..25fdde7677dc 100644 --- a/packages/extensionmanager/src/widget.tsx +++ b/packages/extensionmanager/src/widget.tsx @@ -2,19 +2,22 @@ // Distributed under the terms of the Modified BSD License. import { VDomRenderer, ToolbarButtonComponent } from '@jupyterlab/apputils'; - import { ServiceManager } from '@jupyterlab/services'; +import { + Button, + InputGroup, + Collapse, + refreshIcon, + jupyterIcon, + caretRightIcon, + caretDownIcon +} from '@jupyterlab/ui-components'; import { Message } from '@lumino/messaging'; - -import { Button, InputGroup, Collapse } from '@jupyterlab/ui-components'; - import * as React from 'react'; - import ReactPaginate from 'react-paginate'; import { ListModel, IEntry, Action } from './model'; - import { isJupyterOrg } from './query'; // TODO: Replace pagination with lazy loading of lower search results @@ -153,7 +156,12 @@ function ListEntry(props: ListEntry.IProperties): React.ReactElement { {entry.name} -
+
@@ -335,6 +343,7 @@ export class CollapsibleSection extends React.Component< }; } + // TODO: swtich to iconRenderer /** * Render the collapsible section using the virtual DOM. */ @@ -343,10 +352,11 @@ export class CollapsibleSection extends React.Component< <>
{ this.handleCollapse(); @@ -536,8 +546,7 @@ export class ExtensionView extends VDomRenderer { headerElements={ { model.refreshInstalled(); }} diff --git a/packages/extensionmanager/style/base.css b/packages/extensionmanager/style/base.css index 436a84d09d2a..9b80caa1c538 100644 --- a/packages/extensionmanager/style/base.css +++ b/packages/extensionmanager/style/base.css @@ -57,7 +57,7 @@ } .jp-extensionmanager-view header > .jp-ToolbarButtonComponent { - padding: 0px 4px; + padding: 0px 2px; } .jp-extensionmanager-view header .jp-extensionmanager-headerText { @@ -141,13 +141,7 @@ } .jp-extensionmanager-entry-jupyter-org { - background-image: var(--jp-image-jupyter); - background-size: 1em; - background-repeat: no-repeat; - width: 1em; display: none; - position: relative; - top: 1px; } .jp-extensionmanager-entry.jp-extensionmanager-entry-mod-whitelisted @@ -311,11 +305,3 @@ input[type='checkbox'] { font-weight: 600; color: var(--jp-ui-font-color0); } - -.jp-extensionmanager-collapseIcon { - background-image: var(--jp-image-caretright); -} - -.jp-extensionmanager-expandIcon { - background-image: var(--jp-image-caretdown); -} diff --git a/packages/filebrowser-extension/package.json b/packages/filebrowser-extension/package.json index da31d98ac2f6..70923bcc8ee8 100644 --- a/packages/filebrowser-extension/package.json +++ b/packages/filebrowser-extension/package.json @@ -48,10 +48,10 @@ "@jupyterlab/statedb": "^2.0.0-alpha.4", "@jupyterlab/statusbar": "^2.0.0-alpha.4", "@jupyterlab/ui-components": "^2.0.0-alpha.4", - "@lumino/algorithm": "^1.2.1", - "@lumino/commands": "^1.9.0", - "@lumino/messaging": "^1.3.1", - "@lumino/widgets": "^1.9.4" + "@lumino/algorithm": "^1.2.3", + "@lumino/commands": "^1.9.1", + "@lumino/messaging": "^1.3.3", + "@lumino/widgets": "^1.9.7" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/filebrowser-extension/src/index.ts b/packages/filebrowser-extension/src/index.ts index a4ad42b00aa2..d54a2d47ec43 100644 --- a/packages/filebrowser-extension/src/index.ts +++ b/packages/filebrowser-extension/src/index.ts @@ -42,7 +42,7 @@ import { IStateDB } from '@jupyterlab/statedb'; import { IStatusBar } from '@jupyterlab/statusbar'; -import { IIconRegistry } from '@jupyterlab/ui-components'; +import { addIcon, folderIcon } from '@jupyterlab/ui-components'; import { IIterator, map, reduce, toArray } from '@lumino/algorithm'; @@ -133,7 +133,7 @@ const factory: JupyterFrontEndPlugin = { activate: activateFactory, id: '@jupyterlab/filebrowser-extension:factory', provides: IFileBrowserFactory, - requires: [IIconRegistry, IDocumentManager], + requires: [IDocumentManager], optional: [IStateDB, IRouter, JupyterFrontEnd.ITreeResolver] }; @@ -211,7 +211,6 @@ export default plugins; */ async function activateFactory( app: JupyterFrontEnd, - icoReg: IIconRegistry, docManager: IDocumentManager, state: IStateDB | null, router: IRouter | null, @@ -225,7 +224,6 @@ async function activateFactory( ) => { const model = new FileBrowserModel({ auto: options.auto ?? true, - iconRegistry: icoReg, manager: docManager, driveName: options.driveName || '', refreshInterval: options.refreshInterval, @@ -237,7 +235,7 @@ async function activateFactory( // Add a launcher toolbar item. let launcher = new ToolbarButton({ - iconClassName: 'jp-AddIcon', + iconRenderer: addIcon, onClick: () => { return Private.createLauncher(commands, widget); }, @@ -295,7 +293,7 @@ function activateBrowser( mainMenu ); - browser.title.iconClass = 'jp-FolderIcon jp-SideBar-tabIcon'; + browser.title.iconRenderer = folderIcon; browser.title.caption = 'File Browser'; labShell.add(browser, 'left', { rank: 100 }); diff --git a/packages/filebrowser/package.json b/packages/filebrowser/package.json index a09785d9529e..255ceb81d389 100644 --- a/packages/filebrowser/package.json +++ b/packages/filebrowser/package.json @@ -43,15 +43,15 @@ "@jupyterlab/statedb": "^2.0.0-alpha.4", "@jupyterlab/statusbar": "^2.0.0-alpha.4", "@jupyterlab/ui-components": "^2.0.0-alpha.4", - "@lumino/algorithm": "^1.2.1", - "@lumino/coreutils": "^1.4.0", - "@lumino/disposable": "^1.3.2", - "@lumino/domutils": "^1.1.5", - "@lumino/dragdrop": "^1.4.2", - "@lumino/messaging": "^1.3.1", - "@lumino/polling": "^1.0.1", - "@lumino/signaling": "^1.3.2", - "@lumino/widgets": "^1.9.4", + "@lumino/algorithm": "^1.2.3", + "@lumino/coreutils": "^1.4.2", + "@lumino/disposable": "^1.3.4", + "@lumino/domutils": "^1.1.7", + "@lumino/dragdrop": "^1.4.4", + "@lumino/messaging": "^1.3.3", + "@lumino/polling": "^1.0.3", + "@lumino/signaling": "^1.3.4", + "@lumino/widgets": "^1.9.7", "react": "~16.9.0" }, "devDependencies": { diff --git a/packages/filebrowser/src/browser.ts b/packages/filebrowser/src/browser.ts index c22c33d8a560..21cb7072b119 100644 --- a/packages/filebrowser/src/browser.ts +++ b/packages/filebrowser/src/browser.ts @@ -7,6 +7,8 @@ import { IDocumentManager } from '@jupyterlab/docmanager'; import { Contents, ServerConnection } from '@jupyterlab/services'; +import { newFolderIcon, refreshIcon } from '@jupyterlab/ui-components'; + import { IIterator } from '@lumino/algorithm'; import { PanelLayout, Widget } from '@lumino/widgets'; @@ -67,7 +69,7 @@ export class FileBrowser extends Widget { this._directoryPending = false; const newFolder = new ToolbarButton({ - iconClassName: 'jp-NewFolderIcon', + iconRenderer: newFolderIcon, onClick: () => { this.createNewDirectory(); }, @@ -75,7 +77,7 @@ export class FileBrowser extends Widget { }); const uploader = new Uploader({ model }); const refresher = new ToolbarButton({ - iconClassName: 'jp-RefreshIcon', + iconRenderer: refreshIcon, onClick: () => { void model.refresh(); }, diff --git a/packages/filebrowser/src/crumbs.ts b/packages/filebrowser/src/crumbs.ts index 96851c48b5d2..84ad29dd9e88 100644 --- a/packages/filebrowser/src/crumbs.ts +++ b/packages/filebrowser/src/crumbs.ts @@ -5,47 +5,32 @@ import { ArrayExt } from '@lumino/algorithm'; import { Message } from '@lumino/messaging'; -import { IDragEvent } from '@lumino/dragdrop'; - import { ElementExt } from '@lumino/domutils'; +import { IDragEvent } from '@lumino/dragdrop'; + import { Widget } from '@lumino/widgets'; import { DOMUtils, showErrorMessage } from '@jupyterlab/apputils'; -import { PathExt, PageConfig } from '@jupyterlab/coreutils'; +import { PageConfig, PathExt } from '@jupyterlab/coreutils'; import { renameFile } from '@jupyterlab/docmanager'; -import { defaultIconRegistry } from '@jupyterlab/ui-components'; +import { ellipsesIcon, folderIcon } from '@jupyterlab/ui-components'; import { FileBrowserModel } from './model'; -/** - * The class name added to material icons - */ -const MATERIAL_CLASS = 'jp-MaterialIcon'; - /** * The class name added to the breadcrumb node. */ const BREADCRUMB_CLASS = 'jp-BreadCrumbs'; -/** - * The class name for the folder icon for the breadcrumbs home - */ -const BREADCRUMB_HOME = 'jp-FolderIcon'; - /** * The class name for the breadcrumbs home node */ const BREADCRUMB_HOME_CLASS = 'jp-BreadCrumbs-home'; -/** - * The class named associated to the ellipses icon - */ -const BREADCRUMB_ELLIPSES = 'jp-EllipsesIcon'; - /** * The class name added to the breadcrumb node. */ @@ -362,17 +347,17 @@ namespace Private { * Create the breadcrumb nodes. */ export function createCrumbs(): ReadonlyArray { - let home = document.createElement('span'); - defaultIconRegistry.icon({ - name: BREADCRUMB_HOME, + let home = folderIcon.element({ className: BREADCRUMB_HOME_CLASS, - container: home, + tag: 'span', + title: PageConfig.getOption('serverRoot') || 'Jupyter Server Root', + kind: 'breadCrumb' + }); + let ellipsis = ellipsesIcon.element({ + className: BREADCRUMB_ITEM_CLASS, + tag: 'span', kind: 'breadCrumb' }); - home.title = PageConfig.getOption('serverRoot') || 'Jupyter Server Root'; - let ellipsis = document.createElement('span'); - ellipsis.className = - MATERIAL_CLASS + ' ' + BREADCRUMB_ELLIPSES + ' ' + BREADCRUMB_ITEM_CLASS; let parent = document.createElement('span'); parent.className = BREADCRUMB_ITEM_CLASS; let current = document.createElement('span'); diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts index 69af966228e9..09992d7a1fb9 100644 --- a/packages/filebrowser/src/listing.ts +++ b/packages/filebrowser/src/listing.ts @@ -20,7 +20,12 @@ import { DocumentRegistry } from '@jupyterlab/docregistry'; import { Contents } from '@jupyterlab/services'; -import { IIconRegistry } from '@jupyterlab/ui-components'; +import { + caretDownIcon, + caretUpIcon, + fileIcon, + JLIcon +} from '@jupyterlab/ui-components'; import { ArrayExt, @@ -46,6 +51,7 @@ import { ISignal, Signal } from '@lumino/signaling'; import { Widget } from '@lumino/widgets'; import { FileBrowserModel } from './model'; +import { IIconStyle } from '@jupyterlab/ui-components/lib/style/icon'; /** * The class name added to DirListing widget. @@ -193,9 +199,7 @@ export class DirListing extends Widget { */ constructor(options: DirListing.IOptions) { super({ - node: (options.renderer = - options.renderer || - new DirListing.Renderer(options.model.iconRegistry)).createNode() + node: (options.renderer || DirListing.defaultRenderer).createNode() }); this.addClass(DIR_LISTING_CLASS); this._model = options.model; @@ -205,7 +209,7 @@ export class DirListing extends Widget { this._editNode = document.createElement('input'); this._editNode.className = EDITOR_CLASS; this._manager = this._model.manager; - this._renderer = options.renderer; + this._renderer = options.renderer || DirListing.defaultRenderer; const headerNode = DOMUtils.findElement(this.node, HEADER_CLASS); this._renderer.populateHeaderNode(headerNode); @@ -1685,10 +1689,6 @@ export namespace DirListing { * The default implementation of an `IRenderer`. */ export class Renderer implements IRenderer { - constructor(icoReg: IIconRegistry) { - this._iconRegistry = icoReg; - } - /** * Create the DOM node for a dir listing. */ @@ -1717,6 +1717,13 @@ export namespace DirListing { modified.classList.add(MODIFIED_ID_CLASS); node.appendChild(name); node.appendChild(modified); + + // set the initial caret icon + Private.updateCaret( + DOMUtils.findElement(name, HEADER_ITEM_ICON_CLASS), + 'right', + 'up' + ); } /** @@ -1734,36 +1741,56 @@ export namespace DirListing { let state: ISortState = { direction: 'ascending', key: 'name' }; let target = event.target as HTMLElement; if (name.contains(target)) { + const modifiedIcon = DOMUtils.findElement( + modified, + HEADER_ITEM_ICON_CLASS + ); + const nameIcon = DOMUtils.findElement(name, HEADER_ITEM_ICON_CLASS); + if (name.classList.contains(SELECTED_CLASS)) { if (!name.classList.contains(DESCENDING_CLASS)) { state.direction = 'descending'; name.classList.add(DESCENDING_CLASS); + Private.updateCaret(nameIcon, 'right', 'down'); } else { name.classList.remove(DESCENDING_CLASS); + Private.updateCaret(nameIcon, 'right', 'up'); } } else { name.classList.remove(DESCENDING_CLASS); + Private.updateCaret(nameIcon, 'right', 'up'); } name.classList.add(SELECTED_CLASS); modified.classList.remove(SELECTED_CLASS); modified.classList.remove(DESCENDING_CLASS); + Private.updateCaret(modifiedIcon, 'left'); return state; } if (modified.contains(target)) { + const modifiedIcon = DOMUtils.findElement( + modified, + HEADER_ITEM_ICON_CLASS + ); + const nameIcon = DOMUtils.findElement(name, HEADER_ITEM_ICON_CLASS); + state.key = 'last_modified'; if (modified.classList.contains(SELECTED_CLASS)) { if (!modified.classList.contains(DESCENDING_CLASS)) { state.direction = 'descending'; modified.classList.add(DESCENDING_CLASS); + Private.updateCaret(modifiedIcon, 'left', 'down'); } else { modified.classList.remove(DESCENDING_CLASS); + Private.updateCaret(modifiedIcon, 'left', 'up'); } } else { modified.classList.remove(DESCENDING_CLASS); + Private.updateCaret(modifiedIcon, 'left', 'up'); } modified.classList.add(SELECTED_CLASS); name.classList.remove(SELECTED_CLASS); name.classList.remove(DESCENDING_CLASS); + Private.updateCaret(nameIcon, 'right'); return state; } return state; @@ -1803,35 +1830,24 @@ export namespace DirListing { model: Contents.IModel, fileType?: DocumentRegistry.IFileType ): void { - let icon = DOMUtils.findElement(node, ITEM_ICON_CLASS); - let text = DOMUtils.findElement(node, ITEM_TEXT_CLASS); - let modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS); - - if (fileType) { - // TODO: remove workaround if...else/code in else clause in v2.0.0 - // workaround for 1.0.x versions of Jlab pulling in 1.1.x versions of filebrowser - if (this._iconRegistry) { - // add icon as svg node. Can be styled using CSS - this._iconRegistry.icon({ - name: fileType.iconClass ?? '', - className: ITEM_ICON_CLASS, - title: fileType.iconLabel, - fallback: true, - container: icon, - center: true, - kind: 'listing' - }); - } else { - // add icon as CSS background image. Can't be styled using CSS - icon.className = `${ITEM_ICON_CLASS} ${fileType.iconClass || ''}`; - icon.textContent = fileType.iconLabel || ''; - } + const iconContainer = DOMUtils.findElement(node, ITEM_ICON_CLASS); + const text = DOMUtils.findElement(node, ITEM_TEXT_CLASS); + const modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS); + + const iconProps: JLIcon.IProps = { + className: ITEM_ICON_CLASS, + container: iconContainer, + justify: 'center', + kind: 'listing' + }; + + // render the icon svg node + if (fileType?.iconRenderer) { + fileType.iconRenderer.element(iconProps); + } else if (fileType?.iconClass) { + JLIcon.getElement({ name: fileType.iconClass, ...iconProps }); } else { - // use default icon as CSS background image - icon.className = ITEM_ICON_CLASS; - icon.textContent = ''; - // clean up the svg icon annotation, if any - delete icon.dataset.icon; + fileIcon.element(iconProps); } let hoverText = 'Name: ' + model.name; @@ -1939,8 +1955,12 @@ export namespace DirListing { node.appendChild(icon); return node; } - _iconRegistry: IIconRegistry; } + + /** + * The default `IRenderer` instance. + */ + export const defaultRenderer = new Renderer(); } /** @@ -2071,4 +2091,29 @@ namespace Private { return String(bytes); } } + + /** + * Update an inline svg caret icon in a node. + */ + export function updateCaret( + container: HTMLElement, + float: 'left' | 'right', + state?: 'down' | 'up' | undefined + ): void { + const propsStyle: IIconStyle = { + kind: 'listingHeaderItem', + justify: 'center', + float + }; + + if (state) { + (state === 'down' ? caretDownIcon : caretUpIcon).element({ + container, + tag: 'span', + ...propsStyle + }); + } else { + caretDownIcon.recycle({ container, ...propsStyle }); + } + } } diff --git a/packages/filebrowser/src/model.ts b/packages/filebrowser/src/model.ts index a62d300edc24..403d220dc04c 100644 --- a/packages/filebrowser/src/model.ts +++ b/packages/filebrowser/src/model.ts @@ -11,8 +11,6 @@ import { Contents, KernelSpec, Session } from '@jupyterlab/services'; import { IStateDB } from '@jupyterlab/statedb'; -import { IIconRegistry } from '@jupyterlab/ui-components'; - import { ArrayIterator, each, @@ -69,7 +67,6 @@ export class FileBrowserModel implements IDisposable { * Construct a new file browser model. */ constructor(options: FileBrowserModel.IOptions) { - this.iconRegistry = options.iconRegistry; this.manager = options.manager; this._driveName = options.driveName || ''; let rootPath = this._driveName ? this._driveName + ':' : ''; @@ -113,11 +110,6 @@ export class FileBrowserModel implements IDisposable { }); } - /** - * The icon registry instance used by the file browser model. - */ - readonly iconRegistry: IIconRegistry; - /** * The document manager instance used by the file browser model. */ @@ -670,11 +662,6 @@ export namespace FileBrowserModel { */ driveName?: string; - /** - * An icon registry instance. - */ - iconRegistry: IIconRegistry; - /** * A document manager instance. */ diff --git a/packages/filebrowser/src/opendialog.ts b/packages/filebrowser/src/opendialog.ts index b0a6a03ed75e..2cf0f802ffab 100644 --- a/packages/filebrowser/src/opendialog.ts +++ b/packages/filebrowser/src/opendialog.ts @@ -8,7 +8,6 @@ import { PathExt } from '@jupyterlab/coreutils'; import { Dialog } from '@jupyterlab/apputils'; import { IDocumentManager } from '@jupyterlab/docmanager'; import { Contents } from '@jupyterlab/services'; -import { IIconRegistry } from '@jupyterlab/ui-components'; import { FileBrowser } from './browser'; import { FilterFileBrowserModel } from './model'; @@ -36,11 +35,6 @@ export namespace FileDialog { > > > { - /** - * An icon registry instance. - */ - iconRegistry: IIconRegistry; - /** * Document manager */ @@ -81,11 +75,7 @@ export namespace FileDialog { focusNodeSelector: options.focusNodeSelector, host: options.host, renderer: options.renderer, - body: new OpenDialog( - options.iconRegistry, - options.manager, - options.filter - ) + body: new OpenDialog(options.manager, options.filter) }; let dialog = new Dialog(dialogOptions); return dialog.launch(); @@ -117,7 +107,6 @@ export namespace FileDialog { class OpenDialog extends Widget implements Dialog.IBodyWidget { constructor( - iconRegistry: IIconRegistry, manager: IDocumentManager, filter?: (value: Contents.IModel) => boolean ) { @@ -126,7 +115,6 @@ class OpenDialog extends Widget this._browser = Private.createFilteredFileBrowser( 'filtered-file-browser-dialog', - iconRegistry, manager, filter ); @@ -173,8 +161,6 @@ namespace Private { * * @param id - The widget/DOM id of the file browser. * - * @param iconRegistry - An icon registry instance. - * * @param manager - A document manager instance. * * @param filter - function to filter file browser item. @@ -194,13 +180,11 @@ namespace Private { */ export const createFilteredFileBrowser = ( id: string, - iconRegistry: IIconRegistry, manager: IDocumentManager, filter?: (value: Contents.IModel) => boolean, options: IFileBrowserFactory.IOptions = {} ) => { const model = new FilterFileBrowserModel({ - iconRegistry, manager, filter, driveName: options.driveName, diff --git a/packages/filebrowser/src/upload.ts b/packages/filebrowser/src/upload.ts index 5045066fca5b..b89eb7e14ade 100644 --- a/packages/filebrowser/src/upload.ts +++ b/packages/filebrowser/src/upload.ts @@ -2,6 +2,7 @@ // Distributed under the terms of the Modified BSD License. import { ToolbarButton, showErrorMessage } from '@jupyterlab/apputils'; +import { fileUploadIcon } from '@jupyterlab/ui-components'; import { FileBrowserModel } from './model'; @@ -14,7 +15,7 @@ export class Uploader extends ToolbarButton { */ constructor(options: Uploader.IOptions) { super({ - iconClassName: 'jp-FileUploadIcon', + iconRenderer: fileUploadIcon, onClick: () => { this._input.click(); }, diff --git a/packages/filebrowser/style/base.css b/packages/filebrowser/style/base.css index 8253a2287bb4..fe73b1dba9b0 100644 --- a/packages/filebrowser/style/base.css +++ b/packages/filebrowser/style/base.css @@ -102,7 +102,7 @@ } .jp-DirListing-headerItem { - padding: 4px 12px; + padding: 4px 12px 2px 12px; font-weight: 500; } @@ -129,34 +129,6 @@ font-weight: 600; } -.jp-DirListing-headerItemIcon { - height: 16px; - width: 16px; - background-size: 18px; - background-image: 18px; - background-repeat: no-repeat; - background-position: center; -} - -.jp-DirListing-headerItem.jp-mod-selected .jp-DirListing-headerItemIcon { - background-image: var(--jp-icon-caretup); -} - -.jp-DirListing-headerItem.jp-mod-selected.jp-mod-descending - .jp-DirListing-headerItemIcon { - background-image: var(--jp-icon-caretdown); -} - -.jp-DirListing-headerItem.jp-mod-selected.jp-id-name - .jp-DirListing-headerItemIcon { - float: right; -} - -.jp-DirListing-headerItem.jp-mod-selected.jp-id-modified - .jp-DirListing-headerItemIcon { - float: left; -} - /* increase specificity to override bundled default */ .jp-DirListing-content { flex: 1 1 auto; diff --git a/packages/fileeditor-extension/package.json b/packages/fileeditor-extension/package.json index 4ae2bf6add61..0d4cb2d8a98f 100644 --- a/packages/fileeditor-extension/package.json +++ b/packages/fileeditor-extension/package.json @@ -48,9 +48,9 @@ "@jupyterlab/mainmenu": "^2.0.0-alpha.4", "@jupyterlab/settingregistry": "^2.0.0-alpha.4", "@jupyterlab/statusbar": "^2.0.0-alpha.4", - "@lumino/commands": "^1.9.0", - "@lumino/coreutils": "^1.4.0", - "@lumino/widgets": "^1.9.4" + "@lumino/commands": "^1.9.1", + "@lumino/coreutils": "^1.4.2", + "@lumino/widgets": "^1.9.7" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/fileeditor-extension/src/index.ts b/packages/fileeditor-extension/src/index.ts index 15efe8fe0ae1..3f81148ccb6b 100644 --- a/packages/fileeditor-extension/src/index.ts +++ b/packages/fileeditor-extension/src/index.ts @@ -40,7 +40,7 @@ import { JSONObject } from '@lumino/coreutils'; import { Menu } from '@lumino/widgets'; -import { Commands, EDITOR_ICON_CLASS, FACTORY } from './commands'; +import { Commands, FACTORY } from './commands'; export { Commands } from './commands'; @@ -205,8 +205,6 @@ function activate( }); factory.widgetCreated.connect((sender, widget) => { - widget.title.icon = EDITOR_ICON_CLASS; - // Notify the widget tracker if restore data needs to update. widget.context.pathChanged.connect(() => { void tracker.save(widget); diff --git a/packages/fileeditor/package.json b/packages/fileeditor/package.json index 58d919c28b0f..c580343dd8ae 100644 --- a/packages/fileeditor/package.json +++ b/packages/fileeditor/package.json @@ -39,9 +39,10 @@ "@jupyterlab/codeeditor": "^2.0.0-alpha.4", "@jupyterlab/docregistry": "^2.0.0-alpha.4", "@jupyterlab/statusbar": "^2.0.0-alpha.4", - "@lumino/coreutils": "^1.4.0", - "@lumino/messaging": "^1.3.1", - "@lumino/widgets": "^1.9.4", + "@jupyterlab/ui-components": "^2.0.0-alpha.4", + "@lumino/coreutils": "^1.4.2", + "@lumino/messaging": "^1.3.3", + "@lumino/widgets": "^1.9.7", "react": "~16.9.0" }, "devDependencies": { diff --git a/packages/fileeditor/src/widget.ts b/packages/fileeditor/src/widget.ts index c6b4a25662dd..0609061ceb0e 100644 --- a/packages/fileeditor/src/widget.ts +++ b/packages/fileeditor/src/widget.ts @@ -1,7 +1,12 @@ // Copyright (c) Jupyter Development Team. // Distributed under the terms of the Modified BSD License. -import { StackedLayout, Widget } from '@lumino/widgets'; +import { + CodeEditor, + CodeEditorWrapper, + IEditorServices, + IEditorMimeTypeService +} from '@jupyterlab/codeeditor'; import { ABCWidgetFactory, @@ -10,17 +15,14 @@ import { IDocumentWidget } from '@jupyterlab/docregistry'; -import { - CodeEditor, - IEditorServices, - IEditorMimeTypeService, - CodeEditorWrapper -} from '@jupyterlab/codeeditor'; +import { textEditorIcon } from '@jupyterlab/ui-components'; import { PromiseDelegate } from '@lumino/coreutils'; import { Message } from '@lumino/messaging'; +import { StackedLayout, Widget } from '@lumino/widgets'; + /** * The data attribute added to a widget that can run code. */ @@ -323,6 +325,9 @@ export class FileEditorFactory extends ABCWidgetFactory< context, mimeTypeService: this._services.mimeTypeService }); + + content.title.iconRenderer = textEditorIcon; + const widget = new DocumentWidget({ content, context }); return widget; } diff --git a/packages/fileeditor/style/index.css b/packages/fileeditor/style/index.css index 44ff11ffcf90..478404ac11cf 100644 --- a/packages/fileeditor/style/index.css +++ b/packages/fileeditor/style/index.css @@ -5,6 +5,7 @@ /* 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/codeeditor/style/index.css'); @import url('~@jupyterlab/docregistry/style/index.css'); diff --git a/packages/fileeditor/tsconfig.json b/packages/fileeditor/tsconfig.json index daa66686b54d..eb2b73b1fb94 100644 --- a/packages/fileeditor/tsconfig.json +++ b/packages/fileeditor/tsconfig.json @@ -17,6 +17,9 @@ }, { "path": "../statusbar" + }, + { + "path": "../ui-components" } ] } diff --git a/packages/help-extension/package.json b/packages/help-extension/package.json index 1565c4a0dda4..569e5f82c9a4 100644 --- a/packages/help-extension/package.json +++ b/packages/help-extension/package.json @@ -42,7 +42,8 @@ "@jupyterlab/inspector": "^2.0.0-alpha.4", "@jupyterlab/mainmenu": "^2.0.0-alpha.4", "@jupyterlab/services": "^5.0.0-alpha.4", - "@lumino/widgets": "^1.9.4", + "@jupyterlab/ui-components": "^2.0.0-alpha.4", + "@lumino/widgets": "^1.9.7", "react": "~16.9.0" }, "devDependencies": { diff --git a/packages/help-extension/src/index.tsx b/packages/help-extension/src/index.tsx index 936fea70e4fb..60c177e00cb3 100644 --- a/packages/help-extension/src/index.tsx +++ b/packages/help-extension/src/index.tsx @@ -24,6 +24,8 @@ import { IMainMenu } from '@jupyterlab/mainmenu'; import { KernelMessage } from '@jupyterlab/services'; +import { jupyterIcon, jupyterlabWordmarkIcon } from '@jupyterlab/ui-components'; + import { Menu } from '@lumino/widgets'; import * as React from 'react'; @@ -285,8 +287,6 @@ function activate( label: `About ${app.name}`, execute: () => { // Create the header of the about dialog - let headerLogo =
; - let headerWordmark =
; let versionNumber = `Version ${app.version}`; let versionInfo = ( @@ -295,9 +295,9 @@ function activate( ); let title = ( - {headerLogo} +
- {headerWordmark} + {versionInfo}
@@ -329,7 +329,7 @@ function activate( ); let copyright = ( - © 2015 Project Jupyter Contributors + © 2015-2020 Project Jupyter Contributors ); let body = ( diff --git a/packages/help-extension/style/base.css b/packages/help-extension/style/base.css index f96940292b28..18951688dc8f 100644 --- a/packages/help-extension/style/base.css +++ b/packages/help-extension/style/base.css @@ -25,16 +25,6 @@ overflow: visible; } -.jp-Dialog .jp-Dialog-content div.jp-About-header-wordmark { - flex: 0 0 auto; - height: 44px; - width: auto; - background-image: var(--jp-about-header-wordmark); - background-size: 196px 50px; - background-repeat: no-repeat; - padding-bottom: 0px; -} - .jp-About-version-info { color: var(--jp-ui-font-color1); /* Dialog-header sets the font size to 3, we reset to 1 */ @@ -43,7 +33,6 @@ font-weight: 400; letter-spacing: 0.4px; text-align: left; - padding-top: 8px; line-height: 1.12; } @@ -93,12 +82,3 @@ flex-direction: column; margin-left: 16px; } - -.jp-About-header-logo { - height: 94px; - width: 77px; - background-image: var(--jp-about-header-logo); - background-repeat: no-repeat; - background-size: 58px auto; - background-position: center; -} diff --git a/packages/help-extension/style/index.css b/packages/help-extension/style/index.css index bf014bab6161..72f71f0ac15c 100644 --- a/packages/help-extension/style/index.css +++ b/packages/help-extension/style/index.css @@ -5,6 +5,7 @@ /* 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/inspector/style/index.css'); @import url('~@jupyterlab/mainmenu/style/index.css'); diff --git a/packages/help-extension/tsconfig.json b/packages/help-extension/tsconfig.json index 12ac1909a5d9..c6542a50481f 100644 --- a/packages/help-extension/tsconfig.json +++ b/packages/help-extension/tsconfig.json @@ -23,6 +23,9 @@ }, { "path": "../services" + }, + { + "path": "../ui-components" } ] } diff --git a/packages/htmlviewer-extension/package.json b/packages/htmlviewer-extension/package.json index 89004dccbff1..9efbd4b3e651 100644 --- a/packages/htmlviewer-extension/package.json +++ b/packages/htmlviewer-extension/package.json @@ -36,7 +36,8 @@ "@jupyterlab/application": "^2.0.0-alpha.4", "@jupyterlab/apputils": "^2.0.0-alpha.4", "@jupyterlab/docregistry": "^2.0.0-alpha.4", - "@jupyterlab/htmlviewer": "^2.0.0-alpha.4" + "@jupyterlab/htmlviewer": "^2.0.0-alpha.4", + "@jupyterlab/ui-components": "^2.0.0-alpha.4" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/htmlviewer-extension/src/index.tsx b/packages/htmlviewer-extension/src/index.tsx index a9230506a100..9c9b267dde02 100644 --- a/packages/htmlviewer-extension/src/index.tsx +++ b/packages/htmlviewer-extension/src/index.tsx @@ -19,10 +19,7 @@ import { IHTMLViewerTracker } from '@jupyterlab/htmlviewer'; -/** - * The name for an HTML5 icon. - */ -const ICON_NAME = 'html5'; +import { html5Icon } from '@jupyterlab/ui-components'; /** * Command IDs used by the plugin. @@ -58,7 +55,7 @@ function activateHTMLViewer( displayName: 'HTML File', extensions: ['.html'], mimeTypes: ['text/html'], - iconClass: ICON_NAME + iconRenderer: html5Icon }; app.docRegistry.addFileType(ft); @@ -98,9 +95,9 @@ function activateHTMLViewer( app.commands.notifyCommandChanged(CommandIDs.trustHTML); }); - // widget.node.appendChild(HTML5Icon); widget.title.iconClass = ft.iconClass ?? ''; widget.title.iconLabel = ft.iconLabel ?? ''; + widget.title.iconRenderer = ft.iconRenderer!; }); // Add a command to trust the active HTML document, diff --git a/packages/htmlviewer-extension/tsconfig.json b/packages/htmlviewer-extension/tsconfig.json index 6a04d89ee1fd..55e1f5da685a 100644 --- a/packages/htmlviewer-extension/tsconfig.json +++ b/packages/htmlviewer-extension/tsconfig.json @@ -17,6 +17,9 @@ }, { "path": "../htmlviewer" + }, + { + "path": "../ui-components" } ] } diff --git a/packages/htmlviewer/package.json b/packages/htmlviewer/package.json index 159d335cca4a..557f3fe5ddfa 100644 --- a/packages/htmlviewer/package.json +++ b/packages/htmlviewer/package.json @@ -35,8 +35,9 @@ "@jupyterlab/apputils": "^2.0.0-alpha.4", "@jupyterlab/coreutils": "^4.0.0-alpha.4", "@jupyterlab/docregistry": "^2.0.0-alpha.4", - "@lumino/coreutils": "^1.4.0", - "@lumino/signaling": "^1.3.2", + "@jupyterlab/ui-components": "^2.0.0-alpha.4", + "@lumino/coreutils": "^1.4.2", + "@lumino/signaling": "^1.3.4", "react": "~16.9.0" }, "devDependencies": { diff --git a/packages/htmlviewer/src/index.tsx b/packages/htmlviewer/src/index.tsx index 2f7347cefabc..87934cca674c 100644 --- a/packages/htmlviewer/src/index.tsx +++ b/packages/htmlviewer/src/index.tsx @@ -21,6 +21,8 @@ import { IDocumentWidget } from '@jupyterlab/docregistry'; +import { refreshIcon } from '@jupyterlab/ui-components'; + import { Token } from '@lumino/coreutils'; import { ISignal, Signal } from '@lumino/signaling'; @@ -87,7 +89,7 @@ export class HTMLViewer extends DocumentWidget