From c47c998b859df63cd1ca15f58b59a6fa9c8fb31f Mon Sep 17 00:00:00 2001 From: telamonian Date: Sat, 8 Feb 2020 20:55:37 -0500 Subject: [PATCH 01/47] fixed react icon for vdom filetype --- packages/vdom-extension/package.json | 1 + packages/vdom-extension/src/index.ts | 9 +++------ 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/vdom-extension/package.json b/packages/vdom-extension/package.json index db8d4e1ece8e..15f48438679d 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.1", "@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({ From a0b1522cc132dfa91abfa95c8596810ed4ad7bb9 Mon Sep 17 00:00:00 2001 From: telamonian Date: Sat, 8 Feb 2020 22:33:11 -0500 Subject: [PATCH 02/47] migrated commands/menu items in filebrowser-extension to LabIcon --- packages/filebrowser-extension/src/index.ts | 47 ++++++++++++++------- packages/filebrowser/style/base.css | 44 ------------------- 2 files changed, 31 insertions(+), 60 deletions(-) diff --git a/packages/filebrowser-extension/src/index.ts b/packages/filebrowser-extension/src/index.ts index dad08bcfcdfc..5bf53524ac65 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'; @@ -393,7 +408,7 @@ function activateShareFile( isVisible: () => !!tracker.currentWidget && toArray(tracker.currentWidget.selectedItems()).length === 1, - iconClass: 'jp-MaterialIcon jp-LinkIcon', + iconRenderer: linkIcon, label: 'Copy Shareable Link' }); } @@ -421,7 +436,7 @@ function addCommands( return widget.delete(); } }, - iconClass: 'jp-MaterialIcon jp-CloseIcon', + iconRenderer: closeIcon, label: 'Delete', mnemonic: 0 }); @@ -434,7 +449,7 @@ function addCommands( return widget.copy(); } }, - iconClass: 'jp-MaterialIcon jp-CopyIcon', + iconRenderer: copyIcon, label: 'Copy', mnemonic: 0 }); @@ -447,7 +462,7 @@ function addCommands( return widget.cut(); } }, - iconClass: 'jp-MaterialIcon jp-CutIcon', + iconRenderer: cutIcon, label: 'Cut' }); @@ -459,7 +474,7 @@ function addCommands( return widget.download(); } }, - iconClass: 'jp-MaterialIcon jp-DownloadIcon', + iconRenderer: downloadIcon, label: 'Download' }); @@ -471,7 +486,7 @@ function addCommands( return widget.duplicate(); } }, - iconClass: 'jp-MaterialIcon jp-CopyIcon', + iconRenderer: copyIcon, label: 'Duplicate' }); @@ -620,7 +635,7 @@ function addCommands( ) ); }, - iconClass: 'jp-MaterialIcon jp-AddIcon', + iconRenderer: addIcon, label: 'Open in New Browser Tab', mnemonic: 0 }); @@ -638,7 +653,7 @@ function addCommands( Clipboard.copyToSystem(url); }); }, - iconClass: 'jp-MaterialIcon jp-CopyIcon', + iconRenderer: copyIcon, label: 'Copy Download Link', mnemonic: 0 }); @@ -651,7 +666,7 @@ function addCommands( return widget.paste(); } }, - iconClass: 'jp-MaterialIcon jp-PasteIcon', + iconRenderer: pasteIcon, label: 'Paste', mnemonic: 0 }); @@ -664,7 +679,7 @@ function addCommands( return widget.createNewDirectory(); } }, - iconClass: 'jp-MaterialIcon jp-NewFolderIcon', + iconRenderer: newFolderIcon, label: 'New Folder' }); @@ -679,7 +694,7 @@ function addCommands( ext: 'txt' }); }, - iconClass: 'jp-MaterialIcon jp-TextEditorIcon', + iconRenderer: textEditorIcon, label: 'New File' }); @@ -694,7 +709,7 @@ function addCommands( ext: 'md' }); }, - iconClass: 'jp-MaterialIcon jp-MarkdownIcon', + iconRenderer: markdownIcon, label: 'New Markdown File' }); @@ -706,7 +721,7 @@ function addCommands( return widget.rename(); } }, - iconClass: 'jp-MaterialIcon jp-EditIcon', + iconRenderer: editIcon, label: 'Rename', mnemonic: 0 }); @@ -727,7 +742,7 @@ function addCommands( isVisible: () => !!tracker.currentWidget && tracker.currentWidget.selectedItems().next !== undefined, - iconClass: 'jp-MaterialIcon jp-FileIcon', + iconRenderer: fileIcon, label: 'Copy Path' }); @@ -769,7 +784,7 @@ function addCommands( return widget.shutdownKernels(); } }, - iconClass: 'jp-MaterialIcon jp-StopIcon', + iconRenderer: stopIcon, label: 'Shut Down Kernel' }); 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); From 0d30a6ce67f346b7f70ae94a041253976070989d Mon Sep 17 00:00:00 2001 From: telamonian Date: Sun, 9 Feb 2020 03:52:22 -0500 Subject: [PATCH 03/47] integrity --- packages/vdom-extension/tsconfig.json | 3 +++ 1 file changed, 3 insertions(+) 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" } From fbc97bd8a8b9db126a68552844b1cbcaf1eee145 Mon Sep 17 00:00:00 2001 From: telamonian Date: Sun, 9 Feb 2020 04:00:57 -0500 Subject: [PATCH 04/47] filebrowser-extension: all icons now LabIcon, .iconRenderer => .icon fixes needed: - menu icon styling - open with submenu icons --- packages/filebrowser-extension/src/index.ts | 36 ++++++++++----------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/filebrowser-extension/src/index.ts b/packages/filebrowser-extension/src/index.ts index 5bf53524ac65..4d9e4f57d27b 100644 --- a/packages/filebrowser-extension/src/index.ts +++ b/packages/filebrowser-extension/src/index.ts @@ -408,7 +408,7 @@ function activateShareFile( isVisible: () => !!tracker.currentWidget && toArray(tracker.currentWidget.selectedItems()).length === 1, - iconRenderer: linkIcon, + icon: linkIcon, label: 'Copy Shareable Link' }); } @@ -436,7 +436,7 @@ function addCommands( return widget.delete(); } }, - iconRenderer: closeIcon, + icon: closeIcon, label: 'Delete', mnemonic: 0 }); @@ -449,7 +449,7 @@ function addCommands( return widget.copy(); } }, - iconRenderer: copyIcon, + icon: copyIcon, label: 'Copy', mnemonic: 0 }); @@ -462,7 +462,7 @@ function addCommands( return widget.cut(); } }, - iconRenderer: cutIcon, + icon: cutIcon, label: 'Cut' }); @@ -474,7 +474,7 @@ function addCommands( return widget.download(); } }, - iconRenderer: downloadIcon, + icon: downloadIcon, label: 'Download' }); @@ -486,7 +486,7 @@ function addCommands( return widget.duplicate(); } }, - iconRenderer: copyIcon, + icon: copyIcon, label: 'Duplicate' }); @@ -601,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; } else { - return 'jp-MaterialIcon jp-FolderIcon'; + return folderIcon; } }, label: args => (args['label'] || args['factory'] || 'Open') as string, @@ -635,7 +635,7 @@ function addCommands( ) ); }, - iconRenderer: addIcon, + icon: addIcon, label: 'Open in New Browser Tab', mnemonic: 0 }); @@ -653,7 +653,7 @@ function addCommands( Clipboard.copyToSystem(url); }); }, - iconRenderer: copyIcon, + icon: copyIcon, label: 'Copy Download Link', mnemonic: 0 }); @@ -666,7 +666,7 @@ function addCommands( return widget.paste(); } }, - iconRenderer: pasteIcon, + icon: pasteIcon, label: 'Paste', mnemonic: 0 }); @@ -679,7 +679,7 @@ function addCommands( return widget.createNewDirectory(); } }, - iconRenderer: newFolderIcon, + icon: newFolderIcon, label: 'New Folder' }); @@ -694,7 +694,7 @@ function addCommands( ext: 'txt' }); }, - iconRenderer: textEditorIcon, + icon: textEditorIcon, label: 'New File' }); @@ -709,7 +709,7 @@ function addCommands( ext: 'md' }); }, - iconRenderer: markdownIcon, + icon: markdownIcon, label: 'New Markdown File' }); @@ -721,7 +721,7 @@ function addCommands( return widget.rename(); } }, - iconRenderer: editIcon, + icon: editIcon, label: 'Rename', mnemonic: 0 }); @@ -742,7 +742,7 @@ function addCommands( isVisible: () => !!tracker.currentWidget && tracker.currentWidget.selectedItems().next !== undefined, - iconRenderer: fileIcon, + icon: fileIcon, label: 'Copy Path' }); @@ -784,7 +784,7 @@ function addCommands( return widget.shutdownKernels(); } }, - iconRenderer: stopIcon, + icon: stopIcon, label: 'Shut Down Kernel' }); From 3ef132b72ef2859e976c02a6bc0f6747d2547fdd Mon Sep 17 00:00:00 2001 From: telamonian Date: Sun, 9 Feb 2020 04:04:55 -0500 Subject: [PATCH 05/47] notebook-extension: all icons now LabIcon, .iconRenderer => .icon --- packages/notebook-extension/src/index.ts | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) 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:'; From 7f0423698e4a919a0f1fef16ff0486d1db1382ec Mon Sep 17 00:00:00 2001 From: telamonian Date: Mon, 10 Feb 2020 06:54:45 -0500 Subject: [PATCH 06/47] terminal-extension: all icons now LabIcon, .iconRenderer => .icon --- packages/terminal-extension/src/index.ts | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) 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 }); From af6053e8ff60bfc6fce786b902991677b56e0900 Mon Sep 17 00:00:00 2001 From: telamonian Date: Mon, 10 Feb 2020 07:08:21 -0500 Subject: [PATCH 07/47] migrated all refs to deprecated title.iconRenderer => title.icon --- packages/application-extension/src/index.tsx | 2 +- packages/application/src/shell.ts | 8 ++++---- packages/apputils-extension/src/palette.ts | 4 ++-- packages/apputils/src/mainareawidget.ts | 4 ++-- packages/console/src/panel.ts | 2 +- packages/csvviewer-extension/src/index.ts | 4 ++-- packages/docregistry/src/mimedocument.ts | 2 +- packages/extensionmanager-extension/src/index.ts | 2 +- packages/filebrowser-extension/src/index.ts | 2 +- packages/fileeditor/src/widget.ts | 2 +- packages/htmlviewer-extension/src/index.tsx | 2 +- packages/imageviewer-extension/src/index.ts | 2 +- packages/launcher-extension/src/index.ts | 2 +- packages/logconsole-extension/src/index.tsx | 2 +- packages/markdownviewer/src/widget.ts | 2 +- packages/running-extension/src/index.ts | 2 +- packages/settingeditor-extension/src/index.ts | 2 +- packages/tabmanager-extension/src/index.ts | 2 +- 18 files changed, 24 insertions(+), 24 deletions(-) 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/src/shell.ts b/packages/application/src/shell.ts index 6d73229130d0..edd99aca267b 100644 --- a/packages/application/src/shell.ts +++ b/packages/application/src/shell.ts @@ -772,8 +772,8 @@ 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) { + // set an appropriate style class for the icon + if (title.icon && typeof title.icon !== 'string') { title.iconClass = LabIcon.UNSTABLE_style({ className: title.iconClass, justify: 'center', @@ -1184,8 +1184,8 @@ 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) { + // set an appropriate style class for the icon + if (title.icon && typeof title.icon !== 'string') { title.iconClass = LabIcon.UNSTABLE_style({ className: title.iconClass, justify: 'center', diff --git a/packages/apputils-extension/src/palette.ts b/packages/apputils-extension/src/palette.ts index 453df5e76901..8c5cf1fdabdc 100644 --- a/packages/apputils-extension/src/palette.ts +++ b/packages/apputils-extension/src/palette.ts @@ -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'; } @@ -143,7 +143,7 @@ namespace Private { if (!palette) { palette = new CommandPalette({ commands: app.commands }); palette.id = 'command-palette'; - palette.title.iconRenderer = paletteIcon; + palette.title.icon = paletteIcon; palette.title.label = 'Commands'; } 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/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/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/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/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/filebrowser-extension/src/index.ts b/packages/filebrowser-extension/src/index.ts index 4d9e4f57d27b..8a875d972e1d 100644 --- a/packages/filebrowser-extension/src/index.ts +++ b/packages/filebrowser-extension/src/index.ts @@ -308,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( 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/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/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/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/logconsole-extension/src/index.tsx b/packages/logconsole-extension/src/index.tsx index bb7d182e6fc4..cef4060352fe 100644 --- a/packages/logconsole-extension/src/index.tsx +++ b/packages/logconsole-extension/src/index.tsx @@ -144,8 +144,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, 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/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/settingeditor-extension/src/index.ts b/packages/settingeditor-extension/src/index.ts index 128217657226..dc7dd101fe99 100644 --- a/packages/settingeditor-extension/src/index.ts +++ b/packages/settingeditor-extension/src/index.ts @@ -132,8 +132,8 @@ function activate( }); editor.id = namespace; + editor.title.icon = settingsIcon; editor.title.label = 'Settings'; - editor.title.iconRenderer = settingsIcon; let main = new MainAreaWidget({ content: editor }); void tracker.add(main); 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 }); From 6b5a6c867c41fec2fac7a005e75a4b8c490fb458 Mon Sep 17 00:00:00 2001 From: telamonian Date: Mon, 10 Feb 2020 17:10:31 -0500 Subject: [PATCH 08/47] add LabIcon.renderer method to allow for binding props/styles to icons - also fixed up rendering of iconLabel passed in from lumino --- packages/ui-components/src/icon/labicon.tsx | 114 ++++++++++++-------- 1 file changed, 72 insertions(+), 42 deletions(-) diff --git a/packages/ui-components/src/icon/labicon.tsx b/packages/ui-components/src/icon/labicon.tsx index 5bf27584e2eb..d7ec80a1931d 100644 --- a/packages/ui-components/src/icon/labicon.tsx +++ b/packages/ui-components/src/icon/labicon.tsx @@ -299,20 +299,16 @@ 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(); + this._className = Private.nameToClassName(name); + this._renderer = new rendererClass(this); + this._rendererClass = rendererClass; + + // 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 @@ -392,6 +388,22 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { return ret; } + render(container: HTMLElement, options?: LabIcon.IRendererOptions): void { + this._renderer.render(container, options); + } + + /** + * Get an instance of this icon's Renderer with optional bound props + * + * @param optional icon/style props (same as args for .element + * and .react methods). These will be bound to the resulting Renderer + * + * @returns a Renderer that wraps this LabIcon instance + */ + renderer(props?: LabIcon.IProps) { + return new this._rendererClass(this, { props }); + } + get svgstr() { return this._svgstr; } @@ -418,7 +430,13 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { this._svgReplaced.emit(); } - protected _initReact() { + unrender(container: HTMLElement, options?: LabIcon.IRendererOptions): void { + if (this._renderer.unrender) { + this._renderer.unrender(container, options); + } + } + + protected _initReact(displayName: string) { const component = React.forwardRef( ( { @@ -486,10 +504,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 @@ -545,21 +579,13 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { */ readonly react: LabIcon.IReact; - readonly render: ( - container: HTMLElement, - options?: LabIcon.IRendererOptions - ) => void; - readonly unrender: (container: HTMLElement) => void; - protected _className: string; protected _loading: boolean; + protected _renderer: LabIcon.Renderer; + protected _rendererClass: typeof LabIcon.Renderer; 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 = {}; } /** @@ -605,6 +631,9 @@ export namespace LabIcon { * constructor */ export interface IOptions extends IIcon, Partial { + /** + * @deprecated does nothing + */ rendererClass?: typeof Renderer; } @@ -686,14 +715,12 @@ export namespace LabIcon { export class Renderer implements VirtualElement.IRenderer { constructor( protected _icon: LabIcon, - protected _rendererOptions: IRendererOptions = {} + 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 {} + render(container: HTMLElement, options?: IRendererOptions): void {} + unrender?(container: HTMLElement, options?: IRendererOptions): void; } /** @@ -701,20 +728,20 @@ export namespace LabIcon { * 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'); + render(container: HTMLElement, options?: IRendererOptions): void { + let label = options?.children?.[0]; + // narrow type of label + if (typeof label !== 'string') { + label = undefined; + } - // TODO: decide how to implement rendering of passed in child virtual nodes this._icon.element({ container, - ...this._rendererOptions.props, - ..._options.props + label, + ...this._rendererOptions?.props, + ...options?.props }); } - - // tslint:disable-next-line:no-empty - unrender(container: HTMLElement): void {} } /** @@ -722,15 +749,18 @@ export namespace LabIcon { * 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'); + render(container: HTMLElement, options?: IRendererOptions): void { + let label = options?.children?.[0]; + // narrow type of label + if (typeof label !== 'string') { + label = undefined; + } - // TODO: decide how to implement rendering of passed in child virtual nodes return ReactDOM.render( , container ); From cd74323a418b7435b45664c4eff73801bd44f1be Mon Sep 17 00:00:00 2001 From: telamonian Date: Mon, 10 Feb 2020 22:28:56 -0500 Subject: [PATCH 09/47] removes all uses of LabIcon.UNSTABLE_style from shell.ts --- packages/application/src/shell.ts | 14 ++++++-------- packages/ui-components/src/icon/labicon.tsx | 1 - 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/application/src/shell.ts b/packages/application/src/shell.ts index edd99aca267b..6a86872c4834 100644 --- a/packages/application/src/shell.ts +++ b/packages/application/src/shell.ts @@ -772,10 +772,9 @@ 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 icon - if (title.icon && typeof title.icon !== 'string') { - title.iconClass = LabIcon.UNSTABLE_style({ - className: title.iconClass, + // bind an appropriate style to the icon + if (title.icon instanceof LabIcon) { + title.icon = title.icon.renderer({ justify: 'center', kind: 'mainAreaTab' }); @@ -1184,10 +1183,9 @@ namespace Private { // in order to dispatch click events to the right widget. title.dataset = { id: widget.id }; - // set an appropriate style class for the icon - if (title.icon && typeof title.icon !== 'string') { - title.iconClass = LabIcon.UNSTABLE_style({ - className: title.iconClass, + // bind an appropriate style to the icon + if (title.icon instanceof LabIcon) { + title.icon = title.icon.renderer({ justify: 'center', kind: 'sideBar' }); diff --git a/packages/ui-components/src/icon/labicon.tsx b/packages/ui-components/src/icon/labicon.tsx index d7ec80a1931d..abbc5a55fe49 100644 --- a/packages/ui-components/src/icon/labicon.tsx +++ b/packages/ui-components/src/icon/labicon.tsx @@ -239,7 +239,6 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { * * 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({ From 06300f69efc9aaf9ba9fe7f670ae04c31eed4b20 Mon Sep 17 00:00:00 2001 From: telamonian Date: Sat, 15 Feb 2020 00:04:55 -0500 Subject: [PATCH 10/47] refactored renderer => bindprops --- packages/ui-components/src/icon/labicon.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/ui-components/src/icon/labicon.tsx b/packages/ui-components/src/icon/labicon.tsx index abbc5a55fe49..b606de9e00e4 100644 --- a/packages/ui-components/src/icon/labicon.tsx +++ b/packages/ui-components/src/icon/labicon.tsx @@ -392,15 +392,17 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { } /** - * Get an instance of this icon's Renderer with optional bound props + * 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 Renderer + * and .react methods). These will be bound to the resulting view * - * @returns a Renderer that wraps this LabIcon instance + * @returns a view of this LabIcon instance */ - renderer(props?: LabIcon.IProps) { - return new this._rendererClass(this, { props }); + bindprops(props?: LabIcon.IProps) { + const view = Object.create(this); + view._props = props; + return view; } get svgstr() { @@ -580,6 +582,7 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { protected _className: string; protected _loading: boolean; + protected _props: LabIcon.IProps; protected _renderer: LabIcon.Renderer; protected _rendererClass: typeof LabIcon.Renderer; protected _svgReplaced = new Signal(this); From c0c5b892b1a79b831fe81965878055252c66e7df Mon Sep 17 00:00:00 2001 From: telamonian Date: Tue, 18 Feb 2020 05:34:25 -0500 Subject: [PATCH 11/47] bindprops partially working --- packages/application/src/shell.ts | 4 +- packages/extensionmanager/src/widget.tsx | 21 +++++++--- packages/ui-components/src/icon/labicon.tsx | 46 +++++++-------------- 3 files changed, 33 insertions(+), 38 deletions(-) diff --git a/packages/application/src/shell.ts b/packages/application/src/shell.ts index 6a86872c4834..0b296c984f71 100644 --- a/packages/application/src/shell.ts +++ b/packages/application/src/shell.ts @@ -774,7 +774,7 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell { // bind an appropriate style to the icon if (title.icon instanceof LabIcon) { - title.icon = title.icon.renderer({ + title.icon = title.icon.bindprops({ justify: 'center', kind: 'mainAreaTab' }); @@ -1185,7 +1185,7 @@ namespace Private { // bind an appropriate style to the icon if (title.icon instanceof LabIcon) { - title.icon = title.icon.renderer({ + title.icon = title.icon.bindprops({ justify: 'center', kind: 'sideBar' }); 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/ui-components/src/icon/labicon.tsx b/packages/ui-components/src/icon/labicon.tsx index b606de9e00e4..7132d85889e2 100644 --- a/packages/ui-components/src/icon/labicon.tsx +++ b/packages/ui-components/src/icon/labicon.tsx @@ -234,20 +234,6 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { } } - /** - * UNSTABLE - only exists for handling 2 special cases - * - * TODO: Fix the remaining cases that rely on this and then - * remove this method: - * - 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(); @@ -315,6 +301,20 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { 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; + return view; + } + /** * Create an icon as a DOM element * @@ -391,20 +391,6 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { this._renderer.render(container, options); } - /** - * 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; - return view; - } - get svgstr() { return this._svgstr; } @@ -447,7 +433,7 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { title, tag = 'div', ...propsStyle - }: LabIcon.IProps = {}, + }: LabIcon.IProps = this._props, ref: LabIcon.IReactRef ) => { // set up component state via useState hook @@ -582,7 +568,7 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { protected _className: string; protected _loading: boolean; - protected _props: LabIcon.IProps; + protected _props: LabIcon.IProps = {}; protected _renderer: LabIcon.Renderer; protected _rendererClass: typeof LabIcon.Renderer; protected _svgReplaced = new Signal(this); From fbc42892ab3d3229b1cabce2c4d5b0c0a95b0e54 Mon Sep 17 00:00:00 2001 From: telamonian Date: Tue, 18 Feb 2020 17:12:44 -0500 Subject: [PATCH 12/47] LabIcon.bindprops now works as intended --- packages/ui-components/src/icon/labicon.tsx | 49 ++++++++++++--------- 1 file changed, 27 insertions(+), 22 deletions(-) diff --git a/packages/ui-components/src/icon/labicon.tsx b/packages/ui-components/src/icon/labicon.tsx index 7132d85889e2..72c77af65afa 100644 --- a/packages/ui-components/src/icon/labicon.tsx +++ b/packages/ui-components/src/icon/labicon.tsx @@ -249,7 +249,6 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { svgstr, render, unrender, - rendererClass = LabIcon.ElementRenderer, _loading = false }: LabIcon.IOptions & { _loading?: boolean }) { if (!(name && svgstr)) { @@ -288,8 +287,6 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { this.svgstr = svgstr; this._className = Private.nameToClassName(name); - this._renderer = new rendererClass(this); - this._rendererClass = rendererClass; // setup custom render/unrender methods, if passed in this._initRender({ render, unrender }); @@ -312,6 +309,7 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { bindprops(props?: LabIcon.IProps) { const view = Object.create(this); view._props = props; + view.react = view._initReact(view.name + '_bind'); return view; } @@ -340,14 +338,16 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { * @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', + ...propsStyle + }: LabIcon.IProps = { ...this._props, ...props }; + // check if icon element is already set const maybeSvgElement = container?.firstChild as HTMLElement; if (maybeSvgElement?.dataset?.iconId === this._uuid) { @@ -388,7 +388,17 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { } render(container: HTMLElement, options?: LabIcon.IRendererOptions): void { - this._renderer.render(container, options); + let label = options?.children?.[0]; + // narrow type of label + if (typeof label !== 'string') { + label = undefined; + } + + this.element({ + container, + label, + ...options?.props + }); } get svgstr() { @@ -417,25 +427,20 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { this._svgReplaced.emit(); } - unrender(container: HTMLElement, options?: LabIcon.IRendererOptions): void { - if (this._renderer.unrender) { - this._renderer.unrender(container, options); - } - } + 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 = this._props, - ref: LabIcon.IReactRef - ) => { + }: LabIcon.IProps = { ...this._props, ...props }; + // set up component state via useState hook const [, setId] = React.useState(this._uuid); From 0a51bbd4e1a8d73ae1d4bc70aff05871c43d99b7 Mon Sep 17 00:00:00 2001 From: telamonian Date: Tue, 18 Feb 2020 18:03:12 -0500 Subject: [PATCH 13/47] added styling for filebrowser context menu item icons --- packages/filebrowser-extension/src/index.ts | 30 ++++++++++----------- packages/ui-components/src/style/icon.ts | 13 +++++++++ 2 files changed, 28 insertions(+), 15 deletions(-) diff --git a/packages/filebrowser-extension/src/index.ts b/packages/filebrowser-extension/src/index.ts index 8a875d972e1d..4b163fcf1d89 100644 --- a/packages/filebrowser-extension/src/index.ts +++ b/packages/filebrowser-extension/src/index.ts @@ -408,7 +408,7 @@ function activateShareFile( isVisible: () => !!tracker.currentWidget && toArray(tracker.currentWidget.selectedItems()).length === 1, - icon: linkIcon, + icon: linkIcon.bindprops({ justify: 'center', kind: 'menuItem' }), label: 'Copy Shareable Link' }); } @@ -436,7 +436,7 @@ function addCommands( return widget.delete(); } }, - icon: closeIcon, + icon: closeIcon.bindprops({ justify: 'center', kind: 'menuItem' }), label: 'Delete', mnemonic: 0 }); @@ -449,7 +449,7 @@ function addCommands( return widget.copy(); } }, - icon: copyIcon, + icon: copyIcon.bindprops({ justify: 'center', kind: 'menuItem' }), label: 'Copy', mnemonic: 0 }); @@ -462,7 +462,7 @@ function addCommands( return widget.cut(); } }, - icon: cutIcon, + icon: cutIcon.bindprops({ justify: 'center', kind: 'menuItem' }), label: 'Cut' }); @@ -474,7 +474,7 @@ function addCommands( return widget.download(); } }, - icon: downloadIcon, + icon: downloadIcon.bindprops({ justify: 'center', kind: 'menuItem' }), label: 'Download' }); @@ -486,7 +486,7 @@ function addCommands( return widget.duplicate(); } }, - icon: copyIcon, + icon: copyIcon.bindprops({ justify: 'center', kind: 'menuItem' }), label: 'Duplicate' }); @@ -635,7 +635,7 @@ function addCommands( ) ); }, - icon: addIcon, + icon: addIcon.bindprops({ justify: 'center', kind: 'menuItem' }), label: 'Open in New Browser Tab', mnemonic: 0 }); @@ -653,7 +653,7 @@ function addCommands( Clipboard.copyToSystem(url); }); }, - icon: copyIcon, + icon: copyIcon.bindprops({ justify: 'center', kind: 'menuItem' }), label: 'Copy Download Link', mnemonic: 0 }); @@ -666,7 +666,7 @@ function addCommands( return widget.paste(); } }, - icon: pasteIcon, + icon: pasteIcon.bindprops({ justify: 'center', kind: 'menuItem' }), label: 'Paste', mnemonic: 0 }); @@ -679,7 +679,7 @@ function addCommands( return widget.createNewDirectory(); } }, - icon: newFolderIcon, + icon: newFolderIcon.bindprops({ justify: 'center', kind: 'menuItem' }), label: 'New Folder' }); @@ -694,7 +694,7 @@ function addCommands( ext: 'txt' }); }, - icon: textEditorIcon, + icon: textEditorIcon.bindprops({ justify: 'center', kind: 'menuItem' }), label: 'New File' }); @@ -709,7 +709,7 @@ function addCommands( ext: 'md' }); }, - icon: markdownIcon, + icon: markdownIcon.bindprops({ justify: 'center', kind: 'menuItem' }), label: 'New Markdown File' }); @@ -721,7 +721,7 @@ function addCommands( return widget.rename(); } }, - icon: editIcon, + icon: editIcon.bindprops({ justify: 'center', kind: 'menuItem' }), label: 'Rename', mnemonic: 0 }); @@ -742,7 +742,7 @@ function addCommands( isVisible: () => !!tracker.currentWidget && tracker.currentWidget.selectedItems().next !== undefined, - icon: fileIcon, + icon: fileIcon.bindprops({ justify: 'center', kind: 'menuItem' }), label: 'Copy Path' }); @@ -784,7 +784,7 @@ function addCommands( return widget.shutdownKernels(); } }, - icon: stopIcon, + icon: stopIcon.bindprops({ justify: 'center', kind: 'menuItem' }), label: 'Shut Down Kernel' }); diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts index cbce95d07f8b..0625dc791698 100644 --- a/packages/ui-components/src/style/icon.ts +++ b/packages/ui-components/src/style/icon.ts @@ -22,6 +22,7 @@ export type IconKindType = | 'listing' | 'listingHeaderItem' | 'mainAreaTab' + | 'menuItem' | 'runningItem' | 'select' | 'settingsEditor' @@ -91,6 +92,11 @@ const iconCSSMainAreaTab: NestedCSSProperties = { } }; +const iconCSSMenuItem: NestedCSSProperties = { + height: '16px', + width: '16px' +}; + const iconCSSRunningItem: NestedCSSProperties = { height: '16px', width: '16px' @@ -135,6 +141,7 @@ const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = { listing: iconCSSListing, listingHeaderItem: iconCSSlistingHeaderItem, mainAreaTab: iconCSSMainAreaTab, + menuItem: iconCSSMenuItem, runningItem: iconCSSRunningItem, select: iconCSSSelect, settingsEditor: iconCSSSettingsEditor, @@ -198,6 +205,11 @@ const containerCSSMainAreaTab: NestedCSSProperties = { } }; +const containerCSSMenuItem: NestedCSSProperties = { + display: 'inline-block', + verticalAlign: 'middle' +}; + const containerCSSRunningItem: NestedCSSProperties = { margin: '0px 4px 0px 12px' }; @@ -269,6 +281,7 @@ const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = { listing: containerCSSListing, listingHeaderItem: containerCSSListingHeaderItem, mainAreaTab: containerCSSMainAreaTab, + menuItem: containerCSSMenuItem, runningItem: containerCSSRunningItem, select: containerCSSSelect, settingsEditor: containerCSSSettingsEditor, From f81b4a1caf9489695ed5f9cabc19a403fe531e75 Mon Sep 17 00:00:00 2001 From: telamonian Date: Tue, 18 Feb 2020 19:24:55 -0500 Subject: [PATCH 14/47] all filebrowser context menu item icons now migrated => LabIcon. - There seems to be a bug related to how menu items get "recycled"; some icons are getting screwed up after multiple openings and closings of different context menus --- packages/filebrowser-extension/src/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/filebrowser-extension/src/index.ts b/packages/filebrowser-extension/src/index.ts index 4b163fcf1d89..8f67bdaeba1a 100644 --- a/packages/filebrowser-extension/src/index.ts +++ b/packages/filebrowser-extension/src/index.ts @@ -608,9 +608,9 @@ function addCommands( 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?.icon; + return ft?.icon?.bindprops({ justify: 'center', kind: 'menuItem' }); } else { - return folderIcon; + return folderIcon.bindprops({ justify: 'center', kind: 'menuItem' }); } }, label: args => (args['label'] || args['factory'] || 'Open') as string, From 99e054decdfc9f1ad34132df156578cf75816729 Mon Sep 17 00:00:00 2001 From: telamonian Date: Wed, 19 Feb 2020 03:05:17 -0500 Subject: [PATCH 15/47] fixed use of addIcon --- examples/filebrowser/src/index.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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({ From cd1325ad3f3778a468b8249c37a8c0b787fdb7cb Mon Sep 17 00:00:00 2001 From: telamonian Date: Wed, 19 Feb 2020 15:05:16 -0500 Subject: [PATCH 16/47] fixed replace toggle button icon in find/replace widget --- packages/documentsearch/src/searchoverlay.tsx | 20 ++++++++++--------- packages/documentsearch/style/base.css | 16 ++------------- 2 files changed, 13 insertions(+), 23 deletions(-) diff --git a/packages/documentsearch/src/searchoverlay.tsx b/packages/documentsearch/src/searchoverlay.tsx index f5498e54d724..dc3554a27eca 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} > - )} 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); } From 4c64ecdfb69a3c3f8700edc2c8714a844610a76d Mon Sep 17 00:00:00 2001 From: telamonian Date: Fri, 21 Feb 2020 13:21:50 -0500 Subject: [PATCH 17/47] fixed all launcher icons; removed all UNSTABLE methods from LabIcon --- packages/apputils/src/toolbar.tsx | 5 +- packages/console-extension/package.json | 1 + packages/console-extension/src/index.ts | 4 +- packages/console-extension/tsconfig.json | 3 + packages/docregistry/src/registry.ts | 4 +- packages/fileeditor-extension/package.json | 1 + packages/fileeditor-extension/src/commands.ts | 16 ++--- packages/fileeditor-extension/tsconfig.json | 3 + packages/inspector-extension/package.json | 3 +- packages/inspector-extension/src/index.ts | 5 +- packages/inspector-extension/tsconfig.json | 3 + packages/launcher/src/index.tsx | 18 ++--- packages/ui-components/src/icon/labicon.tsx | 67 +++++++------------ 13 files changed, 61 insertions(+), 72 deletions(-) diff --git a/packages/apputils/src/toolbar.tsx b/packages/apputils/src/toolbar.tsx index b31ee58d6c36..a12fda00a873 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; @@ -609,6 +609,7 @@ namespace Private { options: CommandToolbarButtonComponent.IProps ): ToolbarButtonComponent.IProps { let { commands, id, args } = options; + const icon = commands.icon(id, args); const iconClass = commands.iconClass(id, args); const iconLabel = commands.iconLabel(id, args); const label = commands.label(id, args); @@ -625,7 +626,7 @@ 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 }; } /** diff --git a/packages/console-extension/package.json b/packages/console-extension/package.json index a26789e0a2c4..bdd04b016c25 100644 --- a/packages/console-extension/package.json +++ b/packages/console-extension/package.json @@ -46,6 +46,7 @@ "@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.1", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", "@lumino/disposable": "^1.3.4", 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/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/fileeditor-extension/package.json b/packages/fileeditor-extension/package.json index bbdf27473983..7bcf9131a0ea 100644 --- a/packages/fileeditor-extension/package.json +++ b/packages/fileeditor-extension/package.json @@ -48,6 +48,7 @@ "@jupyterlab/mainmenu": "^2.0.0-rc.1", "@jupyterlab/settingregistry": "^2.0.0-rc.1", "@jupyterlab/statusbar": "^2.0.0-rc.1", + "@jupyterlab/ui-components": "^2.0.0-rc.1", "@lumino/commands": "^1.9.2", "@lumino/coreutils": "^1.4.2", "@lumino/widgets": "^1.10.2" 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/inspector-extension/package.json b/packages/inspector-extension/package.json index 8d7e142665e7..e3451efdfa95 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.1" }, "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/launcher/src/index.tsx b/packages/launcher/src/index.tsx index e722d373ce77..b390a0e29346 100644 --- a/packages/launcher/src/index.tsx +++ b/packages/launcher/src/index.tsx @@ -190,17 +190,16 @@ 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; + if (cat in categories) { section = (
- @@ -420,8 +419,9 @@ function Card(
) ) : ( - diff --git a/packages/ui-components/src/icon/labicon.tsx b/packages/ui-components/src/icon/labicon.tsx index 72c77af65afa..aeb5db0fa4f2 100644 --- a/packages/ui-components/src/icon/labicon.tsx +++ b/packages/ui-components/src/icon/labicon.tsx @@ -108,6 +108,9 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { fallback, ...props }: Partial & LabIcon.IProps) { + // make sure that the icon is either resolvable or undefined + icon = Private.isResolvable(icon) ? icon : undefined; + if (!icon) { if (!iconClass && fallback) { // if neither icon nor iconClass are defined, use fallback @@ -150,6 +153,9 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { fallback, ...props }: Partial & LabIcon.IReactProps) { + // make sure that the icon is either resolvable or undefined + icon = Private.isResolvable(icon) ? icon : undefined; + if (!icon) { if (!iconClass && fallback) { // if neither icon nor iconClass are defined, use fallback @@ -202,44 +208,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 ; - } - } - private static _debug: boolean = false; private static _instances = new Map(); - // TODO: remove this along with UNSTABLE_getReact - private static _instancesByNameAndClassName = new Map(); - /*********** * members * ***********/ @@ -286,16 +257,10 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { this.react = this._initReact(name); this.svgstr = svgstr; - this._className = Private.nameToClassName(name); - // setup custom render/unrender methods, if passed in this._initRender({ render, unrender }); LabIcon._instances.set(this.name, this); - - // TODO: remove along with UNSTABLE_getReact - LabIcon._instancesByNameAndClassName.set(this.name, this); - LabIcon._instancesByNameAndClassName.set(this._className, this); } /** @@ -665,7 +630,7 @@ export namespace LabIcon { } export interface IResolverProps { - icon?: LabIcon.IResolvable; + icon?: IMaybeResolvable; iconClass?: string; fallback?: LabIcon; } @@ -681,6 +646,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 */ @@ -858,6 +831,16 @@ namespace Private { } } + 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)) + ); + } + /** * @param name - icon name. May be namespaced as per `some-pkg:foo-bar` * From 677339c7983db75eac846d82eaedcf56ff947d49 Mon Sep 17 00:00:00 2001 From: telamonian Date: Fri, 21 Feb 2020 13:34:31 -0500 Subject: [PATCH 18/47] removed Private.nameToClassName from labicon.tsx --- packages/ui-components/src/icon/labicon.tsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/ui-components/src/icon/labicon.tsx b/packages/ui-components/src/icon/labicon.tsx index aeb5db0fa4f2..98f1cea44cd4 100644 --- a/packages/ui-components/src/icon/labicon.tsx +++ b/packages/ui-components/src/icon/labicon.tsx @@ -7,8 +7,6 @@ import { ElementAttrs, VirtualElement, VirtualNode } from '@lumino/virtualdom'; import React from 'react'; import ReactDOM from 'react-dom'; -import { Text } from '@jupyterlab/coreutils'; - import { iconStyle, IIconStyle } from '../style'; import { getReactAttrs, classes } from '../utils'; @@ -841,15 +839,6 @@ namespace Private { ); } - /** - * @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 setTitleSvg(svgNode: HTMLElement, title: string): void { // add a title node to the top level svg node let titleNodes = svgNode.getElementsByTagName('title'); From d62afc06a95804da68a5580561e0d3e01c4789e0 Mon Sep 17 00:00:00 2001 From: telamonian Date: Fri, 21 Feb 2020 13:41:10 -0500 Subject: [PATCH 19/47] simplified icon resolvability check --- packages/ui-components/src/icon/labicon.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/ui-components/src/icon/labicon.tsx b/packages/ui-components/src/icon/labicon.tsx index 98f1cea44cd4..a61cb7cd0282 100644 --- a/packages/ui-components/src/icon/labicon.tsx +++ b/packages/ui-components/src/icon/labicon.tsx @@ -106,12 +106,9 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { fallback, ...props }: Partial & LabIcon.IProps) { - // make sure that the icon is either resolvable or undefined - icon = Private.isResolvable(icon) ? icon : undefined; - - 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); } @@ -151,12 +148,9 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { fallback, ...props }: Partial & LabIcon.IReactProps) { - // make sure that the icon is either resolvable or undefined - icon = Private.isResolvable(icon) ? icon : undefined; - - 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 ; } From 63237c99795da957b8577245409ad412aa50ef47 Mon Sep 17 00:00:00 2001 From: telamonian Date: Fri, 21 Feb 2020 15:19:07 -0500 Subject: [PATCH 20/47] added temp fix (until lumino 2.0) for getting iconClass from a command --- packages/apputils/src/toolbar.tsx | 8 +++++++- packages/launcher/src/index.tsx | 20 ++++++++++++++++---- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/packages/apputils/src/toolbar.tsx b/packages/apputils/src/toolbar.tsx index a12fda00a873..78e0d7c01b26 100644 --- a/packages/apputils/src/toolbar.tsx +++ b/packages/apputils/src/toolbar.tsx @@ -609,9 +609,14 @@ namespace Private { options: CommandToolbarButtonComponent.IProps ): ToolbarButtonComponent.IProps { let { commands, id, args } = options; - const icon = commands.icon(id, args); + 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. @@ -626,6 +631,7 @@ namespace Private { void commands.execute(id, args); }; const enabled = commands.isEnabled(id, args); + return { className, icon, iconClass, tooltip, onClick, enabled, label }; } diff --git a/packages/launcher/src/index.tsx b/packages/launcher/src/index.tsx index b390a0e29346..5c9701903812 100644 --- a/packages/launcher/src/index.tsx +++ b/packages/launcher/src/index.tsx @@ -193,13 +193,19 @@ export class Launcher extends VDomRenderer { 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 = (
@@ -398,6 +404,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 (
From 6e481ec4a650f70c34ba207e7dc12aefe6ea3ec2 Mon Sep 17 00:00:00 2001 From: telamonian Date: Fri, 21 Feb 2020 15:28:51 -0500 Subject: [PATCH 21/47] finished audit of all uses of `iconClass` in jlab core src --- packages/logconsole-extension/src/index.tsx | 16 ++++++++++------ packages/settingeditor-extension/src/index.ts | 6 +++--- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/logconsole-extension/src/index.tsx b/packages/logconsole-extension/src/index.tsx index cef4060352fe..5f5fa20a9399 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, + closeIcon, + HTMLSelect, + listIcon +} from '@jupyterlab/ui-components'; import { UUID } from '@lumino/coreutils'; @@ -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: closeIcon, 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) { diff --git a/packages/settingeditor-extension/src/index.ts b/packages/settingeditor-extension/src/index.ts index dc7dd101fe99..9ff1930d717e 100644 --- a/packages/settingeditor-extension/src/index.ts +++ b/packages/settingeditor-extension/src/index.ts @@ -22,7 +22,7 @@ import { SettingEditor } from '@jupyterlab/settingeditor'; import { ISettingRegistry } from '@jupyterlab/settingregistry'; -import { settingsIcon } from '@jupyterlab/ui-components'; +import { saveIcon, settingsIcon, undoIcon } from '@jupyterlab/ui-components'; import { IDisposable } from '@lumino/disposable'; /** @@ -149,14 +149,14 @@ function activate( execute: () => { 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 }); From 8bdb70b51a15c0a5afb4d86a7f9c52b8eb75e7ef Mon Sep 17 00:00:00 2001 From: telamonian Date: Fri, 21 Feb 2020 17:13:46 -0500 Subject: [PATCH 22/47] starting to fix menu icons --- packages/application/src/frontend.ts | 6 + packages/application/style/menus.css | 22 ---- packages/mainmenu/src/labmenu.ts | 5 + packages/ui-components/src/icon/index.ts | 1 + packages/ui-components/src/icon/menusvg.ts | 124 +++++++++++++++++++ packages/ui-components/src/icon/tabbarsvg.ts | 3 +- 6 files changed, 137 insertions(+), 24 deletions(-) create mode 100644 packages/ui-components/src/icon/menusvg.ts diff --git a/packages/application/src/frontend.ts b/packages/application/src/frontend.ts index b615b0459a6c..5f9c9518a1de 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 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/style/menus.css b/packages/application/style/menus.css index 40e89590815f..2a6a8798ccc7 100644 --- a/packages/application/style/menus.css +++ b/packages/application/style/menus.css @@ -125,25 +125,3 @@ top: 4px; 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; -} diff --git a/packages/mainmenu/src/labmenu.ts b/packages/mainmenu/src/labmenu.ts index c043e74a4a5d..c99ce8029b59 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,6 +63,9 @@ export class JupyterLabMenu implements IJupyterLabMenu { * groups that are added to the menu. */ constructor(options: Menu.IOptions, includeSeparators: boolean = true) { + // render menu with svg icon tweaks + options.renderer = options.renderer || MenuSvg.defaultRenderer; + this.menu = new Menu(options); this._includeSeparators = includeSeparators; } diff --git a/packages/ui-components/src/icon/index.ts b/packages/ui-components/src/icon/index.ts index ee33cac9a367..d260fa71c0cf 100644 --- a/packages/ui-components/src/icon/index.ts +++ b/packages/ui-components/src/icon/index.ts @@ -3,4 +3,5 @@ export * from './iconimports'; export * from './labicon'; +export * from './menusvg'; export * from './tabbarsvg'; diff --git a/packages/ui-components/src/icon/menusvg.ts b/packages/ui-components/src/icon/menusvg.ts new file mode 100644 index 000000000000..44a3b4259f7b --- /dev/null +++ b/packages/ui-components/src/icon/menusvg.ts @@ -0,0 +1,124 @@ +// Copyright (c) Jupyter Development Team. +// Distributed under the terms of the Modified BSD License. + +import { h, VirtualElement } from '@lumino/virtualdom'; +import { ContextMenu, Menu } from '@lumino/widgets'; + +import { caretRightIcon, checkIcon } from './iconimports'; +import { iconStyle } from '../style'; +import { classes } from '../utils'; + +const submenuIcon = caretRightIcon.bindprops({ + justify: 'center', + kind: '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); + } +} + +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 { + let className = this.createIconClass(data); + + /* */ + if (typeof data.item.icon === 'string') { + return h.div({ className }, data.item.iconLabel); + } + /* */ + + // if (!(data.item.icon || data.item.iconClass)) { + + // } + + if (data.item.isToggled) { + return h.div({ className }, checkIcon, data.item.iconLabel); + } else { + // 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'; + /* */ + + return classes( + iconStyle({ justify: 'center', kind: '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(); +} + +/** + * an object which implements a universal context menu. + * Tweaked to use inline svg icons + */ +export class ContextMenuSvg extends ContextMenu { + /** + * Construct a new dock panel. + * + * @param options - The options for initializing the panel. + */ + constructor(options: ContextMenu.IOptions) { + options.renderer = options.renderer || MenuSvg.defaultRenderer; + super(options); + } +} diff --git a/packages/ui-components/src/icon/tabbarsvg.ts b/packages/ui-components/src/icon/tabbarsvg.ts index e4b81db27fd6..0f755e4d80ae 100644 --- a/packages/ui-components/src/icon/tabbarsvg.ts +++ b/packages/ui-components/src/icon/tabbarsvg.ts @@ -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. */ From cae9a0442104378d39df225dd3b09e294a3d5de9 Mon Sep 17 00:00:00 2001 From: telamonian Date: Fri, 21 Feb 2020 17:16:01 -0500 Subject: [PATCH 23/47] integrity --- packages/mainmenu/package.json | 1 + packages/mainmenu/tsconfig.json | 3 +++ 2 files changed, 4 insertions(+) diff --git a/packages/mainmenu/package.json b/packages/mainmenu/package.json index e53f0d154ae5..4671ad1668bd 100644 --- a/packages/mainmenu/package.json +++ b/packages/mainmenu/package.json @@ -37,6 +37,7 @@ "dependencies": { "@jupyterlab/apputils": "^2.0.0-rc.1", "@jupyterlab/services": "^5.0.0-rc.1", + "@jupyterlab/ui-components": "^2.0.0-rc.1", "@lumino/algorithm": "^1.2.3", "@lumino/commands": "^1.9.2", "@lumino/coreutils": "^1.4.2", 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" } ] } From 4336f54167d4b6380c2716d9d2fb4bc9d8741825 Mon Sep 17 00:00:00 2001 From: telamonian Date: Fri, 21 Feb 2020 18:03:59 -0500 Subject: [PATCH 24/47] fixed menu item check marks. all menu icon issues fixed --- packages/application/style/menus.css | 6 ++ packages/ui-components/src/icon/menusvg.ts | 65 ++++++---------------- 2 files changed, 23 insertions(+), 48 deletions(-) diff --git a/packages/application/style/menus.css b/packages/application/style/menus.css index 2a6a8798ccc7..d94d6fc9b98e 100644 --- a/packages/application/style/menus.css +++ b/packages/application/style/menus.css @@ -125,3 +125,9 @@ top: 4px; border-top: var(--jp-border-width) solid var(--jp-layout-color2); } + +/* gray out icon/caret for disable menu items */ +.lm-Menu-item.lm-mod-toggled.lm-mod-disabled > .lm-Menu-itemIcon, +.lm-Menu-item[data-type='submenu'] > .lm-Menu-itemSubmenuIcon { + opacity: 0.4; +} diff --git a/packages/ui-components/src/icon/menusvg.ts b/packages/ui-components/src/icon/menusvg.ts index 44a3b4259f7b..602463cbe02b 100644 --- a/packages/ui-components/src/icon/menusvg.ts +++ b/packages/ui-components/src/icon/menusvg.ts @@ -2,7 +2,7 @@ // Distributed under the terms of the Modified BSD License. import { h, VirtualElement } from '@lumino/virtualdom'; -import { ContextMenu, Menu } from '@lumino/widgets'; +import { Menu } from '@lumino/widgets'; import { caretRightIcon, checkIcon } from './iconimports'; import { iconStyle } from '../style'; @@ -13,22 +13,6 @@ const submenuIcon = caretRightIcon.bindprops({ kind: '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); - } -} - export namespace MenuSvg { /** * a modified implementation of the Menu Renderer @@ -44,22 +28,19 @@ export namespace MenuSvg { renderIcon(data: Menu.IRenderData): VirtualElement { let 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 || data.item.iconClass)) { - - // } - - if (data.item.isToggled) { - return h.div({ className }, checkIcon, data.item.iconLabel); - } else { - // if data.item.icon is undefined, it will be ignored - return h.div({ className }, data.item.icon!, data.item.iconLabel); - } + // if data.item.icon is undefined, it will be ignored + return h.div({ className }, data.item.icon!, data.item.iconLabel); } /** @@ -75,11 +56,15 @@ export namespace MenuSvg { name += ' p-Menu-itemIcon'; /* */ - return classes( - iconStyle({ justify: 'center', kind: 'menuItem' }), - data.item.iconClass, - name - ); + if (data.item.type === 'separator') { + return classes(data.item.iconClass, name); + } else { + return classes( + iconStyle({ justify: 'center', kind: 'menuItem' }), + data.item.iconClass, + name + ); + } } /** @@ -106,19 +91,3 @@ export namespace MenuSvg { export const defaultRenderer = new Renderer(); } - -/** - * an object which implements a universal context menu. - * Tweaked to use inline svg icons - */ -export class ContextMenuSvg extends ContextMenu { - /** - * Construct a new dock panel. - * - * @param options - The options for initializing the panel. - */ - constructor(options: ContextMenu.IOptions) { - options.renderer = options.renderer || MenuSvg.defaultRenderer; - super(options); - } -} From e74e56e9515c7dc721548ad2ad4511554594aa85 Mon Sep 17 00:00:00 2001 From: telamonian Date: Fri, 21 Feb 2020 18:10:37 -0500 Subject: [PATCH 25/47] bugfix for disabled submenu caret. Some submenu icons not working --- packages/application/style/menus.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/application/style/menus.css b/packages/application/style/menus.css index d94d6fc9b98e..e9b1536da0da 100644 --- a/packages/application/style/menus.css +++ b/packages/application/style/menus.css @@ -127,7 +127,7 @@ } /* gray out icon/caret for disable menu items */ -.lm-Menu-item.lm-mod-toggled.lm-mod-disabled > .lm-Menu-itemIcon, -.lm-Menu-item[data-type='submenu'] > .lm-Menu-itemSubmenuIcon { +.lm-Menu-item.lm-mod-disabled > .lm-Menu-itemIcon, +.lm-Menu-item[data-type='submenu'].lm-mod-disabled > .lm-Menu-itemSubmenuIcon { opacity: 0.4; } From e41db4c14f3a1371c8d85e6e17b360249bbdf1af Mon Sep 17 00:00:00 2001 From: telamonian Date: Fri, 21 Feb 2020 19:34:28 -0500 Subject: [PATCH 26/47] added MenuSvg.insertItem hack to workaround submenu renderer issue --- packages/mainmenu/src/labmenu.ts | 6 +-- packages/ui-components/src/icon/menusvg.ts | 56 ++++++++++++++++++++++ 2 files changed, 58 insertions(+), 4 deletions(-) diff --git a/packages/mainmenu/src/labmenu.ts b/packages/mainmenu/src/labmenu.ts index c99ce8029b59..67702e7385f5 100644 --- a/packages/mainmenu/src/labmenu.ts +++ b/packages/mainmenu/src/labmenu.ts @@ -64,9 +64,7 @@ export class JupyterLabMenu implements IJupyterLabMenu { */ constructor(options: Menu.IOptions, includeSeparators: boolean = true) { // render menu with svg icon tweaks - options.renderer = options.renderer || MenuSvg.defaultRenderer; - - this.menu = new Menu(options); + this.menu = new MenuSvg(options); this._includeSeparators = includeSeparators; } @@ -131,7 +129,7 @@ export class JupyterLabMenu implements IJupyterLabMenu { /** * The underlying Phosphor menu. */ - readonly menu: Menu; + readonly menu: MenuSvg; /** * Whether the menu has been disposed. diff --git a/packages/ui-components/src/icon/menusvg.ts b/packages/ui-components/src/icon/menusvg.ts index 602463cbe02b..7815c5cae59e 100644 --- a/packages/ui-components/src/icon/menusvg.ts +++ b/packages/ui-components/src/icon/menusvg.ts @@ -13,6 +13,62 @@ const submenuIcon = caretRightIcon.bindprops({ kind: '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) { + // + 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 From f9b53c96d1397fc01e631b51581bb1e2c527a25e Mon Sep 17 00:00:00 2001 From: telamonian Date: Fri, 21 Feb 2020 22:15:45 -0500 Subject: [PATCH 27/47] fixed check mark icons in CommandPaletteSvg --- packages/application/src/frontend.ts | 2 +- packages/apputils-extension/src/palette.ts | 8 ++- packages/apputils/style/commandpalette.css | 8 +-- packages/mainmenu/src/labmenu.ts | 4 +- .../src/icon/commandpalettesvg.ts | 68 +++++++++++++++++++ packages/ui-components/src/icon/index.ts | 2 + packages/ui-components/src/icon/menusvg.ts | 2 +- packages/ui-components/src/style/icon.ts | 8 +++ 8 files changed, 89 insertions(+), 13 deletions(-) create mode 100644 packages/ui-components/src/icon/commandpalettesvg.ts diff --git a/packages/application/src/frontend.ts b/packages/application/src/frontend.ts index 5f9c9518a1de..bcfb589dad7a 100644 --- a/packages/application/src/frontend.ts +++ b/packages/application/src/frontend.ts @@ -40,7 +40,7 @@ export abstract class JupyterFrontEnd< * Construct a new JupyterFrontEnd object. */ constructor(options: JupyterFrontEnd.IOptions) { - // render context menu with svg icon tweaks + // render context menu with inline svg icon tweaks options.contextMenuRenderer = options.contextMenuRenderer || MenuSvg.defaultRenderer; diff --git a/packages/apputils-extension/src/palette.ts b/packages/apputils-extension/src/palette.ts index 8c5cf1fdabdc..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. @@ -141,7 +141,11 @@ 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.icon = paletteIcon; palette.title.label = 'Commands'; diff --git a/packages/apputils/style/commandpalette.css b/packages/apputils/style/commandpalette.css index 283c39074464..50ca8e108cf4 100644 --- a/packages/apputils/style/commandpalette.css +++ b/packages/apputils/style/commandpalette.css @@ -163,14 +163,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/mainmenu/src/labmenu.ts b/packages/mainmenu/src/labmenu.ts index 67702e7385f5..73edc3a252fb 100644 --- a/packages/mainmenu/src/labmenu.ts +++ b/packages/mainmenu/src/labmenu.ts @@ -63,7 +63,7 @@ export class JupyterLabMenu implements IJupyterLabMenu { * groups that are added to the menu. */ constructor(options: Menu.IOptions, includeSeparators: boolean = true) { - // render menu with svg icon tweaks + // render menu with inline svg icon tweaks this.menu = new MenuSvg(options); this._includeSeparators = includeSeparators; } @@ -129,7 +129,7 @@ export class JupyterLabMenu implements IJupyterLabMenu { /** * The underlying Phosphor menu. */ - readonly menu: MenuSvg; + readonly menu: Menu; /** * Whether the menu has been disposed. diff --git a/packages/ui-components/src/icon/commandpalettesvg.ts b/packages/ui-components/src/icon/commandpalettesvg.ts new file mode 100644 index 000000000000..66e789f662bd --- /dev/null +++ b/packages/ui-components/src/icon/commandpalettesvg.ts @@ -0,0 +1,68 @@ +// 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 } from './iconimports'; +import { iconStyle } from '../style'; +import { classes } from '../utils'; + +// const submenuIcon = caretRightIcon.bindprops({ +// justify: 'center', +// kind: 'menuItem' +// }); + +export namespace CommandPaletteSvg { + /** + * a modified implementation of the CommandPalette Renderer + */ + export class Renderer extends CommandPalette.Renderer { + /** + * 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 { + let 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( + iconStyle({ justify: 'center', kind: 'commandPaletteItem' }), + data.item.iconClass, + name + ); + } + } + + export const defaultRenderer = new Renderer(); +} diff --git a/packages/ui-components/src/icon/index.ts b/packages/ui-components/src/icon/index.ts index d260fa71c0cf..7dd0098a78a5 100644 --- a/packages/ui-components/src/icon/index.ts +++ b/packages/ui-components/src/icon/index.ts @@ -3,5 +3,7 @@ export * from './iconimports'; export * from './labicon'; + +export * from './commandpalettesvg'; export * from './menusvg'; export * from './tabbarsvg'; diff --git a/packages/ui-components/src/icon/menusvg.ts b/packages/ui-components/src/icon/menusvg.ts index 7815c5cae59e..1509c45f293d 100644 --- a/packages/ui-components/src/icon/menusvg.ts +++ b/packages/ui-components/src/icon/menusvg.ts @@ -43,7 +43,7 @@ export class MenuSvg extends Menu { */ 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, diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts index 0625dc791698..318dff7ad293 100644 --- a/packages/ui-components/src/style/icon.ts +++ b/packages/ui-components/src/style/icon.ts @@ -17,6 +17,7 @@ import { NestedCSSProperties } from 'typestyle/lib/types'; */ export type IconKindType = | 'breadCrumb' + | 'commandPaletteItem' | 'launcherCard' | 'launcherSection' | 'listing' @@ -58,6 +59,11 @@ const iconCSSBreadCrumb: NestedCSSProperties = { verticalAlign: 'middle' }; +const iconCSSCommandPaletteItem: NestedCSSProperties = { + height: '16px', + width: '16px' +}; + const iconCSSLauncherCard: NestedCSSProperties = { height: '52px', width: '52px' @@ -136,6 +142,7 @@ const iconCSSToolbarButton: NestedCSSProperties = { const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = { breadCrumb: iconCSSBreadCrumb, + commandPaletteItem: iconCSSCommandPaletteItem, launcherCard: iconCSSLauncherCard, launcherSection: iconCSSLauncherSection, listing: iconCSSListing, @@ -276,6 +283,7 @@ const containerCSSToolbarButton: NestedCSSProperties = { const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = { breadCrumb: containerCSSBreadCrumb, + commandPaletteItem: {}, launcherCard: containerCSSLauncherCard, launcherSection: containerCSSLauncherSection, listing: containerCSSListing, From 4e75f14343199a195be2b094d90d5057d0ac0b94 Mon Sep 17 00:00:00 2001 From: telamonian Date: Fri, 21 Feb 2020 23:38:24 -0500 Subject: [PATCH 28/47] CommandPalette header icon mostly fixed, some minor styling bugs remain --- packages/apputils/style/commandpalette.css | 25 ++++--------- .../src/icon/commandpalettesvg.ts | 36 +++++++++++++++---- packages/ui-components/src/icon/menusvg.ts | 2 +- packages/ui-components/src/style/icon.ts | 12 +++++++ packages/ui-components/style/base.css | 1 - packages/ui-components/style/iconshover.css | 4 +++ 6 files changed, 53 insertions(+), 27 deletions(-) diff --git a/packages/apputils/style/commandpalette.css b/packages/apputils/style/commandpalette.css index 50ca8e108cf4..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; diff --git a/packages/ui-components/src/icon/commandpalettesvg.ts b/packages/ui-components/src/icon/commandpalettesvg.ts index 66e789f662bd..f44960fb1658 100644 --- a/packages/ui-components/src/icon/commandpalettesvg.ts +++ b/packages/ui-components/src/icon/commandpalettesvg.ts @@ -4,20 +4,44 @@ import { h, VirtualElement } from '@lumino/virtualdom'; import { CommandPalette } from '@lumino/widgets'; -import { checkIcon } from './iconimports'; +import { checkIcon, filterListIcon } from './iconimports'; import { iconStyle } from '../style'; import { classes } from '../utils'; -// const submenuIcon = caretRightIcon.bindprops({ -// justify: 'center', -// kind: 'menuItem' -// }); +const searchHeaderIcon = filterListIcon.bindprops({ + justify: 'center', + kind: '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. * @@ -26,7 +50,7 @@ export namespace CommandPaletteSvg { * @returns A virtual element representing the icon. */ renderItemIcon(data: CommandPalette.IItemRenderData): VirtualElement { - let className = this.createIconClass(data); + const className = this.createIconClass(data); if (data.item.isToggled) { // check mark icon takes precedence diff --git a/packages/ui-components/src/icon/menusvg.ts b/packages/ui-components/src/icon/menusvg.ts index 1509c45f293d..b1f377f5ad75 100644 --- a/packages/ui-components/src/icon/menusvg.ts +++ b/packages/ui-components/src/icon/menusvg.ts @@ -82,7 +82,7 @@ export namespace MenuSvg { * @returns A virtual element representing the item icon. */ renderIcon(data: Menu.IRenderData): VirtualElement { - let className = this.createIconClass(data); + const className = this.createIconClass(data); if (data.item.isToggled) { // check mark icon takes precedence diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts index 318dff7ad293..264dbf4cd615 100644 --- a/packages/ui-components/src/style/icon.ts +++ b/packages/ui-components/src/style/icon.ts @@ -17,6 +17,7 @@ import { NestedCSSProperties } from 'typestyle/lib/types'; */ export type IconKindType = | 'breadCrumb' + | 'commandPaletteHeader' | 'commandPaletteItem' | 'launcherCard' | 'launcherSection' @@ -59,6 +60,11 @@ const iconCSSBreadCrumb: NestedCSSProperties = { verticalAlign: 'middle' }; +const iconCSSCommandPaletteHeader: NestedCSSProperties = { + height: '14px', + width: '14px' +}; + const iconCSSCommandPaletteItem: NestedCSSProperties = { height: '16px', width: '16px' @@ -142,6 +148,7 @@ const iconCSSToolbarButton: NestedCSSProperties = { const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = { breadCrumb: iconCSSBreadCrumb, + commandPaletteHeader: iconCSSCommandPaletteHeader, commandPaletteItem: iconCSSCommandPaletteItem, launcherCard: iconCSSLauncherCard, launcherSection: iconCSSLauncherSection, @@ -176,6 +183,10 @@ const containerCSSBreadCrumb: NestedCSSProperties = { } }; +const containerCSSCommandPaletteHeader: NestedCSSProperties = { + margin: '0 14px 0 auto' +}; + const containerCSSLauncherCard: NestedCSSProperties = { height: '68px' }; @@ -283,6 +294,7 @@ const containerCSSToolbarButton: NestedCSSProperties = { const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = { breadCrumb: containerCSSBreadCrumb, + commandPaletteHeader: containerCSSCommandPaletteHeader, commandPaletteItem: {}, launcherCard: containerCSSLauncherCard, launcherSection: containerCSSLauncherSection, 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/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 */ From 1cdb766e69a243b14889b88145cd5a1c8e2ac7c5 Mon Sep 17 00:00:00 2001 From: telamonian Date: Fri, 21 Feb 2020 23:51:36 -0500 Subject: [PATCH 29/47] fixed styling for CommandPalette header icon --- packages/ui-components/src/style/icon.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts index 264dbf4cd615..df050e08a285 100644 --- a/packages/ui-components/src/style/icon.ts +++ b/packages/ui-components/src/style/icon.ts @@ -184,6 +184,7 @@ const containerCSSBreadCrumb: NestedCSSProperties = { }; const containerCSSCommandPaletteHeader: NestedCSSProperties = { + height: '14px', margin: '0 14px 0 auto' }; From 04688daf19394298b1d112a78fa1c5d86b9e5a60 Mon Sep 17 00:00:00 2001 From: telamonian Date: Sat, 22 Feb 2020 02:38:19 -0500 Subject: [PATCH 30/47] created/added clearIcon --- packages/logconsole-extension/src/index.tsx | 10 +++++----- packages/ui-components/src/icon/iconimports.ts | 2 ++ packages/ui-components/style/deprecated.css | 4 ++++ packages/ui-components/style/icons/toolbar/clear.svg | 11 +++++++++++ 4 files changed, 22 insertions(+), 5 deletions(-) create mode 100644 packages/ui-components/style/icons/toolbar/clear.svg diff --git a/packages/logconsole-extension/src/index.tsx b/packages/logconsole-extension/src/index.tsx index 5f5fa20a9399..c10960c9465e 100644 --- a/packages/logconsole-extension/src/index.tsx +++ b/packages/logconsole-extension/src/index.tsx @@ -37,7 +37,7 @@ import { IStatusBar } from '@jupyterlab/statusbar'; import { addIcon, - closeIcon, + clearIcon, HTMLSelect, listIcon } from '@jupyterlab/ui-components'; @@ -225,7 +225,7 @@ function activateLogConsole( execute: () => { logConsolePanel?.logger?.clear(); }, - icon: closeIcon, + icon: clearIcon, isEnabled: () => !!logConsolePanel && logConsolePanel.source !== null, label: 'Clear Log' }); @@ -235,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/ui-components/src/icon/iconimports.ts b/packages/ui-components/src/icon/iconimports.ts index 20a178a21b78..07cc7ad802c5 100644 --- a/packages/ui-components/src/icon/iconimports.ts +++ b/packages/ui-components/src/icon/iconimports.ts @@ -22,6 +22,7 @@ import caseSensitiveSvgstr from '../../style/icons/search/case-sensitive.svg'; import checkSvgstr from '../../style/icons/toolbar/check.svg'; import circleEmptySvgstr from '../../style/icons/toolbar/circle-empty.svg'; import circleSvgstr from '../../style/icons/toolbar/circle.svg'; +import clearSvgstr from '../../style/icons/toolbar/clear.svg'; import closeSvgstr from '../../style/icons/toolbar/close.svg'; import consoleSvgstr from '../../style/icons/filetype/console.svg'; import copySvgstr from '../../style/icons/toolbar/copy.svg'; @@ -88,6 +89,7 @@ export const caseSensitiveIcon = new LabIcon({ name: 'ui-components:case-sensiti export const checkIcon = new LabIcon({ name: 'ui-components:check', svgstr: checkSvgstr }); export const circleEmptyIcon = new LabIcon({ name: 'ui-components:circle-empty', svgstr: circleEmptySvgstr }); export const circleIcon = new LabIcon({ name: 'ui-components:circle', svgstr: circleSvgstr }); +export const clearIcon = new LabIcon({ name: 'ui-components:clear', svgstr: clearSvgstr }); export const closeIcon = new LabIcon({ name: 'ui-components:close', svgstr: closeSvgstr }); export const consoleIcon = new LabIcon({ name: 'ui-components:console', svgstr: consoleSvgstr }); export const copyIcon = new LabIcon({ name: 'ui-components:copy', svgstr: copySvgstr }); 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/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 @@ + + + + + + + + From bae948af44802417a6a5cfc3f8b3203ff7b5cc10 Mon Sep 17 00:00:00 2001 From: telamonian Date: Sat, 22 Feb 2020 02:54:53 -0500 Subject: [PATCH 31/47] integrity --- packages/console-extension/package.json | 2 +- packages/fileeditor-extension/package.json | 2 +- packages/inspector-extension/package.json | 2 +- packages/mainmenu/package.json | 2 +- packages/vdom-extension/package.json | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/console-extension/package.json b/packages/console-extension/package.json index bdd04b016c25..d8f839887639 100644 --- a/packages/console-extension/package.json +++ b/packages/console-extension/package.json @@ -46,7 +46,7 @@ "@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.1", + "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", "@lumino/coreutils": "^1.4.2", "@lumino/disposable": "^1.3.4", diff --git a/packages/fileeditor-extension/package.json b/packages/fileeditor-extension/package.json index 7bcf9131a0ea..fbbddee776e3 100644 --- a/packages/fileeditor-extension/package.json +++ b/packages/fileeditor-extension/package.json @@ -48,7 +48,7 @@ "@jupyterlab/mainmenu": "^2.0.0-rc.1", "@jupyterlab/settingregistry": "^2.0.0-rc.1", "@jupyterlab/statusbar": "^2.0.0-rc.1", - "@jupyterlab/ui-components": "^2.0.0-rc.1", + "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/commands": "^1.9.2", "@lumino/coreutils": "^1.4.2", "@lumino/widgets": "^1.10.2" diff --git a/packages/inspector-extension/package.json b/packages/inspector-extension/package.json index e3451efdfa95..bd76e6370424 100644 --- a/packages/inspector-extension/package.json +++ b/packages/inspector-extension/package.json @@ -42,7 +42,7 @@ "@jupyterlab/inspector": "^2.0.0-rc.1", "@jupyterlab/launcher": "^2.0.0-rc.1", "@jupyterlab/notebook": "^2.0.0-rc.1", - "@jupyterlab/ui-components": "^2.0.0-rc.1" + "@jupyterlab/ui-components": "^2.0.0-rc.2" }, "devDependencies": { "rimraf": "~3.0.0", diff --git a/packages/mainmenu/package.json b/packages/mainmenu/package.json index 4671ad1668bd..fea58c867c99 100644 --- a/packages/mainmenu/package.json +++ b/packages/mainmenu/package.json @@ -37,7 +37,7 @@ "dependencies": { "@jupyterlab/apputils": "^2.0.0-rc.1", "@jupyterlab/services": "^5.0.0-rc.1", - "@jupyterlab/ui-components": "^2.0.0-rc.1", + "@jupyterlab/ui-components": "^2.0.0-rc.2", "@lumino/algorithm": "^1.2.3", "@lumino/commands": "^1.9.2", "@lumino/coreutils": "^1.4.2", diff --git a/packages/vdom-extension/package.json b/packages/vdom-extension/package.json index 15f48438679d..d686c5d8f463 100644 --- a/packages/vdom-extension/package.json +++ b/packages/vdom-extension/package.json @@ -39,7 +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.1", + "@jupyterlab/ui-components": "^2.0.0-rc.2", "@jupyterlab/vdom": "^2.0.0-rc.1" }, "devDependencies": { From 8db32e3029196389b89319901bb3f640e1e417ca Mon Sep 17 00:00:00 2001 From: telamonian Date: Sat, 22 Feb 2020 03:07:19 -0500 Subject: [PATCH 32/47] grouped Widget subclasses tweaked for svg icons into `widgets` subpkg --- packages/ui-components/src/icon/index.ts | 6 ++---- .../src/icon/{ => widgets}/commandpalettesvg.ts | 6 +++--- packages/ui-components/src/icon/widgets/index.ts | 6 ++++++ packages/ui-components/src/icon/{ => widgets}/menusvg.ts | 6 +++--- packages/ui-components/src/icon/{ => widgets}/tabbarsvg.ts | 6 +++--- packages/ui-components/src/index.ts | 3 ++- 6 files changed, 19 insertions(+), 14 deletions(-) rename packages/ui-components/src/icon/{ => widgets}/commandpalettesvg.ts (94%) create mode 100644 packages/ui-components/src/icon/widgets/index.ts rename packages/ui-components/src/icon/{ => widgets}/menusvg.ts (96%) rename packages/ui-components/src/icon/{ => widgets}/tabbarsvg.ts (95%) diff --git a/packages/ui-components/src/icon/index.ts b/packages/ui-components/src/icon/index.ts index 7dd0098a78a5..83069e79fc96 100644 --- a/packages/ui-components/src/icon/index.ts +++ b/packages/ui-components/src/icon/index.ts @@ -1,9 +1,7 @@ // Copyright (c) Jupyter Development Team. // Distributed under the terms of the Modified BSD License. +export * from './widgets'; + export * from './iconimports'; export * from './labicon'; - -export * from './commandpalettesvg'; -export * from './menusvg'; -export * from './tabbarsvg'; diff --git a/packages/ui-components/src/icon/commandpalettesvg.ts b/packages/ui-components/src/icon/widgets/commandpalettesvg.ts similarity index 94% rename from packages/ui-components/src/icon/commandpalettesvg.ts rename to packages/ui-components/src/icon/widgets/commandpalettesvg.ts index f44960fb1658..ae838bef5ec0 100644 --- a/packages/ui-components/src/icon/commandpalettesvg.ts +++ b/packages/ui-components/src/icon/widgets/commandpalettesvg.ts @@ -4,9 +4,9 @@ import { h, VirtualElement } from '@lumino/virtualdom'; import { CommandPalette } from '@lumino/widgets'; -import { checkIcon, filterListIcon } from './iconimports'; -import { iconStyle } from '../style'; -import { classes } from '../utils'; +import { checkIcon, filterListIcon } from '../iconimports'; +import { iconStyle } from '../../style'; +import { classes } from '../../utils'; const searchHeaderIcon = filterListIcon.bindprops({ justify: 'center', 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/menusvg.ts b/packages/ui-components/src/icon/widgets/menusvg.ts similarity index 96% rename from packages/ui-components/src/icon/menusvg.ts rename to packages/ui-components/src/icon/widgets/menusvg.ts index b1f377f5ad75..c36d557f7da2 100644 --- a/packages/ui-components/src/icon/menusvg.ts +++ b/packages/ui-components/src/icon/widgets/menusvg.ts @@ -4,9 +4,9 @@ import { h, VirtualElement } from '@lumino/virtualdom'; import { Menu } from '@lumino/widgets'; -import { caretRightIcon, checkIcon } from './iconimports'; -import { iconStyle } from '../style'; -import { classes } from '../utils'; +import { caretRightIcon, checkIcon } from '../iconimports'; +import { iconStyle } from '../../style'; +import { classes } from '../../utils'; const submenuIcon = caretRightIcon.bindprops({ justify: 'center', diff --git a/packages/ui-components/src/icon/tabbarsvg.ts b/packages/ui-components/src/icon/widgets/tabbarsvg.ts similarity index 95% rename from packages/ui-components/src/icon/tabbarsvg.ts rename to packages/ui-components/src/icon/widgets/tabbarsvg.ts index 0f755e4d80ae..32bf691a7277 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 { iconStyle } from '../../style'; +import { classes } from '../../utils'; /** * a widget which displays titles as a single row or column of tabs. 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'; From 8e2b24372ac47ffdf5241e14dce89edd77d7816b Mon Sep 17 00:00:00 2001 From: telamonian Date: Sat, 22 Feb 2020 17:30:47 -0500 Subject: [PATCH 33/47] bumped lumino deps to latest, needed for icon/virtualdom fixes --- dev_mode/package.json | 14 +-- examples/cell/package.json | 4 +- examples/console/package.json | 4 +- examples/filebrowser/package.json | 4 +- examples/notebook/package.json | 4 +- examples/terminal/package.json | 2 +- .../mock_packages/mimeextension/package.json | 2 +- packages/application-extension/package.json | 4 +- packages/application/package.json | 12 +- packages/apputils-extension/package.json | 8 +- packages/apputils/package.json | 10 +- packages/attachments/package.json | 4 +- packages/cells/package.json | 8 +- packages/celltags/package.json | 2 +- packages/codeeditor/package.json | 8 +- packages/codemirror-extension/package.json | 2 +- packages/codemirror/package.json | 10 +- packages/completer-extension/package.json | 2 +- packages/completer/package.json | 6 +- packages/console-extension/package.json | 4 +- packages/console/package.json | 8 +- packages/coreutils/package.json | 4 +- packages/csvviewer-extension/package.json | 6 +- packages/csvviewer/package.json | 8 +- packages/docmanager-extension/package.json | 4 +- packages/docmanager/package.json | 6 +- packages/docregistry/package.json | 6 +- .../documentsearch-extension/package.json | 2 +- packages/documentsearch/package.json | 8 +- packages/extensionmanager/package.json | 2 +- packages/filebrowser-extension/package.json | 4 +- packages/filebrowser/package.json | 10 +- packages/fileeditor-extension/package.json | 4 +- packages/fileeditor/package.json | 2 +- packages/help-extension/package.json | 2 +- packages/htmlviewer/package.json | 2 +- packages/imageviewer/package.json | 2 +- packages/inspector/package.json | 8 +- packages/json-extension/package.json | 2 +- packages/launcher-extension/package.json | 2 +- packages/launcher/package.json | 6 +- packages/logconsole-extension/package.json | 4 +- packages/logconsole/package.json | 6 +- packages/mainmenu-extension/package.json | 4 +- packages/mainmenu/package.json | 6 +- packages/markdownviewer/package.json | 2 +- packages/notebook-extension/package.json | 6 +- packages/notebook/package.json | 8 +- packages/observables/package.json | 4 +- packages/outputarea/package.json | 6 +- packages/pdf-extension/package.json | 4 +- packages/property-inspector/package.json | 6 +- packages/rendermime-interfaces/package.json | 2 +- packages/rendermime/package.json | 4 +- packages/running/package.json | 4 +- packages/services/package.json | 6 +- packages/settingeditor-extension/package.json | 2 +- packages/settingeditor/package.json | 6 +- packages/settingregistry/package.json | 6 +- packages/shortcuts-extension/package.json | 4 +- packages/statedb/package.json | 6 +- packages/statusbar-extension/package.json | 2 +- packages/statusbar/package.json | 8 +- packages/tabmanager-extension/package.json | 2 +- packages/terminal-extension/package.json | 2 +- packages/terminal/package.json | 2 +- packages/tooltip-extension/package.json | 2 +- packages/tooltip/package.json | 2 +- packages/ui-components/package.json | 6 +- packages/vdom/package.json | 2 +- packages/vega5-extension/package.json | 2 +- tests/package.json | 10 +- tests/test-application/package.json | 4 +- tests/test-apputils/package.json | 6 +- tests/test-cells/package.json | 2 +- tests/test-codeeditor/package.json | 2 +- tests/test-completer/package.json | 2 +- tests/test-console/package.json | 4 +- tests/test-coreutils/package.json | 2 +- tests/test-csvviewer/package.json | 4 +- tests/test-docmanager/package.json | 2 +- tests/test-docregistry/package.json | 4 +- tests/test-filebrowser/package.json | 2 +- tests/test-fileeditor/package.json | 2 +- tests/test-imageviewer/package.json | 2 +- tests/test-inspector/package.json | 4 +- tests/test-logconsole/package.json | 4 +- tests/test-mainmenu/package.json | 4 +- tests/test-notebook/package.json | 2 +- tests/test-outputarea/package.json | 2 +- tests/test-rendermime/package.json | 2 +- tests/test-services/package.json | 2 +- tests/test-statedb/package.json | 4 +- tests/test-statusbar/package.json | 4 +- tests/test-terminal/package.json | 2 +- testutils/package.json | 2 +- yarn.lock | 107 +++++++++--------- 97 files changed, 263 insertions(+), 262 deletions(-) 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/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/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/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/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/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/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/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 d8f839887639..cc1239f77cf3 100644 --- a/packages/console-extension/package.json +++ b/packages/console-extension/package.json @@ -49,9 +49,9 @@ "@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/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/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/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/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/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/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/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/fileeditor-extension/package.json b/packages/fileeditor-extension/package.json index fbbddee776e3..570feeb7c81b 100644 --- a/packages/fileeditor-extension/package.json +++ b/packages/fileeditor-extension/package.json @@ -49,9 +49,9 @@ "@jupyterlab/settingregistry": "^2.0.0-rc.1", "@jupyterlab/statusbar": "^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/widgets": "^1.10.2" + "@lumino/widgets": "^1.11.1" }, "devDependencies": { "rimraf": "~3.0.0", 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/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/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/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/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/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/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/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/package.json b/packages/mainmenu/package.json index fea58c867c99..6d4406a0acb4 100644 --- a/packages/mainmenu/package.json +++ b/packages/mainmenu/package.json @@ -39,10 +39,10 @@ "@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/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/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/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/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/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/services/package.json b/packages/services/package.json index 38d3e12cbbbc..1eb777c20c69 100644 --- a/packages/services/package.json +++ b/packages/services/package.json @@ -48,9 +48,9 @@ "@jupyterlab/statedb": "^2.0.0-rc.1", "@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/disposable": "^1.3.5", + "@lumino/polling": "^1.0.4", + "@lumino/signaling": "^1.3.5", "node-fetch": "^2.6.0", "ws": "^7.2.0" }, diff --git a/packages/settingeditor-extension/package.json b/packages/settingeditor-extension/package.json index 97ee059cf356..991229d3cdb6 100644 --- a/packages/settingeditor-extension/package.json +++ b/packages/settingeditor-extension/package.json @@ -44,7 +44,7 @@ "@jupyterlab/settingregistry": "^2.0.0-rc.1", "@jupyterlab/statedb": "^2.0.0-rc.1", "@jupyterlab/ui-components": "^2.0.0-rc.2", - "@lumino/disposable": "^1.3.4" + "@lumino/disposable": "^1.3.5" }, "devDependencies": { "rimraf": "~3.0.0", 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/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/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/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/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/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/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/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" From 96ca4ca288132bba2ad0058160e0b894fe5d07c4 Mon Sep 17 00:00:00 2001 From: telamonian Date: Sat, 22 Feb 2020 20:53:07 -0500 Subject: [PATCH 34/47] fixed icon kind docstrings --- packages/ui-components/src/style/icon.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts index df050e08a285..61c908ac49fa 100644 --- a/packages/ui-components/src/style/icon.ts +++ b/packages/ui-components/src/style/icon.ts @@ -6,14 +6,21 @@ import { NestedCSSProperties } from 'typestyle/lib/types'; /** * - breadCrumb: The path icons above the filebrowser - * - dockPanelBar: The tab icons above the main area + * - 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 - * - tabManager: The icons for the tabManager in the sidebar + * - statusBar: The icons in the status bar + * - toolbarButton: The icon shown on a toolbar button */ export type IconKindType = | 'breadCrumb' From 5a0a51b31cec21c144929229fd36564d8d8156fd Mon Sep 17 00:00:00 2001 From: telamonian Date: Sun, 23 Feb 2020 16:47:10 -0500 Subject: [PATCH 35/47] cleaned up icon styling system --- packages/ui-components/src/style/icon.ts | 881 +++++++++++++---------- 1 file changed, 488 insertions(+), 393 deletions(-) diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts index 61c908ac49fa..5c9344e5ef64 100644 --- a/packages/ui-components/src/style/icon.ts +++ b/packages/ui-components/src/style/icon.ts @@ -1,424 +1,519 @@ // 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 - * - 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 - */ -export type IconKindType = - | 'breadCrumb' - | 'commandPaletteHeader' - | 'commandPaletteItem' - | 'launcherCard' - | 'launcherSection' - | 'listing' - | 'listingHeaderItem' - | 'mainAreaTab' - | 'menuItem' - | 'runningItem' - | 'select' - | 'settingsEditor' - | 'sideBar' - | 'splash' - | 'statusBar' - | 'toolbarButton'; - -export type IconJustifyType = 'center' | 'left' | 'right'; - -export interface IIconStyle extends NestedCSSProperties { +export namespace LabIcon { /** - * 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 IStyleBuiltin = + | '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 + * Collections of CSS props that can be fed directly to + * typestyle's style() function */ - justify?: IconJustifyType; -} + interface IStyleLiteralPure { + /** + * CSS properties that will be applied to the outer container + * element via a typestyle class + */ + containerStyle?: NestedCSSProperties; + + /** + * CSS properties that will be applied to the inner svg + * element via a typestyle class + */ + elementStyle?: NestedCSSProperties; + + /** + * FUTURE: CSS properties that will be applied to the label + * element, if any, via a typestyle class + */ + // labelStyle?: NestedCSSProperties; + } -/** - * 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 iconCSSCommandPaletteHeader: NestedCSSProperties = { - height: '14px', - width: '14px' -}; - -const iconCSSCommandPaletteItem: NestedCSSProperties = { - height: '16px', - width: '16px' -}; - -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' - } + /** + * Collections of CSS props plus some custom options + */ + interface IStyleLiteral extends IStyleLiteralPure { + /** + * How to position the inner svg element, + * relative to the outer container + */ + elementPosition?: IPosition; + + /** + * FUTURE: how to position the outer container + */ + // containerPosition?: IPosition; + + /** + * FUTURE: the size of the inner svg element + */ + // elementSize?: ISize + + /** + * FUTURE: how to position the label element (if any), + * relative to the outer container + */ + // labelPosition?: IPosition; + } + + /** + * The actual type of the iconStyleClass arg + */ + type IStyle = IStyleBuiltin | IStyleLiteral; + + export interface IStyleProps extends NestedCSSProperties, IStyleLiteral { + /** + * the kind of the icon, associated with a builtin stylesheet + */ + kind?: IStyleBuiltin; + + /** + * @deprecated use elementPosition instead + */ + justify?: IPosition; } -}; - -const iconCSSMenuItem: NestedCSSProperties = { - height: '16px', - width: '16px' -}; - -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, - commandPaletteHeader: iconCSSCommandPaletteHeader, - commandPaletteItem: iconCSSCommandPaletteItem, - launcherCard: iconCSSLauncherCard, - launcherSection: iconCSSLauncherSection, - listing: iconCSSListing, - listingHeaderItem: iconCSSlistingHeaderItem, - mainAreaTab: iconCSSMainAreaTab, - menuItem: iconCSSMenuItem, - 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' + + /** + * The builtin styles + */ + export const builtinStyles: { [k in IStyleBuiltin]: IStyleLiteral } = { + breadCrumb: { + containerStyle: { + $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 + } + } + }, + elementStyle: { + 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: { + containerStyle: { + height: '14px', + margin: '0 14px 0 auto' + }, + elementStyle: { + height: '14px', + width: '14px' + }, + elementPosition: 'center' }, - ['.jp-mod-dropTarget&']: { - backgroundColor: 'var(--jp-brand-color2)', - opacity: 0.7 - } - } -}; - -const containerCSSCommandPaletteHeader: NestedCSSProperties = { - height: '14px', - margin: '0 14px 0 auto' -}; - -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: { + elementStyle: { + height: '16px', + width: '16px' + }, + elementPosition: 'center' }, - '#tab-manager &': { - marginRight: '2px', - position: 'relative' - } - } -}; - -const containerCSSMenuItem: NestedCSSProperties = { - display: 'inline-block', - verticalAlign: 'middle' -}; - -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: { + containerStyle: { + height: '68px' + }, + elementStyle: { + height: '52px', + width: '52px' + }, + elementPosition: 'center' + }, + + launcherSection: { + containerStyle: { + boxSizing: 'border-box', + marginRight: '12px' + }, + elementStyle: { + height: '32px', + width: '32px' + }, + elementPosition: 'center' + }, + + listing: { + containerStyle: { + flex: '0 0 20px', + marginRight: '4px', + position: 'relative' + }, + elementStyle: { + height: '16px', + width: '16px' + }, + elementPosition: 'center' + }, + + listingHeaderItem: { + containerStyle: { + display: 'inline', + height: '16px', + width: '16px' + }, + elementStyle: { + height: 'auto', + margin: '-2px 0 0 0', + width: '20px' + }, + elementPosition: 'center' + }, + + mainAreaTab: { + containerStyle: { + $nest: { + '.lm-DockPanel-tabBar &': { + marginRight: '4px' + }, + '#tab-manager &': { + marginRight: '2px', + position: 'relative' + } + } + }, + elementStyle: { + $nest: { + '.lm-DockPanel-tabBar &': { + height: '14px', + width: '14px' + }, + '#tab-manager &': { + height: '16px', + width: '16px' + } + } + }, + elementPosition: 'center' + }, + + menuItem: { + containerStyle: { + display: 'inline-block', + verticalAlign: 'middle' + }, + elementStyle: { + height: '16px', + width: '16px' + }, + elementPosition: 'center' + }, + + runningItem: { + containerStyle: { + margin: '0px 4px 0px 12px' + }, + elementStyle: { + height: '16px', + width: '16px' + }, + elementPosition: 'center' + }, + + select: { + containerStyle: { + pointerEvents: 'none' + }, + elementStyle: { + position: 'absolute', + height: 'auto', + width: '16px' + }, + elementPosition: 'center' + }, + + settingsEditor: { + containerStyle: { + display: 'inline-block', + flex: '0 0 20px', + marginLeft: '2px', + marginRight: '1px', + position: 'relative', + height: '20px', + width: '20px' + }, + elementStyle: { + height: '16px', + width: '16px' + }, + 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' + - ' )' + + sideBar: { + containerStyle: { + // `&` 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' + + ' )' + } + } + }, + elementStyle: { + width: '20px' + }, + elementPosition: 'center' }, - // right sidebar tab divs - '.jp-SideBar.jp-mod-right .lm-TabBar-tab &': { - transform: 'rotate(-90deg)' + splash: { + containerStyle: { + animation: '0.3s fade-in linear forwards', + height: '100%', + width: '100%', + zIndex: 1 + }, + elementStyle: { + width: '100px' + }, + 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' + - ' )' + + statusBar: { + elementStyle: { + left: '0px', + top: '0px', + height: '18px', + width: '20px', + position: 'relative' + }, + elementPosition: 'center' + }, + + toolbarButton: { + containerStyle: { + display: 'inline-block', + margin: 'auto', + verticalAlign: 'middle' + }, + elementStyle: { + height: '16px', + width: '16px' + }, + elementPosition: 'center' } - } -}; - -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, - commandPaletteHeader: containerCSSCommandPaletteHeader, - commandPaletteItem: {}, - launcherCard: containerCSSLauncherCard, - launcherSection: containerCSSLauncherSection, - listing: containerCSSListing, - listingHeaderItem: containerCSSListingHeaderItem, - mainAreaTab: containerCSSMainAreaTab, - menuItem: containerCSSMenuItem, - 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 }; -} -/** - * 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 _elementPositionFactory(extra: NestedCSSProperties) { + return { + containerStyle: { + alignItems: 'center', + display: 'flex' + }, + elementStyle: { + display: 'block', + ...extra + } + }; + } - return { - ...(justify ? containerCSSJustify[justify] : {}), - ...(kind ? containerCSSKind[kind] : {}) + /** + * Styles to help with positioning + */ + export const positionStyles: { [k in IPosition]: IStyleLiteralPure } = { + 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 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 ''; + // function _elementSizeFactory(size: string) { + // return { + // elementStyle: { + // height: size, + // width: size + // } + // } + // } + + // /** + // * styles that establish some default sizes + // */ + // export const styleSizes: { [k in ISize]: IStyleLiteralPure } = { + // small: _elementSizeFactory('14px'), + // normal: _elementSizeFactory('16px'), + // large: _elementSizeFactory('20px'), + // xlarge: _elementSizeFactory('24px') + // } + + const _builtinStylesCache = Object.keys(builtinStyles).reduce( + (c: any, k: IStyleBuiltin) => { + c[k] = resolveStyle(builtinStyles[k]); + return c; + }, + {} + ); + + /** + * Merge two or more pure (CSS props only) icon styles + */ + function mergeStyles(styles: IStyleLiteralPure[]): IStyleLiteralPure { + return { + containerStyle: Object.assign({}, ...styles.map(s => s.containerStyle)), + elementStyle: Object.assign({}, ...styles.map(s => s.elementStyle)) + }; } - const conCSS = containerCSS(props); + /** + * Resolve an icon style into a "pure" style that contains only + * collections of CSS props that can be passed directly into typestyle + */ + function resolveStyle(style: IStyle): IStyleLiteralPure { + if (typeof style === 'string') { + // return pre-resolved style + return _builtinStylesCache[style]; + } - return style({ - ...conCSS, - $nest: { - ...conCSS.$nest, - ['svg']: iconCSS(props) + let styles = [style]; + if (style.elementPosition) { + styles.unshift(positionStyles[style.elementPosition]); } - }); -}; - -/** - * 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 mergeStyles(styles); + } + + /** + * Resolve and merge multiple icon styles + */ + function resolveStyles(styles: (IStyle | undefined)[]) { + return mergeStyles(styles.filter(Boolean).map(s => resolveStyle(s!))); + } + + /** + * Resolve a pure icon style into a typestyle class + */ + function resolveStyleClass(style: IStyleLiteralPure): string { + return typestyleClass({ + ...style.containerStyle, + $nest: { + ...style.containerStyle?.$nest, + ['svg']: style.elementStyle + } + }); } - return style(iconCSS(props)); -}; + /** + * Get a typestyle class, given a given set of icon styling props + */ + export function styleClass(props?: IStyleProps): string { + if (!props || Object.keys(props).length === 0) { + // props is empty + return ''; + } + + const { + containerStyle, + elementStyle, + elementPosition, + kind, + justify, + ...elementStyleExtra + } = props; + // DEPRECATED: alias justify => elementPosition + if (!elementPosition) { + props.elementPosition = justify; + } + // merge any extra element style props + props.elementStyle = { ...props.elementStyle, ...elementStyleExtra }; + + return resolveStyleClass(resolveStyles([kind, props])); + } +} From 2ae36a5548fb60824d60ab7e141242521c163e3a Mon Sep 17 00:00:00 2001 From: telamonian Date: Sun, 23 Feb 2020 17:48:18 -0500 Subject: [PATCH 36/47] plugged new icon styling system into the rest of the program --- packages/ui-components/src/icon/labicon.tsx | 56 ++++++++++++------- .../src/icon/widgets/commandpalettesvg.ts | 7 ++- .../ui-components/src/icon/widgets/menusvg.ts | 4 +- .../src/icon/widgets/tabbarsvg.ts | 8 ++- packages/ui-components/src/style/icon.ts | 42 +++++++------- 5 files changed, 69 insertions(+), 48 deletions(-) diff --git a/packages/ui-components/src/icon/labicon.tsx b/packages/ui-components/src/icon/labicon.tsx index a61cb7cd0282..52566394ff61 100644 --- a/packages/ui-components/src/icon/labicon.tsx +++ b/packages/ui-components/src/icon/labicon.tsx @@ -7,7 +7,7 @@ import { ElementAttrs, VirtualElement, VirtualNode } from '@lumino/virtualdom'; import React from 'react'; import ReactDOM from 'react-dom'; -import { iconStyle, IIconStyle } from '../style'; +import { LabIconStyle } from '../style'; import { getReactAttrs, classes } from '../utils'; import badSvgstr from '../../style/debug/bad.svg'; @@ -287,7 +287,7 @@ 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 + * @param styleProps - 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. @@ -302,7 +302,7 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { label, title, tag = 'div', - ...propsStyle + ...styleProps }: LabIcon.IProps = { ...this._props, ...props }; // check if icon element is already set @@ -336,7 +336,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); @@ -395,7 +395,7 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { label, title, tag = 'div', - ...propsStyle + ...styleProps }: LabIcon.IProps = { ...this._props, ...props }; // set up component state via useState hook @@ -434,7 +434,7 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { ); if (container) { - Private.initContainer({ container, className, propsStyle, title }); + Private.initContainer({ container, className, styleProps, title }); return ( @@ -444,7 +444,12 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { ); } else { return ( - + {svgComponent} {label} @@ -521,7 +526,7 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { * * @param ref - forwarded to the ref prop of the icon's svg element * - * @param propsStyle - style parameters that get passed to TypeStyle in + * @param styleProps - 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. @@ -590,7 +595,7 @@ export namespace LabIcon { /** * 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 @@ -728,6 +733,13 @@ export namespace LabIcon { ReactDOM.unmountComponentAtNode(container); } } + + /************** + * re-exports * + **************/ + + export const kindStyles = LabIconStyle.kindStyles; + export const positionStyles = LabIconStyle.positionStyles; } namespace Private { @@ -737,7 +749,7 @@ namespace Private { label, title, tag = 'div', - ...propsStyle + ...styleProps }: LabIcon.IProps): HTMLElement { if (container?.className === className) { // nothing needs doing, return the icon node @@ -756,7 +768,7 @@ namespace Private { if (label != null) { container.textContent = label; } - Private.initContainer({ container, className, propsStyle, title }); + Private.initContainer({ container, className, styleProps, title }); return container; } @@ -769,7 +781,7 @@ namespace Private { label, title, tag = 'div', - ...propsStyle + ...styleProps }: LabIcon.IProps, ref: LabIcon.IReactRef ) => { @@ -777,13 +789,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} @@ -796,28 +810,28 @@ 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 ''; } diff --git a/packages/ui-components/src/icon/widgets/commandpalettesvg.ts b/packages/ui-components/src/icon/widgets/commandpalettesvg.ts index ae838bef5ec0..a74fdaa6d742 100644 --- a/packages/ui-components/src/icon/widgets/commandpalettesvg.ts +++ b/packages/ui-components/src/icon/widgets/commandpalettesvg.ts @@ -5,7 +5,7 @@ import { h, VirtualElement } from '@lumino/virtualdom'; import { CommandPalette } from '@lumino/widgets'; import { checkIcon, filterListIcon } from '../iconimports'; -import { iconStyle } from '../../style'; +import { LabIconStyle } from '../../style'; import { classes } from '../../utils'; const searchHeaderIcon = filterListIcon.bindprops({ @@ -81,7 +81,10 @@ export namespace CommandPaletteSvg { /* */ return classes( - iconStyle({ justify: 'center', kind: 'commandPaletteItem' }), + LabIconStyle.styleClass({ + justify: 'center', + kind: 'commandPaletteItem' + }), data.item.iconClass, name ); diff --git a/packages/ui-components/src/icon/widgets/menusvg.ts b/packages/ui-components/src/icon/widgets/menusvg.ts index c36d557f7da2..bcfd9d5607c5 100644 --- a/packages/ui-components/src/icon/widgets/menusvg.ts +++ b/packages/ui-components/src/icon/widgets/menusvg.ts @@ -5,7 +5,7 @@ import { h, VirtualElement } from '@lumino/virtualdom'; import { Menu } from '@lumino/widgets'; import { caretRightIcon, checkIcon } from '../iconimports'; -import { iconStyle } from '../../style'; +import { LabIconStyle } from '../../style'; import { classes } from '../../utils'; const submenuIcon = caretRightIcon.bindprops({ @@ -116,7 +116,7 @@ export namespace MenuSvg { return classes(data.item.iconClass, name); } else { return classes( - iconStyle({ justify: 'center', kind: 'menuItem' }), + LabIconStyle.styleClass({ justify: 'center', kind: 'menuItem' }), data.item.iconClass, name ); diff --git a/packages/ui-components/src/icon/widgets/tabbarsvg.ts b/packages/ui-components/src/icon/widgets/tabbarsvg.ts index 32bf691a7277..f5552b299706 100644 --- a/packages/ui-components/src/icon/widgets/tabbarsvg.ts +++ b/packages/ui-components/src/icon/widgets/tabbarsvg.ts @@ -5,7 +5,7 @@ import { hpass, VirtualElement } from '@lumino/virtualdom'; import { DockPanel, TabBar, Widget } from '@lumino/widgets'; import { closeIcon } from '../iconimports'; -import { iconStyle } from '../../style'; +import { LabIconStyle } from '../../style'; import { classes } from '../../utils'; /** @@ -39,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({ + justify: 'center', + height: '16px', + width: '16px' + }) ); return (hpass( diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts index 5c9344e5ef64..f03162f8cb22 100644 --- a/packages/ui-components/src/style/icon.ts +++ b/packages/ui-components/src/style/icon.ts @@ -4,7 +4,7 @@ import { style as typestyleClass } from 'typestyle/lib'; import { NestedCSSProperties } from 'typestyle/lib/types'; -export namespace LabIcon { +export namespace LabIconStyle { /** * - breadCrumb: The path icons above the filebrowser * - commandPaletteHeader: The icon to the right of palette section headers @@ -23,7 +23,7 @@ export namespace LabIcon { * - statusBar: The icons in the status bar * - toolbarButton: The icon shown on a toolbar button */ - type IStyleBuiltin = + type IBuiltin = | 'breadCrumb' | 'commandPaletteHeader' | 'commandPaletteItem' @@ -62,7 +62,7 @@ export namespace LabIcon { * Collections of CSS props that can be fed directly to * typestyle's style() function */ - interface IStyleLiteralPure { + interface IStylePure { /** * CSS properties that will be applied to the outer container * element via a typestyle class @@ -85,7 +85,7 @@ export namespace LabIcon { /** * Collections of CSS props plus some custom options */ - interface IStyleLiteral extends IStyleLiteralPure { + export interface IStyle extends IStylePure { /** * How to position the inner svg element, * relative to the outer container @@ -110,15 +110,15 @@ export namespace LabIcon { } /** - * The actual type of the iconStyleClass arg + * Type to help with resolving a style that might be a string */ - type IStyle = IStyleBuiltin | IStyleLiteral; + type IStyleResolvable = IStyle | IBuiltin; - export interface IStyleProps extends NestedCSSProperties, IStyleLiteral { + export interface IProps extends NestedCSSProperties, IStyle { /** * the kind of the icon, associated with a builtin stylesheet */ - kind?: IStyleBuiltin; + kind?: IBuiltin; /** * @deprecated use elementPosition instead @@ -127,9 +127,9 @@ export namespace LabIcon { } /** - * The builtin styles + * The kind (ie builtin) styles */ - export const builtinStyles: { [k in IStyleBuiltin]: IStyleLiteral } = { + export const kindStyles: { [k in IBuiltin]: IStyle } = { breadCrumb: { containerStyle: { $nest: { @@ -401,7 +401,7 @@ export namespace LabIcon { /** * Styles to help with positioning */ - export const positionStyles: { [k in IPosition]: IStyleLiteralPure } = { + export const positionStyles: { [k in IPosition]: IStyle } = { center: _elementPositionFactory({ margin: '0 auto', width: '100%' }), top: _elementPositionFactory({ margin: '0 0 auto 0' }), @@ -427,16 +427,16 @@ export namespace LabIcon { // /** // * styles that establish some default sizes // */ - // export const styleSizes: { [k in ISize]: IStyleLiteralPure } = { + // export const styleSizes: { [k in ISize]: IStylePure } = { // small: _elementSizeFactory('14px'), // normal: _elementSizeFactory('16px'), // large: _elementSizeFactory('20px'), // xlarge: _elementSizeFactory('24px') // } - const _builtinStylesCache = Object.keys(builtinStyles).reduce( - (c: any, k: IStyleBuiltin) => { - c[k] = resolveStyle(builtinStyles[k]); + const _kindStylesCache = Object.keys(kindStyles).reduce( + (c: any, k: IBuiltin) => { + c[k] = resolveStyle(kindStyles[k]); return c; }, {} @@ -445,7 +445,7 @@ export namespace LabIcon { /** * Merge two or more pure (CSS props only) icon styles */ - function mergeStyles(styles: IStyleLiteralPure[]): IStyleLiteralPure { + function mergeStyles(styles: IStylePure[]): IStylePure { return { containerStyle: Object.assign({}, ...styles.map(s => s.containerStyle)), elementStyle: Object.assign({}, ...styles.map(s => s.elementStyle)) @@ -456,10 +456,10 @@ export namespace LabIcon { * Resolve an icon style into a "pure" style that contains only * collections of CSS props that can be passed directly into typestyle */ - function resolveStyle(style: IStyle): IStyleLiteralPure { + function resolveStyle(style: IStyleResolvable): IStylePure { if (typeof style === 'string') { // return pre-resolved style - return _builtinStylesCache[style]; + return _kindStylesCache[style]; } let styles = [style]; @@ -473,14 +473,14 @@ export namespace LabIcon { /** * Resolve and merge multiple icon styles */ - function resolveStyles(styles: (IStyle | undefined)[]) { + function resolveStyles(styles: (IStyleResolvable | undefined)[]) { return mergeStyles(styles.filter(Boolean).map(s => resolveStyle(s!))); } /** * Resolve a pure icon style into a typestyle class */ - function resolveStyleClass(style: IStyleLiteralPure): string { + function resolveStyleClass(style: IStylePure): string { return typestyleClass({ ...style.containerStyle, $nest: { @@ -493,7 +493,7 @@ export namespace LabIcon { /** * Get a typestyle class, given a given set of icon styling props */ - export function styleClass(props?: IStyleProps): string { + export function styleClass(props?: IProps): string { if (!props || Object.keys(props).length === 0) { // props is empty return ''; From 996ead677d24591ddc4caa4263d9bf13a7840f8c Mon Sep 17 00:00:00 2001 From: telamonian Date: Sun, 23 Feb 2020 21:04:25 -0500 Subject: [PATCH 37/47] fixes for/streamling of icon style merging --- packages/ui-components/src/style/icon.ts | 163 +++++++++++++++-------- 1 file changed, 106 insertions(+), 57 deletions(-) diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts index f03162f8cb22..6750e683960d 100644 --- a/packages/ui-components/src/style/icon.ts +++ b/packages/ui-components/src/style/icon.ts @@ -82,10 +82,7 @@ export namespace LabIconStyle { // labelStyle?: NestedCSSProperties; } - /** - * Collections of CSS props plus some custom options - */ - export interface IStyle extends IStylePure { + interface IStyleOptions { /** * How to position the inner svg element, * relative to the outer container @@ -109,16 +106,23 @@ export namespace LabIconStyle { // labelPosition?: IPosition; } + /** + * Collections of CSS props plus some custom options + */ + export interface IStyle extends IStylePure { + options?: IStyleOptions; + } + /** * Type to help with resolving a style that might be a string */ type IStyleResolvable = IStyle | IBuiltin; - export interface IProps extends NestedCSSProperties, IStyle { + export interface IProps extends NestedCSSProperties, IStyleOptions { /** * the kind of the icon, associated with a builtin stylesheet */ - kind?: IBuiltin; + kind?: IStyleResolvable | IStyleResolvable[]; /** * @deprecated use elementPosition instead @@ -168,7 +172,9 @@ export namespace LabIconStyle { height: '14px', width: '14px' }, - elementPosition: 'center' + options: { + elementPosition: 'center' + } }, commandPaletteItem: { @@ -176,7 +182,9 @@ export namespace LabIconStyle { height: '16px', width: '16px' }, - elementPosition: 'center' + options: { + elementPosition: 'center' + } }, launcherCard: { @@ -187,7 +195,9 @@ export namespace LabIconStyle { height: '52px', width: '52px' }, - elementPosition: 'center' + options: { + elementPosition: 'center' + } }, launcherSection: { @@ -199,7 +209,9 @@ export namespace LabIconStyle { height: '32px', width: '32px' }, - elementPosition: 'center' + options: { + elementPosition: 'center' + } }, listing: { @@ -212,7 +224,9 @@ export namespace LabIconStyle { height: '16px', width: '16px' }, - elementPosition: 'center' + options: { + elementPosition: 'center' + } }, listingHeaderItem: { @@ -226,7 +240,9 @@ export namespace LabIconStyle { margin: '-2px 0 0 0', width: '20px' }, - elementPosition: 'center' + options: { + elementPosition: 'center' + } }, mainAreaTab: { @@ -253,7 +269,9 @@ export namespace LabIconStyle { } } }, - elementPosition: 'center' + options: { + elementPosition: 'center' + } }, menuItem: { @@ -265,7 +283,9 @@ export namespace LabIconStyle { height: '16px', width: '16px' }, - elementPosition: 'center' + options: { + elementPosition: 'center' + } }, runningItem: { @@ -276,7 +296,9 @@ export namespace LabIconStyle { height: '16px', width: '16px' }, - elementPosition: 'center' + options: { + elementPosition: 'center' + } }, select: { @@ -287,8 +309,7 @@ export namespace LabIconStyle { position: 'absolute', height: 'auto', width: '16px' - }, - elementPosition: 'center' + } }, settingsEditor: { @@ -305,7 +326,9 @@ export namespace LabIconStyle { height: '16px', width: '16px' }, - elementPosition: 'center' + options: { + elementPosition: 'center' + } }, sideBar: { @@ -344,7 +367,9 @@ export namespace LabIconStyle { elementStyle: { width: '20px' }, - elementPosition: 'center' + options: { + elementPosition: 'center' + } }, splash: { @@ -357,7 +382,9 @@ export namespace LabIconStyle { elementStyle: { width: '100px' }, - elementPosition: 'center' + options: { + elementPosition: 'center' + } }, statusBar: { @@ -368,7 +395,9 @@ export namespace LabIconStyle { width: '20px', position: 'relative' }, - elementPosition: 'center' + options: { + elementPosition: 'center' + } }, toolbarButton: { @@ -381,7 +410,9 @@ export namespace LabIconStyle { height: '16px', width: '16px' }, - elementPosition: 'center' + options: { + elementPosition: 'center' + } } }; @@ -434,47 +465,45 @@ export namespace LabIconStyle { // xlarge: _elementSizeFactory('24px') // } - const _kindStylesCache = Object.keys(kindStyles).reduce( - (c: any, k: IBuiltin) => { - c[k] = resolveStyle(kindStyles[k]); - return c; - }, - {} - ); - /** * Merge two or more pure (CSS props only) icon styles */ - function mergeStyles(styles: IStylePure[]): IStylePure { + function mergeStyles(styles: IStyle[]): IStylePure { return { containerStyle: Object.assign({}, ...styles.map(s => s.containerStyle)), elementStyle: Object.assign({}, ...styles.map(s => s.elementStyle)) }; } - /** - * Resolve an icon style into a "pure" style that contains only - * collections of CSS props that can be passed directly into typestyle - */ - function resolveStyle(style: IStyleResolvable): IStylePure { - if (typeof style === 'string') { - // return pre-resolved style - return _kindStylesCache[style]; + function resolveKind( + kind: IStyleResolvable | IStyleResolvable[] | undefined + ): IStyle[] { + if (!kind) { + return []; } - let styles = [style]; - if (style.elementPosition) { - styles.unshift(positionStyles[style.elementPosition]); + if (!Array.isArray(kind)) { + // wrap in array + kind = [kind]; } - return mergeStyles(styles); + return kind.map(k => (typeof k === 'string' ? kindStyles[k] : k)); } /** * Resolve and merge multiple icon styles */ - function resolveStyles(styles: (IStyleResolvable | undefined)[]) { - return mergeStyles(styles.filter(Boolean).map(s => resolveStyle(s!))); + function resolveStyles(styles: IStyle[]) { + const options: IStyleOptions = Object.assign( + {}, + ...styles.map(s => s.options) + ); + + if (options.elementPosition) { + styles.unshift(positionStyles[options.elementPosition]); + } + + return mergeStyles(styles); } /** @@ -490,6 +519,9 @@ export namespace LabIconStyle { }); } + // cache style classes for builtin kinds + let _styleCache = new Map(); + /** * Get a typestyle class, given a given set of icon styling props */ @@ -499,21 +531,38 @@ export namespace LabIconStyle { return ''; } - const { - containerStyle, - elementStyle, - elementPosition, - kind, - justify, - ...elementStyleExtra - } = props; + let { elementPosition, kind, justify, ...elementStyle } = props; + // DEPRECATED: alias justify => elementPosition if (!elementPosition) { - props.elementPosition = justify; + elementPosition = justify; + } + + // add option args with defined values to overrides + const options = { + ...(elementPosition && { elementPosition }) + }; + + // try to look up the style class in the cache + const cacheable = + typeof kind === 'string' && Object.keys(elementStyle).length === 0; + const cacheKey = cacheable ? [kind, elementPosition].join(',') : ''; + if (cacheable && _styleCache.has(cacheKey)) { + return _styleCache.get(cacheKey)!; + } + + // resolve kind to an array of styles, then stick overrides on the end + const styles = resolveKind(kind); + styles.push({ elementStyle, options }); + + // apply style options/merge styles, then convert to typestyle class + const cls = resolveStyleClass(resolveStyles(styles)); + + if (cacheable) { + // store in cache for later reuse + _styleCache.set(cacheKey, cls); } - // merge any extra element style props - props.elementStyle = { ...props.elementStyle, ...elementStyleExtra }; - return resolveStyleClass(resolveStyles([kind, props])); + return cls; } } From 72ba558805f6fb1302fe8185357768a6e4075fcc Mon Sep 17 00:00:00 2001 From: telamonian Date: Sun, 23 Feb 2020 21:24:11 -0500 Subject: [PATCH 38/47] fix to statusBar icon style; removed default elementPosition --- packages/ui-components/src/style/icon.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts index 6750e683960d..81d012b0f314 100644 --- a/packages/ui-components/src/style/icon.ts +++ b/packages/ui-components/src/style/icon.ts @@ -394,9 +394,6 @@ export namespace LabIconStyle { height: '18px', width: '20px', position: 'relative' - }, - options: { - elementPosition: 'center' } }, @@ -519,7 +516,7 @@ export namespace LabIconStyle { }); } - // cache style classes for builtin kinds + // cache style classes for builtin kinds with simple options let _styleCache = new Map(); /** From c89aaac0d91e33bc9ee639b941958f94e3b0243d Mon Sep 17 00:00:00 2001 From: telamonian Date: Sun, 23 Feb 2020 21:52:14 -0500 Subject: [PATCH 39/47] deprecated `justify` => `elementPosition` across codebase - also added some stuff to .prettierignore, etc to protect my ide files (esp local history in `.history`) from the linters --- .eslintignore | 7 ++++ .prettierignore | 7 ++++ packages/application/src/shell.ts | 2 -- packages/apputils-extension/src/index.ts | 2 +- packages/apputils/src/collapse.ts | 2 +- packages/apputils/src/toolbar.tsx | 5 ++- packages/cells/src/placeholder.tsx | 4 +-- packages/celltags/src/addwidget.ts | 2 +- packages/celltags/src/widget.ts | 2 +- packages/documentsearch/src/searchoverlay.tsx | 4 +-- packages/filebrowser-extension/src/index.ts | 34 +++++++++---------- packages/filebrowser/src/listing.ts | 4 +-- packages/launcher/src/index.tsx | 2 -- packages/mainmenu-extension/src/index.ts | 2 +- packages/running/src/index.tsx | 2 +- packages/settingeditor/src/settingeditor.tsx | 2 +- packages/statusbar/src/defaults/lineCol.tsx | 2 +- .../src/icon/widgets/commandpalettesvg.ts | 2 -- .../ui-components/src/icon/widgets/menusvg.ts | 3 +- .../src/icon/widgets/tabbarsvg.ts | 2 +- .../ui-components/stories/labicon.stories.tsx | 2 +- tslint.json | 6 +++- 22 files changed, 55 insertions(+), 45 deletions(-) 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/packages/application/src/shell.ts b/packages/application/src/shell.ts index 0b296c984f71..3c5110ca9658 100644 --- a/packages/application/src/shell.ts +++ b/packages/application/src/shell.ts @@ -775,7 +775,6 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell { // bind an appropriate style to the icon if (title.icon instanceof LabIcon) { title.icon = title.icon.bindprops({ - justify: 'center', kind: 'mainAreaTab' }); } @@ -1186,7 +1185,6 @@ namespace Private { // bind an appropriate style to the icon if (title.icon instanceof LabIcon) { title.icon = title.icon.bindprops({ - justify: 'center', kind: 'sideBar' }); } diff --git a/packages/apputils-extension/src/index.ts b/packages/apputils-extension/src/index.ts index 67e3f4cb6fda..f586cee542b7 100644 --- a/packages/apputils-extension/src/index.ts +++ b/packages/apputils-extension/src/index.ts @@ -151,7 +151,7 @@ const splash: JupyterFrontEndPlugin = { jupyterFaviconIcon.element({ container: logo, - justify: 'center', + kind: 'splash' }); 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/toolbar.tsx b/packages/apputils/src/toolbar.tsx index 78e0d7c01b26..da6b262c34e7 100644 --- a/packages/apputils/src/toolbar.tsx +++ b/packages/apputils/src/toolbar.tsx @@ -503,7 +503,6 @@ export function ToolbarButtonComponent(props: ToolbarButtonComponent.IProps) { } className="jp-ToolbarButtonComponent-icon" tag="span" - justify="center" kind="toolbarButton" /> {props.label && ( @@ -733,14 +732,14 @@ namespace Private { circleIcon.element({ container: this.node, title: `Kernel ${Text.titleCase(status)}`, - justify: 'center', + kind: 'toolbarButton' }); } else { circleEmptyIcon.element({ container: this.node, title: `Kernel ${Text.titleCase(status)}`, - justify: 'center', + kind: 'toolbarButton' }); } 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/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/documentsearch/src/searchoverlay.tsx b/packages/documentsearch/src/searchoverlay.tsx index dc3554a27eca..78aa5186e946 100644 --- a/packages/documentsearch/src/searchoverlay.tsx +++ b/packages/documentsearch/src/searchoverlay.tsx @@ -468,7 +468,7 @@ class SearchOverlay extends React.Component< @@ -509,7 +509,7 @@ class SearchOverlay extends React.Component< > diff --git a/packages/filebrowser-extension/src/index.ts b/packages/filebrowser-extension/src/index.ts index 8f67bdaeba1a..b143317b8d82 100644 --- a/packages/filebrowser-extension/src/index.ts +++ b/packages/filebrowser-extension/src/index.ts @@ -408,7 +408,7 @@ function activateShareFile( isVisible: () => !!tracker.currentWidget && toArray(tracker.currentWidget.selectedItems()).length === 1, - icon: linkIcon.bindprops({ justify: 'center', kind: 'menuItem' }), + icon: linkIcon.bindprops({ kind: 'menuItem' }), label: 'Copy Shareable Link' }); } @@ -436,7 +436,7 @@ function addCommands( return widget.delete(); } }, - icon: closeIcon.bindprops({ justify: 'center', kind: 'menuItem' }), + icon: closeIcon.bindprops({ kind: 'menuItem' }), label: 'Delete', mnemonic: 0 }); @@ -449,7 +449,7 @@ function addCommands( return widget.copy(); } }, - icon: copyIcon.bindprops({ justify: 'center', kind: 'menuItem' }), + icon: copyIcon.bindprops({ kind: 'menuItem' }), label: 'Copy', mnemonic: 0 }); @@ -462,7 +462,7 @@ function addCommands( return widget.cut(); } }, - icon: cutIcon.bindprops({ justify: 'center', kind: 'menuItem' }), + icon: cutIcon.bindprops({ kind: 'menuItem' }), label: 'Cut' }); @@ -474,7 +474,7 @@ function addCommands( return widget.download(); } }, - icon: downloadIcon.bindprops({ justify: 'center', kind: 'menuItem' }), + icon: downloadIcon.bindprops({ kind: 'menuItem' }), label: 'Download' }); @@ -486,7 +486,7 @@ function addCommands( return widget.duplicate(); } }, - icon: copyIcon.bindprops({ justify: 'center', kind: 'menuItem' }), + icon: copyIcon.bindprops({ kind: 'menuItem' }), label: 'Duplicate' }); @@ -608,9 +608,9 @@ function addCommands( 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?.icon?.bindprops({ justify: 'center', kind: 'menuItem' }); + return ft?.icon?.bindprops({ kind: 'menuItem' }); } else { - return folderIcon.bindprops({ justify: 'center', kind: 'menuItem' }); + return folderIcon.bindprops({ kind: 'menuItem' }); } }, label: args => (args['label'] || args['factory'] || 'Open') as string, @@ -635,7 +635,7 @@ function addCommands( ) ); }, - icon: addIcon.bindprops({ justify: 'center', kind: 'menuItem' }), + icon: addIcon.bindprops({ kind: 'menuItem' }), label: 'Open in New Browser Tab', mnemonic: 0 }); @@ -653,7 +653,7 @@ function addCommands( Clipboard.copyToSystem(url); }); }, - icon: copyIcon.bindprops({ justify: 'center', kind: 'menuItem' }), + icon: copyIcon.bindprops({ kind: 'menuItem' }), label: 'Copy Download Link', mnemonic: 0 }); @@ -666,7 +666,7 @@ function addCommands( return widget.paste(); } }, - icon: pasteIcon.bindprops({ justify: 'center', kind: 'menuItem' }), + icon: pasteIcon.bindprops({ kind: 'menuItem' }), label: 'Paste', mnemonic: 0 }); @@ -679,7 +679,7 @@ function addCommands( return widget.createNewDirectory(); } }, - icon: newFolderIcon.bindprops({ justify: 'center', kind: 'menuItem' }), + icon: newFolderIcon.bindprops({ kind: 'menuItem' }), label: 'New Folder' }); @@ -694,7 +694,7 @@ function addCommands( ext: 'txt' }); }, - icon: textEditorIcon.bindprops({ justify: 'center', kind: 'menuItem' }), + icon: textEditorIcon.bindprops({ kind: 'menuItem' }), label: 'New File' }); @@ -709,7 +709,7 @@ function addCommands( ext: 'md' }); }, - icon: markdownIcon.bindprops({ justify: 'center', kind: 'menuItem' }), + icon: markdownIcon.bindprops({ kind: 'menuItem' }), label: 'New Markdown File' }); @@ -721,7 +721,7 @@ function addCommands( return widget.rename(); } }, - icon: editIcon.bindprops({ justify: 'center', kind: 'menuItem' }), + icon: editIcon.bindprops({ kind: 'menuItem' }), label: 'Rename', mnemonic: 0 }); @@ -742,7 +742,7 @@ function addCommands( isVisible: () => !!tracker.currentWidget && tracker.currentWidget.selectedItems().next !== undefined, - icon: fileIcon.bindprops({ justify: 'center', kind: 'menuItem' }), + icon: fileIcon.bindprops({ kind: 'menuItem' }), label: 'Copy Path' }); @@ -784,7 +784,7 @@ function addCommands( return widget.shutdownKernels(); } }, - icon: stopIcon.bindprops({ justify: 'center', kind: 'menuItem' }), + icon: stopIcon.bindprops({ kind: 'menuItem' }), label: 'Shut Down Kernel' }); diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts index 18adc296f606..aeda96da6549 100644 --- a/packages/filebrowser/src/listing.ts +++ b/packages/filebrowser/src/listing.ts @@ -1840,7 +1840,7 @@ export namespace DirListing { fallback: fileIcon, container: iconContainer, className: ITEM_ICON_CLASS, - justify: 'center', + kind: 'listing' }); @@ -2099,7 +2099,7 @@ namespace Private { container, tag: 'span', kind: 'listingHeaderItem', - justify: 'center', + float }); } else { diff --git a/packages/launcher/src/index.tsx b/packages/launcher/src/index.tsx index 5c9701903812..20ae00b099ee 100644 --- a/packages/launcher/src/index.tsx +++ b/packages/launcher/src/index.tsx @@ -206,7 +206,6 @@ export class Launcher extends VDomRenderer {

{cat}

@@ -434,7 +433,6 @@ function Card( )} 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/running/src/index.tsx b/packages/running/src/index.tsx index 2a9bae56dd18..976f19c57517 100644 --- a/packages/running/src/index.tsx +++ b/packages/running/src/index.tsx @@ -120,7 +120,7 @@ function Item(props: { runningItem: IRunningSessions.IRunningItem }) { return (
  • - + 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/ui-components/src/icon/widgets/commandpalettesvg.ts b/packages/ui-components/src/icon/widgets/commandpalettesvg.ts index a74fdaa6d742..6289b12bef00 100644 --- a/packages/ui-components/src/icon/widgets/commandpalettesvg.ts +++ b/packages/ui-components/src/icon/widgets/commandpalettesvg.ts @@ -9,7 +9,6 @@ import { LabIconStyle } from '../../style'; import { classes } from '../../utils'; const searchHeaderIcon = filterListIcon.bindprops({ - justify: 'center', kind: 'commandPaletteHeader' }); @@ -82,7 +81,6 @@ export namespace CommandPaletteSvg { return classes( LabIconStyle.styleClass({ - justify: 'center', kind: 'commandPaletteItem' }), data.item.iconClass, diff --git a/packages/ui-components/src/icon/widgets/menusvg.ts b/packages/ui-components/src/icon/widgets/menusvg.ts index bcfd9d5607c5..28c7233d50c6 100644 --- a/packages/ui-components/src/icon/widgets/menusvg.ts +++ b/packages/ui-components/src/icon/widgets/menusvg.ts @@ -9,7 +9,6 @@ import { LabIconStyle } from '../../style'; import { classes } from '../../utils'; const submenuIcon = caretRightIcon.bindprops({ - justify: 'center', kind: 'menuItem' }); @@ -116,7 +115,7 @@ export namespace MenuSvg { return classes(data.item.iconClass, name); } else { return classes( - LabIconStyle.styleClass({ justify: 'center', kind: 'menuItem' }), + LabIconStyle.styleClass({ kind: 'menuItem' }), data.item.iconClass, name ); diff --git a/packages/ui-components/src/icon/widgets/tabbarsvg.ts b/packages/ui-components/src/icon/widgets/tabbarsvg.ts index f5552b299706..80c4d52c0d43 100644 --- a/packages/ui-components/src/icon/widgets/tabbarsvg.ts +++ b/packages/ui-components/src/icon/widgets/tabbarsvg.ts @@ -40,7 +40,7 @@ export namespace TabBarSvg { const className = classes( 'jp-icon-hover lm-TabBar-tabCloseIcon', LabIconStyle.styleClass({ - justify: 'center', + elementPosition: 'center', height: '16px', width: '16px' }) diff --git a/packages/ui-components/stories/labicon.stories.tsx b/packages/ui-components/stories/labicon.stories.tsx index fd8f32662e8b..ed6289c9a6f0 100644 --- a/packages/ui-components/stories/labicon.stories.tsx +++ b/packages/ui-components/stories/labicon.stories.tsx @@ -21,6 +21,6 @@ export const running = () => ; export const html5 = () => (
    - +
    ); 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/" ] } } From 3099c2803c8ee69d8efe7e1a39b9aa1b656b0b94 Mon Sep 17 00:00:00 2001 From: telamonian Date: Sun, 23 Feb 2020 22:11:35 -0500 Subject: [PATCH 40/47] implemented `elementSize` icon styling arg - `elementSize` can be set to eg 'normal' for standard 16px x 16px icon --- packages/ui-components/src/style/icon.ts | 70 ++++++++++--------- .../stories/labicon-sizes.stories.tsx | 21 ++++++ 2 files changed, 59 insertions(+), 32 deletions(-) create mode 100644 packages/ui-components/stories/labicon-sizes.stories.tsx diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts index 81d012b0f314..4097312609d1 100644 --- a/packages/ui-components/src/style/icon.ts +++ b/packages/ui-components/src/style/icon.ts @@ -52,11 +52,7 @@ export namespace LabIconStyle { | 'bottom left' | 'top left'; - // type ISize = - // | 'small' - // | 'normal' - // | 'large' - // | 'xlarge'; + type ISize = 'small' | 'normal' | 'large' | 'xlarge'; /** * Collections of CSS props that can be fed directly to @@ -90,14 +86,13 @@ export namespace LabIconStyle { elementPosition?: IPosition; /** - * FUTURE: how to position the outer container + * 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 */ - // containerPosition?: IPosition; - - /** - * FUTURE: the size of the inner svg element - */ - // elementSize?: ISize + elementSize?: ISize; /** * FUTURE: how to position the label element (if any), @@ -443,24 +438,24 @@ export namespace LabIconStyle { 'top left': _elementPositionFactory({ margin: '0 auto 0 auto' }) }; - // function _elementSizeFactory(size: string) { - // return { - // elementStyle: { - // height: size, - // width: size - // } - // } - // } - - // /** - // * styles that establish some default sizes - // */ - // export const styleSizes: { [k in ISize]: IStylePure } = { - // small: _elementSizeFactory('14px'), - // normal: _elementSizeFactory('16px'), - // large: _elementSizeFactory('20px'), - // xlarge: _elementSizeFactory('24px') - // } + function _elementSizeFactory(size: string) { + return { + elementStyle: { + height: size, + width: size + } + }; + } + + /** + * styles that establish some default sizes + */ + export const sizeStyles: { [k in ISize]: IStylePure } = { + small: _elementSizeFactory('14px'), + normal: _elementSizeFactory('16px'), + large: _elementSizeFactory('20px'), + xlarge: _elementSizeFactory('24px') + }; /** * Merge two or more pure (CSS props only) icon styles @@ -500,6 +495,10 @@ export namespace LabIconStyle { styles.unshift(positionStyles[options.elementPosition]); } + if (options.elementSize) { + styles.unshift(sizeStyles[options.elementSize]); + } + return mergeStyles(styles); } @@ -528,7 +527,13 @@ export namespace LabIconStyle { return ''; } - let { elementPosition, kind, justify, ...elementStyle } = props; + let { + elementPosition, + elementSize, + kind, + justify, + ...elementStyle + } = props; // DEPRECATED: alias justify => elementPosition if (!elementPosition) { @@ -537,7 +542,8 @@ export namespace LabIconStyle { // add option args with defined values to overrides const options = { - ...(elementPosition && { elementPosition }) + ...(elementPosition && { elementPosition }), + ...(elementSize && { elementSize }) }; // try to look up the style class in the cache 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 = () => ; From 8e63e3e119e8a0786d078b0d74fbe6033e01ba44 Mon Sep 17 00:00:00 2001 From: telamonian Date: Sun, 23 Feb 2020 23:12:41 -0500 Subject: [PATCH 41/47] massive fixup of icon styling-related docstrings --- packages/ui-components/src/icon/labicon.tsx | 53 +++++++++------ packages/ui-components/src/style/icon.ts | 75 +++++++++++++-------- 2 files changed, 80 insertions(+), 48 deletions(-) diff --git a/packages/ui-components/src/icon/labicon.tsx b/packages/ui-components/src/icon/labicon.tsx index 52566394ff61..6e6f6e73b854 100644 --- a/packages/ui-components/src/icon/labicon.tsx +++ b/packages/ui-components/src/icon/labicon.tsx @@ -287,10 +287,19 @@ 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 styleProps - 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 kind - optional string naming a builtin icon style to + * use, for example 'menuItem' or `statusBar`. Can also be an + * object defining a custom icon style, or a list of builtin style + * names and/or custom style objects (these will be merged) + * + * @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 ...elementStyle - 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 @@ -524,12 +533,21 @@ 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 kind - optional string naming a builtin icon style to + * use, for example 'menuItem' or `statusBar`. Can also be an + * object defining a custom icon style, or a list of builtin style + * names and/or custom style objects (these will be merged) + * + * @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 styleProps - 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 ...elementStyle - 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; @@ -547,9 +565,9 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { * A namespace for LabIcon statics. */ export namespace LabIcon { - /************** + /************* * interfaces * - **************/ + *************/ /** * The simplest possible interface for defining a generic icon. @@ -632,7 +650,7 @@ export namespace LabIcon { fallback?: LabIcon; } - /********* + /******** * types * *********/ @@ -668,9 +686,9 @@ export namespace LabIcon { */ export type IReact = React.ForwardRefExoticComponent; - /*********** + /********** * classes * - ***********/ + **********/ /** * Base implementation of IRenderer. @@ -733,13 +751,6 @@ export namespace LabIcon { ReactDOM.unmountComponentAtNode(container); } } - - /************** - * re-exports * - **************/ - - export const kindStyles = LabIconStyle.kindStyles; - export const positionStyles = LabIconStyle.positionStyles; } namespace Private { diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts index 4097312609d1..ba2f0e72fb4d 100644 --- a/packages/ui-components/src/style/icon.ts +++ b/packages/ui-components/src/style/icon.ts @@ -55,29 +55,10 @@ export namespace LabIconStyle { type ISize = 'small' | 'normal' | 'large' | 'xlarge'; /** - * Collections of CSS props that can be fed directly to - * typestyle's style() function + * 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 */ - interface IStylePure { - /** - * CSS properties that will be applied to the outer container - * element via a typestyle class - */ - containerStyle?: NestedCSSProperties; - - /** - * CSS properties that will be applied to the inner svg - * element via a typestyle class - */ - elementStyle?: NestedCSSProperties; - - /** - * FUTURE: CSS properties that will be applied to the label - * element, if any, via a typestyle class - */ - // labelStyle?: NestedCSSProperties; - } - interface IStyleOptions { /** * How to position the inner svg element, @@ -104,8 +85,43 @@ export namespace LabIconStyle { /** * Collections of CSS props plus some custom options */ - export interface IStyle extends IStylePure { + interface IStyle { + /** + * CSS properties that will be applied to the outer container + * element via a typestyle class + */ + containerStyle?: NestedCSSProperties; + + /** + * CSS properties that will be applied to the inner svg + * element via a typestyle class + */ + elementStyle?: NestedCSSProperties; + + /** + * Options that function as modifiers for this style's + * CSS properties + */ options?: IStyleOptions; + + /** + * FUTURE: CSS properties that will be applied to the label + * element, if any, via a typestyle class + */ + // labelStyle?: NestedCSSProperties; + } + + /** + * Collections of CSS style props that can be fed directly to + * typestyle's style() function. A standard IStyle can be resolved + * to a "pure" style by processing and removing any options + */ + interface IStylePure extends IStyle { + /** + * Options are disallowed for "pure" styles, which may contain + * only collections of valid (as per typestyle) CSS props + */ + options?: undefined; } /** @@ -128,7 +144,7 @@ export namespace LabIconStyle { /** * The kind (ie builtin) styles */ - export const kindStyles: { [k in IBuiltin]: IStyle } = { + const kindStyles: { [k in IBuiltin]: IStyle } = { breadCrumb: { containerStyle: { $nest: { @@ -424,7 +440,7 @@ export namespace LabIconStyle { /** * Styles to help with positioning */ - export const positionStyles: { [k in IPosition]: IStyle } = { + const positionStyles: { [k in IPosition]: IStyle } = { center: _elementPositionFactory({ margin: '0 auto', width: '100%' }), top: _elementPositionFactory({ margin: '0 0 auto 0' }), @@ -450,7 +466,7 @@ export namespace LabIconStyle { /** * styles that establish some default sizes */ - export const sizeStyles: { [k in ISize]: IStylePure } = { + const sizeStyles: { [k in ISize]: IStyle } = { small: _elementSizeFactory('14px'), normal: _elementSizeFactory('16px'), large: _elementSizeFactory('20px'), @@ -458,7 +474,8 @@ export namespace LabIconStyle { }; /** - * Merge two or more pure (CSS props only) icon styles + * Merge two or more icon styles into a single "pure" + * icon style (ie collections of CSS props only) */ function mergeStyles(styles: IStyle[]): IStylePure { return { @@ -467,6 +484,10 @@ export namespace LabIconStyle { }; } + /** + * Resolve a string naming a builtin style/an actual IStyle obj, + * or an array of such, into an array of actual IStyle objs + */ function resolveKind( kind: IStyleResolvable | IStyleResolvable[] | undefined ): IStyle[] { From fd332d1c5fc1ad04239d23429906c7bffd531267 Mon Sep 17 00:00:00 2001 From: telamonian Date: Sun, 23 Feb 2020 23:29:03 -0500 Subject: [PATCH 42/47] moved currently unused Renderers into Private namespace --- packages/ui-components/src/icon/labicon.tsx | 135 ++++++++++---------- 1 file changed, 66 insertions(+), 69 deletions(-) diff --git a/packages/ui-components/src/icon/labicon.tsx b/packages/ui-components/src/icon/labicon.tsx index 6e6f6e73b854..aca1b22cad42 100644 --- a/packages/ui-components/src/icon/labicon.tsx +++ b/packages/ui-components/src/icon/labicon.tsx @@ -554,8 +554,6 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer { protected _className: string; protected _loading: boolean; protected _props: LabIcon.IProps = {}; - protected _renderer: LabIcon.Renderer; - protected _rendererClass: typeof LabIcon.Renderer; protected _svgReplaced = new Signal(this); protected _svgstr: string; protected _uuid: string; @@ -607,7 +605,7 @@ export namespace LabIcon { /** * @deprecated does nothing */ - rendererClass?: typeof Renderer; + rendererClass?: typeof Private.Renderer; } /** @@ -685,72 +683,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 {} - unrender?(container: HTMLElement, options?: IRendererOptions): 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 { - 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 - }); - } - } - - /** - * Implementation of IRenderer that creates the icon svg node - * as a React component. - */ - export class ReactRenderer extends Renderer { - render(container: HTMLElement, options?: 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); - } - } } namespace Private { @@ -869,6 +801,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 From f7fdeca8f3be31e09089e4f73f702419c90b1a77 Mon Sep 17 00:00:00 2001 From: telamonian Date: Mon, 24 Feb 2020 04:48:52 -0500 Subject: [PATCH 43/47] deprecated/replaced `kind` => `stylesheet` across codebase --- packages/application/src/shell.ts | 4 +- packages/apputils-extension/src/index.ts | 2 +- packages/apputils/src/styling.ts | 2 +- packages/apputils/src/toolbar.tsx | 6 +- packages/filebrowser-extension/src/index.ts | 34 +-- packages/filebrowser/src/crumbs.ts | 4 +- packages/filebrowser/src/listing.ts | 4 +- packages/launcher/src/index.tsx | 4 +- packages/logconsole-extension/src/status.tsx | 2 +- packages/notebook/src/truststatus.tsx | 4 +- packages/running/src/index.tsx | 2 +- packages/settingeditor/src/pluginlist.tsx | 2 +- .../src/defaults/runningSessions.tsx | 4 +- .../src/components/htmlselect.tsx | 2 +- packages/ui-components/src/icon/labicon.tsx | 32 +-- .../src/icon/widgets/commandpalettesvg.ts | 4 +- .../ui-components/src/icon/widgets/menusvg.ts | 4 +- packages/ui-components/src/style/icon.ts | 206 ++++++++++-------- .../ui-components/stories/labicon.stories.tsx | 2 +- 19 files changed, 172 insertions(+), 152 deletions(-) diff --git a/packages/application/src/shell.ts b/packages/application/src/shell.ts index 3c5110ca9658..da8b40394ca8 100644 --- a/packages/application/src/shell.ts +++ b/packages/application/src/shell.ts @@ -775,7 +775,7 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell { // bind an appropriate style to the icon if (title.icon instanceof LabIcon) { title.icon = title.icon.bindprops({ - kind: 'mainAreaTab' + stylesheet: 'mainAreaTab' }); } @@ -1185,7 +1185,7 @@ namespace Private { // bind an appropriate style to the icon if (title.icon instanceof LabIcon) { title.icon = title.icon.bindprops({ - kind: 'sideBar' + stylesheet: 'sideBar' }); } diff --git a/packages/apputils-extension/src/index.ts b/packages/apputils-extension/src/index.ts index f586cee542b7..1f80226c29f3 100644 --- a/packages/apputils-extension/src/index.ts +++ b/packages/apputils-extension/src/index.ts @@ -152,7 +152,7 @@ const splash: JupyterFrontEndPlugin = { jupyterFaviconIcon.element({ container: logo, - kind: 'splash' + stylesheet: 'splash' }); galaxy.appendChild(logo); 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 da6b262c34e7..ce62ebb0eda7 100644 --- a/packages/apputils/src/toolbar.tsx +++ b/packages/apputils/src/toolbar.tsx @@ -503,7 +503,7 @@ export function ToolbarButtonComponent(props: ToolbarButtonComponent.IProps) { } className="jp-ToolbarButtonComponent-icon" tag="span" - kind="toolbarButton" + stylesheet="toolbarButton" /> {props.label && ( {props.label} @@ -733,14 +733,14 @@ namespace Private { container: this.node, title: `Kernel ${Text.titleCase(status)}`, - kind: 'toolbarButton' + stylesheet: 'toolbarButton' }); } else { circleEmptyIcon.element({ container: this.node, title: `Kernel ${Text.titleCase(status)}`, - kind: 'toolbarButton' + stylesheet: 'toolbarButton' }); } } diff --git a/packages/filebrowser-extension/src/index.ts b/packages/filebrowser-extension/src/index.ts index b143317b8d82..e084987b27ac 100644 --- a/packages/filebrowser-extension/src/index.ts +++ b/packages/filebrowser-extension/src/index.ts @@ -408,7 +408,7 @@ function activateShareFile( isVisible: () => !!tracker.currentWidget && toArray(tracker.currentWidget.selectedItems()).length === 1, - icon: linkIcon.bindprops({ kind: 'menuItem' }), + icon: linkIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Copy Shareable Link' }); } @@ -436,7 +436,7 @@ function addCommands( return widget.delete(); } }, - icon: closeIcon.bindprops({ kind: 'menuItem' }), + icon: closeIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Delete', mnemonic: 0 }); @@ -449,7 +449,7 @@ function addCommands( return widget.copy(); } }, - icon: copyIcon.bindprops({ kind: 'menuItem' }), + icon: copyIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Copy', mnemonic: 0 }); @@ -462,7 +462,7 @@ function addCommands( return widget.cut(); } }, - icon: cutIcon.bindprops({ kind: 'menuItem' }), + icon: cutIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Cut' }); @@ -474,7 +474,7 @@ function addCommands( return widget.download(); } }, - icon: downloadIcon.bindprops({ kind: 'menuItem' }), + icon: downloadIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Download' }); @@ -486,7 +486,7 @@ function addCommands( return widget.duplicate(); } }, - icon: copyIcon.bindprops({ kind: 'menuItem' }), + icon: copyIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Duplicate' }); @@ -608,9 +608,9 @@ function addCommands( 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?.icon?.bindprops({ kind: 'menuItem' }); + return ft?.icon?.bindprops({ stylesheet: 'menuItem' }); } else { - return folderIcon.bindprops({ kind: 'menuItem' }); + return folderIcon.bindprops({ stylesheet: 'menuItem' }); } }, label: args => (args['label'] || args['factory'] || 'Open') as string, @@ -635,7 +635,7 @@ function addCommands( ) ); }, - icon: addIcon.bindprops({ kind: 'menuItem' }), + icon: addIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Open in New Browser Tab', mnemonic: 0 }); @@ -653,7 +653,7 @@ function addCommands( Clipboard.copyToSystem(url); }); }, - icon: copyIcon.bindprops({ kind: 'menuItem' }), + icon: copyIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Copy Download Link', mnemonic: 0 }); @@ -666,7 +666,7 @@ function addCommands( return widget.paste(); } }, - icon: pasteIcon.bindprops({ kind: 'menuItem' }), + icon: pasteIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Paste', mnemonic: 0 }); @@ -679,7 +679,7 @@ function addCommands( return widget.createNewDirectory(); } }, - icon: newFolderIcon.bindprops({ kind: 'menuItem' }), + icon: newFolderIcon.bindprops({ stylesheet: 'menuItem' }), label: 'New Folder' }); @@ -694,7 +694,7 @@ function addCommands( ext: 'txt' }); }, - icon: textEditorIcon.bindprops({ kind: 'menuItem' }), + icon: textEditorIcon.bindprops({ stylesheet: 'menuItem' }), label: 'New File' }); @@ -709,7 +709,7 @@ function addCommands( ext: 'md' }); }, - icon: markdownIcon.bindprops({ kind: 'menuItem' }), + icon: markdownIcon.bindprops({ stylesheet: 'menuItem' }), label: 'New Markdown File' }); @@ -721,7 +721,7 @@ function addCommands( return widget.rename(); } }, - icon: editIcon.bindprops({ kind: 'menuItem' }), + icon: editIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Rename', mnemonic: 0 }); @@ -742,7 +742,7 @@ function addCommands( isVisible: () => !!tracker.currentWidget && tracker.currentWidget.selectedItems().next !== undefined, - icon: fileIcon.bindprops({ kind: 'menuItem' }), + icon: fileIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Copy Path' }); @@ -784,7 +784,7 @@ function addCommands( return widget.shutdownKernels(); } }, - icon: stopIcon.bindprops({ kind: 'menuItem' }), + icon: stopIcon.bindprops({ stylesheet: 'menuItem' }), label: 'Shut Down Kernel' }); 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 aeda96da6549..84eecead1957 100644 --- a/packages/filebrowser/src/listing.ts +++ b/packages/filebrowser/src/listing.ts @@ -1841,7 +1841,7 @@ export namespace DirListing { container: iconContainer, className: ITEM_ICON_CLASS, - kind: 'listing' + stylesheet: 'listing' }); let hoverText = 'Name: ' + model.name; @@ -2098,7 +2098,7 @@ namespace Private { (state === 'down' ? caretDownIcon : caretUpIcon).element({ container, tag: 'span', - kind: 'listingHeaderItem', + stylesheet: 'listingHeaderItem', float }); diff --git a/packages/launcher/src/index.tsx b/packages/launcher/src/index.tsx index 20ae00b099ee..ca6f207a433b 100644 --- a/packages/launcher/src/index.tsx +++ b/packages/launcher/src/index.tsx @@ -206,7 +206,7 @@ export class Launcher extends VDomRenderer {

    {cat}

    • @@ -433,7 +433,7 @@ function Card( )}
    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/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/running/src/index.tsx b/packages/running/src/index.tsx index 976f19c57517..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 (
  • - + {schema.title || id}
    • 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/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 { s.containerStyle)), - elementStyle: Object.assign({}, ...styles.map(s => s.elementStyle)) + container: Object.assign({}, ...sheets.map(s => s.container)), + element: Object.assign({}, ...sheets.map(s => s.element)) }; } /** - * Resolve a string naming a builtin style/an actual IStyle obj, - * or an array of such, into an array of actual IStyle objs + * Resolve a string naming a builtin style/an actual ISheet obj, + * or an array of such, into an array of actual ISheet objs */ - function resolveKind( - kind: IStyleResolvable | IStyleResolvable[] | undefined - ): IStyle[] { - if (!kind) { + function resolveSheet( + stylesheet: ISheetResolvable | ISheetResolvable[] | undefined + ): ISheet[] { + if (!stylesheet) { return []; } - if (!Array.isArray(kind)) { + if (!Array.isArray(stylesheet)) { // wrap in array - kind = [kind]; + stylesheet = [stylesheet]; } - return kind.map(k => (typeof k === 'string' ? kindStyles[k] : k)); + return stylesheet.map(k => (typeof k === 'string' ? builtinSheets[k] : k)); } /** - * Resolve and merge multiple icon styles + * Resolve and merge multiple icon sheets */ - function resolveStyles(styles: IStyle[]) { - const options: IStyleOptions = Object.assign( + function resolveSheets(sheets: ISheet[]) { + const options: ISheetOptions = Object.assign( {}, - ...styles.map(s => s.options) + ...sheets.map(s => s.options) ); if (options.elementPosition) { - styles.unshift(positionStyles[options.elementPosition]); + sheets.unshift(positionSheets[options.elementPosition]); } if (options.elementSize) { - styles.unshift(sizeStyles[options.elementSize]); + sheets.unshift(sizeSheets[options.elementSize]); } - return mergeStyles(styles); + return mergeSheets(sheets); } /** * Resolve a pure icon style into a typestyle class */ - function resolveStyleClass(style: IStylePure): string { + function resolveStyleClass(stylesheet: ISheetPure): string { return typestyleClass({ - ...style.containerStyle, + ...stylesheet.container, $nest: { - ...style.containerStyle?.$nest, - ['svg']: style.elementStyle + ...stylesheet.container?.$nest, + ['svg']: stylesheet.element } }); } - // cache style classes for builtin kinds with simple options - let _styleCache = new Map(); + // cache style classes for builtin stylesheets + let _styleClassCache = new Map(); /** * Get a typestyle class, given a given set of icon styling props @@ -551,11 +561,17 @@ export namespace LabIconStyle { let { elementPosition, elementSize, + stylesheet, kind, justify, - ...elementStyle + ...elementCSS } = props; + // DEPRECATED: alias kind => stylesheet + if (!stylesheet) { + stylesheet = kind; + } + // DEPRECATED: alias justify => elementPosition if (!elementPosition) { elementPosition = justify; @@ -569,22 +585,22 @@ export namespace LabIconStyle { // try to look up the style class in the cache const cacheable = - typeof kind === 'string' && Object.keys(elementStyle).length === 0; - const cacheKey = cacheable ? [kind, elementPosition].join(',') : ''; - if (cacheable && _styleCache.has(cacheKey)) { - return _styleCache.get(cacheKey)!; + typeof stylesheet === 'string' && Object.keys(elementCSS).length === 0; + const cacheKey = cacheable ? [stylesheet, elementPosition].join(',') : ''; + if (cacheable && _styleClassCache.has(cacheKey)) { + return _styleClassCache.get(cacheKey)!; } - // resolve kind to an array of styles, then stick overrides on the end - const styles = resolveKind(kind); - styles.push({ elementStyle, options }); + // 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 styles, then convert to typestyle class - const cls = resolveStyleClass(resolveStyles(styles)); + // apply style options/merge sheets, then convert to typestyle class + const cls = resolveStyleClass(resolveSheets(sheets)); if (cacheable) { // store in cache for later reuse - _styleCache.set(cacheKey, cls); + _styleClassCache.set(cacheKey, cls); } return cls; diff --git a/packages/ui-components/stories/labicon.stories.tsx b/packages/ui-components/stories/labicon.stories.tsx index ed6289c9a6f0..d979a714ac3c 100644 --- a/packages/ui-components/stories/labicon.stories.tsx +++ b/packages/ui-components/stories/labicon.stories.tsx @@ -15,7 +15,7 @@ export default { title: 'LabIcon' }; -export const build = () => ; +export const build = () => ; export const running = () => ; From 48651c24a3f1807f29e058b46cf8cddb66622b1b Mon Sep 17 00:00:00 2001 From: telamonian Date: Mon, 24 Feb 2020 04:50:14 -0500 Subject: [PATCH 44/47] fix for small regression in settings editor icon style/spacing --- packages/ui-components/src/style/icon.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts index e9862958f590..fb8f2407e371 100644 --- a/packages/ui-components/src/style/icon.ts +++ b/packages/ui-components/src/style/icon.ts @@ -337,8 +337,7 @@ export namespace LabIconStyle { container: { display: 'inline-block', flex: '0 0 20px', - marginLeft: '2px', - marginRight: '1px', + margin: '0 3px 0 0', position: 'relative', height: '20px', width: '20px' From e6a179fd831d4c0d82f345e36abb8deaaae09207 Mon Sep 17 00:00:00 2001 From: telamonian Date: Mon, 24 Feb 2020 05:16:26 -0500 Subject: [PATCH 45/47] remove deprecated `rendererClass` from LabIcon.IOptions --- packages/ui-components/src/icon/labicon.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/ui-components/src/icon/labicon.tsx b/packages/ui-components/src/icon/labicon.tsx index 94ade345ce6b..6059e05570ff 100644 --- a/packages/ui-components/src/icon/labicon.tsx +++ b/packages/ui-components/src/icon/labicon.tsx @@ -605,12 +605,7 @@ export namespace LabIcon { * Interface defining the parameters to be passed to the LabIcon * constructor */ - export interface IOptions extends IIcon, Partial { - /** - * @deprecated does nothing - */ - rendererClass?: typeof Private.Renderer; - } + export interface IOptions extends IIcon, Partial {} /** * The input props for creating a new LabIcon From 1834e6bf43b4172aacb92a4b3a221b40aecaa722 Mon Sep 17 00:00:00 2001 From: telamonian Date: Mon, 24 Feb 2020 06:57:21 -0500 Subject: [PATCH 46/47] critical bugfix to icon style caching - bug could have caused a cached stylesheet to be incorrectly reused --- packages/ui-components/src/style/icon.ts | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts index fb8f2407e371..8f15458ad27c 100644 --- a/packages/ui-components/src/style/icon.ts +++ b/packages/ui-components/src/style/icon.ts @@ -143,12 +143,12 @@ export namespace LabIconStyle { /** * @depreacted use stylesheet instead */ - kind?: ISheetResolvable | ISheetResolvable[]; + kind?: IBuiltin; /** * @deprecated use elementPosition instead */ - justify?: IPosition; + justify?: 'center' | 'right' | 'left'; } /** @@ -494,8 +494,8 @@ export namespace LabIconStyle { } /** - * Resolve a string naming a builtin style/an actual ISheet obj, - * or an array of such, into an array of actual ISheet objs + * 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 @@ -513,9 +513,9 @@ export namespace LabIconStyle { } /** - * Resolve and merge multiple icon sheets + * Resolve and merge multiple icon stylesheets */ - function resolveSheets(sheets: ISheet[]) { + function applySheetOptions(sheets: ISheet[]) { const options: ISheetOptions = Object.assign( {}, ...sheets.map(s => s.options) @@ -533,7 +533,7 @@ export namespace LabIconStyle { } /** - * Resolve a pure icon style into a typestyle class + * Resolve a pure icon styleheet into a typestyle class */ function resolveStyleClass(stylesheet: ISheetPure): string { return typestyleClass({ @@ -549,7 +549,7 @@ export namespace LabIconStyle { let _styleClassCache = new Map(); /** - * Get a typestyle class, given a given set of icon styling props + * Get a typestyle class, given a set of icon styling props */ export function styleClass(props?: IProps): string { if (!props || Object.keys(props).length === 0) { @@ -585,7 +585,9 @@ export namespace LabIconStyle { // 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].join(',') : ''; + const cacheKey = cacheable + ? [stylesheet, elementPosition, elementSize].join(',') + : ''; if (cacheable && _styleClassCache.has(cacheKey)) { return _styleClassCache.get(cacheKey)!; } @@ -595,7 +597,7 @@ export namespace LabIconStyle { sheets.push({ element: elementCSS, options }); // apply style options/merge sheets, then convert to typestyle class - const cls = resolveStyleClass(resolveSheets(sheets)); + const cls = resolveStyleClass(applySheetOptions(sheets)); if (cacheable) { // store in cache for later reuse From 267ee491872ee6a839fa47f35316e1fe919b46e3 Mon Sep 17 00:00:00 2001 From: telamonian Date: Mon, 24 Feb 2020 13:06:45 -0500 Subject: [PATCH 47/47] audited icon css across the codebase --- packages/theme-light-extension/style/urls.css | 22 +------------- .../ui-components/style/deprecatedExtra.css | 1 - packages/ui-components/style/icons.css | 30 ------------------- 3 files changed, 1 insertion(+), 52 deletions(-) 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/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);*/ -/*}*/