diff --git a/.eslintignore b/.eslintignore index 345066118daa..387323d78ed3 100644 --- a/.eslintignore +++ b/.eslintignore @@ -23,3 +23,10 @@ jupyterlab/staging/index.js jupyterlab/staging/yarn.js jupyterlab/themes packages/ui-components/src/icon/iconimports.ts + +# jetbrains IDE stuff +.idea/ + +# ms IDE stuff +.history/ +.vscode/ diff --git a/.prettierignore b/.prettierignore index c330e1cc8fee..4416b5d75eaa 100644 --- a/.prettierignore +++ b/.prettierignore @@ -22,3 +22,10 @@ jupyterlab/geckodriver jupyterlab/staging/yarn.js jupyterlab/staging/index.js packages/ui-components/src/icon/iconimports.ts + +# jetbrains IDE stuff +.idea/ + +# ms IDE stuff +.history/ +.vscode/ diff --git a/dev_mode/package.json b/dev_mode/package.json index 3ea3c126ed78..f45fe200f85b 100644 --- a/dev_mode/package.json +++ b/dev_mode/package.json @@ -169,17 +169,17 @@ "@jupyterlab/vdom-extension": "~2.0.0-rc.1", "@jupyterlab/vega5-extension": "~2.0.0-rc.1", "@lumino/algorithm": "^1.2.3", - "@lumino/application": "^1.8.2", - "@lumino/commands": "^1.9.2", + "@lumino/application": "^1.8.4", + "@lumino/commands": "^1.10.1", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", + "@lumino/disposable": "^1.3.5", "@lumino/domutils": "^1.1.7", - "@lumino/dragdrop": "^1.5.0", + "@lumino/dragdrop": "^1.5.1", "@lumino/messaging": "^1.3.3", "@lumino/properties": "^1.1.6", - "@lumino/signaling": "^1.3.4", - "@lumino/virtualdom": "^1.5.0", - "@lumino/widgets": "^1.10.2", + "@lumino/signaling": "^1.3.5", + "@lumino/virtualdom": "^1.6.1", + "@lumino/widgets": "^1.11.1", "react": "~16.9.0", "react-dom": "~16.9.0" }, diff --git a/examples/cell/package.json b/examples/cell/package.json index 467d92610e63..e11d2defbf7a 100644 --- a/examples/cell/package.json +++ b/examples/cell/package.json @@ -15,8 +15,8 @@ "@jupyterlab/rendermime": "^2.0.0-rc.1", "@jupyterlab/services": "^5.0.0-rc.1", "@jupyterlab/theme-light-extension": "^2.0.0-rc.1", - "@lumino/commands": "^1.9.2", - "@lumino/widgets": "^1.10.2", + "@lumino/commands": "^1.10.1", + "@lumino/widgets": "^1.11.1", "es6-promise": "~4.2.8" }, "devDependencies": { diff --git a/examples/console/package.json b/examples/console/package.json index df3f54a867cd..4f4b31527d59 100644 --- a/examples/console/package.json +++ b/examples/console/package.json @@ -13,8 +13,8 @@ "@jupyterlab/rendermime": "^2.0.0-rc.1", "@jupyterlab/services": "^5.0.0-rc.1", "@jupyterlab/theme-light-extension": "^2.0.0-rc.1", - "@lumino/commands": "^1.9.2", - "@lumino/widgets": "^1.10.2", + "@lumino/commands": "^1.10.1", + "@lumino/widgets": "^1.11.1", "es6-promise": "~4.2.8" }, "devDependencies": { diff --git a/examples/filebrowser/package.json b/examples/filebrowser/package.json index 5ee0b540eba4..219a09aa6c11 100644 --- a/examples/filebrowser/package.json +++ b/examples/filebrowser/package.json @@ -17,8 +17,8 @@ "@jupyterlab/services": "^5.0.0-rc.1", "@jupyterlab/theme-light-extension": "^2.0.0-rc.1", "@lumino/algorithm": "^1.2.3", - "@lumino/commands": "^1.9.2", - "@lumino/widgets": "^1.10.2", + "@lumino/commands": "^1.10.1", + "@lumino/widgets": "^1.11.1", "es6-promise": "~4.2.8" }, "devDependencies": { diff --git a/examples/filebrowser/src/index.ts b/examples/filebrowser/src/index.ts index 66e7efb47bb9..666943f2d3e2 100644 --- a/examples/filebrowser/src/index.ts +++ b/examples/filebrowser/src/index.ts @@ -34,6 +34,8 @@ import { FileBrowser, FileBrowserModel } from '@jupyterlab/filebrowser'; import { FileEditorFactory } from '@jupyterlab/fileeditor'; +import { addIcon } from '@jupyterlab/ui-components'; + function main(): void { let manager = new ServiceManager(); void manager.ready.then(() => { @@ -95,7 +97,7 @@ function createApp(manager: ServiceManager.IManager): void { // Add a creator toolbar item. let creator = new ToolbarButton({ - iconClass: 'jp-AddIcon jp-Icon jp-Icon-16', + icon: addIcon, onClick: () => { void docManager .newUntitled({ diff --git a/examples/notebook/package.json b/examples/notebook/package.json index 8b31c5896da8..b506ed18f9f1 100644 --- a/examples/notebook/package.json +++ b/examples/notebook/package.json @@ -18,8 +18,8 @@ "@jupyterlab/rendermime": "^2.0.0-rc.1", "@jupyterlab/services": "^5.0.0-rc.1", "@jupyterlab/theme-light-extension": "^2.0.0-rc.1", - "@lumino/commands": "^1.9.2", - "@lumino/widgets": "^1.10.2", + "@lumino/commands": "^1.10.1", + "@lumino/widgets": "^1.11.1", "es6-promise": "~4.2.8" }, "devDependencies": { diff --git a/examples/terminal/package.json b/examples/terminal/package.json index c92ba1802362..8944d2a95246 100644 --- a/examples/terminal/package.json +++ b/examples/terminal/package.json @@ -11,7 +11,7 @@ "@jupyterlab/services": "^5.0.0-rc.1", "@jupyterlab/terminal": "^2.0.0-rc.1", "@jupyterlab/theme-light-extension": "^2.0.0-rc.1", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "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 d9d97fd0620e..5561fffb8482 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.10.2" + "@lumino/widgets": "^1.11.1" }, "jupyterlab": { "mimeExtension": true diff --git a/packages/application-extension/package.json b/packages/application-extension/package.json index aaaa6bc81a8a..98323712050a 100644 --- a/packages/application-extension/package.json +++ b/packages/application-extension/package.json @@ -45,8 +45,8 @@ "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", - "@lumino/widgets": "^1.10.2", + "@lumino/disposable": "^1.3.5", + "@lumino/widgets": "^1.11.1", "react": "~16.9.0" }, "devDependencies": { diff --git a/packages/application-extension/src/index.tsx b/packages/application-extension/src/index.tsx index e1b976cce2e0..563edba23b8a 100644 --- a/packages/application-extension/src/index.tsx +++ b/packages/application-extension/src/index.tsx @@ -825,7 +825,7 @@ const propertyInspector: JupyterFrontEndPlugin = { provides: IPropertyInspectorProvider, activate: (app: JupyterFrontEnd, labshell: ILabShell) => { const widget = new SideBarPropertyInspectorProvider(labshell); - widget.title.iconRenderer = buildIcon; + widget.title.icon = buildIcon; widget.title.caption = 'Property Inspector'; widget.id = 'jp-property-inspector'; labshell.add(widget, 'left'); diff --git a/packages/application/package.json b/packages/application/package.json index 819deae49db7..d4b651f2094d 100644 --- a/packages/application/package.json +++ b/packages/application/package.json @@ -45,15 +45,15 @@ "@jupyterlab/statedb": "^2.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", - "@lumino/application": "^1.8.2", - "@lumino/commands": "^1.9.2", + "@lumino/application": "^1.8.4", + "@lumino/commands": "^1.10.1", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", + "@lumino/disposable": "^1.3.5", "@lumino/messaging": "^1.3.3", - "@lumino/polling": "^1.0.3", + "@lumino/polling": "^1.0.4", "@lumino/properties": "^1.1.6", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2" + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/application/src/frontend.ts b/packages/application/src/frontend.ts index b615b0459a6c..bcfb589dad7a 100644 --- a/packages/application/src/frontend.ts +++ b/packages/application/src/frontend.ts @@ -7,6 +7,8 @@ import { DocumentRegistry } from '@jupyterlab/docregistry'; import { ServiceManager } from '@jupyterlab/services'; +import { MenuSvg } from '@jupyterlab/ui-components'; + import { IIterator } from '@lumino/algorithm'; import { Application, IPlugin } from '@lumino/application'; @@ -38,6 +40,10 @@ export abstract class JupyterFrontEnd< * Construct a new JupyterFrontEnd object. */ constructor(options: JupyterFrontEnd.IOptions) { + // render context menu with inline svg icon tweaks + options.contextMenuRenderer = + options.contextMenuRenderer || MenuSvg.defaultRenderer; + super(options); // The default restored promise if one does not exist in the options. diff --git a/packages/application/src/shell.ts b/packages/application/src/shell.ts index 6d73229130d0..da8b40394ca8 100644 --- a/packages/application/src/shell.ts +++ b/packages/application/src/shell.ts @@ -772,12 +772,10 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell { // (for context menu support) title.dataset = { ...title.dataset, id: widget.id }; - // set an appropriate style class for the iconRenderer - if (title.iconRenderer) { - title.iconClass = LabIcon.UNSTABLE_style({ - className: title.iconClass, - justify: 'center', - kind: 'mainAreaTab' + // bind an appropriate style to the icon + if (title.icon instanceof LabIcon) { + title.icon = title.icon.bindprops({ + stylesheet: 'mainAreaTab' }); } @@ -1184,12 +1182,10 @@ namespace Private { // 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) { - title.iconClass = LabIcon.UNSTABLE_style({ - className: title.iconClass, - justify: 'center', - kind: 'sideBar' + // bind an appropriate style to the icon + if (title.icon instanceof LabIcon) { + title.icon = title.icon.bindprops({ + stylesheet: 'sideBar' }); } diff --git a/packages/application/style/menus.css b/packages/application/style/menus.css index 40e89590815f..e9b1536da0da 100644 --- a/packages/application/style/menus.css +++ b/packages/application/style/menus.css @@ -126,24 +126,8 @@ border-top: var(--jp-border-width) solid var(--jp-layout-color2); } -.lm-Menu-itemIcon, -.lm-Menu-itemSubmenuIcon { - background-size: 16px; - background-repeat: no-repeat; - background-position: center; -} - -.lm-Menu-item.lm-mod-toggled > .lm-Menu-itemIcon { - background-image: var(--jp-icon-check); -} - -.lm-Menu-item.lm-mod-toggled.lm-mod-disabled > .lm-Menu-itemIcon { - background-image: var(--jp-icon-check-disabled); -} - -.lm-Menu-item[data-type='submenu'] > .lm-Menu-itemSubmenuIcon { - background-image: var(--jp-icon-caret-right); - background-size: 18px; - background-repeat: no-repeat; - background-position: left; +/* gray out icon/caret for disable menu items */ +.lm-Menu-item.lm-mod-disabled > .lm-Menu-itemIcon, +.lm-Menu-item[data-type='submenu'].lm-mod-disabled > .lm-Menu-itemSubmenuIcon { + opacity: 0.4; } diff --git a/packages/apputils-extension/package.json b/packages/apputils-extension/package.json index 0d778cd41492..424560a7dce1 100644 --- a/packages/apputils-extension/package.json +++ b/packages/apputils-extension/package.json @@ -45,11 +45,11 @@ "@jupyterlab/statedb": "^2.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", - "@lumino/commands": "^1.9.2", + "@lumino/commands": "^1.10.1", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", - "@lumino/polling": "^1.0.3", - "@lumino/widgets": "^1.10.2", + "@lumino/disposable": "^1.3.5", + "@lumino/polling": "^1.0.4", + "@lumino/widgets": "^1.11.1", "es6-promise": "~4.2.8" }, "devDependencies": { diff --git a/packages/apputils-extension/src/index.ts b/packages/apputils-extension/src/index.ts index 67e3f4cb6fda..1f80226c29f3 100644 --- a/packages/apputils-extension/src/index.ts +++ b/packages/apputils-extension/src/index.ts @@ -151,8 +151,8 @@ const splash: JupyterFrontEndPlugin = { jupyterFaviconIcon.element({ container: logo, - justify: 'center', - kind: 'splash' + + stylesheet: 'splash' }); galaxy.appendChild(logo); diff --git a/packages/apputils-extension/src/palette.ts b/packages/apputils-extension/src/palette.ts index 453df5e76901..0f069936d916 100644 --- a/packages/apputils-extension/src/palette.ts +++ b/packages/apputils-extension/src/palette.ts @@ -10,7 +10,7 @@ import { CommandPalette } from '@lumino/widgets'; import { ILayoutRestorer, JupyterFrontEnd } from '@jupyterlab/application'; import { ICommandPalette, IPaletteItem } from '@jupyterlab/apputils'; -import { paletteIcon } from '@jupyterlab/ui-components'; +import { CommandPaletteSvg, paletteIcon } from '@jupyterlab/ui-components'; /** * The command IDs used by the apputils extension. @@ -29,7 +29,7 @@ export class Palette implements ICommandPalette { */ constructor(palette: CommandPalette) { this._palette = palette; - this._palette.title.iconRenderer = paletteIcon; + this._palette.title.icon = paletteIcon; this._palette.title.label = ''; this._palette.title.caption = 'Command Palette'; } @@ -141,9 +141,13 @@ namespace Private { */ export function createPalette(app: JupyterFrontEnd): CommandPalette { if (!palette) { - palette = new CommandPalette({ commands: app.commands }); + // use a renderer tweaked to use inline svg icons + palette = new CommandPalette({ + commands: app.commands, + renderer: CommandPaletteSvg.defaultRenderer + }); palette.id = 'command-palette'; - palette.title.iconRenderer = paletteIcon; + palette.title.icon = paletteIcon; palette.title.label = 'Commands'; } diff --git a/packages/apputils/package.json b/packages/apputils/package.json index 31ee43bb62ba..29d30359bbc4 100644 --- a/packages/apputils/package.json +++ b/packages/apputils/package.json @@ -41,15 +41,15 @@ "@jupyterlab/statedb": "^2.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", - "@lumino/commands": "^1.9.2", + "@lumino/commands": "^1.10.1", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", + "@lumino/disposable": "^1.3.5", "@lumino/domutils": "^1.1.7", "@lumino/messaging": "^1.3.3", "@lumino/properties": "^1.1.6", - "@lumino/signaling": "^1.3.4", - "@lumino/virtualdom": "^1.5.0", - "@lumino/widgets": "^1.10.2", + "@lumino/signaling": "^1.3.5", + "@lumino/virtualdom": "^1.6.1", + "@lumino/widgets": "^1.11.1", "@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 6bbe536d045a..0b49247fe17d 100644 --- a/packages/apputils/src/collapse.ts +++ b/packages/apputils/src/collapse.ts @@ -156,7 +156,7 @@ export class Collapse extends Widget { (this._collapsed ? caretUpIcon : caretDownIcon).element({ container: this._header.node, label: this._widget.title.label, - justify: 'right', + elementPosition: 'right', height: '28px' }); } diff --git a/packages/apputils/src/mainareawidget.ts b/packages/apputils/src/mainareawidget.ts index 550c8f94ffaa..5a31aad30dd9 100644 --- a/packages/apputils/src/mainareawidget.ts +++ b/packages/apputils/src/mainareawidget.ts @@ -177,9 +177,9 @@ export class MainAreaWidget extends Widget const content = this.content; this.title.label = content.title.label; this.title.mnemonic = content.title.mnemonic; + this.title.icon = content.title.icon; 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; @@ -197,9 +197,9 @@ export class MainAreaWidget extends Widget const content = this.content; content.title.label = this.title.label; content.title.mnemonic = this.title.mnemonic; + content.title.icon = this.title.icon; 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 a937e91e1972..2ee01dcb22e3 100644 --- a/packages/apputils/src/styling.ts +++ b/packages/apputils/src/styling.ts @@ -72,7 +72,7 @@ export namespace Styling { wrapper.appendChild( caretDownEmptyIcon.element({ tag: 'span', - kind: 'select', + stylesheet: 'select', right: '8px', top: '5px', width: '18px' diff --git a/packages/apputils/src/toolbar.tsx b/packages/apputils/src/toolbar.tsx index b31ee58d6c36..ce62ebb0eda7 100644 --- a/packages/apputils/src/toolbar.tsx +++ b/packages/apputils/src/toolbar.tsx @@ -448,9 +448,9 @@ export namespace ToolbarButtonComponent { export interface IProps { className?: string; label?: string; + icon?: LabIcon.IMaybeResolvable; iconClass?: string; iconLabel?: string; - icon?: LabIcon; tooltip?: string; onClick?: () => void; enabled?: boolean; @@ -503,8 +503,7 @@ export function ToolbarButtonComponent(props: ToolbarButtonComponent.IProps) { } className="jp-ToolbarButtonComponent-icon" tag="span" - justify="center" - kind="toolbarButton" + stylesheet="toolbarButton" /> {props.label && ( {props.label} @@ -609,8 +608,14 @@ namespace Private { options: CommandToolbarButtonComponent.IProps ): ToolbarButtonComponent.IProps { let { commands, id, args } = options; + const iconClass = commands.iconClass(id, args); const iconLabel = commands.iconLabel(id, args); + // DEPRECATED: remove _icon when lumino 2.0 is adopted + // if icon is aliasing iconClass, don't use it + const _icon = commands.icon(id, args); + const icon = _icon === iconClass ? undefined : _icon; + const label = commands.label(id, args); let className = commands.className(id, args); // Add the boolean state classes. @@ -625,7 +630,8 @@ namespace Private { void commands.execute(id, args); }; const enabled = commands.isEnabled(id, args); - return { className, iconClass, tooltip, onClick, enabled, label }; + + return { className, icon, iconClass, tooltip, onClick, enabled, label }; } /** @@ -726,15 +732,15 @@ namespace Private { circleIcon.element({ container: this.node, title: `Kernel ${Text.titleCase(status)}`, - justify: 'center', - kind: 'toolbarButton' + + stylesheet: 'toolbarButton' }); } else { circleEmptyIcon.element({ container: this.node, title: `Kernel ${Text.titleCase(status)}`, - justify: 'center', - kind: 'toolbarButton' + + stylesheet: 'toolbarButton' }); } } diff --git a/packages/apputils/style/commandpalette.css b/packages/apputils/style/commandpalette.css index 283c39074464..65cc7fe04b6d 100644 --- a/packages/apputils/style/commandpalette.css +++ b/packages/apputils/style/commandpalette.css @@ -90,35 +90,22 @@ } .lm-CommandPalette-header { - margin-top: 8px; - padding: 8px 0 8px 12px; + border-bottom: solid var(--jp-border-width) var(--jp-border-color2); color: var(--jp-ui-font-color1); + cursor: pointer; + display: flex; font-size: var(--jp-ui-font-size0); font-weight: 600; - cursor: pointer; - text-transform: uppercase; - border-bottom: solid var(--jp-border-width) var(--jp-border-color2); letter-spacing: 1px; + margin-top: 8px; + padding: 8px 0 8px 12px; + text-transform: uppercase; } .lm-CommandPalette-header.lm-mod-active { background: var(--jp-layout-color2); } -.lm-CommandPalette-header:hover::after { - content: ''; - min-width: 12px; - min-height: 12px; - background-size: 14px; - margin-right: 16px; - float: right; - display: inline-block; - vertical-align: middle; - background-repeat: no-repeat; - background-position: center; - background-image: var(--jp-icon-filter-list); -} - .lm-CommandPalette-header > mark { background-color: transparent; font-weight: bold; @@ -163,14 +150,8 @@ color: var(--jp-ui-font-color3); } -.lm-CommandPalette-item.lm-mod-toggled .lm-CommandPalette-itemIcon { - background-image: var(--jp-icon-check); - background-size: 16px; - background-repeat: no-repeat; -} - .lm-CommandPalette-item .lm-CommandPalette-itemIcon { - padding: 0px 0px 0px 4px; + margin: 0 4px 0 0; position: relative; width: 16px; top: 2px; diff --git a/packages/attachments/package.json b/packages/attachments/package.json index 023d4c2658d9..83d0d9a32cfe 100644 --- a/packages/attachments/package.json +++ b/packages/attachments/package.json @@ -39,8 +39,8 @@ "@jupyterlab/observables": "^3.0.0-rc.1", "@jupyterlab/rendermime": "^2.0.0-rc.1", "@jupyterlab/rendermime-interfaces": "^2.0.0-rc.1", - "@lumino/disposable": "^1.3.4", - "@lumino/signaling": "^1.3.4" + "@lumino/disposable": "^1.3.5", + "@lumino/signaling": "^1.3.5" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/cells/package.json b/packages/cells/package.json index ccc6084f48be..cd6c82c9077f 100644 --- a/packages/cells/package.json +++ b/packages/cells/package.json @@ -49,11 +49,11 @@ "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/dragdrop": "^1.5.0", + "@lumino/dragdrop": "^1.5.1", "@lumino/messaging": "^1.3.3", - "@lumino/signaling": "^1.3.4", - "@lumino/virtualdom": "^1.5.0", - "@lumino/widgets": "^1.10.2", + "@lumino/signaling": "^1.3.5", + "@lumino/virtualdom": "^1.6.1", + "@lumino/widgets": "^1.11.1", "react": "~16.9.0" }, "devDependencies": { diff --git a/packages/cells/src/placeholder.tsx b/packages/cells/src/placeholder.tsx index bb1de2e386ea..87ad9eced947 100644 --- a/packages/cells/src/placeholder.tsx +++ b/packages/cells/src/placeholder.tsx @@ -91,7 +91,7 @@ export class InputPlaceholder extends Placeholder { > @@ -125,7 +125,7 @@ export class OutputPlaceholder extends Placeholder { > diff --git a/packages/celltags/package.json b/packages/celltags/package.json index 99f226915340..ad2dde51a54f 100644 --- a/packages/celltags/package.json +++ b/packages/celltags/package.json @@ -43,7 +43,7 @@ "@jupyterlab/cells": "^2.0.0-rc.1", "@jupyterlab/notebook": "^2.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", - "@lumino/widgets": "^1.10.2" + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "@types/node": "^12.12.17", diff --git a/packages/celltags/src/addwidget.ts b/packages/celltags/src/addwidget.ts index 339a58a12acc..815f16cc4b10 100644 --- a/packages/celltags/src/addwidget.ts +++ b/packages/celltags/src/addwidget.ts @@ -33,7 +33,7 @@ export class AddWidget extends Widget { tag.appendChild(text); let iconContainer = addIcon.element({ tag: 'span', - justify: 'center', + elementPosition: 'center', height: '18px', width: '18px', marginLeft: '3px', diff --git a/packages/celltags/src/widget.ts b/packages/celltags/src/widget.ts index d1bfe2a8e2df..6a951063f143 100644 --- a/packages/celltags/src/widget.ts +++ b/packages/celltags/src/widget.ts @@ -31,7 +31,7 @@ export class TagWidget extends Widget { tag.appendChild(text); let iconContainer = checkIcon.element({ tag: 'span', - justify: 'center', + elementPosition: 'center', height: '18px', width: '18px', marginLeft: '5px', diff --git a/packages/codeeditor/package.json b/packages/codeeditor/package.json index 21d118f564f7..653eac9e08a6 100644 --- a/packages/codeeditor/package.json +++ b/packages/codeeditor/package.json @@ -40,11 +40,11 @@ "@jupyterlab/observables": "^3.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", - "@lumino/dragdrop": "^1.5.0", + "@lumino/disposable": "^1.3.5", + "@lumino/dragdrop": "^1.5.1", "@lumino/messaging": "^1.3.3", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2" + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/codemirror-extension/package.json b/packages/codemirror-extension/package.json index fcfa5e990b24..506366c97990 100644 --- a/packages/codemirror-extension/package.json +++ b/packages/codemirror-extension/package.json @@ -44,7 +44,7 @@ "@jupyterlab/mainmenu": "^2.0.0-rc.1", "@jupyterlab/settingregistry": "^2.0.0-rc.1", "@jupyterlab/statusbar": "^2.0.0-rc.1", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "codemirror": "~5.49.2" }, "devDependencies": { diff --git a/packages/codemirror/package.json b/packages/codemirror/package.json index d2528e9cc433..0125911bd917 100644 --- a/packages/codemirror/package.json +++ b/packages/codemirror/package.json @@ -40,12 +40,12 @@ "@jupyterlab/observables": "^3.0.0-rc.1", "@jupyterlab/statusbar": "^2.0.0-rc.1", "@lumino/algorithm": "^1.2.3", - "@lumino/commands": "^1.9.2", + "@lumino/commands": "^1.10.1", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", - "@lumino/polling": "^1.0.3", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2", + "@lumino/disposable": "^1.3.5", + "@lumino/polling": "^1.0.4", + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1", "codemirror": "~5.49.2", "react": "~16.9.0" }, diff --git a/packages/completer-extension/package.json b/packages/completer-extension/package.json index a579286896ac..2049a7ce9acd 100644 --- a/packages/completer-extension/package.json +++ b/packages/completer-extension/package.json @@ -43,7 +43,7 @@ "@jupyterlab/notebook": "^2.0.0-rc.1", "@jupyterlab/services": "^5.0.0-rc.1", "@lumino/algorithm": "^1.2.3", - "@lumino/widgets": "^1.10.2" + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/completer/package.json b/packages/completer/package.json index ea45d672bd39..e44d2d7a9576 100644 --- a/packages/completer/package.json +++ b/packages/completer/package.json @@ -42,11 +42,11 @@ "@jupyterlab/statedb": "^2.0.0-rc.1", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", + "@lumino/disposable": "^1.3.5", "@lumino/domutils": "^1.1.7", "@lumino/messaging": "^1.3.3", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2" + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/console-extension/package.json b/packages/console-extension/package.json index a26789e0a2c4..cc1239f77cf3 100644 --- a/packages/console-extension/package.json +++ b/packages/console-extension/package.json @@ -46,11 +46,12 @@ "@jupyterlab/mainmenu": "^2.0.0-rc.1", "@jupyterlab/rendermime": "^2.0.0-rc.1", "@jupyterlab/settingregistry": "^2.0.0-rc.1", + "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", + "@lumino/disposable": "^1.3.5", "@lumino/properties": "^1.1.6", - "@lumino/widgets": "^1.10.2" + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/console-extension/src/index.ts b/packages/console-extension/src/index.ts index 655f4f8a92bf..d9a88f80b991 100644 --- a/packages/console-extension/src/index.ts +++ b/packages/console-extension/src/index.ts @@ -41,6 +41,8 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime'; import { ISettingRegistry } from '@jupyterlab/settingregistry'; +import { consoleIcon } from '@jupyterlab/ui-components'; + import { find } from '@lumino/algorithm'; import { @@ -363,7 +365,7 @@ async function activateConsole( } return 'Console'; }, - iconClass: args => (args['isPalette'] ? '' : 'jp-ConsoleIcon'), + icon: args => (args['isPalette'] ? undefined : consoleIcon), execute: args => { let basePath = (args['basePath'] as string) || diff --git a/packages/console-extension/tsconfig.json b/packages/console-extension/tsconfig.json index 4cb1893a20ca..25098ae52f8f 100644 --- a/packages/console-extension/tsconfig.json +++ b/packages/console-extension/tsconfig.json @@ -35,6 +35,9 @@ }, { "path": "../settingregistry" + }, + { + "path": "../ui-components" } ] } diff --git a/packages/console/package.json b/packages/console/package.json index 744112acdcf3..ca20dda8822a 100644 --- a/packages/console/package.json +++ b/packages/console/package.json @@ -46,11 +46,11 @@ "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", - "@lumino/dragdrop": "^1.5.0", + "@lumino/disposable": "^1.3.5", + "@lumino/dragdrop": "^1.5.1", "@lumino/messaging": "^1.3.3", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2" + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/console/src/panel.ts b/packages/console/src/panel.ts index 02e5d45d914f..f01f40e18038 100644 --- a/packages/console/src/panel.ts +++ b/packages/console/src/panel.ts @@ -92,7 +92,7 @@ export class ConsolePanel extends MainAreaWidget { sessionContext.kernelChanged.connect(this._updateTitlePanel, this); sessionContext.propertyChanged.connect(this._updateTitlePanel, this); - this.title.iconRenderer = consoleIcon; + this.title.icon = consoleIcon; this.title.closable = true; this.id = `console-${count}`; } diff --git a/packages/coreutils/package.json b/packages/coreutils/package.json index 2e9ef951eac9..683d6d3df81d 100644 --- a/packages/coreutils/package.json +++ b/packages/coreutils/package.json @@ -33,8 +33,8 @@ }, "dependencies": { "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", - "@lumino/signaling": "^1.3.4", + "@lumino/disposable": "^1.3.5", + "@lumino/signaling": "^1.3.5", "minimist": "~1.2.0", "moment": "^2.24.0", "path-posix": "~1.0.0", diff --git a/packages/csvviewer-extension/package.json b/packages/csvviewer-extension/package.json index a02b6a498b76..c577269953e3 100644 --- a/packages/csvviewer-extension/package.json +++ b/packages/csvviewer-extension/package.json @@ -41,9 +41,9 @@ "@jupyterlab/docregistry": "^2.0.0-rc.1", "@jupyterlab/documentsearch": "^2.0.0-rc.1", "@jupyterlab/mainmenu": "^2.0.0-rc.1", - "@lumino/datagrid": "^0.4.0", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2" + "@lumino/datagrid": "^0.5.3", + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/csvviewer-extension/src/index.ts b/packages/csvviewer-extension/src/index.ts index 2205dc7e3921..b0368b458ace 100644 --- a/packages/csvviewer-extension/src/index.ts +++ b/packages/csvviewer-extension/src/index.ts @@ -128,9 +128,9 @@ function activateCsv( }); if (ft) { + widget.title.icon = ft.icon!; widget.title.iconClass = ft.iconClass!; widget.title.iconLabel = ft.iconLabel!; - widget.title.iconRenderer = ft.icon!; } // Set the theme for the new widget. widget.content.style = style; @@ -208,9 +208,9 @@ function activateTsv( }); if (ft) { + widget.title.icon = ft.icon!; widget.title.iconClass = ft.iconClass!; widget.title.iconLabel = ft.iconLabel!; - widget.title.iconRenderer = ft.icon!; } // Set the theme for the new widget. widget.content.style = style; diff --git a/packages/csvviewer/package.json b/packages/csvviewer/package.json index a161cd1b9668..e0e5763e8755 100644 --- a/packages/csvviewer/package.json +++ b/packages/csvviewer/package.json @@ -40,11 +40,11 @@ "@jupyterlab/docregistry": "^2.0.0-rc.1", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/datagrid": "^0.4.0", - "@lumino/disposable": "^1.3.4", + "@lumino/datagrid": "^0.5.3", + "@lumino/disposable": "^1.3.5", "@lumino/messaging": "^1.3.3", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2" + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/docmanager-extension/package.json b/packages/docmanager-extension/package.json index 404352778ebc..d0b6b14d1b37 100644 --- a/packages/docmanager-extension/package.json +++ b/packages/docmanager-extension/package.json @@ -47,8 +47,8 @@ "@jupyterlab/statusbar": "^2.0.0-rc.1", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", - "@lumino/widgets": "^1.10.2" + "@lumino/disposable": "^1.3.5", + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/docmanager/package.json b/packages/docmanager/package.json index 8d9648ce9190..eedf7da7b680 100644 --- a/packages/docmanager/package.json +++ b/packages/docmanager/package.json @@ -42,11 +42,11 @@ "@jupyterlab/statusbar": "^2.0.0-rc.1", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", + "@lumino/disposable": "^1.3.5", "@lumino/messaging": "^1.3.3", "@lumino/properties": "^1.1.6", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2", + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1", "react": "~16.9.0" }, "devDependencies": { diff --git a/packages/docregistry/package.json b/packages/docregistry/package.json index cb9ec8a68314..92139e0e2294 100644 --- a/packages/docregistry/package.json +++ b/packages/docregistry/package.json @@ -46,10 +46,10 @@ "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", + "@lumino/disposable": "^1.3.5", "@lumino/messaging": "^1.3.3", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2" + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/docregistry/src/mimedocument.ts b/packages/docregistry/src/mimedocument.ts index 71b267544b23..4a828c0390e1 100644 --- a/packages/docregistry/src/mimedocument.ts +++ b/packages/docregistry/src/mimedocument.ts @@ -287,9 +287,9 @@ export class MimeDocumentFactory extends ABCWidgetFactory { dataType: this._dataType }); + content.title.icon = ft?.icon!; content.title.iconClass = ft?.iconClass ?? ''; content.title.iconLabel = ft?.iconLabel ?? ''; - content.title.iconRenderer = ft?.icon!; const widget = new MimeDocument({ content, context }); diff --git a/packages/docregistry/src/registry.ts b/packages/docregistry/src/registry.ts index 68050597f3b2..0e6d459449c3 100644 --- a/packages/docregistry/src/registry.ts +++ b/packages/docregistry/src/registry.ts @@ -1176,9 +1176,7 @@ export namespace DocumentRegistry { readonly pattern?: string; /** - * The icon for the file type. Can either be a string containing the name - * of an existing icon, or an object with {name, svgstr} fields, where - * svgstr is a string containing the raw contents of an svg file. + * The icon for the file type. */ readonly icon?: LabIcon; diff --git a/packages/documentsearch-extension/package.json b/packages/documentsearch-extension/package.json index 8b956d6d2a86..60eb58d2ad7a 100644 --- a/packages/documentsearch-extension/package.json +++ b/packages/documentsearch-extension/package.json @@ -37,7 +37,7 @@ "@jupyterlab/apputils": "^2.0.0-rc.1", "@jupyterlab/documentsearch": "^2.0.0-rc.1", "@jupyterlab/mainmenu": "^2.0.0-rc.1", - "@lumino/widgets": "^1.10.2" + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/documentsearch/package.json b/packages/documentsearch/package.json index 7bcb035758b5..af74f8225db5 100644 --- a/packages/documentsearch/package.json +++ b/packages/documentsearch/package.json @@ -41,10 +41,10 @@ "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", - "@lumino/polling": "^1.0.3", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2", + "@lumino/disposable": "^1.3.5", + "@lumino/polling": "^1.0.4", + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1", "codemirror": "~5.49.2", "react": "~16.9.0" }, diff --git a/packages/documentsearch/src/searchoverlay.tsx b/packages/documentsearch/src/searchoverlay.tsx index f5498e54d724..78aa5186e946 100644 --- a/packages/documentsearch/src/searchoverlay.tsx +++ b/packages/documentsearch/src/searchoverlay.tsx @@ -3,7 +3,9 @@ import { ReactWidget, UseSignal } from '@jupyterlab/apputils'; import { + caretDownIcon, caretDownEmptyThinIcon, + caretRightIcon, caretUpEmptyThinIcon, caseSensitiveIcon, classes, @@ -40,8 +42,7 @@ const REPLACE_ENTRY_CLASS = 'jp-DocumentSearch-replace-entry'; const REPLACE_BUTTON_CLASS = 'jp-DocumentSearch-replace-button'; const REPLACE_BUTTON_WRAPPER_CLASS = 'jp-DocumentSearch-replace-button-wrapper'; const REPLACE_WRAPPER_CLASS = 'jp-DocumentSearch-replace-wrapper-class'; -const REPLACE_TOGGLE_COLLAPSED = 'jp-DocumentSearch-replace-toggle-collapsed'; -const REPLACE_TOGGLE_EXPANDED = 'jp-DocumentSearch-replace-toggle-expanded'; +const REPLACE_TOGGLE_CLASS = 'jp-DocumentSearch-replace-toggle'; const FOCUSED_INPUT = 'jp-DocumentSearch-focused-input'; const TOGGLE_WRAPPER = 'jp-DocumentSearch-toggle-wrapper'; const TOGGLE_PLACEHOLDER = 'jp-DocumentSearch-toggle-placeholder'; @@ -452,6 +453,8 @@ class SearchOverlay extends React.Component< toggleOutput={this._toggleSearchOutput} /> ) : null; + const icon = this.state.replaceEntryShown ? caretDownIcon : caretRightIcon; + return [
{this.props.isReadOnly ? ( @@ -462,13 +465,12 @@ class SearchOverlay extends React.Component< onClick={() => this._onReplaceToggled()} tabIndex={1} > - )} @@ -507,7 +509,7 @@ class SearchOverlay extends React.Component< > diff --git a/packages/documentsearch/style/base.css b/packages/documentsearch/style/base.css index 4728c311cfb9..2d4b08c93233 100644 --- a/packages/documentsearch/style/base.css +++ b/packages/documentsearch/style/base.css @@ -232,24 +232,12 @@ display: flex; } -.jp-DocumentSearch-replace-toggle-collapsed, -.jp-DocumentSearch-replace-toggle-expanded { +.jp-DocumentSearch-replace-toggle { border: none; background-color: var(--jp-toolbar-background); -} - -.jp-DocumentSearch-replace-toggle-collapsed { - border-radius: var(--jp-border-radius); -} - -.jp-DocumentSearch-replace-toggle-collapsed:hover { - background-color: var(--jp-layout-color2); -} - -.jp-DocumentSearch-replace-toggle-expanded { border-radius: var(--jp-border-radius); } -.jp-DocumentSearch-replace-toggle-expanded:hover { +.jp-DocumentSearch-replace-toggle:hover { background-color: var(--jp-layout-color2); } diff --git a/packages/extensionmanager-extension/src/index.ts b/packages/extensionmanager-extension/src/index.ts index 9dc355d43898..33a923092ea7 100644 --- a/packages/extensionmanager-extension/src/index.ts +++ b/packages/extensionmanager-extension/src/index.ts @@ -45,7 +45,7 @@ const plugin: JupyterFrontEndPlugin = { const createView = () => { const v = new ExtensionView(serviceManager); v.id = 'extensionmanager.main-view'; - v.title.iconRenderer = extensionIcon; + v.title.icon = extensionIcon; v.title.caption = 'Extension Manager'; if (restorer) { restorer.add(v, v.id); diff --git a/packages/extensionmanager/package.json b/packages/extensionmanager/package.json index e86ad5ce02cf..b5f3df3ea80c 100644 --- a/packages/extensionmanager/package.json +++ b/packages/extensionmanager/package.json @@ -39,7 +39,7 @@ "@jupyterlab/services": "^5.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/messaging": "^1.3.3", - "@lumino/polling": "^1.0.3", + "@lumino/polling": "^1.0.4", "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 ca0db8ade10a..15c1e1a0288f 100644 --- a/packages/extensionmanager/src/widget.tsx +++ b/packages/extensionmanager/src/widget.tsx @@ -10,7 +10,6 @@ import { Collapse, InputGroup, jupyterIcon, - LabIcon, refreshIcon } from '@jupyterlab/ui-components'; @@ -23,6 +22,18 @@ import { isJupyterOrg } from './query'; // TODO: Replace pagination with lazy loading of lower search results +/** + * Icons with custom styling bound. + */ +const caretDownIconStyled = caretDownIcon.bindprops({ + height: 'auto', + width: '20px' +}); +const caretRightIconStyled = caretRightIcon.bindprops({ + height: 'auto', + width: '20px' +}); + /** * Search bar VDOM component. */ @@ -352,11 +363,9 @@ export class CollapsibleSection extends React.Component< <>
{ this.handleCollapse(); }} diff --git a/packages/filebrowser-extension/package.json b/packages/filebrowser-extension/package.json index 0109cf692e5f..292dfd5672ab 100644 --- a/packages/filebrowser-extension/package.json +++ b/packages/filebrowser-extension/package.json @@ -49,9 +49,9 @@ "@jupyterlab/statusbar": "^2.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", - "@lumino/commands": "^1.9.2", + "@lumino/commands": "^1.10.1", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2" + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/filebrowser-extension/src/index.ts b/packages/filebrowser-extension/src/index.ts index dad08bcfcdfc..e084987b27ac 100644 --- a/packages/filebrowser-extension/src/index.ts +++ b/packages/filebrowser-extension/src/index.ts @@ -42,7 +42,22 @@ import { IStateDB } from '@jupyterlab/statedb'; import { IStatusBar } from '@jupyterlab/statusbar'; -import { addIcon, folderIcon } from '@jupyterlab/ui-components'; +import { + addIcon, + closeIcon, + copyIcon, + cutIcon, + downloadIcon, + editIcon, + fileIcon, + folderIcon, + linkIcon, + markdownIcon, + newFolderIcon, + pasteIcon, + stopIcon, + textEditorIcon +} from '@jupyterlab/ui-components'; import { IIterator, map, reduce, toArray, find } from '@lumino/algorithm'; @@ -293,7 +308,7 @@ function activateBrowser( mainMenu ); - browser.title.iconRenderer = folderIcon; + browser.title.icon = folderIcon; // Show the current file browser shortcut in its title. const updateBrowserTitle = () => { const binding = find( @@ -393,7 +408,7 @@ function activateShareFile( isVisible: () => !!tracker.currentWidget && toArray(tracker.currentWidget.selectedItems()).length === 1, - iconClass: 'jp-MaterialIcon jp-LinkIcon', + icon: linkIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Copy Shareable Link' }); } @@ -421,7 +436,7 @@ function addCommands( return widget.delete(); } }, - iconClass: 'jp-MaterialIcon jp-CloseIcon', + icon: closeIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Delete', mnemonic: 0 }); @@ -434,7 +449,7 @@ function addCommands( return widget.copy(); } }, - iconClass: 'jp-MaterialIcon jp-CopyIcon', + icon: copyIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Copy', mnemonic: 0 }); @@ -447,7 +462,7 @@ function addCommands( return widget.cut(); } }, - iconClass: 'jp-MaterialIcon jp-CutIcon', + icon: cutIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Cut' }); @@ -459,7 +474,7 @@ function addCommands( return widget.download(); } }, - iconClass: 'jp-MaterialIcon jp-DownloadIcon', + icon: downloadIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Download' }); @@ -471,7 +486,7 @@ function addCommands( return widget.duplicate(); } }, - iconClass: 'jp-MaterialIcon jp-CopyIcon', + icon: copyIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Duplicate' }); @@ -586,16 +601,16 @@ function addCommands( ) ); }, - iconClass: args => { + icon: args => { const factory = (args['factory'] as string) || void 0; if (factory) { // if an explicit factory is passed... const ft = registry.getFileType(factory); // ...set an icon if the factory name corresponds to a file type name... // ...or leave the icon blank - return ft?.iconClass ?? ''; + return ft?.icon?.bindprops({ stylesheet: 'menuItem' }); } else { - return 'jp-MaterialIcon jp-FolderIcon'; + return folderIcon.bindprops({ stylesheet: 'menuItem' }); } }, label: args => (args['label'] || args['factory'] || 'Open') as string, @@ -620,7 +635,7 @@ function addCommands( ) ); }, - iconClass: 'jp-MaterialIcon jp-AddIcon', + icon: addIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Open in New Browser Tab', mnemonic: 0 }); @@ -638,7 +653,7 @@ function addCommands( Clipboard.copyToSystem(url); }); }, - iconClass: 'jp-MaterialIcon jp-CopyIcon', + icon: copyIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Copy Download Link', mnemonic: 0 }); @@ -651,7 +666,7 @@ function addCommands( return widget.paste(); } }, - iconClass: 'jp-MaterialIcon jp-PasteIcon', + icon: pasteIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Paste', mnemonic: 0 }); @@ -664,7 +679,7 @@ function addCommands( return widget.createNewDirectory(); } }, - iconClass: 'jp-MaterialIcon jp-NewFolderIcon', + icon: newFolderIcon.bindprops({ stylesheet: 'menuItem' }), label: 'New Folder' }); @@ -679,7 +694,7 @@ function addCommands( ext: 'txt' }); }, - iconClass: 'jp-MaterialIcon jp-TextEditorIcon', + icon: textEditorIcon.bindprops({ stylesheet: 'menuItem' }), label: 'New File' }); @@ -694,7 +709,7 @@ function addCommands( ext: 'md' }); }, - iconClass: 'jp-MaterialIcon jp-MarkdownIcon', + icon: markdownIcon.bindprops({ stylesheet: 'menuItem' }), label: 'New Markdown File' }); @@ -706,7 +721,7 @@ function addCommands( return widget.rename(); } }, - iconClass: 'jp-MaterialIcon jp-EditIcon', + icon: editIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Rename', mnemonic: 0 }); @@ -727,7 +742,7 @@ function addCommands( isVisible: () => !!tracker.currentWidget && tracker.currentWidget.selectedItems().next !== undefined, - iconClass: 'jp-MaterialIcon jp-FileIcon', + icon: fileIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Copy Path' }); @@ -769,7 +784,7 @@ function addCommands( return widget.shutdownKernels(); } }, - iconClass: 'jp-MaterialIcon jp-StopIcon', + icon: stopIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Shut Down Kernel' }); diff --git a/packages/filebrowser/package.json b/packages/filebrowser/package.json index f1f811fd0200..b6999ae36926 100644 --- a/packages/filebrowser/package.json +++ b/packages/filebrowser/package.json @@ -45,13 +45,13 @@ "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", + "@lumino/disposable": "^1.3.5", "@lumino/domutils": "^1.1.7", - "@lumino/dragdrop": "^1.5.0", + "@lumino/dragdrop": "^1.5.1", "@lumino/messaging": "^1.3.3", - "@lumino/polling": "^1.0.3", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2", + "@lumino/polling": "^1.0.4", + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1", "react": "~16.9.0" }, "devDependencies": { diff --git a/packages/filebrowser/src/crumbs.ts b/packages/filebrowser/src/crumbs.ts index 9cb355a68a5d..7c070f3e4967 100644 --- a/packages/filebrowser/src/crumbs.ts +++ b/packages/filebrowser/src/crumbs.ts @@ -351,12 +351,12 @@ namespace Private { className: BREADCRUMB_HOME_CLASS, tag: 'span', title: PageConfig.getOption('serverRoot') || 'Jupyter Server Root', - kind: 'breadCrumb' + stylesheet: 'breadCrumb' }); let ellipsis = ellipsesIcon.element({ className: BREADCRUMB_ITEM_CLASS, tag: 'span', - kind: 'breadCrumb' + stylesheet: 'breadCrumb' }); let parent = document.createElement('span'); parent.className = BREADCRUMB_ITEM_CLASS; diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts index 18adc296f606..84eecead1957 100644 --- a/packages/filebrowser/src/listing.ts +++ b/packages/filebrowser/src/listing.ts @@ -1840,8 +1840,8 @@ export namespace DirListing { fallback: fileIcon, container: iconContainer, className: ITEM_ICON_CLASS, - justify: 'center', - kind: 'listing' + + stylesheet: 'listing' }); let hoverText = 'Name: ' + model.name; @@ -2098,8 +2098,8 @@ namespace Private { (state === 'down' ? caretDownIcon : caretUpIcon).element({ container, tag: 'span', - kind: 'listingHeaderItem', - justify: 'center', + stylesheet: 'listingHeaderItem', + float }); } else { diff --git a/packages/filebrowser/style/base.css b/packages/filebrowser/style/base.css index 607a3b96a832..b5d51ff7c7d2 100644 --- a/packages/filebrowser/style/base.css +++ b/packages/filebrowser/style/base.css @@ -201,50 +201,6 @@ left: -8px; } -.jp-DirListing-item.jp-mod-selected .jp-DirListing-itemIcon.jp-FileIcon { - background-image: var(--jp-icon-file-selected); -} - -.jp-DirListing-item.jp-mod-selected .jp-DirListing-itemIcon.jp-TextEditorIcon { - background-image: var(--jp-icon-text-editor-selected); -} - -.jp-DirListing-item.jp-mod-selected .jp-DirListing-itemIcon.jp-NotebookIcon { - background-image: var(--jp-icon-notebook-selected); -} - -.jp-DirListing-item.jp-mod-selected .jp-DirListing-itemIcon.jp-FolderIcon { - background-image: var(--jp-icon-folder-selected); -} - -.jp-DirListing-item.jp-mod-selected .jp-DirListing-itemIcon.jp-MarkdownIcon { - background-image: var(--jp-icon-markdown-selected); -} - -.jp-DirListing-item.jp-mod-selected .jp-DirListing-itemIcon.jp-PythonIcon { - background-image: var(--jp-icon-python-selected); -} - -.jp-DirListing-item.jp-mod-selected .jp-DirListing-itemIcon.jp-JsonIcon { - background-image: var(--jp-icon-json-selected); -} - -.jp-DirListing-item.jp-mod-selected .jp-DirListing-itemIcon.jp-SpreadsheetIcon { - background-image: var(--jp-icon-spreadsheet-selected); -} - -.jp-DirListing-item.jp-mod-selected .jp-DirListing-itemIcon.jp-RKernelIcon { - background-image: var(--jp-icon-r-selected); -} - -.jp-DirListing-item.jp-mod-selected .jp-DirListing-itemIcon.jp-YamlIcon { - background-image: var(--jp-icon-yaml-selected); -} - -.jp-DirListing-item.jp-mod-selected .jp-DirListing-itemIcon.jp-ImageIcon { - background-image: var(--jp-icon-image-selected); -} - .jp-DirListing-item.lm-mod-drag-image, .jp-DirListing-item.jp-mod-selected.lm-mod-drag-image { font-size: var(--jp-ui-font-size1); diff --git a/packages/fileeditor-extension/package.json b/packages/fileeditor-extension/package.json index bbdf27473983..570feeb7c81b 100644 --- a/packages/fileeditor-extension/package.json +++ b/packages/fileeditor-extension/package.json @@ -48,9 +48,10 @@ "@jupyterlab/mainmenu": "^2.0.0-rc.1", "@jupyterlab/settingregistry": "^2.0.0-rc.1", "@jupyterlab/statusbar": "^2.0.0-rc.1", - "@lumino/commands": "^1.9.2", + "@jupyterlab/ui-components": "^2.0.0-rc.2", + "@lumino/commands": "^1.10.1", "@lumino/coreutils": "^1.4.2", - "@lumino/widgets": "^1.10.2" + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/fileeditor-extension/src/commands.ts b/packages/fileeditor-extension/src/commands.ts index 3e11ba665ab9..4c3ceee3dfb1 100644 --- a/packages/fileeditor-extension/src/commands.ts +++ b/packages/fileeditor-extension/src/commands.ts @@ -34,6 +34,8 @@ import { import { ISettingRegistry } from '@jupyterlab/settingregistry'; +import { markdownIcon, textEditorIcon } from '@jupyterlab/ui-components'; + import { CommandRegistry } from '@lumino/commands'; import { JSONObject, ReadonlyPartialJSONObject } from '@lumino/coreutils'; @@ -69,16 +71,6 @@ export namespace CommandIDs { export const markdownPreview = 'fileeditor:markdown-preview'; } -/** - * The class name for the text editor icon from the default theme. - */ -export const EDITOR_ICON_CLASS = 'jp-MaterialIcon jp-TextEditorIcon'; - -/** - * The class name for the text editor icon from the default theme. - */ -export const MARKDOWN_ICON_CLASS = 'jp-MarkdownIcon'; - /** * The name of the factory that creates editor widgets. */ @@ -561,7 +553,7 @@ export namespace Commands { commands.addCommand(CommandIDs.createNew, { label: args => (args['isPalette'] ? 'New Text File' : 'Text File'), caption: 'Create a new text file', - iconClass: args => (args['isPalette'] ? '' : EDITOR_ICON_CLASS), + icon: args => (args['isPalette'] ? undefined : textEditorIcon), execute: args => { let cwd = args['cwd'] || browserFactory.defaultBrowser.model.path; return createNew(commands, cwd as string); @@ -580,7 +572,7 @@ export namespace Commands { label: args => args['isPalette'] ? 'New Markdown File' : 'Markdown File', caption: 'Create a new markdown file', - iconClass: args => (args['isPalette'] ? '' : MARKDOWN_ICON_CLASS), + icon: args => (args['isPalette'] ? undefined : markdownIcon), execute: args => { let cwd = args['cwd'] || browserFactory.defaultBrowser.model.path; return createNew(commands, cwd as string, 'md'); diff --git a/packages/fileeditor-extension/tsconfig.json b/packages/fileeditor-extension/tsconfig.json index 039a1a5021e2..289a225bc4e3 100644 --- a/packages/fileeditor-extension/tsconfig.json +++ b/packages/fileeditor-extension/tsconfig.json @@ -41,6 +41,9 @@ }, { "path": "../statusbar" + }, + { + "path": "../ui-components" } ] } diff --git a/packages/fileeditor/package.json b/packages/fileeditor/package.json index ce0d60638bb8..7ee34264b117 100644 --- a/packages/fileeditor/package.json +++ b/packages/fileeditor/package.json @@ -42,7 +42,7 @@ "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "react": "~16.9.0" }, "devDependencies": { diff --git a/packages/fileeditor/src/widget.ts b/packages/fileeditor/src/widget.ts index 0609061ceb0e..a028003687fc 100644 --- a/packages/fileeditor/src/widget.ts +++ b/packages/fileeditor/src/widget.ts @@ -326,7 +326,7 @@ export class FileEditorFactory extends ABCWidgetFactory< mimeTypeService: this._services.mimeTypeService }); - content.title.iconRenderer = textEditorIcon; + content.title.icon = textEditorIcon; const widget = new DocumentWidget({ content, context }); return widget; diff --git a/packages/help-extension/package.json b/packages/help-extension/package.json index 985a779eccdf..82c7ab26012a 100644 --- a/packages/help-extension/package.json +++ b/packages/help-extension/package.json @@ -43,7 +43,7 @@ "@jupyterlab/mainmenu": "^2.0.0-rc.1", "@jupyterlab/services": "^5.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "react": "~16.9.0" }, "devDependencies": { diff --git a/packages/htmlviewer-extension/src/index.tsx b/packages/htmlviewer-extension/src/index.tsx index 40e840d6aa0c..21e5b6c72064 100644 --- a/packages/htmlviewer-extension/src/index.tsx +++ b/packages/htmlviewer-extension/src/index.tsx @@ -95,9 +95,9 @@ function activateHTMLViewer( app.commands.notifyCommandChanged(CommandIDs.trustHTML); }); + widget.title.icon = ft.icon!; widget.title.iconClass = ft.iconClass ?? ''; widget.title.iconLabel = ft.iconLabel ?? ''; - widget.title.iconRenderer = ft.icon!; }); // Add a command to trust the active HTML document, diff --git a/packages/htmlviewer/package.json b/packages/htmlviewer/package.json index 4b2b84e5ea44..fffd2a81471f 100644 --- a/packages/htmlviewer/package.json +++ b/packages/htmlviewer/package.json @@ -37,7 +37,7 @@ "@jupyterlab/docregistry": "^2.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/coreutils": "^1.4.2", - "@lumino/signaling": "^1.3.4", + "@lumino/signaling": "^1.3.5", "react": "~16.9.0" }, "devDependencies": { diff --git a/packages/imageviewer-extension/src/index.ts b/packages/imageviewer-extension/src/index.ts index 019388be6971..18ec9a469e1f 100644 --- a/packages/imageviewer-extension/src/index.ts +++ b/packages/imageviewer-extension/src/index.ts @@ -105,9 +105,9 @@ function activate( const types = app.docRegistry.getFileTypesForPath(widget.context.path); if (types.length > 0) { + widget.title.icon = types[0].icon!; widget.title.iconClass = types[0].iconClass ?? ''; widget.title.iconLabel = types[0].iconLabel ?? ''; - widget.title.iconRenderer = types[0].icon!; } }); diff --git a/packages/imageviewer/package.json b/packages/imageviewer/package.json index 20b49ca98858..eaaaec1f3b1c 100644 --- a/packages/imageviewer/package.json +++ b/packages/imageviewer/package.json @@ -40,7 +40,7 @@ "@jupyterlab/docregistry": "^2.0.0-rc.1", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2" + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/inspector-extension/package.json b/packages/inspector-extension/package.json index 8d7e142665e7..bd76e6370424 100644 --- a/packages/inspector-extension/package.json +++ b/packages/inspector-extension/package.json @@ -41,7 +41,8 @@ "@jupyterlab/console": "^2.0.0-rc.1", "@jupyterlab/inspector": "^2.0.0-rc.1", "@jupyterlab/launcher": "^2.0.0-rc.1", - "@jupyterlab/notebook": "^2.0.0-rc.1" + "@jupyterlab/notebook": "^2.0.0-rc.1", + "@jupyterlab/ui-components": "^2.0.0-rc.2" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/inspector-extension/src/index.ts b/packages/inspector-extension/src/index.ts index cb5a431fdb75..15abef58e15e 100644 --- a/packages/inspector-extension/src/index.ts +++ b/packages/inspector-extension/src/index.ts @@ -27,6 +27,8 @@ import { ILauncher } from '@jupyterlab/launcher'; import { INotebookTracker } from '@jupyterlab/notebook'; +import { inspectorIcon } from '@jupyterlab/ui-components'; + /** * The command IDs used by the inspector plugin. */ @@ -83,8 +85,7 @@ const inspector: JupyterFrontEndPlugin = { !inspector.isAttached || !inspector.isVisible, label, - iconClass: args => - args.isLauncher ? 'jp-MaterialIcon jp-InspectorIcon' : '', + icon: args => (args.isLauncher ? inspectorIcon : undefined), execute: () => openInspector() }); diff --git a/packages/inspector-extension/tsconfig.json b/packages/inspector-extension/tsconfig.json index a117af4fc3fa..1eb48f6f9cf7 100644 --- a/packages/inspector-extension/tsconfig.json +++ b/packages/inspector-extension/tsconfig.json @@ -23,6 +23,9 @@ }, { "path": "../notebook" + }, + { + "path": "../ui-components" } ] } diff --git a/packages/inspector/package.json b/packages/inspector/package.json index 71bb2f4fabe1..2621530f7e4d 100644 --- a/packages/inspector/package.json +++ b/packages/inspector/package.json @@ -42,10 +42,10 @@ "@jupyterlab/services": "^5.0.0-rc.1", "@jupyterlab/statedb": "^2.0.0-rc.1", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", - "@lumino/polling": "^1.0.3", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2" + "@lumino/disposable": "^1.3.5", + "@lumino/polling": "^1.0.4", + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/json-extension/package.json b/packages/json-extension/package.json index b005312ff7af..356a52619c79 100644 --- a/packages/json-extension/package.json +++ b/packages/json-extension/package.json @@ -39,7 +39,7 @@ "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "react": "~16.9.0", "react-dom": "~16.9.0", "react-highlighter": "^0.4.3", diff --git a/packages/launcher-extension/package.json b/packages/launcher-extension/package.json index 7029ec8ddbf6..285b6457a0fe 100644 --- a/packages/launcher-extension/package.json +++ b/packages/launcher-extension/package.json @@ -42,7 +42,7 @@ "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/widgets": "^1.10.2" + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/launcher-extension/src/index.ts b/packages/launcher-extension/src/index.ts index d3c6de9cb00f..891934807669 100644 --- a/packages/launcher-extension/src/index.ts +++ b/packages/launcher-extension/src/index.ts @@ -60,8 +60,8 @@ function activate( const launcher = new Launcher({ model, cwd, callback, commands }); launcher.model = model; + launcher.title.icon = launcherIcon; launcher.title.label = 'Launcher'; - launcher.title.iconRenderer = launcherIcon; let main = new MainAreaWidget({ content: launcher }); diff --git a/packages/launcher/package.json b/packages/launcher/package.json index 2b511aa6c21c..8f9b84a11cd3 100644 --- a/packages/launcher/package.json +++ b/packages/launcher/package.json @@ -38,11 +38,11 @@ "@jupyterlab/apputils": "^2.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", - "@lumino/commands": "^1.9.2", + "@lumino/commands": "^1.10.1", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", + "@lumino/disposable": "^1.3.5", "@lumino/properties": "^1.1.6", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "react": "~16.9.0" }, "devDependencies": { diff --git a/packages/launcher/src/index.tsx b/packages/launcher/src/index.tsx index e722d373ce77..ca6f207a433b 100644 --- a/packages/launcher/src/index.tsx +++ b/packages/launcher/src/index.tsx @@ -190,19 +190,23 @@ export class Launcher extends VDomRenderer { // Now create the sections for each category orderedCategories.forEach(cat => { const item = categories[cat][0] as ILauncher.IItemOptions; - let iconClass = this._commands.iconClass(item.command, { - ...item.args, - cwd: this.cwd - }); - let kernel = KERNEL_CATEGORIES.indexOf(cat) > -1; + const args = { ...item.args, cwd: this.cwd }; + const kernel = KERNEL_CATEGORIES.indexOf(cat) > -1; + + // DEPRECATED: remove _icon when lumino 2.0 is adopted + // if icon is aliasing iconClass, don't use it + const iconClass = this._commands.iconClass(item.command, args); + const _icon = this._commands.icon(item.command, args); + const icon = _icon === iconClass ? undefined : _icon; + if (cat in categories) { section = (
-

{cat}

@@ -399,6 +403,12 @@ function Card( } }; + // DEPRECATED: remove _icon when lumino 2.0 is adopted + // if icon is aliasing iconClass, don't use it + const iconClass = commands.iconClass(command, args); + const _icon = commands.icon(command, args); + const icon = _icon === iconClass ? undefined : _icon; + // Return the VDOM element. return (
) ) : ( - )}
diff --git a/packages/logconsole-extension/package.json b/packages/logconsole-extension/package.json index 2bc738c06b27..868f9c03c02c 100644 --- a/packages/logconsole-extension/package.json +++ b/packages/logconsole-extension/package.json @@ -46,8 +46,8 @@ "@jupyterlab/statusbar": "^2.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/coreutils": "^1.4.2", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2", + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1", "react": "~16.9.0" }, "devDependencies": { diff --git a/packages/logconsole-extension/src/index.tsx b/packages/logconsole-extension/src/index.tsx index bb7d182e6fc4..c10960c9465e 100644 --- a/packages/logconsole-extension/src/index.tsx +++ b/packages/logconsole-extension/src/index.tsx @@ -35,7 +35,12 @@ import { ISettingRegistry } from '@jupyterlab/settingregistry'; import { IStatusBar } from '@jupyterlab/statusbar'; -import { HTMLSelect, listIcon } from '@jupyterlab/ui-components'; +import { + addIcon, + clearIcon, + HTMLSelect, + listIcon +} from '@jupyterlab/ui-components'; import { UUID } from '@lumino/coreutils'; @@ -144,8 +149,8 @@ function activateLogConsole( logConsoleWidget = new MainAreaWidget({ content: logConsolePanel }); logConsoleWidget.addClass('jp-LogConsole'); logConsoleWidget.title.closable = true; + logConsoleWidget.title.icon = listIcon; logConsoleWidget.title.label = 'Log Console'; - logConsoleWidget.title.iconRenderer = listIcon; const addCheckpointButton = new CommandToolbarButton({ commands: app.commands, @@ -208,22 +213,21 @@ function activateLogConsole( }); app.commands.addCommand(CommandIDs.addCheckpoint, { - label: 'Add Checkpoint', execute: () => { logConsolePanel?.logger?.checkpoint(); }, + icon: addIcon, isEnabled: () => !!logConsolePanel && logConsolePanel.source !== null, - iconClass: 'jp-AddIcon' + label: 'Add Checkpoint' }); app.commands.addCommand(CommandIDs.clear, { - label: 'Clear Log', execute: () => { logConsolePanel?.logger?.clear(); }, + icon: clearIcon, isEnabled: () => !!logConsolePanel && logConsolePanel.source !== null, - // TODO: figure out how this jp-clearIcon class should work, analagous to jp-AddIcon - iconClass: 'fa fa-ban jp-ClearIcon' + label: 'Clear Log' }); function toTitleCase(value: string) { @@ -231,14 +235,14 @@ function activateLogConsole( } app.commands.addCommand(CommandIDs.setLevel, { - label: args => `Set Log Level to ${toTitleCase(args.level as string)}`, + // TODO: find good icon class execute: (args: { level: LogLevel }) => { if (logConsolePanel?.logger) { logConsolePanel.logger.level = args.level; } }, - isEnabled: () => !!logConsolePanel && logConsolePanel.source !== null - // TODO: find good icon class + isEnabled: () => !!logConsolePanel && logConsolePanel.source !== null, + label: args => `Set Log Level to ${toTitleCase(args.level as string)}` }); app.contextMenu.addItem({ diff --git a/packages/logconsole-extension/src/status.tsx b/packages/logconsole-extension/src/status.tsx index face6e7ed3b4..fef533266257 100644 --- a/packages/logconsole-extension/src/status.tsx +++ b/packages/logconsole-extension/src/status.tsx @@ -34,7 +34,7 @@ function LogConsoleStatusComponent( title += `${props.logEntries} log entries for ${props.source}`; return ( - + {props.newMessages > 0 ? : <>} ); diff --git a/packages/logconsole/package.json b/packages/logconsole/package.json index 5965ed65d465..f25f912c1054 100644 --- a/packages/logconsole/package.json +++ b/packages/logconsole/package.json @@ -38,10 +38,10 @@ "@jupyterlab/rendermime": "^2.0.0-rc.1", "@jupyterlab/services": "^5.0.0-rc.1", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", + "@lumino/disposable": "^1.3.5", "@lumino/messaging": "^1.3.3", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2" + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/mainmenu-extension/package.json b/packages/mainmenu-extension/package.json index a40cc3cd43e2..9d9599c5c8d4 100644 --- a/packages/mainmenu-extension/package.json +++ b/packages/mainmenu-extension/package.json @@ -43,8 +43,8 @@ "@jupyterlab/services": "^5.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", - "@lumino/disposable": "^1.3.4", - "@lumino/widgets": "^1.10.2" + "@lumino/disposable": "^1.3.5", + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/mainmenu-extension/src/index.ts b/packages/mainmenu-extension/src/index.ts index 83ecd74d20db..4cfa8457f7d3 100644 --- a/packages/mainmenu-extension/src/index.ts +++ b/packages/mainmenu-extension/src/index.ts @@ -135,7 +135,7 @@ const plugin: JupyterFrontEndPlugin = { let logo = new Widget(); jupyterIcon.element({ container: logo.node, - justify: 'center', + elementPosition: 'center', margin: '2px 2px 2px 8px', height: 'auto', width: '16px' diff --git a/packages/mainmenu/package.json b/packages/mainmenu/package.json index e53f0d154ae5..6d4406a0acb4 100644 --- a/packages/mainmenu/package.json +++ b/packages/mainmenu/package.json @@ -37,11 +37,12 @@ "dependencies": { "@jupyterlab/apputils": "^2.0.0-rc.1", "@jupyterlab/services": "^5.0.0-rc.1", + "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", - "@lumino/commands": "^1.9.2", + "@lumino/commands": "^1.10.1", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", - "@lumino/widgets": "^1.10.2" + "@lumino/disposable": "^1.3.5", + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/mainmenu/src/labmenu.ts b/packages/mainmenu/src/labmenu.ts index c043e74a4a5d..73edc3a252fb 100644 --- a/packages/mainmenu/src/labmenu.ts +++ b/packages/mainmenu/src/labmenu.ts @@ -3,6 +3,8 @@ import { IWidgetTracker } from '@jupyterlab/apputils'; +import { MenuSvg } from '@jupyterlab/ui-components'; + import { ArrayExt } from '@lumino/algorithm'; import { DisposableDelegate, IDisposable } from '@lumino/disposable'; @@ -61,7 +63,8 @@ export class JupyterLabMenu implements IJupyterLabMenu { * groups that are added to the menu. */ constructor(options: Menu.IOptions, includeSeparators: boolean = true) { - this.menu = new Menu(options); + // render menu with inline svg icon tweaks + this.menu = new MenuSvg(options); this._includeSeparators = includeSeparators; } diff --git a/packages/mainmenu/tsconfig.json b/packages/mainmenu/tsconfig.json index 7a8eb91e736d..a70da1593aee 100644 --- a/packages/mainmenu/tsconfig.json +++ b/packages/mainmenu/tsconfig.json @@ -11,6 +11,9 @@ }, { "path": "../services" + }, + { + "path": "../ui-components" } ] } diff --git a/packages/markdownviewer/package.json b/packages/markdownviewer/package.json index 0dd0623cc5c5..08469b4d664f 100644 --- a/packages/markdownviewer/package.json +++ b/packages/markdownviewer/package.json @@ -41,7 +41,7 @@ "@jupyterlab/rendermime": "^2.0.0-rc.1", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2" + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/markdownviewer/src/widget.ts b/packages/markdownviewer/src/widget.ts index 535cd99b9613..9589a5add23d 100644 --- a/packages/markdownviewer/src/widget.ts +++ b/packages/markdownviewer/src/widget.ts @@ -309,9 +309,9 @@ export class MarkdownViewerFactory extends ABCWidgetFactory { }); const renderer = rendermime.createRenderer(MIMETYPE); const content = new MarkdownViewer({ context, renderer }); + content.title.icon = this._fileType?.icon!; content.title.iconClass = this._fileType?.iconClass ?? ''; content.title.iconLabel = this._fileType?.iconLabel ?? ''; - content.title.iconRenderer = this._fileType?.icon!; const widget = new MarkdownDocument({ content, context }); return widget; diff --git a/packages/notebook-extension/package.json b/packages/notebook-extension/package.json index 192210646053..10f6639dd1ba 100644 --- a/packages/notebook-extension/package.json +++ b/packages/notebook-extension/package.json @@ -55,11 +55,11 @@ "@jupyterlab/statusbar": "^2.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", - "@lumino/commands": "^1.9.2", + "@lumino/commands": "^1.10.1", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", + "@lumino/disposable": "^1.3.5", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2" + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/notebook-extension/src/index.ts b/packages/notebook-extension/src/index.ts index 620ef27a5c43..47c8b36b74e5 100644 --- a/packages/notebook-extension/src/index.ts +++ b/packages/notebook-extension/src/index.ts @@ -68,7 +68,7 @@ import { IStateDB } from '@jupyterlab/statedb'; import { IStatusBar } from '@jupyterlab/statusbar'; -import { buildIcon } from '@jupyterlab/ui-components'; +import { buildIcon, notebookIcon } from '@jupyterlab/ui-components'; import { ArrayExt } from '@lumino/algorithm'; @@ -230,11 +230,6 @@ namespace CommandIDs { export const selectLastRunCell = 'notebook:select-last-run-cell'; } -/** - * The class name for the notebook icon from the default theme. - */ -const NOTEBOOK_ICON_CLASS = 'jp-NotebookIcon'; - /** * The name of the factory that creates notebooks. */ @@ -466,7 +461,7 @@ function activateNotebookTools( notebookTools.addItem({ tool: nbConvert, section: 'common', rank: 3 }); } }); - notebookTools.title.iconRenderer = buildIcon; + notebookTools.title.icon = buildIcon; notebookTools.title.caption = 'Notebook Tools'; notebookTools.id = id; @@ -580,9 +575,9 @@ function activateNotebookHandler( widget.id = widget.id || `notebook-${++id}`; // Set up the title icon + widget.title.icon = ft?.icon; widget.title.iconClass = ft?.iconClass ?? ''; widget.title.iconLabel = ft?.iconLabel ?? ''; - widget.title.iconRenderer = ft?.icon!; // Notify the widget tracker if restore data needs to update. widget.context.pathChanged.connect(() => { @@ -691,7 +686,7 @@ function activateNotebookHandler( return 'Notebook'; }, caption: 'Create a new notebook', - iconClass: args => (args['isPalette'] ? '' : 'jp-NotebookIcon'), + icon: args => (args['isPalette'] ? undefined : notebookIcon), execute: args => { const cwd = (args['cwd'] as string) || @@ -2327,7 +2322,7 @@ namespace Private { this._cell = options.cell || null; this.id = `LinkedOutputView-${UUID.uuid4()}`; this.title.label = 'Output View'; - this.title.icon = NOTEBOOK_ICON_CLASS; + this.title.icon = notebookIcon; this.title.caption = this._notebook.title.label ? `For Notebook: ${this._notebook.title.label}` : 'For Notebook:'; diff --git a/packages/notebook/package.json b/packages/notebook/package.json index 9f5f36cae2ac..8a220109ddd8 100644 --- a/packages/notebook/package.json +++ b/packages/notebook/package.json @@ -49,12 +49,12 @@ "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", "@lumino/domutils": "^1.1.7", - "@lumino/dragdrop": "^1.5.0", + "@lumino/dragdrop": "^1.5.1", "@lumino/messaging": "^1.3.3", "@lumino/properties": "^1.1.6", - "@lumino/signaling": "^1.3.4", - "@lumino/virtualdom": "^1.5.0", - "@lumino/widgets": "^1.10.2", + "@lumino/signaling": "^1.3.5", + "@lumino/virtualdom": "^1.6.1", + "@lumino/widgets": "^1.11.1", "react": "~16.9.0" }, "devDependencies": { diff --git a/packages/notebook/src/truststatus.tsx b/packages/notebook/src/truststatus.tsx index d6f265205a82..700c09d242c6 100644 --- a/packages/notebook/src/truststatus.tsx +++ b/packages/notebook/src/truststatus.tsx @@ -45,9 +45,9 @@ function NotebookTrustComponent( props: NotebookTrustComponent.IProps ): React.ReactElement { if (props.allCellsTrusted) { - return ; + return ; } else { - return ; + return ; } } diff --git a/packages/observables/package.json b/packages/observables/package.json index a2403dbd1e83..3c613e3c7630 100644 --- a/packages/observables/package.json +++ b/packages/observables/package.json @@ -34,9 +34,9 @@ "dependencies": { "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", + "@lumino/disposable": "^1.3.5", "@lumino/messaging": "^1.3.3", - "@lumino/signaling": "^1.3.4" + "@lumino/signaling": "^1.3.5" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/outputarea/package.json b/packages/outputarea/package.json index ad4f62b4bf75..45c15713520e 100644 --- a/packages/outputarea/package.json +++ b/packages/outputarea/package.json @@ -43,11 +43,11 @@ "@jupyterlab/services": "^5.0.0-rc.1", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", + "@lumino/disposable": "^1.3.5", "@lumino/messaging": "^1.3.3", "@lumino/properties": "^1.1.6", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2" + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/pdf-extension/package.json b/packages/pdf-extension/package.json index 0ed6dbcf0a49..189663fd00e6 100644 --- a/packages/pdf-extension/package.json +++ b/packages/pdf-extension/package.json @@ -37,8 +37,8 @@ "dependencies": { "@jupyterlab/rendermime-interfaces": "^2.0.0-rc.1", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", - "@lumino/widgets": "^1.10.2" + "@lumino/disposable": "^1.3.5", + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/property-inspector/package.json b/packages/property-inspector/package.json index 18c99364f014..7eab9be723a4 100644 --- a/packages/property-inspector/package.json +++ b/packages/property-inspector/package.json @@ -36,9 +36,9 @@ "@jupyterlab/application": "^2.0.0-rc.1", "@jupyterlab/apputils": "^2.0.0-rc.1", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2", + "@lumino/disposable": "^1.3.5", + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1", "react": "~16.9.0" }, "devDependencies": { diff --git a/packages/rendermime-interfaces/package.json b/packages/rendermime-interfaces/package.json index 98d1ac26a219..cfe585cc7b42 100644 --- a/packages/rendermime-interfaces/package.json +++ b/packages/rendermime-interfaces/package.json @@ -32,7 +32,7 @@ }, "dependencies": { "@lumino/coreutils": "^1.4.2", - "@lumino/widgets": "^1.10.2" + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/rendermime/package.json b/packages/rendermime/package.json index e8fdf4b4de4d..667dd90c2fb3 100644 --- a/packages/rendermime/package.json +++ b/packages/rendermime/package.json @@ -45,8 +45,8 @@ "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2", + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1", "lodash.escape": "^4.0.1", "marked": "^0.8.0" }, diff --git a/packages/running-extension/src/index.ts b/packages/running-extension/src/index.ts index b6288b7d3b27..6341b0df84a0 100644 --- a/packages/running-extension/src/index.ts +++ b/packages/running-extension/src/index.ts @@ -49,8 +49,8 @@ function activate( let runningSessionManagers = new RunningSessionManagers(); let running = new RunningSessions(runningSessionManagers); running.id = 'jp-running-sessions'; - running.title.iconRenderer = runningIcon; running.title.caption = 'Running Terminals and Kernels'; + running.title.icon = runningIcon; // Let the application restorer track the running panel for restoration of // application state (e.g. setting the running panel as the current side bar diff --git a/packages/running/package.json b/packages/running/package.json index 35589aafd96e..ce51ef7f79fb 100644 --- a/packages/running/package.json +++ b/packages/running/package.json @@ -38,8 +38,8 @@ "@jupyterlab/apputils": "^2.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", - "@lumino/signaling": "^1.3.4", + "@lumino/disposable": "^1.3.5", + "@lumino/signaling": "^1.3.5", "react": "~16.9.0" }, "devDependencies": { diff --git a/packages/running/src/index.tsx b/packages/running/src/index.tsx index 2a9bae56dd18..2bd285de8c87 100644 --- a/packages/running/src/index.tsx +++ b/packages/running/src/index.tsx @@ -120,7 +120,7 @@ function Item(props: { runningItem: IRunningSessions.IRunningItem }) { return (
  • - + { tracker.currentWidget?.content.revert(); }, - iconClass: 'jp-MaterialIcon jp-UndoIcon', + icon: undoIcon, label: 'Revert User Settings', isEnabled: () => tracker.currentWidget?.content.canRevertRaw ?? false }); commands.addCommand(CommandIDs.save, { execute: () => tracker.currentWidget?.content.save(), - iconClass: 'jp-MaterialIcon jp-SaveIcon', + icon: saveIcon, label: 'Save User Settings', isEnabled: () => tracker.currentWidget?.content.canSaveRaw ?? false }); diff --git a/packages/settingeditor/package.json b/packages/settingeditor/package.json index 3b19d202f354..40e73f07cc3a 100644 --- a/packages/settingeditor/package.json +++ b/packages/settingeditor/package.json @@ -42,11 +42,11 @@ "@jupyterlab/settingregistry": "^2.0.0-rc.1", "@jupyterlab/statedb": "^2.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", - "@lumino/commands": "^1.9.2", + "@lumino/commands": "^1.10.1", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2", + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1", "react": "~16.9.0", "react-dom": "~16.9.0" }, diff --git a/packages/settingeditor/src/pluginlist.tsx b/packages/settingeditor/src/pluginlist.tsx index 524c1a5fa2d8..1e51adeda32e 100644 --- a/packages/settingeditor/src/pluginlist.tsx +++ b/packages/settingeditor/src/pluginlist.tsx @@ -282,7 +282,7 @@ namespace Private { fallback={settingsIcon} title={iconTitle} tag="span" - kind="settingsEditor" + stylesheet="settingsEditor" /> {schema.title || id}
    • diff --git a/packages/settingeditor/src/settingeditor.tsx b/packages/settingeditor/src/settingeditor.tsx index 45fa663db3ed..0f06b012bda1 100644 --- a/packages/settingeditor/src/settingeditor.tsx +++ b/packages/settingeditor/src/settingeditor.tsx @@ -435,7 +435,7 @@ namespace Private { diff --git a/packages/settingregistry/package.json b/packages/settingregistry/package.json index cf749bc118a5..47ef9866af39 100644 --- a/packages/settingregistry/package.json +++ b/packages/settingregistry/package.json @@ -32,10 +32,10 @@ }, "dependencies": { "@jupyterlab/statedb": "^2.0.0-rc.1", - "@lumino/commands": "^1.9.2", + "@lumino/commands": "^1.10.1", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", - "@lumino/signaling": "^1.3.4", + "@lumino/disposable": "^1.3.5", + "@lumino/signaling": "^1.3.5", "ajv": "^6.10.2", "json5": "^2.1.1" }, diff --git a/packages/shortcuts-extension/package.json b/packages/shortcuts-extension/package.json index c773e72743c6..340626f9c8fa 100644 --- a/packages/shortcuts-extension/package.json +++ b/packages/shortcuts-extension/package.json @@ -34,9 +34,9 @@ "dependencies": { "@jupyterlab/application": "^2.0.0-rc.1", "@jupyterlab/settingregistry": "^2.0.0-rc.1", - "@lumino/commands": "^1.9.2", + "@lumino/commands": "^1.10.1", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4" + "@lumino/disposable": "^1.3.5" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/statedb/package.json b/packages/statedb/package.json index 03e590210f6c..a233679cde5b 100644 --- a/packages/statedb/package.json +++ b/packages/statedb/package.json @@ -31,11 +31,11 @@ "watch": "tsc -b -w --listEmittedFiles" }, "dependencies": { - "@lumino/commands": "^1.9.2", + "@lumino/commands": "^1.10.1", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", + "@lumino/disposable": "^1.3.5", "@lumino/properties": "^1.1.6", - "@lumino/signaling": "^1.3.4" + "@lumino/signaling": "^1.3.5" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/statusbar-extension/package.json b/packages/statusbar-extension/package.json index ec80938703db..13176b7d5e9d 100644 --- a/packages/statusbar-extension/package.json +++ b/packages/statusbar-extension/package.json @@ -46,7 +46,7 @@ "@jupyterlab/notebook": "^2.0.0-rc.1", "@jupyterlab/settingregistry": "^2.0.0-rc.1", "@jupyterlab/statusbar": "^2.0.0-rc.1", - "@lumino/widgets": "^1.10.2" + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "@types/react": "~16.9.16", diff --git a/packages/statusbar/package.json b/packages/statusbar/package.json index f85466dcb310..88ec5b5ff7b9 100644 --- a/packages/statusbar/package.json +++ b/packages/statusbar/package.json @@ -38,11 +38,11 @@ "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", + "@lumino/disposable": "^1.3.5", "@lumino/messaging": "^1.3.3", - "@lumino/polling": "^1.0.3", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2", + "@lumino/polling": "^1.0.4", + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1", "react": "~16.9.0", "typestyle": "^2.0.4" }, diff --git a/packages/statusbar/src/defaults/lineCol.tsx b/packages/statusbar/src/defaults/lineCol.tsx index 36722b53d5a7..1f2c88e5ccc0 100644 --- a/packages/statusbar/src/defaults/lineCol.tsx +++ b/packages/statusbar/src/defaults/lineCol.tsx @@ -118,7 +118,7 @@ class LineFormComponent extends React.Component<
    diff --git a/packages/statusbar/src/defaults/runningSessions.tsx b/packages/statusbar/src/defaults/runningSessions.tsx index bb2f6b6c4652..c6211da769f9 100644 --- a/packages/statusbar/src/defaults/runningSessions.tsx +++ b/packages/statusbar/src/defaults/runningSessions.tsx @@ -36,11 +36,11 @@ function RunningSessionsComponent( - + - + ); diff --git a/packages/tabmanager-extension/package.json b/packages/tabmanager-extension/package.json index 15d5ac5c8b1a..9c21b3f559bb 100644 --- a/packages/tabmanager-extension/package.json +++ b/packages/tabmanager-extension/package.json @@ -38,7 +38,7 @@ "@jupyterlab/application": "^2.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", - "@lumino/widgets": "^1.10.2" + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/tabmanager-extension/src/index.ts b/packages/tabmanager-extension/src/index.ts index d6de63d427f3..fca5c8b9d150 100644 --- a/packages/tabmanager-extension/src/index.ts +++ b/packages/tabmanager-extension/src/index.ts @@ -31,8 +31,8 @@ const plugin: JupyterFrontEndPlugin = { } tabs.id = 'tab-manager'; - tabs.title.iconRenderer = tabIcon; tabs.title.caption = 'Open Tabs'; + tabs.title.icon = tabIcon; header.textContent = 'Open Tabs'; tabs.node.insertBefore(header, tabs.contentNode); shell.add(tabs, 'left', { rank: 600 }); diff --git a/packages/terminal-extension/package.json b/packages/terminal-extension/package.json index 9dbf28108625..e761a83b147d 100644 --- a/packages/terminal-extension/package.json +++ b/packages/terminal-extension/package.json @@ -46,7 +46,7 @@ "@jupyterlab/terminal": "^2.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", - "@lumino/widgets": "^1.10.2" + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "@types/webpack-env": "^1.14.1", diff --git a/packages/terminal-extension/src/index.ts b/packages/terminal-extension/src/index.ts index a2d6a6a5c2c1..6b5761700230 100644 --- a/packages/terminal-extension/src/index.ts +++ b/packages/terminal-extension/src/index.ts @@ -43,11 +43,6 @@ namespace CommandIDs { export const setTheme = 'terminal:set-theme'; } -/** - * The class name for the terminal icon in the default theme. - */ -const TERMINAL_ICON_CLASS = 'jp-TerminalIcon'; - /** * The default terminal extension. */ @@ -317,7 +312,7 @@ export function addCommands( commands.addCommand(CommandIDs.createNew, { label: args => (args['isPalette'] ? 'New Terminal' : 'Terminal'), caption: 'Start a new terminal session', - iconClass: args => (args['isPalette'] ? '' : TERMINAL_ICON_CLASS), + icon: args => (args['isPalette'] ? undefined : terminalIcon), execute: async args => { // wait for the widget to lazy load let Terminal: typeof WidgetModuleType.Terminal; @@ -336,7 +331,7 @@ export function addCommands( const term = new Terminal(session, options); - term.title.iconRenderer = terminalIcon; + term.title.icon = terminalIcon; term.title.label = '...'; let main = new MainAreaWidget({ content: term }); diff --git a/packages/terminal/package.json b/packages/terminal/package.json index 9358f75e8686..dd5fcd438c6d 100644 --- a/packages/terminal/package.json +++ b/packages/terminal/package.json @@ -40,7 +40,7 @@ "@lumino/coreutils": "^1.4.2", "@lumino/domutils": "^1.1.7", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "xterm": "~4.2.0", "xterm-addon-fit": "~0.3.0" }, diff --git a/packages/theme-light-extension/style/urls.css b/packages/theme-light-extension/style/urls.css index f76a1d898712..b657e4d0df13 100644 --- a/packages/theme-light-extension/style/urls.css +++ b/packages/theme-light-extension/style/urls.css @@ -9,32 +9,12 @@ /*--jp-icon-bug: url('icons/md/bug.svg');*/ - /* blocked by need for stack/carousel */ + /* blocked by lumino interaction */ /*--jp-icon-caret-down: url('icons/md/caretdown.svg');*/ /*--jp-icon-caret-right: url('icons/md/caretright.svg');*/ /*--jp-icon-caret-up: url('icons/md/caretup.svg');*/ /*--jp-icon-caret-left: url('icons/md/caretleft.svg');*/ - /*--jp-icon-check: url('icons/md/checkmark.svg');*/ - /*--jp-icon-check-disabled: url('icons/md/checkmark-disabled.svg');*/ - /*--jp-icon-close: url('icons/md/close.svg');*/ - - /* blocked by lumino interaction*/ - - /*--jp-icon-caret-down: url('icons/md/caretdown.svg');*/ - /*--jp-icon-caret-right: url('icons/md/caretright.svg');*/ - /*--jp-icon-caret-up: url('icons/md/caretup.svg');*/ - /*--jp-icon-caret-left: url('icons/md/caretleft.svg');*/ - /*--jp-icon-check: url('icons/md/checkmark.svg');*/ - /*--jp-icon-check-disabled: url('icons/md/checkmark-disabled.svg');*/ - /*--jp-icon-close: url('icons/md/close.svg');*/ - /*--jp-icon-console: url('icons/jupyter/console.svg');*/ - /*--jp-icon-download: url('icons/md/download.svg');*/ - /*--jp-icon-filter-list: url('icons/md/ic_filter_list_24px.svg');*/ - /*--jp-icon-edit: url('icons/md/edit.svg');*/ - /*--jp-icon-link: url('icons/md/link.svg');*/ - /*--jp-icon-new-folder: url('icons/md/ic_create_new_folder_24px.svg');*/ /*--jp-icon-search: url('icons/md/search.svg');*/ /*--jp-icon-search-white: url('icons/md/search-white.svg');*/ - /*--jp-icon-undo: url('icons/md/undo.svg');*/ } diff --git a/packages/tooltip-extension/package.json b/packages/tooltip-extension/package.json index 6b47b4dfa0f9..c672771dd9e6 100644 --- a/packages/tooltip-extension/package.json +++ b/packages/tooltip-extension/package.json @@ -47,7 +47,7 @@ "@jupyterlab/tooltip": "^2.0.0-rc.1", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/widgets": "^1.10.2" + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json index 4a36574ad898..9c4e6046b31e 100644 --- a/packages/tooltip/package.json +++ b/packages/tooltip/package.json @@ -41,7 +41,7 @@ "@jupyterlab/services": "^5.0.0-rc.1", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2" + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json index 7ab6c961042f..275865707526 100644 --- a/packages/ui-components/package.json +++ b/packages/ui-components/package.json @@ -38,9 +38,9 @@ "@blueprintjs/select": "^3.11.2", "@jupyterlab/coreutils": "^4.0.0-rc.1", "@lumino/coreutils": "^1.4.2", - "@lumino/signaling": "^1.3.4", - "@lumino/virtualdom": "^1.5.0", - "@lumino/widgets": "^1.10.2", + "@lumino/signaling": "^1.3.5", + "@lumino/virtualdom": "^1.6.1", + "@lumino/widgets": "^1.11.1", "react": "~16.9.0", "react-dom": "~16.9.0", "typestyle": "^2.0.4" diff --git a/packages/ui-components/src/components/htmlselect.tsx b/packages/ui-components/src/components/htmlselect.tsx index fd4bc82e9fda..998a2564458f 100644 --- a/packages/ui-components/src/components/htmlselect.tsx +++ b/packages/ui-components/src/components/htmlselect.tsx @@ -90,7 +90,7 @@ export class HTMLSelect extends React.Component { & LabIcon.IProps) { - if (!icon) { + if (!Private.isResolvable(icon)) { if (!iconClass && fallback) { - // if neither icon nor iconClass are defined, use fallback + // if neither icon nor iconClass are defined/resolvable, use fallback return fallback.element(props); } @@ -150,9 +148,9 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { fallback, ...props }: Partial & LabIcon.IReactProps) { - if (!icon) { + if (!Private.isResolvable(icon)) { if (!iconClass && fallback) { - // if neither icon nor iconClass are defined, use fallback + // if neither icon nor iconClass are defined/resolvable, use fallback return ; } @@ -202,59 +200,9 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { LabIcon._debug = debug ?? !LabIcon._debug; } - /** - * UNSTABLE - only exists for handling a single special case - * - * TODO: Fix the remaining case that relies on this and then - * remove this method: - * - index.tsx in launcher - */ - static UNSTABLE_getReact({ - name, - fallback, - ...props - }: { name: string; fallback?: LabIcon } & LabIcon.IReactProps) { - for (let className of name.split(/\s+/)) { - if (LabIcon._instancesByNameAndClassName.has(className)) { - const icon = LabIcon._instancesByNameAndClassName.get(className)!; - return ; - } - } - - // lookup failed if execution reached here - if (LabIcon._debug) { - // fail noisily - console.error(`Invalid icon name: ${name}`); - return ; - } else if (fallback) { - return ; - } else { - // try to render the icon as a css background image via iconClass - return ; - } - } - - /** - * UNSTABLE - only exists for handling 2 special cases - * - * TODO: Fix the remaining cases that rely on this and then - * remove this method: - * - shell.ts in application - * - widget.tsx in extensionmanager - */ - static UNSTABLE_style({ - className, - ...props - }: { className?: string } & IIconStyle) { - return classes(className, iconStyle(props)); - } - private static _debug: boolean = false; private static _instances = new Map(); - // TODO: remove this along with UNSTABLE_getReact - private static _instancesByNameAndClassName = new Map(); - /*********** * members * ***********/ @@ -264,7 +212,6 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { svgstr, render, unrender, - rendererClass = LabIcon.ElementRenderer, _loading = false }: LabIcon.IOptions & { _loading?: boolean }) { if (!(name && svgstr)) { @@ -299,25 +246,28 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { } this.name = name; - this._className = Private.nameToClassName(name); + this.react = this._initReact(name); this.svgstr = svgstr; - this.react = this._initReact(); + // setup custom render/unrender methods, if passed in + this._initRender({ render, unrender }); - if (render && unrender) { - this.render = render.bind(this); - this.unrender = unrender.bind(this); - } else { - // set render and unrender methods based on the supplied rendererClass - const renderer = new rendererClass(this); - this.render = renderer.render.bind(this); - this.unrender = renderer.unrender.bind(this); - } LabIcon._instances.set(this.name, this); + } - // TODO: remove along with UNSTABLE_getReact - LabIcon._instancesByNameAndClassName.set(this.name, this); - LabIcon._instancesByNameAndClassName.set(this._className, this); + /** + * Get a view of this icon that is bound to the specified icon/style props + * + * @param optional icon/style props (same as args for .element + * and .react methods). These will be bound to the resulting view + * + * @returns a view of this LabIcon instance + */ + bindprops(props?: LabIcon.IProps) { + const view = Object.create(this); + view._props = props; + view.react = view._initReact(view.name + '_bind'); + return view; } /** @@ -337,22 +287,35 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { * @param tag - if container is not explicitly * provided, this tag will be used when creating the container * - * @param propsStyle - style parameters that get passed to TypeStyle in - * order to generate a style class. The style class will be added - * to the icon container's classes, while the style itself will be - * applied to any svg elements within the container. + * @param stylesheet - optional string naming a builtin icon + * stylesheet, for example 'menuItem' or `statusBar`. Can also be an + * object defining a custom icon stylesheet, or a list of builtin + * stylesheet names and/or custom stylesheet objects. If array, + * the given stylesheets will be merged. + * + * See @jupyterlab/ui-components/src/style/icon.ts for details + * + * @param elementPosition - optional position for the inner svg element + * + * @param elementSize - optional size for the inner svg element. + * Set to 'normal' to get a standard 16px x 16px icon + * + * @param ...elementCSS - all additional args are treated as + * overrides for the CSS props applied to the inner svg element * * @returns A DOM element that contains an (inline) svg element * that displays an icon */ - element({ - className, - container, - label, - title, - tag = 'div', - ...propsStyle - }: LabIcon.IProps = {}): HTMLElement { + element(props: LabIcon.IProps = {}): HTMLElement { + let { + className, + container, + label, + title, + tag = 'div', + ...styleProps + }: LabIcon.IProps = { ...this._props, ...props }; + // check if icon element is already set const maybeSvgElement = container?.firstChild as HTMLElement; if (maybeSvgElement?.dataset?.iconId === this._uuid) { @@ -384,7 +347,7 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { if (label != null) { container.textContent = label; } - Private.initContainer({ container, className, propsStyle, title }); + Private.initContainer({ container, className, styleProps, title }); // add the svg node to the container container.appendChild(svgElement); @@ -392,6 +355,20 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { return ret; } + render(container: HTMLElement, options?: LabIcon.IRendererOptions): void { + let label = options?.children?.[0]; + // narrow type of label + if (typeof label !== 'string') { + label = undefined; + } + + this.element({ + container, + label, + ...options?.props + }); + } + get svgstr() { return this._svgstr; } @@ -418,19 +395,20 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { this._svgReplaced.emit(); } - protected _initReact() { + unrender?(container: HTMLElement, options?: LabIcon.IRendererOptions): void; + + protected _initReact(displayName: string) { const component = React.forwardRef( - ( - { + (props: LabIcon.IProps = {}, ref: LabIcon.IReactRef) => { + let { className, container, label, title, tag = 'div', - ...propsStyle - }: LabIcon.IProps = {}, - ref: LabIcon.IReactRef - ) => { + ...styleProps + }: LabIcon.IProps = { ...this._props, ...props }; + // set up component state via useState hook const [, setId] = React.useState(this._uuid); @@ -467,7 +445,7 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { ); if (container) { - Private.initContainer({ container, className, propsStyle, title }); + Private.initContainer({ container, className, styleProps, title }); return ( @@ -477,7 +455,12 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { ); } else { return ( - + {svgComponent} {label} @@ -486,10 +469,26 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { } ); - component.displayName = `LabIcon_${this.name}`; + component.displayName = `LabIcon_${displayName}`; return component; } + protected _initRender({ + render, + unrender + }: Partial) { + if (render) { + this.render = render; + if (unrender) { + this.unrender = unrender; + } + } else if (unrender) { + console.warn( + 'In _initRender, ignoring unrender arg since render is undefined' + ); + } + } + protected _initSvg({ title, uuid @@ -536,39 +535,41 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { * @param tag - if container is not explicitly * provided, this tag will be used when creating the container * - * @param ref - forwarded to the ref prop of the icon's svg element + * @param stylesheet - optional string naming a builtin icon + * stylesheet, for example 'menuItem' or `statusBar`. Can also be an + * object defining a custom icon stylesheet, or a list of builtin + * stylesheet names and/or custom stylesheet objects. If array, + * the given stylesheets will be merged. + * + * See @jupyterlab/ui-components/src/style/icon.ts for details + * + * @param elementPosition - optional position for the inner svg element + * + * @param elementSize - optional size for the inner svg element. + * Set to 'normal' to get a standard 16px x 16px icon * - * @param propsStyle - style parameters that get passed to TypeStyle in - * order to generate a style class. The style class will be added - * to the icon container's classes, while the style itself will be - * applied to any svg elements within the container. + * @param ...elementCSS - all additional args are treated as + * overrides for the CSS props applied to the inner svg element + * + * @param ref - forwarded to the ref prop of the icon's svg element */ readonly react: LabIcon.IReact; - readonly render: ( - container: HTMLElement, - options?: LabIcon.IRendererOptions - ) => void; - readonly unrender: (container: HTMLElement) => void; - protected _className: string; protected _loading: boolean; + protected _props: LabIcon.IProps = {}; protected _svgReplaced = new Signal(this); protected _svgstr: string; protected _uuid: string; - - // needed due to the quirks of the current implementation of IRenderer - protected _icon = this; - protected _rendererOptions = {}; } /** * A namespace for LabIcon statics. */ export namespace LabIcon { - /************** + /************* * interfaces * - **************/ + *************/ /** * The simplest possible interface for defining a generic icon. @@ -604,14 +605,12 @@ export namespace LabIcon { * Interface defining the parameters to be passed to the LabIcon * constructor */ - export interface IOptions extends IIcon, Partial { - rendererClass?: typeof Renderer; - } + export interface IOptions extends IIcon, Partial {} /** * The input props for creating a new LabIcon */ - export interface IProps extends IIconStyle { + export interface IProps extends LabIconStyle.IProps { /** * Extra classNames. Used in addition to the typestyle className to * set the className of the icon's outermost container node @@ -643,12 +642,12 @@ export namespace LabIcon { } export interface IResolverProps { - icon?: LabIcon.IResolvable; + icon?: IMaybeResolvable; iconClass?: string; fallback?: LabIcon; } - /********* + /******** * types * *********/ @@ -659,6 +658,14 @@ export namespace LabIcon { | string | (IIcon & Partial); + /** + * A type that maybe can be resolved to a LabIcon instance. + */ + export type IMaybeResolvable = + | IResolvable + | VirtualElement.IRenderer + | undefined; + /** * The type of the svg node ref that can be passed into icon React components */ @@ -675,71 +682,6 @@ export namespace LabIcon { * field of a LabIcon. */ export type IReact = React.ForwardRefExoticComponent; - - /*********** - * classes * - ***********/ - - /** - * Base implementation of IRenderer. - */ - export class Renderer implements VirtualElement.IRenderer { - constructor( - protected _icon: LabIcon, - protected _rendererOptions: IRendererOptions = {} - ) {} - - // tslint:disable-next-line:no-empty - render(container: HTMLElement, _options: IRendererOptions = {}): void {} - // TODO: make unrenderer optional once @lumino/virtualdom > 1.4.1 is used - // tslint:disable-next-line:no-empty - unrender(container: HTMLElement): void {} - } - - /** - * Implementation of IRenderer that creates the icon svg node - * as a DOM element. - */ - export class ElementRenderer extends Renderer { - render(container: HTMLElement, _options: IRendererOptions = {}): void { - // TODO: move this title fix to the Lumino side - container.removeAttribute('title'); - - // TODO: decide how to implement rendering of passed in child virtual nodes - this._icon.element({ - container, - ...this._rendererOptions.props, - ..._options.props - }); - } - - // tslint:disable-next-line:no-empty - unrender(container: HTMLElement): void {} - } - - /** - * Implementation of IRenderer that creates the icon svg node - * as a React component. - */ - export class ReactRenderer extends Renderer { - render(container: HTMLElement, _options: IRendererOptions = {}): void { - // TODO: move this title fix to the Lumino side - container.removeAttribute('title'); - - // TODO: decide how to implement rendering of passed in child virtual nodes - return ReactDOM.render( - , - container - ); - } - - unrender(container: HTMLElement): void { - ReactDOM.unmountComponentAtNode(container); - } - } } namespace Private { @@ -749,7 +691,7 @@ namespace Private { label, title, tag = 'div', - ...propsStyle + ...styleProps }: LabIcon.IProps): HTMLElement { if (container?.className === className) { // nothing needs doing, return the icon node @@ -768,7 +710,7 @@ namespace Private { if (label != null) { container.textContent = label; } - Private.initContainer({ container, className, propsStyle, title }); + Private.initContainer({ container, className, styleProps, title }); return container; } @@ -781,7 +723,7 @@ namespace Private { label, title, tag = 'div', - ...propsStyle + ...styleProps }: LabIcon.IProps, ref: LabIcon.IReactRef ) => { @@ -789,13 +731,15 @@ namespace Private { const Tag = tag; if (container) { - initContainer({ container, className, propsStyle, title }); + initContainer({ container, className, styleProps, title }); return <>; } else { // if ref is defined, we create a blank svg node and point ref to it return ( - + {ref && blankIcon.react({ ref })} {label} @@ -808,40 +752,41 @@ namespace Private { container, className, - propsStyle, + styleProps, title }: { container: HTMLElement; className?: string; - propsStyle?: IIconStyle; + styleProps?: LabIconStyle.IProps; title?: string; }): string { if (title != null) { container.title = title; } + const styleClass = LabIconStyle.styleClass(styleProps); - const classStyle = iconStyle(propsStyle); if (className != null) { // override the container class with explicitly passed-in class + style class - const classResolved = classes(className, classStyle); + const classResolved = classes(className, styleClass); container.className = classResolved; return classResolved; - } else if (classStyle) { + } else if (styleClass) { // add the style class to the container class - container.classList.add(classStyle); - return classStyle; + container.classList.add(styleClass); + return styleClass; } else { return ''; } } - /** - * @param name - icon name. May be namespaced as per `some-pkg:foo-bar` - * - * @returns given a name of `some-pkg:foo-bar`, returns `jp-FooBarIcon` - */ - export function nameToClassName(name: string): string { - return 'jp-' + Text.camelCase(name.split(':').pop()!, true) + 'Icon'; + export function isResolvable( + icon: LabIcon.IMaybeResolvable + ): icon is LabIcon.IResolvable { + return !!( + icon && + (typeof icon === 'string' || + ((icon as LabIcon.IIcon).name && (icon as LabIcon.IIcon).svgstr)) + ); } export function setTitleSvg(svgNode: HTMLElement, title: string): void { @@ -855,6 +800,71 @@ namespace Private { svgNode.appendChild(titleNode); } } + + /** + * TODO: figure out story for independent Renderers. + * Base implementation of IRenderer. + */ + export class Renderer implements VirtualElement.IRenderer { + constructor( + protected _icon: LabIcon, + protected _rendererOptions?: LabIcon.IRendererOptions + ) {} + + // tslint:disable-next-line:no-empty + render(container: HTMLElement, options?: LabIcon.IRendererOptions): void {} + unrender?(container: HTMLElement, options?: LabIcon.IRendererOptions): void; + } + + /** + * TODO: figure out story for independent Renderers. + * Implementation of IRenderer that creates the icon svg node + * as a DOM element. + */ + export class ElementRenderer extends Renderer { + render(container: HTMLElement, options?: LabIcon.IRendererOptions): void { + let label = options?.children?.[0]; + // narrow type of label + if (typeof label !== 'string') { + label = undefined; + } + + this._icon.element({ + container, + label, + ...this._rendererOptions?.props, + ...options?.props + }); + } + } + + /** + * TODO: figure out story for independent Renderers. + * Implementation of IRenderer that creates the icon svg node + * as a React component. + */ + export class ReactRenderer extends Renderer { + render(container: HTMLElement, options?: LabIcon.IRendererOptions): void { + let label = options?.children?.[0]; + // narrow type of label + if (typeof label !== 'string') { + label = undefined; + } + + return ReactDOM.render( + , + container + ); + } + + unrender(container: HTMLElement): void { + ReactDOM.unmountComponentAtNode(container); + } + } } // need to be at the bottom since constructor depends on Private diff --git a/packages/ui-components/src/icon/widgets/commandpalettesvg.ts b/packages/ui-components/src/icon/widgets/commandpalettesvg.ts new file mode 100644 index 000000000000..a2f608ed488d --- /dev/null +++ b/packages/ui-components/src/icon/widgets/commandpalettesvg.ts @@ -0,0 +1,93 @@ +// Copyright (c) Jupyter Development Team. +// Distributed under the terms of the Modified BSD License. + +import { h, VirtualElement } from '@lumino/virtualdom'; +import { CommandPalette } from '@lumino/widgets'; + +import { checkIcon, filterListIcon } from '../iconimports'; +import { LabIconStyle } from '../../style'; +import { classes } from '../../utils'; + +const searchHeaderIcon = filterListIcon.bindprops({ + stylesheet: 'commandPaletteHeader' +}); + +export namespace CommandPaletteSvg { + /** + * a modified implementation of the CommandPalette Renderer + */ + export class Renderer extends CommandPalette.Renderer { + /** + * Render the virtual element for a command palette header. + * + * @param data - The data to use for rendering the header. + * + * @returns A virtual element representing the header. + */ + renderHeader(data: CommandPalette.IHeaderRenderData): VirtualElement { + const content = this.formatHeader(data); + return h.li( + { + className: classes( + 'lm-CommandPalette-header', + 'jp-icon-hoverShow', + /* */ + 'p-CommandPalette-header' + /* */ + ) + }, + content, + h.span(searchHeaderIcon) + ); + } + + /** + * Render the icon for a command palette item. + * + * @param data - The data to use for rendering the icon. + * + * @returns A virtual element representing the icon. + */ + renderItemIcon(data: CommandPalette.IItemRenderData): VirtualElement { + const className = this.createIconClass(data); + + if (data.item.isToggled) { + // check mark icon takes precedence + return h.div({ className }, checkIcon, data.item.iconLabel); + } + + /* */ + if (typeof data.item.icon === 'string') { + return h.div({ className }, data.item.iconLabel); + } + /* */ + + // if data.item.icon is undefined, it will be ignored + return h.div({ className }, data.item.icon!, data.item.iconLabel); + } + + /** + * Create the class name for the command item icon. + * + * @param data - The data to use for the class name. + * + * @returns The full class name for the item icon. + */ + createIconClass(data: CommandPalette.IItemRenderData): string { + let name = 'lm-CommandPalette-itemIcon'; + /* */ + name += ' p-CommandPalette-itemIcon'; + /* */ + + return classes( + LabIconStyle.styleClass({ + stylesheet: 'commandPaletteItem' + }), + data.item.iconClass, + name + ); + } + } + + export const defaultRenderer = new Renderer(); +} diff --git a/packages/ui-components/src/icon/widgets/index.ts b/packages/ui-components/src/icon/widgets/index.ts new file mode 100644 index 000000000000..05bbb9aa1f39 --- /dev/null +++ b/packages/ui-components/src/icon/widgets/index.ts @@ -0,0 +1,6 @@ +// Copyright (c) Jupyter Development Team. +// Distributed under the terms of the Modified BSD License. + +export * from './commandpalettesvg'; +export * from './menusvg'; +export * from './tabbarsvg'; diff --git a/packages/ui-components/src/icon/widgets/menusvg.ts b/packages/ui-components/src/icon/widgets/menusvg.ts new file mode 100644 index 000000000000..fb39620553a9 --- /dev/null +++ b/packages/ui-components/src/icon/widgets/menusvg.ts @@ -0,0 +1,148 @@ +// Copyright (c) Jupyter Development Team. +// Distributed under the terms of the Modified BSD License. + +import { h, VirtualElement } from '@lumino/virtualdom'; +import { Menu } from '@lumino/widgets'; + +import { caretRightIcon, checkIcon } from '../iconimports'; +import { LabIconStyle } from '../../style'; +import { classes } from '../../utils'; + +const submenuIcon = caretRightIcon.bindprops({ + stylesheet: 'menuItem' +}); + +/** + * a widget which displays items as a canonical menu. + * Tweaked to use inline svg icons + */ +export class MenuSvg extends Menu { + /** + * construct a new menu. Overrides the default renderer + * + * @param options - The options for initializing the tab bar. + */ + constructor(options: Menu.IOptions) { + options.renderer = options.renderer || MenuSvg.defaultRenderer; + super(options); + } + + /** + * insert a menu item into the menu at the specified index. Replaces the + * default renderer for submenus + * + * @param index - The index at which to insert the item. + * + * @param options - The options for creating the menu item. + * + * @returns The menu item added to the menu. + * + * #### Notes + * The index will be clamped to the bounds of the items. + */ + insertItem(index: number, options: Menu.IItemOptions): Menu.IItem { + if (options.submenu?.renderer === Menu.defaultRenderer) { + // create a "view" of the submenu with a different default renderer + const submenu = Object.create(options.submenu, { + renderer: { + configurable: true, + enumerable: true, + value: MenuSvg.defaultRenderer + } + }); + + // Widget.title is an AttachedProperty, and needs special handling + submenu.title.label = options.submenu.title.label; + submenu.title.mnemonic = options.submenu.title.mnemonic; + submenu.title.icon = options.submenu.title.icon; + submenu.title.iconClass = options.submenu.title.iconClass; + submenu.title.iconLabel = options.submenu.title.iconLabel; + submenu.title.caption = options.submenu.title.caption; + submenu.title.className = options.submenu.title.className; + submenu.title.dataset = options.submenu.title.dataset; + + options.submenu = submenu; + } + + return super.insertItem(index, options); + } +} + +export namespace MenuSvg { + /** + * a modified implementation of the Menu Renderer + */ + export class Renderer extends Menu.Renderer { + /** + * Render the icon element for a menu item. + * + * @param data - The data to use for rendering the icon. + * + * @returns A virtual element representing the item icon. + */ + renderIcon(data: Menu.IRenderData): VirtualElement { + const className = this.createIconClass(data); + + if (data.item.isToggled) { + // check mark icon takes precedence + return h.div({ className }, checkIcon, data.item.iconLabel); + } + + /* */ + if (typeof data.item.icon === 'string') { + return h.div({ className }, data.item.iconLabel); + } + /* */ + + // if data.item.icon is undefined, it will be ignored + return h.div({ className }, data.item.icon!, data.item.iconLabel); + } + + /** + * Create the class name for the menu item icon. + * + * @param data - The data to use for the class name. + * + * @returns The full class name for the item icon. + */ + createIconClass(data: Menu.IRenderData): string { + let name = 'lm-Menu-itemIcon'; + /* */ + name += ' p-Menu-itemIcon'; + /* */ + + if (data.item.type === 'separator') { + return classes(data.item.iconClass, name); + } else { + return classes( + LabIconStyle.styleClass({ stylesheet: 'menuItem' }), + data.item.iconClass, + name + ); + } + } + + /** + * Render the submenu icon element for a menu item. + * + * @param data - The data to use for rendering the submenu icon. + * + * @returns A virtual element representing the submenu icon. + */ + renderSubmenu(data: Menu.IRenderData): VirtualElement { + const className = + 'lm-Menu-itemSubmenuIcon' + + /* */ + ' p-Menu-itemSubmenuIcon'; + /* */ + + if (data.item.type === 'submenu') { + return h.div({ className }, submenuIcon); + } else { + return h.div({ className }); + } + } + } + + export const defaultRenderer = new Renderer(); +} diff --git a/packages/ui-components/src/icon/tabbarsvg.ts b/packages/ui-components/src/icon/widgets/tabbarsvg.ts similarity index 87% rename from packages/ui-components/src/icon/tabbarsvg.ts rename to packages/ui-components/src/icon/widgets/tabbarsvg.ts index e4b81db27fd6..80c4d52c0d43 100644 --- a/packages/ui-components/src/icon/tabbarsvg.ts +++ b/packages/ui-components/src/icon/widgets/tabbarsvg.ts @@ -4,9 +4,9 @@ import { hpass, VirtualElement } from '@lumino/virtualdom'; import { DockPanel, TabBar, Widget } from '@lumino/widgets'; -import { closeIcon } from './iconimports'; -import { iconStyle } from '../style'; -import { classes } from '../utils'; +import { closeIcon } from '../iconimports'; +import { LabIconStyle } from '../../style'; +import { classes } from '../../utils'; /** * a widget which displays titles as a single row or column of tabs. @@ -14,8 +14,7 @@ import { classes } from '../utils'; */ export class TabBarSvg extends TabBar { /** - * Construct a new tab bar. Sets the (icon) kind and overrides - * the default renderer. + * Construct a new tab bar. Overrides the default renderer. * * @param options - The options for initializing the tab bar. */ @@ -40,7 +39,11 @@ export namespace TabBarSvg { renderCloseIcon(data: TabBar.IRenderData): VirtualElement { const className = classes( 'jp-icon-hover lm-TabBar-tabCloseIcon', - iconStyle({ justify: 'center', height: '16px', width: '16px' }) + LabIconStyle.styleClass({ + elementPosition: 'center', + height: '16px', + width: '16px' + }) ); return (hpass( diff --git a/packages/ui-components/src/index.ts b/packages/ui-components/src/index.ts index 35977b28da98..2cef308a6e9a 100644 --- a/packages/ui-components/src/index.ts +++ b/packages/ui-components/src/index.ts @@ -1,8 +1,9 @@ // Copyright (c) Jupyter Development Team. // Distributed under the terms of the Modified BSD License. -export * from './blueprint'; export * from './components'; export * from './icon'; + +export * from './blueprint'; export * from './tokens'; export * from './utils'; diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts index cbce95d07f8b..8f15458ad27c 100644 --- a/packages/ui-components/src/style/icon.ts +++ b/packages/ui-components/src/style/icon.ts @@ -1,383 +1,609 @@ // Copyright (c) Jupyter Development Team. // Distributed under the terms of the Modified BSD License. -import { style } from 'typestyle/lib'; +import { style as typestyleClass } from 'typestyle/lib'; import { NestedCSSProperties } from 'typestyle/lib/types'; -/** - * - breadCrumb: The path icons above the filebrowser - * - dockPanelBar: The tab icons above the main area - * - launcherCard: The icons for the cards at the bottom of the launcher - * - launcherSection: The icons to left of the Launcher section headers - * - listing: The icons to the left of the filebrowser listing items - * - settingsEditor: The icons to the left of each section of the settings editor - * - sideBar: The icons for the sidebar (default to the left of the main window) - * - splash: The icon used for the splash screen - * - tabManager: The icons for the tabManager in the sidebar - */ -export type IconKindType = - | 'breadCrumb' - | 'launcherCard' - | 'launcherSection' - | 'listing' - | 'listingHeaderItem' - | 'mainAreaTab' - | 'runningItem' - | 'select' - | 'settingsEditor' - | 'sideBar' - | 'splash' - | 'statusBar' - | 'toolbarButton'; - -export type IconJustifyType = 'center' | 'left' | 'right'; - -export interface IIconStyle extends NestedCSSProperties { +export namespace LabIconStyle { /** - * the kind of the icon, associated with a default stylesheet + * - breadCrumb: The path icons above the filebrowser + * - commandPaletteHeader: The icon to the right of palette section headers + * - commandPaletteItem: The icon next to a palette item + * - launcherCard: The icons for the cards at the bottom of the launcher + * - launcherSection: The icons to left of the Launcher section headers + * - listing: The icons to the left of the filebrowser listing items + * - listingHeaderItem: Caret icons used to show sort order in listing column headers + * - mainAreaTab: The icons in the tabs above the main area/the tabManager in the sidebar + * - menuItem: The icon next to a menu item + * - runningItem: The icon next to an item in the Running sidebar + * - select: The caret icon on the left side of a dropdown select element + * - settingsEditor: The icons to the left of each section of the settings editor + * - sideBar: The icons for the sidebar (default to the left of the main window) + * - splash: The icon used for the splash screen + * - statusBar: The icons in the status bar + * - toolbarButton: The icon shown on a toolbar button */ - kind?: IconKindType; + type IBuiltin = + | 'breadCrumb' + | 'commandPaletteHeader' + | 'commandPaletteItem' + | 'launcherCard' + | 'launcherSection' + | 'listing' + | 'listingHeaderItem' + | 'mainAreaTab' + | 'menuItem' + | 'runningItem' + | 'select' + | 'settingsEditor' + | 'sideBar' + | 'splash' + | 'statusBar' + | 'toolbarButton'; + + type IPosition = + | 'center' + | 'top' + | 'right' + | 'bottom' + | 'left' + | 'top right' + | 'bottom right' + | 'bottom left' + | 'top left'; + + type ISize = 'small' | 'normal' | 'large' | 'xlarge'; /** - * how to justify the icon + * Options that function as a shorthand for compound CSS properties, + * such as the set of props required to center an svg inside + * of a parent node */ - justify?: IconJustifyType; -} + interface ISheetOptions { + /** + * How to position the inner svg element, + * relative to the outer container + */ + elementPosition?: IPosition; + + /** + * the size of the inner svg element. Can be any of: + * - 'small': 14px x 14px + * - 'normal': 16px x 16px + * - 'large': 20px x 20px + * - 'xlarge': 24px x 24px + */ + elementSize?: ISize; + + /** + * FUTURE: how to position the label element (if any), + * relative to the outer container + */ + // labelPosition?: IPosition; + } -/** - * icon kind specific styles - */ -const iconCSSBreadCrumb: NestedCSSProperties = { - borderRadius: 'var(--jp-border-radius)', - cursor: 'pointer', - margin: '0px 2px', - padding: '0px 2px', - height: '16px', - width: '16px', - verticalAlign: 'middle' -}; - -const iconCSSLauncherCard: NestedCSSProperties = { - height: '52px', - width: '52px' -}; - -const iconCSSLauncherSection: NestedCSSProperties = { - height: '32px', - width: '32px' -}; - -const iconCSSListing: NestedCSSProperties = { - height: '16px', - width: '16px' -}; - -const iconCSSlistingHeaderItem: NestedCSSProperties = { - height: 'auto', - margin: '-2px 0 0 0', - width: '20px' -}; - -const iconCSSMainAreaTab: NestedCSSProperties = { - $nest: { - '.lm-DockPanel-tabBar &': { - height: '14px', - width: '14px' - }, - '#tab-manager &': { - height: '16px', - width: '16px' - } + /** + * Stylesheet with a collection of CSS props for each node + * in an icon, plus some custom options + */ + interface ISheet { + /** + * CSS properties that will be applied to the outer container + * element via a typestyle class + */ + container?: NestedCSSProperties; + + /** + * CSS properties that will be applied to the inner svg + * element via a typestyle class + */ + element?: NestedCSSProperties; + + /** + * Options that function as modifiers for this style's + * CSS properties + */ + options?: ISheetOptions; + + /** + * FUTURE: CSS properties that will be applied to the label + * element, if any, via a typestyle class + */ + // labelCSS?: NestedCSSProperties; } -}; - -const iconCSSRunningItem: NestedCSSProperties = { - height: '16px', - width: '16px' -}; - -const iconCSSSelect: NestedCSSProperties = { - position: 'absolute', - height: 'auto', - width: '16px' -}; - -const iconCSSSettingsEditor: NestedCSSProperties = { - height: '16px', - width: '16px' -}; - -const iconCSSSideBar: NestedCSSProperties = { - width: '20px' -}; - -const iconCSSSplash: NestedCSSProperties = { - width: '100px' -}; - -const iconCSSStatusBar: NestedCSSProperties = { - left: '0px', - top: '0px', - height: '18px', - width: '20px', - position: 'relative' -}; - -const iconCSSToolbarButton: NestedCSSProperties = { - height: '16px', - width: '16px' -}; - -const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = { - breadCrumb: iconCSSBreadCrumb, - launcherCard: iconCSSLauncherCard, - launcherSection: iconCSSLauncherSection, - listing: iconCSSListing, - listingHeaderItem: iconCSSlistingHeaderItem, - mainAreaTab: iconCSSMainAreaTab, - runningItem: iconCSSRunningItem, - select: iconCSSSelect, - settingsEditor: iconCSSSettingsEditor, - sideBar: iconCSSSideBar, - splash: iconCSSSplash, - statusBar: iconCSSStatusBar, - toolbarButton: iconCSSToolbarButton -}; - -const containerCSSBreadCrumb: NestedCSSProperties = { - // `&` will be substituted for the generated classname (interpolation) - $nest: { - '&:first-child svg': { - bottom: '1px', - marginLeft: '0px', - position: 'relative' + + /** + * A stylesheet containing only collections of CSS style props that + * can be fed directly to typestyle's style() function. A standard + * ISheet can be resolved to a "pure" stylesheet by processing and + * removing any options + */ + interface ISheetPure extends ISheet { + /** + * Options are disallowed + */ + options?: undefined; + } + + /** + * Type to help with resolving a stylesheet that might be a string + */ + type ISheetResolvable = ISheet | IBuiltin; + + export interface IProps extends NestedCSSProperties, ISheetOptions { + /** + * Specify the icon styling. Can be either a string naming one of + * the builtin icon stylesheets, a LabIconStyle.ISheet object, or an + * array containing any mixture of the two. If an array is provided, + * the actual style will be determined by merging the stylesheets in + * the array, giving precedence to the rightmost values. + */ + stylesheet?: ISheetResolvable | ISheetResolvable[]; + + /** + * @depreacted use stylesheet instead + */ + kind?: IBuiltin; + + /** + * @deprecated use elementPosition instead + */ + justify?: 'center' | 'right' | 'left'; + } + + /** + * The builtin stylesheets + */ + const builtinSheets: { [k in IBuiltin]: ISheet } = { + breadCrumb: { + container: { + $nest: { + // `&` will be substituted for the generated classname (interpolation) + '&:first-child svg': { + bottom: '1px', + marginLeft: '0px', + position: 'relative' + }, + '&:hover': { + backgroundColor: 'var(--jp-layout-color2)' + }, + ['.jp-mod-dropTarget&']: { + backgroundColor: 'var(--jp-brand-color2)', + opacity: 0.7 + } + } + }, + element: { + borderRadius: 'var(--jp-border-radius)', + cursor: 'pointer', + margin: '0px 2px', + padding: '0px 2px', + height: '16px', + width: '16px', + verticalAlign: 'middle' + } }, - '&:hover': { - backgroundColor: 'var(--jp-layout-color2)' + + commandPaletteHeader: { + container: { + height: '14px', + margin: '0 14px 0 auto' + }, + element: { + height: '14px', + width: '14px' + }, + options: { + elementPosition: 'center' + } }, - ['.jp-mod-dropTarget&']: { - backgroundColor: 'var(--jp-brand-color2)', - opacity: 0.7 - } - } -}; - -const containerCSSLauncherCard: NestedCSSProperties = { - height: '68px' -}; - -const containerCSSLauncherSection: NestedCSSProperties = { - boxSizing: 'border-box', - marginRight: '12px' -}; - -const containerCSSListing: NestedCSSProperties = { - flex: '0 0 20px', - marginRight: '4px', - position: 'relative' -}; - -const containerCSSListingHeaderItem: NestedCSSProperties = { - display: 'inline', - height: '16px', - width: '16px' -}; - -/** - * container kind specific styles - */ -const containerCSSMainAreaTab: NestedCSSProperties = { - $nest: { - '.lm-DockPanel-tabBar &': { - marginRight: '4px' + + commandPaletteItem: { + element: { + height: '16px', + width: '16px' + }, + options: { + elementPosition: 'center' + } }, - '#tab-manager &': { - marginRight: '2px', - position: 'relative' - } - } -}; - -const containerCSSRunningItem: NestedCSSProperties = { - margin: '0px 4px 0px 12px' -}; - -const containerCSSSelect: NestedCSSProperties = { - pointerEvents: 'none' -}; - -const containerCSSSettingsEditor: NestedCSSProperties = { - display: 'inline-block', - flex: '0 0 20px', - marginLeft: '2px', - marginRight: '1px', - position: 'relative', - height: '20px', - width: '20px' -}; - -const containerCSSSideBar: NestedCSSProperties = { - // `&` will be substituted for the generated classname (interpolation) - $nest: { - // left sidebar tab divs - '.jp-SideBar.jp-mod-left .lm-TabBar-tab &': { - transform: 'rotate(90deg)' + + launcherCard: { + container: { + height: '68px' + }, + element: { + height: '52px', + width: '52px' + }, + options: { + elementPosition: 'center' + } + }, + + launcherSection: { + container: { + boxSizing: 'border-box', + marginRight: '12px' + }, + element: { + height: '32px', + width: '32px' + }, + options: { + elementPosition: 'center' + } + }, + + listing: { + container: { + flex: '0 0 20px', + marginRight: '4px', + position: 'relative' + }, + element: { + height: '16px', + width: '16px' + }, + options: { + elementPosition: 'center' + } + }, + + listingHeaderItem: { + container: { + display: 'inline', + height: '16px', + width: '16px' + }, + element: { + height: 'auto', + margin: '-2px 0 0 0', + width: '20px' + }, + options: { + elementPosition: 'center' + } + }, + + mainAreaTab: { + container: { + $nest: { + '.lm-DockPanel-tabBar &': { + marginRight: '4px' + }, + '#tab-manager &': { + marginRight: '2px', + position: 'relative' + } + } + }, + element: { + $nest: { + '.lm-DockPanel-tabBar &': { + height: '14px', + width: '14px' + }, + '#tab-manager &': { + height: '16px', + width: '16px' + } + } + }, + options: { + elementPosition: 'center' + } + }, + + menuItem: { + container: { + display: 'inline-block', + verticalAlign: 'middle' + }, + element: { + height: '16px', + width: '16px' + }, + options: { + elementPosition: 'center' + } }, - // left sidebar currently selected tab div - '.jp-SideBar.jp-mod-left .lm-TabBar-tab.lm-mod-current &': { - transform: - 'rotate(90deg)\n' + - ' translate(\n' + - ' calc(-0.5 * var(--jp-border-width)),\n' + - ' calc(-0.5 * var(--jp-border-width))\n' + - ' )' + + runningItem: { + container: { + margin: '0px 4px 0px 12px' + }, + element: { + height: '16px', + width: '16px' + }, + options: { + elementPosition: 'center' + } + }, + + select: { + container: { + pointerEvents: 'none' + }, + element: { + position: 'absolute', + height: 'auto', + width: '16px' + } }, - // right sidebar tab divs - '.jp-SideBar.jp-mod-right .lm-TabBar-tab &': { - transform: 'rotate(-90deg)' + settingsEditor: { + container: { + display: 'inline-block', + flex: '0 0 20px', + margin: '0 3px 0 0', + position: 'relative', + height: '20px', + width: '20px' + }, + element: { + height: '16px', + width: '16px' + }, + options: { + elementPosition: 'center' + } }, - // right sidebar currently selected tab div - '.jp-SideBar.jp-mod-right .lm-TabBar-tab.lm-mod-current &': { - transform: - 'rotate(-90deg)\n' + - ' translate(\n' + - ' calc(0.5 * var(--jp-border-width)),\n' + - ' calc(-0.5 * var(--jp-border-width))\n' + - ' )' + + sideBar: { + container: { + // `&` will be substituted for the generated classname (interpolation) + $nest: { + // left sidebar tab divs + '.jp-SideBar.jp-mod-left .lm-TabBar-tab &': { + transform: 'rotate(90deg)' + }, + // left sidebar currently selected tab div + '.jp-SideBar.jp-mod-left .lm-TabBar-tab.lm-mod-current &': { + transform: + 'rotate(90deg)\n' + + ' translate(\n' + + ' calc(-0.5 * var(--jp-border-width)),\n' + + ' calc(-0.5 * var(--jp-border-width))\n' + + ' )' + }, + + // right sidebar tab divs + '.jp-SideBar.jp-mod-right .lm-TabBar-tab &': { + transform: 'rotate(-90deg)' + }, + // right sidebar currently selected tab div + '.jp-SideBar.jp-mod-right .lm-TabBar-tab.lm-mod-current &': { + transform: + 'rotate(-90deg)\n' + + ' translate(\n' + + ' calc(0.5 * var(--jp-border-width)),\n' + + ' calc(-0.5 * var(--jp-border-width))\n' + + ' )' + } + } + }, + element: { + width: '20px' + }, + options: { + elementPosition: 'center' + } + }, + + splash: { + container: { + animation: '0.3s fade-in linear forwards', + height: '100%', + width: '100%', + zIndex: 1 + }, + element: { + width: '100px' + }, + options: { + elementPosition: 'center' + } + }, + + statusBar: { + element: { + left: '0px', + top: '0px', + height: '18px', + width: '20px', + position: 'relative' + } + }, + + toolbarButton: { + container: { + display: 'inline-block', + margin: 'auto', + verticalAlign: 'middle' + }, + element: { + height: '16px', + width: '16px' + }, + options: { + elementPosition: 'center' + } } + }; + + function _elementPositionFactory(extra: NestedCSSProperties): ISheet { + return { + container: { + alignItems: 'center', + display: 'flex' + }, + element: { + display: 'block', + ...extra + } + }; } -}; - -const containerCSSSplash: NestedCSSProperties = { - animation: '0.3s fade-in linear forwards', - height: '100%', - width: '100%', - zIndex: 1 -}; - -const containerCSSToolbarButton: NestedCSSProperties = { - display: 'inline-block', - margin: 'auto', - verticalAlign: 'middle' -}; - -const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = { - breadCrumb: containerCSSBreadCrumb, - launcherCard: containerCSSLauncherCard, - launcherSection: containerCSSLauncherSection, - listing: containerCSSListing, - listingHeaderItem: containerCSSListingHeaderItem, - mainAreaTab: containerCSSMainAreaTab, - runningItem: containerCSSRunningItem, - select: containerCSSSelect, - settingsEditor: containerCSSSettingsEditor, - sideBar: containerCSSSideBar, - splash: containerCSSSplash, - statusBar: {}, - toolbarButton: containerCSSToolbarButton -}; - -/** - * styles for justifying a node inside of a container - */ -const iconCSSCenter: NestedCSSProperties = { - display: 'block', - margin: '0 auto', - width: '100%' -}; - -const iconCSSLeft: NestedCSSProperties = { - display: 'block', - margin: '0 auto 0 0' -}; - -const iconCSSRight: NestedCSSProperties = { - display: 'block', - margin: '0 0 0 auto' -}; - -const iconCSSJustify: { [k in IconJustifyType]: NestedCSSProperties } = { - center: iconCSSCenter, - left: iconCSSLeft, - right: iconCSSRight -}; - -const containerCSSCenter: NestedCSSProperties = { - alignItems: 'center', - display: 'flex' -}; - -const containerCSSLeft: NestedCSSProperties = { - alignItems: 'center', - display: 'flex' -}; - -const containerCSSRight: NestedCSSProperties = { - alignItems: 'center', - display: 'flex' -}; - -const containerCSSJustify: { [k in IconJustifyType]: NestedCSSProperties } = { - center: containerCSSCenter, - left: containerCSSLeft, - right: containerCSSRight -}; - -/** - * for putting together the icon kind style with any user input styling, - * as well as styling from optional flags like `center` - */ -function iconCSS(props: IIconStyle): NestedCSSProperties { - const { kind, justify, ...propsCSS } = props; - - return { - ...(justify ? iconCSSJustify[justify] : {}), - ...(kind ? iconCSSKind[kind] : {}), - ...propsCSS + + /** + * Styles to help with positioning + */ + const positionSheets: { [k in IPosition]: ISheet } = { + center: _elementPositionFactory({ margin: '0 auto', width: '100%' }), + + top: _elementPositionFactory({ margin: '0 0 auto 0' }), + right: _elementPositionFactory({ margin: '0 0 0 auto' }), + bottom: _elementPositionFactory({ margin: 'auto 0 0 0' }), + left: _elementPositionFactory({ margin: '0 auto 0 0' }), + + 'top right': _elementPositionFactory({ margin: '0 0 auto auto' }), + 'bottom right': _elementPositionFactory({ margin: 'auto 0 0 auto' }), + 'bottom left': _elementPositionFactory({ margin: 'auto auto 0 0' }), + 'top left': _elementPositionFactory({ margin: '0 auto 0 auto' }) }; -} -/** - * for putting together the container kind style with any - * styling from optional flags like `center` - */ -function containerCSS(props: IIconStyle): NestedCSSProperties { - const { kind, justify } = props; + function _elementSizeFactory(size: string): ISheet { + return { + element: { + height: size, + width: size + } + }; + } - return { - ...(justify ? containerCSSJustify[justify] : {}), - ...(kind ? containerCSSKind[kind] : {}) + /** + * sheets that establish some default sizes + */ + const sizeSheets: { [k in ISize]: ISheet } = { + small: _elementSizeFactory('14px'), + normal: _elementSizeFactory('16px'), + large: _elementSizeFactory('20px'), + xlarge: _elementSizeFactory('24px') }; -} -/** - * for setting the style on the container of an svg node representing an icon - */ -export const iconStyle = (props?: IIconStyle): string => { - if (!props || Object.keys(props).length === 0) { - // props is empty - return ''; + /** + * Merge two or more icon sheets into a single "pure" + * icon style (ie collections of CSS props only) + */ + function mergeSheets(sheets: ISheet[]): ISheetPure { + return { + container: Object.assign({}, ...sheets.map(s => s.container)), + element: Object.assign({}, ...sheets.map(s => s.element)) + }; + } + + /** + * Resolve one or more stylesheets that may just be a string naming + * one of the builtin stylesheets to an array of proper ISheet objects + */ + function resolveSheet( + stylesheet: ISheetResolvable | ISheetResolvable[] | undefined + ): ISheet[] { + if (!stylesheet) { + return []; + } + + if (!Array.isArray(stylesheet)) { + // wrap in array + stylesheet = [stylesheet]; + } + + return stylesheet.map(k => (typeof k === 'string' ? builtinSheets[k] : k)); } - const conCSS = containerCSS(props); + /** + * Resolve and merge multiple icon stylesheets + */ + function applySheetOptions(sheets: ISheet[]) { + const options: ISheetOptions = Object.assign( + {}, + ...sheets.map(s => s.options) + ); + + if (options.elementPosition) { + sheets.unshift(positionSheets[options.elementPosition]); + } - return style({ - ...conCSS, - $nest: { - ...conCSS.$nest, - ['svg']: iconCSS(props) + if (options.elementSize) { + sheets.unshift(sizeSheets[options.elementSize]); } - }); -}; - -/** - * for setting the style directly on the svg node representing an icon - */ -export const iconStyleFlat = (props?: IIconStyle): string => { - if (!props || Object.keys(props).length === 0) { - return ''; + + return mergeSheets(sheets); + } + + /** + * Resolve a pure icon styleheet into a typestyle class + */ + function resolveStyleClass(stylesheet: ISheetPure): string { + return typestyleClass({ + ...stylesheet.container, + $nest: { + ...stylesheet.container?.$nest, + ['svg']: stylesheet.element + } + }); } - return style(iconCSS(props)); -}; + // cache style classes for builtin stylesheets + let _styleClassCache = new Map(); + + /** + * Get a typestyle class, given a set of icon styling props + */ + export function styleClass(props?: IProps): string { + if (!props || Object.keys(props).length === 0) { + // props is empty + return ''; + } + + let { + elementPosition, + elementSize, + stylesheet, + kind, + justify, + ...elementCSS + } = props; + + // DEPRECATED: alias kind => stylesheet + if (!stylesheet) { + stylesheet = kind; + } + + // DEPRECATED: alias justify => elementPosition + if (!elementPosition) { + elementPosition = justify; + } + + // add option args with defined values to overrides + const options = { + ...(elementPosition && { elementPosition }), + ...(elementSize && { elementSize }) + }; + + // try to look up the style class in the cache + const cacheable = + typeof stylesheet === 'string' && Object.keys(elementCSS).length === 0; + const cacheKey = cacheable + ? [stylesheet, elementPosition, elementSize].join(',') + : ''; + if (cacheable && _styleClassCache.has(cacheKey)) { + return _styleClassCache.get(cacheKey)!; + } + + // resolve kind to an array of sheets, then stick overrides on the end + const sheets = resolveSheet(stylesheet); + sheets.push({ element: elementCSS, options }); + + // apply style options/merge sheets, then convert to typestyle class + const cls = resolveStyleClass(applySheetOptions(sheets)); + + if (cacheable) { + // store in cache for later reuse + _styleClassCache.set(cacheKey, cls); + } + + return cls; + } +} diff --git a/packages/ui-components/stories/labicon-sizes.stories.tsx b/packages/ui-components/stories/labicon-sizes.stories.tsx new file mode 100644 index 000000000000..011802762abf --- /dev/null +++ b/packages/ui-components/stories/labicon-sizes.stories.tsx @@ -0,0 +1,21 @@ +/** + * Example story for styling an icon's size. + */ +// need this to avoid +// TS2686: 'React' refers to a UMD global, but the current file is a module. +import React from 'react'; + +import { clearIcon } from '../src'; + +import '@jupyterlab/application/style/index.css'; +import '@jupyterlab/theme-light-extension/style/index.css'; + +export default { + // component: LabIcon, + title: 'LabIcon sizing' +}; + +export const clearSmall = () => ; +export const clearNormal = () => ; +export const clearLarge = () => ; +export const clearXlarge = () => ; diff --git a/packages/ui-components/stories/labicon.stories.tsx b/packages/ui-components/stories/labicon.stories.tsx index fd8f32662e8b..d979a714ac3c 100644 --- a/packages/ui-components/stories/labicon.stories.tsx +++ b/packages/ui-components/stories/labicon.stories.tsx @@ -15,12 +15,12 @@ export default { title: 'LabIcon' }; -export const build = () => ; +export const build = () => ; export const running = () => ; export const html5 = () => (
    - +
    ); diff --git a/packages/ui-components/style/base.css b/packages/ui-components/style/base.css index 20f4cba25831..e2a3da10314f 100644 --- a/packages/ui-components/style/base.css +++ b/packages/ui-components/style/base.css @@ -114,7 +114,6 @@ input::placeholder { line-height: 14px; padding: 0 25px 0 10px; text-align: left; - vertical-align: middle; -moz-appearance: none; -webkit-appearance: none; } diff --git a/packages/ui-components/style/deprecated.css b/packages/ui-components/style/deprecated.css index a6c6acfee46b..ec4100d07b02 100644 --- a/packages/ui-components/style/deprecated.css +++ b/packages/ui-components/style/deprecated.css @@ -26,6 +26,7 @@ --jp-icon-check: url('icons/toolbar/check.svg'); --jp-icon-circle-empty: url('icons/toolbar/circle-empty.svg'); --jp-icon-circle: url('icons/toolbar/circle.svg'); + --jp-icon-clear: url('icons/toolbar/clear.svg'); --jp-icon-close: url('icons/toolbar/close.svg'); --jp-icon-console: url('icons/filetype/console.svg'); --jp-icon-copy: url('icons/toolbar/copy.svg'); @@ -122,6 +123,9 @@ .jp-CircleIcon { background-image: var(--jp-icon-circle); } +.jp-ClearIcon { + background-image: var(--jp-icon-clear); +} .jp-CloseIcon { background-image: var(--jp-icon-close); } diff --git a/packages/ui-components/style/deprecatedExtra.css b/packages/ui-components/style/deprecatedExtra.css index d701607e089a..bac4ece7ad86 100644 --- a/packages/ui-components/style/deprecatedExtra.css +++ b/packages/ui-components/style/deprecatedExtra.css @@ -8,6 +8,5 @@ */ :root { - --jp-icon-check-disabled: url('deprecated/check-disabled.svg'); --jp-icon-search-white: url('deprecated/search-white.svg'); } diff --git a/packages/ui-components/style/icons.css b/packages/ui-components/style/icons.css index f686c963a0ba..05697480c111 100644 --- a/packages/ui-components/style/icons.css +++ b/packages/ui-components/style/icons.css @@ -311,33 +311,3 @@ .jp-DragIcon { margin-right: 4px; } - -/* These are icons still in need of some cleanup */ - -/*.jp-CloseIcon {*/ -/* background-image: var(--jp-icon-close);*/ -/*}*/ - -/*.jp-ConsoleIcon {*/ -/* background-image: var(--jp-icon-console);*/ -/*}*/ - -/*.jp-DownloadIcon {*/ -/* background-image: var(--jp-icon-download);*/ -/*}*/ - -/*.jp-EditIcon {*/ -/* background-image: var(--jp-icon-edit);*/ -/*}*/ - -/*.jp-LinkIcon {*/ -/* background-image: var(--jp-icon-link);*/ -/*}*/ - -/*.jp-NewFolderIcon {*/ -/* background-image: var(--jp-icon-new-folder);*/ -/*}*/ - -/*.jp-UndoIcon {*/ -/* background-image: var(--jp-icon-undo);*/ -/*}*/ diff --git a/packages/ui-components/style/icons/toolbar/clear.svg b/packages/ui-components/style/icons/toolbar/clear.svg new file mode 100644 index 000000000000..e023e99c9728 --- /dev/null +++ b/packages/ui-components/style/icons/toolbar/clear.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/packages/ui-components/style/iconshover.css b/packages/ui-components/style/iconshover.css index 36b81713117b..5eacc7201df3 100644 --- a/packages/ui-components/style/iconshover.css +++ b/packages/ui-components/style/iconshover.css @@ -3,6 +3,10 @@ | Distributed under the terms of the Modified BSD License. |----------------------------------------------------------------------------*/ +.jp-icon-hoverShow:not(:hover) svg { + display: none !important; +} + /** * Support for hover colors for icons as inline SVG HTMLElements */ diff --git a/packages/vdom-extension/package.json b/packages/vdom-extension/package.json index db8d4e1ece8e..d686c5d8f463 100644 --- a/packages/vdom-extension/package.json +++ b/packages/vdom-extension/package.json @@ -39,6 +39,7 @@ "@jupyterlab/docregistry": "^2.0.0-rc.1", "@jupyterlab/notebook": "^2.0.0-rc.1", "@jupyterlab/rendermime": "^2.0.0-rc.1", + "@jupyterlab/ui-components": "^2.0.0-rc.2", "@jupyterlab/vdom": "^2.0.0-rc.1" }, "devDependencies": { diff --git a/packages/vdom-extension/src/index.ts b/packages/vdom-extension/src/index.ts index 8b009b2cf1cd..96afbe43469e 100644 --- a/packages/vdom-extension/src/index.ts +++ b/packages/vdom-extension/src/index.ts @@ -15,12 +15,9 @@ import { INotebookTracker } from '@jupyterlab/notebook'; import { IRenderMimeRegistry } from '@jupyterlab/rendermime'; -import { RenderedVDOM, IVDOMTracker } from '@jupyterlab/vdom'; +import { reactIcon } from '@jupyterlab/ui-components'; -/** - * The name for a VDOM icon. - */ -const ICON_NAME = 'react'; +import { RenderedVDOM, IVDOMTracker } from '@jupyterlab/vdom'; /** * The MIME type for VDOM. @@ -82,7 +79,7 @@ const plugin: JupyterFrontEndPlugin = { name: 'vdom', mimeTypes: [MIME_TYPE], extensions: ['.vdom', '.vdom.json'], - iconClass: ICON_NAME + icon: reactIcon }); const factory = new MimeDocumentFactory({ diff --git a/packages/vdom-extension/tsconfig.json b/packages/vdom-extension/tsconfig.json index f1e4e04186c5..4488938de3ce 100644 --- a/packages/vdom-extension/tsconfig.json +++ b/packages/vdom-extension/tsconfig.json @@ -21,6 +21,9 @@ { "path": "../rendermime" }, + { + "path": "../ui-components" + }, { "path": "../vdom" } diff --git a/packages/vdom/package.json b/packages/vdom/package.json index abe586f36a7d..89eb62b44167 100644 --- a/packages/vdom/package.json +++ b/packages/vdom/package.json @@ -40,7 +40,7 @@ "@jupyterlab/services": "^5.0.0-rc.1", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "@nteract/transform-vdom": "^4.0.3", "react": "~16.9.0", "react-dom": "~16.9.0" diff --git a/packages/vega5-extension/package.json b/packages/vega5-extension/package.json index c2c46ed76731..92947b950df0 100644 --- a/packages/vega5-extension/package.json +++ b/packages/vega5-extension/package.json @@ -36,7 +36,7 @@ "dependencies": { "@jupyterlab/rendermime-interfaces": "^2.0.0-rc.1", "@lumino/coreutils": "^1.4.2", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "vega": "^5.9.0", "vega-embed": "^6.2.1", "vega-lite": "^4.0.2" diff --git a/tests/package.json b/tests/package.json index d324d3bf6138..e5a2b1debe31 100644 --- a/tests/package.json +++ b/tests/package.json @@ -28,14 +28,14 @@ "@jupyterlab/terminal": "^2.0.0-rc.1", "@jupyterlab/testutils": "^2.0.0-rc.1", "@lumino/algorithm": "^1.2.3", - "@lumino/commands": "^1.9.2", + "@lumino/commands": "^1.10.1", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", + "@lumino/disposable": "^1.3.5", "@lumino/domutils": "^1.1.7", "@lumino/messaging": "^1.3.3", - "@lumino/signaling": "^1.3.4", - "@lumino/virtualdom": "^1.5.0", - "@lumino/widgets": "^1.10.2", + "@lumino/signaling": "^1.3.5", + "@lumino/virtualdom": "^1.6.1", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0", "expect.js": "~0.3.1", "json-to-html": "~0.1.2", diff --git a/tests/test-application/package.json b/tests/test-application/package.json index 20d2bc739202..3a8463e3fc9c 100644 --- a/tests/test-application/package.json +++ b/tests/test-application/package.json @@ -17,10 +17,10 @@ "@jupyterlab/statedb": "^2.0.0-rc.1", "@jupyterlab/testutils": "^2.0.0-rc.1", "@lumino/algorithm": "^1.2.3", - "@lumino/commands": "^1.9.2", + "@lumino/commands": "^1.10.1", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0", "jest": "^24.9.0", "jest-junit": "^10.0.0", diff --git a/tests/test-apputils/package.json b/tests/test-apputils/package.json index 5aabfc82fd28..91012247a3fe 100644 --- a/tests/test-apputils/package.json +++ b/tests/test-apputils/package.json @@ -16,11 +16,11 @@ "@jupyterlab/services": "^5.0.0-rc.1", "@jupyterlab/testutils": "^2.0.0-rc.1", "@lumino/algorithm": "^1.2.3", - "@lumino/commands": "^1.9.2", + "@lumino/commands": "^1.10.1", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/virtualdom": "^1.5.0", - "@lumino/widgets": "^1.10.2", + "@lumino/virtualdom": "^1.6.1", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0", "jest": "^24.9.0", "jest-junit": "^10.0.0", diff --git a/tests/test-cells/package.json b/tests/test-cells/package.json index c504953c309e..9b822644615f 100644 --- a/tests/test-cells/package.json +++ b/tests/test-cells/package.json @@ -22,7 +22,7 @@ "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0", "jest": "^24.9.0", "jest-junit": "^10.0.0", diff --git a/tests/test-codeeditor/package.json b/tests/test-codeeditor/package.json index b4e92c4dde0f..41761162a080 100644 --- a/tests/test-codeeditor/package.json +++ b/tests/test-codeeditor/package.json @@ -17,7 +17,7 @@ "@jupyterlab/observables": "^3.0.0-rc.1", "@jupyterlab/testutils": "^2.0.0-rc.1", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0", "jest": "^24.9.0", "jest-junit": "^10.0.0", diff --git a/tests/test-completer/package.json b/tests/test-completer/package.json index fe204d1b3495..167b2d2ab8e2 100644 --- a/tests/test-completer/package.json +++ b/tests/test-completer/package.json @@ -20,7 +20,7 @@ "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0", "jest": "^24.9.0", "jest-junit": "^10.0.0", diff --git a/tests/test-console/package.json b/tests/test-console/package.json index 29aa6624d0ea..52444aa73d42 100644 --- a/tests/test-console/package.json +++ b/tests/test-console/package.json @@ -25,8 +25,8 @@ "@jupyterlab/testutils": "^2.0.0-rc.1", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2", + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0" }, "devDependencies": { diff --git a/tests/test-coreutils/package.json b/tests/test-coreutils/package.json index 90c268d7217e..35a3c2ed97b3 100644 --- a/tests/test-coreutils/package.json +++ b/tests/test-coreutils/package.json @@ -14,7 +14,7 @@ "dependencies": { "@jupyterlab/coreutils": "^4.0.0-rc.1", "@jupyterlab/testutils": "^2.0.0-rc.1", - "@lumino/signaling": "^1.3.4", + "@lumino/signaling": "^1.3.5", "chai": "^4.2.0", "jest": "^24.9.0", "jest-junit": "^10.0.0", diff --git a/tests/test-csvviewer/package.json b/tests/test-csvviewer/package.json index fdacb46ba933..9374dcadf0e7 100644 --- a/tests/test-csvviewer/package.json +++ b/tests/test-csvviewer/package.json @@ -21,8 +21,8 @@ "@jupyterlab/services": "^5.0.0-rc.1", "@jupyterlab/testutils": "^2.0.0-rc.1", "@lumino/coreutils": "^1.4.2", - "@lumino/datagrid": "^0.4.0", - "@lumino/widgets": "^1.10.2", + "@lumino/datagrid": "^0.5.3", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0", "csv-spectrum": "~1.0.0", "simulate-event": "~1.4.0" diff --git a/tests/test-docmanager/package.json b/tests/test-docmanager/package.json index 1a2b38194cc7..7a6e28bf1d6a 100644 --- a/tests/test-docmanager/package.json +++ b/tests/test-docmanager/package.json @@ -22,7 +22,7 @@ "@jupyterlab/testutils": "^2.0.0-rc.1", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0" }, "devDependencies": { diff --git a/tests/test-docregistry/package.json b/tests/test-docregistry/package.json index cf14bc0d51e7..648b6693524b 100644 --- a/tests/test-docregistry/package.json +++ b/tests/test-docregistry/package.json @@ -19,9 +19,9 @@ "@jupyterlab/testutils": "^2.0.0-rc.1", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", + "@lumino/disposable": "^1.3.5", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0", "jest": "^24.9.0", "jest-junit": "^10.0.0", diff --git a/tests/test-filebrowser/package.json b/tests/test-filebrowser/package.json index 0b2a74495236..7f958af56f1d 100644 --- a/tests/test-filebrowser/package.json +++ b/tests/test-filebrowser/package.json @@ -26,7 +26,7 @@ "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0", "simulate-event": "~1.4.0" }, diff --git a/tests/test-fileeditor/package.json b/tests/test-fileeditor/package.json index 1f486ca8a69c..3341e8130f09 100644 --- a/tests/test-fileeditor/package.json +++ b/tests/test-fileeditor/package.json @@ -19,7 +19,7 @@ "@jupyterlab/testutils": "^2.0.0-rc.1", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0", "jest": "^24.9.0", "jest-junit": "^10.0.0", diff --git a/tests/test-imageviewer/package.json b/tests/test-imageviewer/package.json index d667901be82f..c723550e0afb 100644 --- a/tests/test-imageviewer/package.json +++ b/tests/test-imageviewer/package.json @@ -18,7 +18,7 @@ "@jupyterlab/testutils": "^2.0.0-rc.1", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0", "jest": "^24.9.0", "jest-junit": "^10.0.0", diff --git a/tests/test-inspector/package.json b/tests/test-inspector/package.json index f83a13a7d1e7..4bb5085702e1 100644 --- a/tests/test-inspector/package.json +++ b/tests/test-inspector/package.json @@ -14,8 +14,8 @@ "dependencies": { "@jupyterlab/inspector": "^2.0.0-rc.1", "@jupyterlab/testutils": "^2.0.0-rc.1", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2", + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0", "jest": "^24.9.0", "jest-junit": "^10.0.0", diff --git a/tests/test-logconsole/package.json b/tests/test-logconsole/package.json index 12b4f0869331..ed9ac33e5586 100644 --- a/tests/test-logconsole/package.json +++ b/tests/test-logconsole/package.json @@ -15,8 +15,8 @@ "@jupyterlab/logconsole": "^2.0.0-rc.1", "@jupyterlab/rendermime": "^2.0.0-rc.1", "@jupyterlab/testutils": "^2.0.0-rc.1", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2", + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1", "jest": "^24.9.0", "jest-junit": "^10.0.0", "ts-jest": "^24.2.0" diff --git a/tests/test-mainmenu/package.json b/tests/test-mainmenu/package.json index 243a874620ec..fb587b24809a 100644 --- a/tests/test-mainmenu/package.json +++ b/tests/test-mainmenu/package.json @@ -16,8 +16,8 @@ "@jupyterlab/mainmenu": "^2.0.0-rc.1", "@jupyterlab/testutils": "^2.0.0-rc.1", "@lumino/algorithm": "^1.2.3", - "@lumino/commands": "^1.9.2", - "@lumino/widgets": "^1.10.2", + "@lumino/commands": "^1.10.1", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0", "jest": "^24.9.0", "jest-junit": "^10.0.0", diff --git a/tests/test-notebook/package.json b/tests/test-notebook/package.json index ffb7cf9fc746..45ff5d501c19 100644 --- a/tests/test-notebook/package.json +++ b/tests/test-notebook/package.json @@ -29,7 +29,7 @@ "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0", "simulate-event": "~1.4.0" }, diff --git a/tests/test-outputarea/package.json b/tests/test-outputarea/package.json index 861453f52f67..f25a86ac6782 100644 --- a/tests/test-outputarea/package.json +++ b/tests/test-outputarea/package.json @@ -18,7 +18,7 @@ "@jupyterlab/services": "^5.0.0-rc.1", "@jupyterlab/testutils": "^2.0.0-rc.1", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0", "jest": "^24.9.0", "jest-junit": "^10.0.0", diff --git a/tests/test-rendermime/package.json b/tests/test-rendermime/package.json index fa09cc64e7cf..cc87e86a310a 100644 --- a/tests/test-rendermime/package.json +++ b/tests/test-rendermime/package.json @@ -25,7 +25,7 @@ "@jupyterlab/testutils": "^2.0.0-rc.1", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0" }, "devDependencies": { diff --git a/tests/test-services/package.json b/tests/test-services/package.json index ab0b91dd5f5f..3ad777e6d5f3 100644 --- a/tests/test-services/package.json +++ b/tests/test-services/package.json @@ -17,7 +17,7 @@ "@jupyterlab/testutils": "^2.0.0-rc.1", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", - "@lumino/signaling": "^1.3.4", + "@lumino/signaling": "^1.3.5", "chai": "^4.2.0", "jest": "^24.9.0", "jest-junit": "^10.0.0", diff --git a/tests/test-statedb/package.json b/tests/test-statedb/package.json index cba1ab918781..d0c4f247d2b0 100644 --- a/tests/test-statedb/package.json +++ b/tests/test-statedb/package.json @@ -15,8 +15,8 @@ "@jupyterlab/statedb": "^2.0.0-rc.1", "@jupyterlab/testutils": "^2.0.0-rc.1", "@lumino/coreutils": "^1.4.2", - "@lumino/disposable": "^1.3.4", - "@lumino/signaling": "^1.3.4", + "@lumino/disposable": "^1.3.5", + "@lumino/signaling": "^1.3.5", "chai": "^4.2.0", "jest": "^24.9.0", "jest-junit": "^10.0.0", diff --git a/tests/test-statusbar/package.json b/tests/test-statusbar/package.json index d89b1eff766f..3a2683883e54 100644 --- a/tests/test-statusbar/package.json +++ b/tests/test-statusbar/package.json @@ -14,8 +14,8 @@ "dependencies": { "@jupyterlab/statusbar": "^2.0.0-rc.1", "@jupyterlab/testutils": "^2.0.0-rc.1", - "@lumino/signaling": "^1.3.4", - "@lumino/widgets": "^1.10.2", + "@lumino/signaling": "^1.3.5", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0", "jest": "^24.9.0", "ts-jest": "^24.2.0" diff --git a/tests/test-terminal/package.json b/tests/test-terminal/package.json index 7837894f6437..eeabf54d829d 100644 --- a/tests/test-terminal/package.json +++ b/tests/test-terminal/package.json @@ -20,7 +20,7 @@ "@jupyterlab/terminal": "^2.0.0-rc.1", "@jupyterlab/testutils": "^2.0.0-rc.1", "@lumino/messaging": "^1.3.3", - "@lumino/widgets": "^1.10.2", + "@lumino/widgets": "^1.11.1", "chai": "^4.2.0" }, "devDependencies": { diff --git a/testutils/package.json b/testutils/package.json index 2b5ccec8a893..deea2816d883 100644 --- a/testutils/package.json +++ b/testutils/package.json @@ -41,7 +41,7 @@ "@jupyterlab/rendermime": "^2.0.0-rc.1", "@jupyterlab/services": "^5.0.0-rc.1", "@lumino/coreutils": "^1.4.2", - "@lumino/signaling": "^1.3.4", + "@lumino/signaling": "^1.3.5", "fs-extra": "^8.1.0", "identity-obj-proxy": "^3.0.0", "jest-raw-loader": "^1.0.1", diff --git a/tslint.json b/tslint.json index 95d2e66b6e87..4434a32c5956 100644 --- a/tslint.json +++ b/tslint.json @@ -117,7 +117,11 @@ "jupyterlab/**/*.ts", "packages/ui-components/src/icon/iconimports.ts", "node_modules/**/*.ts", - "node_modules/**/*.tsx" + "node_modules/**/*.tsx", + + ".idea/", + ".history/", + ".vscode/" ] } } diff --git a/yarn.lock b/yarn.lock index fe51e8b775d9..e0b0de5ed9a2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1966,14 +1966,14 @@ resolved "https://registry.yarnpkg.com/@lumino/algorithm/-/algorithm-1.2.3.tgz#4ab9883d7e9a5b1845372a752dcaee2a35a770c6" integrity sha512-XBJ/homcm7o8Y9G6MzYvf0FF7SVqUCzvkIO01G2mZhCOnkZZhZ9c4uNOcE2VjSHNxHv2WU0l7d8rdhyKhmet+A== -"@lumino/application@^1.8.2": - version "1.8.2" - resolved "https://registry.yarnpkg.com/@lumino/application/-/application-1.8.2.tgz#6b9d2418e27e733ca54be1bc47a406a15d3ba47f" - integrity sha512-67JQBJc9gGBo9vzQiXvPGXPoTnyE/CUQ45A/E8wqLEKA+i55Q7k0ogDcDZ4O1JdGVXSUa3mVlZbS5UWLOMy06Q== +"@lumino/application@^1.8.4": + version "1.8.4" + resolved "https://registry.yarnpkg.com/@lumino/application/-/application-1.8.4.tgz#63a26c4ecf8128bf0123739e37922415016f970a" + integrity sha512-f+CgggJ/9jopHT6db76+BjsiPBHjv6fgReU/vKtRGg8rsDjNRDefoWd9bWGWRuPiGymBY8c/+9Kyq5v0UDs5vg== dependencies: - "@lumino/commands" "^1.9.2" + "@lumino/commands" "^1.10.1" "@lumino/coreutils" "^1.4.2" - "@lumino/widgets" "^1.10.2" + "@lumino/widgets" "^1.11.1" "@lumino/collections@^1.2.3": version "1.2.3" @@ -1982,58 +1982,59 @@ dependencies: "@lumino/algorithm" "^1.2.3" -"@lumino/commands@^1.9.2": - version "1.9.2" - resolved "https://registry.yarnpkg.com/@lumino/commands/-/commands-1.9.2.tgz#91470db29b93f7b27906bd708f97b4ad6cb5d611" - integrity sha512-VpvKeGtZHKz+VHUIF29kntk0/Nf2TvFzHW4qD+vS8v6S4OQO73l1dQciEr4wLs5zv6T7vQn2O+d0B+trDJVwcQ== +"@lumino/commands@^1.10.1": + version "1.10.1" + resolved "https://registry.yarnpkg.com/@lumino/commands/-/commands-1.10.1.tgz#149186d23cc48215f9f7f6515321f8871797a444" + integrity sha512-HGtXtqKD1WZJszJ42u2DyM3sgxrLal66IoHSJjbn2ygcEVCKDK73NSzoaQtXFtiissMedzKl8aIRXB3uyeEOlw== dependencies: "@lumino/algorithm" "^1.2.3" "@lumino/coreutils" "^1.4.2" - "@lumino/disposable" "^1.3.4" + "@lumino/disposable" "^1.3.5" "@lumino/domutils" "^1.1.7" "@lumino/keyboard" "^1.1.6" - "@lumino/signaling" "^1.3.4" + "@lumino/signaling" "^1.3.5" + "@lumino/virtualdom" "^1.6.1" "@lumino/coreutils@^1.4.2": version "1.4.2" resolved "https://registry.yarnpkg.com/@lumino/coreutils/-/coreutils-1.4.2.tgz#44cd3d55bb692e876c792f1ecc0df3daa1de63e9" integrity sha512-SmQ4YDANe25rZd0bLoW7LVAHmgySjkrJmyNPnPW0GrpBt2u4/6D+EQJ8PCCMNWuJvrljBCdlmgOFsT38qYhfcw== -"@lumino/datagrid@^0.4.0": - version "0.4.0" - resolved "https://registry.yarnpkg.com/@lumino/datagrid/-/datagrid-0.4.0.tgz#6f914514996c242d568e8bd44a58f9100ea903ae" - integrity sha512-fkEV9j3Cmh9rBmykVHerhN0clruxdb9tQ8RNiL3NRQ5cxj6dcHjWUPM9g6WoW8ARvdc0dPqByFm4FaRILKlUCw== +"@lumino/datagrid@^0.5.3": + version "0.5.3" + resolved "https://registry.yarnpkg.com/@lumino/datagrid/-/datagrid-0.5.3.tgz#62ac692a199e033d811cc2229fa979b01c058889" + integrity sha512-5W86WnbZKrX/P+WkXMPRkToM0yISjmKu2ewJ2CtyKw+OsGsBcgshM147k4wxDskAtIv/+wsgdth7sIdzx6OW+A== dependencies: "@lumino/algorithm" "^1.2.3" "@lumino/coreutils" "^1.4.2" - "@lumino/disposable" "^1.3.4" + "@lumino/disposable" "^1.3.5" "@lumino/domutils" "^1.1.7" - "@lumino/dragdrop" "^1.5.0" + "@lumino/dragdrop" "^1.5.1" "@lumino/keyboard" "^1.1.6" "@lumino/messaging" "^1.3.3" - "@lumino/signaling" "^1.3.4" - "@lumino/widgets" "^1.10.0" + "@lumino/signaling" "^1.3.5" + "@lumino/widgets" "^1.11.1" -"@lumino/disposable@^1.3.4": - version "1.3.4" - resolved "https://registry.yarnpkg.com/@lumino/disposable/-/disposable-1.3.4.tgz#fc10f61aca1925b99b08810165d46c91de84ac04" - integrity sha512-SzePyYNfR9khvjjHrieGnL2b3W7l0X7Bn2Il5VJ3R017aY5DTLr9qOBrgmCXkjmKiYPR65oLkUqPCqSTbAXb0w== +"@lumino/disposable@^1.3.5": + version "1.3.5" + resolved "https://registry.yarnpkg.com/@lumino/disposable/-/disposable-1.3.5.tgz#3562ca063117fd2a0735df170f51e41620fa21d0" + integrity sha512-IWDAd+nysBnwLhEtW7M62PVk84OEex9OEktZsS6V+19n/o8/Rw4ccL0pt0GFby01CsVK0YcELDoDaMUZsMiAmA== dependencies: "@lumino/algorithm" "^1.2.3" - "@lumino/signaling" "^1.3.4" + "@lumino/signaling" "^1.3.5" "@lumino/domutils@^1.1.7": version "1.1.7" resolved "https://registry.yarnpkg.com/@lumino/domutils/-/domutils-1.1.7.tgz#9cc16cba0c1e8f31fcb734879dec050505925b16" integrity sha512-NPysY8XfpCvLNvDe+z1caIUPxOLXWRPQMUAjOj/EhggRyXadan6Lm/5uO6M9S5gW/v9QUXT4+1Sxe3WXz0nRCA== -"@lumino/dragdrop@^1.5.0": - version "1.5.0" - resolved "https://registry.yarnpkg.com/@lumino/dragdrop/-/dragdrop-1.5.0.tgz#426f0efc284455289e97d592249bfee0d87ae093" - integrity sha512-jyLhRwGguM12LNjNJ+Cb78/WGqwAiNFrQuPr/RyxInbetJsTrhj27K9+OYVLLu3vU7CdnsLHlY1h3b4py63mUQ== +"@lumino/dragdrop@^1.5.1": + version "1.5.1" + resolved "https://registry.yarnpkg.com/@lumino/dragdrop/-/dragdrop-1.5.1.tgz#502305183d430693edc112f7c234a3d9f2d89f02" + integrity sha512-MFg/hy6hHdPwBZypBue5mlrBzjoNrtBQzzJW+kbM5ftAOvS99ZRgyMMlMQcbsHd+6yib9NOQ64Hd8P8uZEWTdw== dependencies: "@lumino/coreutils" "^1.4.2" - "@lumino/disposable" "^1.3.4" + "@lumino/disposable" "^1.3.5" "@lumino/keyboard@^1.1.6": version "1.1.6" @@ -2048,50 +2049,50 @@ "@lumino/algorithm" "^1.2.3" "@lumino/collections" "^1.2.3" -"@lumino/polling@^1.0.3": - version "1.0.3" - resolved "https://registry.yarnpkg.com/@lumino/polling/-/polling-1.0.3.tgz#f66b203074dc323dd0a9e10a3e1851ba25891a18" - integrity sha512-L6dHrUjrNbACWBIsmEfiko0Js28HtCexupoSSrgbDyx9gmsmZ0sAgpacbpRbiOzFUTvHeq+1PLbxYffKvQqxGw== +"@lumino/polling@^1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@lumino/polling/-/polling-1.0.4.tgz#85f956933fa63c47edf808c141cdb9a7a1a49f4c" + integrity sha512-9OYIDTohToj6SLrxOr+FbeyPvirBU/r53FgmPxulcDgUVnVk4tqTSLIJAUu3mjJd9hnmZZqpSn9ppyjQAo3qSg== dependencies: "@lumino/coreutils" "^1.4.2" - "@lumino/disposable" "^1.3.4" - "@lumino/signaling" "^1.3.4" + "@lumino/disposable" "^1.3.5" + "@lumino/signaling" "^1.3.5" "@lumino/properties@^1.1.6": version "1.1.6" resolved "https://registry.yarnpkg.com/@lumino/properties/-/properties-1.1.6.tgz#367538d63453e99e8c94e5559748a0713d9874ac" integrity sha512-QnZa1IB7sr4Tawf0OKvwgZAptxDRK7DUAMJ71zijXNXH4FlxyThzOWXef51HHFsISKYa8Rn3rysOwtc62XkmXw== -"@lumino/signaling@^1.3.4": - version "1.3.4" - resolved "https://registry.yarnpkg.com/@lumino/signaling/-/signaling-1.3.4.tgz#878d2525531f865ecbbc71e225e5c2dac09f7d0a" - integrity sha512-SESCQIsvmC8zSGzU+shFm9f7HgFWeQPQP/b6Mp7/VM6utjjt6FLAnju9cIAWKxVqNafc9lMbjHh5YPpSvOI/fg== +"@lumino/signaling@^1.3.5": + version "1.3.5" + resolved "https://registry.yarnpkg.com/@lumino/signaling/-/signaling-1.3.5.tgz#21d77cf201c429f9824e04c19f0cc04027f963c8" + integrity sha512-6jniKrLrJOXKJmaJyU7hr6PBzE4GJ5Wms5hc/yzNKKDBxGSEPdtNJlW3wTNUuSTTtF/9ItN8A8ZC/G0yIu53Tw== dependencies: "@lumino/algorithm" "^1.2.3" -"@lumino/virtualdom@^1.5.0": - version "1.5.0" - resolved "https://registry.yarnpkg.com/@lumino/virtualdom/-/virtualdom-1.5.0.tgz#e6875ebe17b4ab650e57d6d0e72eaa4c9434ac78" - integrity sha512-PmDaAn86IKYOPKXi/n8UqUxAW6WNETLmhPJNaADnYVDBedM2xBJE2haA7COCpGRDQAy5mFRv7LIIyT9erHLCyw== +"@lumino/virtualdom@^1.6.1": + version "1.6.1" + resolved "https://registry.yarnpkg.com/@lumino/virtualdom/-/virtualdom-1.6.1.tgz#7f190091e065e7e4e4814836ed5b293aa8359b2d" + integrity sha512-+KdzSw8TCPwvK6qhZr4xTyp6HymvEb2Da0xPdi4RsVUNhYf2gBI03uidXHx76Vx5OIbEgCn1B+0srxvm2ZbWsQ== dependencies: "@lumino/algorithm" "^1.2.3" -"@lumino/widgets@^1.10.0", "@lumino/widgets@^1.10.2": - version "1.10.2" - resolved "https://registry.yarnpkg.com/@lumino/widgets/-/widgets-1.10.2.tgz#e25bad3274d91b6ae633e7213cc6c8d89201197a" - integrity sha512-2P4gOcFa8IlnAoaCFoH0i8egsYsOfzXQYECDQbr864+pfI2O71M/gjGN0mzVLRsipLGpU7i6EhGzE2KyCAyJQQ== +"@lumino/widgets@^1.11.1": + version "1.11.1" + resolved "https://registry.yarnpkg.com/@lumino/widgets/-/widgets-1.11.1.tgz#2aba526f1dba7cb004786f25b3bc4a58bd8fe14d" + integrity sha512-f4QDe6lVNPcjL8Vb20BiP0gzbT1rx0/1Hc719u5oW9c0Z/xrXMWwNhnb/zYM/kBBVBe3omLmCfJOiNuE0oZl0A== dependencies: "@lumino/algorithm" "^1.2.3" - "@lumino/commands" "^1.9.2" + "@lumino/commands" "^1.10.1" "@lumino/coreutils" "^1.4.2" - "@lumino/disposable" "^1.3.4" + "@lumino/disposable" "^1.3.5" "@lumino/domutils" "^1.1.7" - "@lumino/dragdrop" "^1.5.0" + "@lumino/dragdrop" "^1.5.1" "@lumino/keyboard" "^1.1.6" "@lumino/messaging" "^1.3.3" "@lumino/properties" "^1.1.6" - "@lumino/signaling" "^1.3.4" - "@lumino/virtualdom" "^1.5.0" + "@lumino/signaling" "^1.3.5" + "@lumino/virtualdom" "^1.6.1" "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1"