diff --git a/packages/apputils-extension/src/index.ts b/packages/apputils-extension/src/index.ts index ad68fbe418f3..fa25add3337b 100644 --- a/packages/apputils-extension/src/index.ts +++ b/packages/apputils-extension/src/index.ts @@ -25,7 +25,7 @@ import { URLExt } from '@jupyterlab/coreutils'; import { IStateDB, StateDB } from '@jupyterlab/statedb'; -import { defaultIconRegistry } from '@jupyterlab/ui-components'; +import { jupyterFaviconIcon } from '@jupyterlab/ui-components'; import { PromiseDelegate } from '@lumino/coreutils'; @@ -149,8 +149,7 @@ const splash: JupyterFrontEndPlugin = { galaxy.id = 'galaxy'; logo.id = 'main-logo'; - defaultIconRegistry.icon({ - name: 'jupyter-favicon', + jupyterFaviconIcon.element({ container: logo, center: true, kind: 'splash' diff --git a/packages/celltags/src/addwidget.ts b/packages/celltags/src/addwidget.ts index a8ae0e6b9dcc..5749b5b74138 100644 --- a/packages/celltags/src/addwidget.ts +++ b/packages/celltags/src/addwidget.ts @@ -1,6 +1,6 @@ import { Widget } from '@lumino/widgets'; -import { defaultIconRegistry } from '@jupyterlab/ui-components'; +import { addIcon } from '@jupyterlab/ui-components'; import { TagTool } from './tool'; @@ -31,10 +31,8 @@ export class AddWidget extends Widget { let tag = document.createElement('div'); tag.className = 'tag-holder'; tag.appendChild(text); - let img = document.createElement('span'); - defaultIconRegistry.icon({ - name: 'add', - container: img, + let iconContainer = addIcon.element({ + tag: 'span', center: true, height: '18px', width: '18px', @@ -42,7 +40,7 @@ export class AddWidget extends Widget { marginRight: '-5px' }); this.addClass('unapplied-tag'); - tag.appendChild(img); + tag.appendChild(iconContainer); this.node.appendChild(tag); } diff --git a/packages/celltags/src/widget.ts b/packages/celltags/src/widget.ts index 1f8709933c43..5ce0327229da 100644 --- a/packages/celltags/src/widget.ts +++ b/packages/celltags/src/widget.ts @@ -1,6 +1,6 @@ import { Widget } from '@lumino/widgets'; -import { defaultIconRegistry } from '@jupyterlab/ui-components'; +import { checkIcon } from '@jupyterlab/ui-components'; import { TagTool } from './tool'; @@ -29,10 +29,8 @@ export class TagWidget extends Widget { let tag = document.createElement('div'); tag.className = 'tag-holder'; tag.appendChild(text); - let img = document.createElement('span'); - defaultIconRegistry.icon({ - name: 'check', - container: img, + let iconContainer = checkIcon.element({ + tag: 'span', center: true, height: '18px', width: '18px', @@ -43,9 +41,9 @@ export class TagWidget extends Widget { this.addClass('applied-tag'); } else { this.addClass('unapplied-tag'); - img.style.display = 'none'; + iconContainer.style.display = 'none'; } - tag.appendChild(img); + tag.appendChild(iconContainer); this.node.appendChild(tag); } diff --git a/packages/filebrowser/src/crumbs.ts b/packages/filebrowser/src/crumbs.ts index 96851c48b5d2..77c651b69fb1 100644 --- a/packages/filebrowser/src/crumbs.ts +++ b/packages/filebrowser/src/crumbs.ts @@ -5,19 +5,19 @@ import { ArrayExt } from '@lumino/algorithm'; import { Message } from '@lumino/messaging'; -import { IDragEvent } from '@lumino/dragdrop'; - import { ElementExt } from '@lumino/domutils'; +import { IDragEvent } from '@lumino/dragdrop'; + import { Widget } from '@lumino/widgets'; import { DOMUtils, showErrorMessage } from '@jupyterlab/apputils'; -import { PathExt, PageConfig } from '@jupyterlab/coreutils'; +import { PageConfig, PathExt } from '@jupyterlab/coreutils'; import { renameFile } from '@jupyterlab/docmanager'; -import { defaultIconRegistry } from '@jupyterlab/ui-components'; +import { folderIcon } from '@jupyterlab/ui-components'; import { FileBrowserModel } from './model'; @@ -31,11 +31,6 @@ const MATERIAL_CLASS = 'jp-MaterialIcon'; */ const BREADCRUMB_CLASS = 'jp-BreadCrumbs'; -/** - * The class name for the folder icon for the breadcrumbs home - */ -const BREADCRUMB_HOME = 'jp-FolderIcon'; - /** * The class name for the breadcrumbs home node */ @@ -363,8 +358,7 @@ namespace Private { */ export function createCrumbs(): ReadonlyArray { let home = document.createElement('span'); - defaultIconRegistry.icon({ - name: BREADCRUMB_HOME, + folderIcon.element({ className: BREADCRUMB_HOME_CLASS, container: home, kind: 'breadCrumb' diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts index 9c86af671548..b256430315bd 100644 --- a/packages/filebrowser/src/listing.ts +++ b/packages/filebrowser/src/listing.ts @@ -20,12 +20,7 @@ import { DocumentRegistry } from '@jupyterlab/docregistry'; import { Contents } from '@jupyterlab/services'; -import { - classes, - fileIcon, - IIconRegistry, - JLIcon -} from '@jupyterlab/ui-components'; +import { fileIcon, IIconRegistry, JLIcon } from '@jupyterlab/ui-components'; import { ArrayExt, @@ -1812,11 +1807,21 @@ export namespace DirListing { const text = DOMUtils.findElement(node, ITEM_TEXT_CLASS); const modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS); - let icon = fileType?.iconRenderer ? fileType.iconRenderer : (fileType?.iconClass ? JLIcon.get(fileType.iconClass) : fileIcon); - let iconClass = classes(ITEM_ICON_CLASS, fileType?.iconClass); + const iconProps: JLIcon.IProps = { + className: ITEM_ICON_CLASS, + container: iconContainer, + center: true, + kind: 'listing' + }; // render the icon svg node - icon.element({className: iconClass, container: iconContainer, center: true, kind: 'listing'}); + if (fileType?.iconRenderer) { + fileType.iconRenderer.element(iconProps); + } else if (fileType?.iconClass) { + JLIcon.getElement({ name: fileType.iconClass, ...iconProps }); + } else { + fileIcon.element(iconProps); + } let hoverText = 'Name: ' + model.name; // add file size to pop up if its available diff --git a/packages/launcher/src/index.tsx b/packages/launcher/src/index.tsx index f92da033eb40..dee0350fa5f4 100644 --- a/packages/launcher/src/index.tsx +++ b/packages/launcher/src/index.tsx @@ -7,11 +7,7 @@ import { VDomRenderer } from '@jupyterlab/apputils'; -import { - classes, - DefaultIconReact, - defaultIconRegistry -} from '@jupyterlab/ui-components'; +import { classes, JLIcon } from '@jupyterlab/ui-components'; import { ArrayExt, @@ -203,20 +199,15 @@ export class Launcher extends VDomRenderer { section = (
- {kernel && defaultIconRegistry.contains(iconClass) ? ( - - ) : ( -
)}

{cat}

@@ -415,7 +406,6 @@ function Card( }; // Return the VDOM element. - const iconClass = kernel ? '' : commands.iconClass(command, args); return (
- {kernel ? ( -
- {item.kernelIconUrl ? ( +
+ {kernel ? ( + item.kernelIconUrl ? ( ) : (
{label[0].toUpperCase()}
- )} -
- ) : ( -
- -
- )} + )} +

{label}

diff --git a/packages/settingeditor/src/pluginlist.tsx b/packages/settingeditor/src/pluginlist.tsx index 88dd441ab43b..7e06fc052e0e 100644 --- a/packages/settingeditor/src/pluginlist.tsx +++ b/packages/settingeditor/src/pluginlist.tsx @@ -261,7 +261,6 @@ namespace Private { const itemTitle = `${schema.description}\n${id}\n${version}`; const iconClass = getHint(ICON_CLASS_KEY, registry, plugin); const iconTitle = getHint(ICON_LABEL_KEY, registry, plugin); - const icon = JLIcon.get(iconClass, settingsIcon); return (
  • - + {schema.title || id}
    • ); diff --git a/packages/ui-components/src/icon/jlicon.tsx b/packages/ui-components/src/icon/jlicon.tsx index 5a1aa002ab53..58030e0b743a 100644 --- a/packages/ui-components/src/icon/jlicon.tsx +++ b/packages/ui-components/src/icon/jlicon.tsx @@ -14,15 +14,15 @@ import badSvg from '../../style/debug/bad.svg'; import blankSvg from '../../style/debug/blank.svg'; export class JLIcon { - private static _instances = new Map(); private static _debug: boolean = false; + private static _instances = new Map(); /** - * Get any existing JLIcon instance by name + * Get any existing JLIcon instance by name. * - * @param name - Name of the JLIcon instance to fetch + * @param name - name of the JLIcon instance to fetch * - * @param fallback - Optional default JLIcon instance to use if + * @param fallback - optional default JLIcon instance to use if * name is not found * * @returns A JLIcon instance @@ -48,17 +48,17 @@ export class JLIcon { * Get any existing JLIcon instance by name, construct a DOM element * from it, then return said element. * - * @param name - Name of the JLIcon instance to fetch + * @param name - name of the JLIcon instance to fetch * - * @param fallback - If left undefined, use automatic fallback to + * @param fallback - if left undefined, use automatic fallback to * icons-as-css-background behavior: elem will be constructed using * a blank icon with `elem.className = classes(name, props.className)`, * where elem is the return value. Otherwise, fallback can be used to * define the default JLIcon instance, returned whenever lookup fails * - * @param props = passed directly to JLIcon.element + * @param props - passed directly to JLIcon.element * - * @returns An SVGElement + * @returns an SVGElement */ static getElement({ name, @@ -74,6 +74,23 @@ export class JLIcon { return icon.element(props); } + /** + * Get any existing JLIcon instance by name, construct a React element + * from it, then return said element. + * + * @param name - name of the JLIcon instance to fetch + * + * @param fallback - if left undefined, use automatic fallback to + * icons-as-css-background behavior: elem will be constructed using + * a blank icon with `elem.className = classes(name, props.className)`, + * where elem is the return value. Otherwise, fallback can be used to + * define the default JLIcon instance, used to construct the return + * elem whenever lookup fails + * + * @param props - passed directly to JLIcon.react + * + * @returns a React element + */ static getReact({ name, fallback, @@ -89,9 +106,9 @@ export class JLIcon { } /** - * Toggle icon debug from off-to-on, or vice-versa + * Toggle icon debug from off-to-on, or vice-versa. * - * @param debug - Optional boolean to force debug on or off + * @param debug - optional boolean to force debug on or off */ static toggleDebug(debug?: boolean) { JLIcon._debug = debug ?? !JLIcon._debug; @@ -133,14 +150,19 @@ export class JLIcon { return null; } + let ret: HTMLElement; if (container) { // take ownership by removing any existing children while (container.firstChild) { container.firstChild.remove(); } + + ret = svgElement; } else { // create a container if needed container = document.createElement(tag); + + ret = container; } this._initContainer({ container, className, propsStyle, title }); @@ -148,7 +170,7 @@ export class JLIcon { // add the svg node to the container container.appendChild(svgElement); - return svgElement; + return ret; } render(host: HTMLElement, props: JLIcon.IProps = {}): void { @@ -327,9 +349,6 @@ export namespace JLIcon { export type IReact = React.ForwardRefExoticComponent; } -export const badIcon = new JLIcon({ name: 'bad', svgstr: badSvg }); -export const blankIcon = new JLIcon({ name: 'blank', svgstr: blankSvg }); - namespace Private { export function nameToClassName(name: string): string { return 'jp-' + Text.camelCase(name, true) + 'Icon'; @@ -347,3 +366,7 @@ namespace Private { } } } + +// need to be at the bottom since constructor depends on Private +export const badIcon = new JLIcon({ name: 'bad', svgstr: badSvg }); +export const blankIcon = new JLIcon({ name: 'blank', svgstr: blankSvg });