fixed to use defaultIconRegistry

packages/celltags-extension/src/index.ts

@@ -6,19 +6,14 @@ import {
 import { INotebookTools, INotebookTracker } from '@jupyterlab/notebook';
 
 import { TagTool } from '@jupyterlab/celltags';
-import { IThemeManager } from '@jupyterlab/apputils';
 
 function activate(
   app: JupyterFrontEnd,
   tools: INotebookTools,
-  tracker: INotebookTracker,
-  manager: IThemeManager
+  tracker: INotebookTracker
 ) {
-  const tool = new TagTool(tracker, app, manager);
+  const tool = new TagTool(tracker, app);
   tools.addItem({ tool: tool, rank: 1.7 });
-  manager.themeChanged.connect(() => {
-    tool.updateTheme();
-  });
 }
 
 /**
@@ -27,7 +22,7 @@ function activate(
 const celltags: JupyterFrontEndPlugin<void> = {
   id: 'celltags',
   autoStart: true,
-  requires: [INotebookTools, INotebookTracker, IThemeManager],
+  requires: [INotebookTools, INotebookTracker],
   activate: activate
 };
 

packages/celltags/package.json

@@ -45,12 +45,9 @@
     "@jupyterlab/notebook": "^2.0.0-alpha.1",
     "@jupyterlab/ui-components": "^2.0.0-alpha.1",
     "@phosphor/widgets": "^1.9.0",
-    "@types/node": "^12.0.2",
-    "react": "~16.8.4",
-    "react-dom": "~16.8.4"
+    "@types/node": "^12.0.2"
   },
   "devDependencies": {
-    "@types/react-dom": "^16.8.4",
     "rimraf": "~2.6.2",
     "typescript": "~3.5.1"
   }

packages/celltags/src/addwidget.ts

@@ -1,5 +1,7 @@
 import { Widget } from '@phosphor/widgets';
 
+import { defaultIconRegistry } from '@jupyterlab/ui-components';
+
 import { TagTool } from './tool';
 
 /**
@@ -9,14 +11,14 @@ export class AddWidget extends Widget {
   /**
    * Construct a new tag widget.
    */
-  constructor(darkTheme: boolean) {
+  constructor() {
     super();
     this.addClass('tag');
     this.editing = false;
-    this.buildTag(darkTheme);
+    this.buildTag();
   }
 
-  buildTag(theme: boolean) {
+  buildTag() {
     let text = document.createElement('input');
     text.value = 'Add Tag';
     text.contentEditable = 'true';
@@ -26,26 +28,28 @@ export class AddWidget extends Widget {
     tag.className = 'tag-holder';
     tag.appendChild(text);
     let img = document.createElement('span');
-    img.className = theme ? 'add-icon-dark' : 'add-icon';
-    img.classList.add('icon');
+    defaultIconRegistry.icon({
+      name: 'add',
+      container: img,
+      center: true,
+      height: '18px',
+      width: '18px',
+      marginLeft: '3px',
+      marginRight: '-5px'
+    });
     this.addClass('unapplied-tag');
     tag.appendChild(img);
-    this.img = img;
     this.node.appendChild(tag);
   }
 
   onAfterAttach() {
     this.node.addEventListener('mousedown', this);
-    this.node.addEventListener('mouseover', this);
-    this.node.addEventListener('mouseout', this);
     this.node.addEventListener('keypress', this);
     this.node.addEventListener('focusout', this);
   }
 
   onBeforeDetach() {
     this.node.removeEventListener('mousedown', this);
-    this.node.removeEventListener('mouseover', this);
-    this.node.removeEventListener('mouseout', this);
     this.node.removeEventListener('keypress', this);
     this.node.removeEventListener('focusout', this);
   }
@@ -55,12 +59,6 @@ export class AddWidget extends Widget {
       case 'mousedown':
         this._evtClick(event as MouseEvent);
         break;
-      case 'mouseover':
-        this._evtHover(event as MouseEvent);
-        break;
-      case 'mouseout':
-        this._evtOffHover(event as MouseEvent);
-        break;
       case 'keypress':
         this._evtKeyPress(event as KeyboardEvent);
         break;
@@ -81,14 +79,6 @@ export class AddWidget extends Widget {
     }
   }
 
-  private _evtHover(event: MouseEvent) {
-    //(this.node as HTMLElement).classList.add("tag-hover");
-  }
-
-  private _evtOffHover(event: MouseEvent) {
-    //(this.node as HTMLElement).classList.remove("tag-hover");
-  }
-
   private _evtKeyPress(event: KeyboardEvent) {
     let inputElement = event.target as HTMLInputElement;
     let tmp = document.createElement('span');
@@ -116,15 +106,6 @@ export class AddWidget extends Widget {
     }
   }
 
-  updateTheme() {
-    let darkTheme = this.parent.getTheme();
-    this.img.classList.remove('add-icon-dark');
-    this.img.classList.remove('add-icon');
-    let add = darkTheme ? 'add-icon-dark' : 'add-icon';
-    this.img.classList.add(add);
-  }
-
   public parent: TagTool;
-  private img: HTMLSpanElement;
   private editing: boolean;
 }

packages/celltags/src/tool.ts

@@ -9,7 +9,6 @@ import { JupyterFrontEnd } from '@jupyterlab/application';
 import { TagWidget } from './widget';
 
 import { AddWidget } from './addwidget';
-import { IThemeManager } from '@jupyterlab/apputils';
 
 /**
  * A Tool for tag operations.
@@ -20,22 +19,17 @@ export class TagTool extends NotebookTools.Tool {
    *
    * @param tracker - The notebook tracker.
    */
-  constructor(
-    tracker: INotebookTracker,
-    app: JupyterFrontEnd,
-    manager: IThemeManager
-  ) {
+  constructor(tracker: INotebookTracker, app: JupyterFrontEnd) {
     super();
     app;
     this.tracker = tracker;
-    this.manager = manager;
     this.layout = new PanelLayout();
     this.createTagInput();
   }
 
   createTagInput() {
     let layout = this.layout as PanelLayout;
-    let input = new AddWidget(this.getTheme());
+    let input = new AddWidget();
     input.id = 'add-tag';
     layout.insertWidget(0, input);
   }
@@ -73,9 +67,9 @@ export class TagTool extends NotebookTools.Tool {
       }
     }
     cell.model.metadata.set('tags', tags);
-    console.log(this.tracker.activeCell.model.metadata.get('tags'));
     this.refreshTags();
     this.loadActiveTags();
+    console.log(this.tracker.activeCell.model.metadata.get('tags'));
   }
 
   removeTag(name: string) {
@@ -141,7 +135,7 @@ export class TagTool extends NotebookTools.Tool {
       }
     }
     for (let i = 0; i < tags.length; i++) {
-      let widget = new TagWidget(tags[i], this.getTheme());
+      let widget = new TagWidget(tags[i]);
       let idx = layout.widgets.length - 1;
       layout.insertWidget(idx, widget);
     }
@@ -196,10 +190,13 @@ export class TagTool extends NotebookTools.Tool {
    * Get all tags once available.
    */
   protected onAfterAttach() {
-    const header = document.createElement('header');
-    header.textContent = 'Tags in Notebook';
-    header.className = 'tag-header';
-    this.parent.node.insertBefore(header, this.node);
+    if (!this.header) {
+      const header = document.createElement('header');
+      header.textContent = 'Tags in Notebook';
+      header.className = 'tag-header';
+      this.parent.node.insertBefore(header, this.node);
+      this.header = true;
+    }
     this.tracker.currentWidget.context.ready.then(() => {
       this.refreshTags();
       this.loadActiveTags();
@@ -223,23 +220,7 @@ export class TagTool extends NotebookTools.Tool {
     this.loadActiveTags();
   }
 
-  getTheme() {
-    if (this.manager.theme == 'JupyterLab Dark') {
-      return true;
-    }
-    return false;
-  }
-
-  updateTheme() {
-    let layout = this.layout as PanelLayout;
-    let nWidgets = layout.widgets.length;
-    for (let i = 0; i < nWidgets - 1; i++) {
-      (layout.widgets[i] as TagWidget).updateTheme();
-    }
-    (layout.widgets[nWidgets - 1] as AddWidget).updateTheme();
-  }
-
   private tagList: string[] = [];
-  private manager: IThemeManager;
+  private header: boolean = false;
   public tracker: INotebookTracker = null;
 }

packages/celltags/src/widget.ts

@@ -1,5 +1,7 @@
 import { Widget } from '@phosphor/widgets';
 
+import { defaultIconRegistry } from '@jupyterlab/ui-components';
+
 import { TagTool } from './tool';
 
 /**
@@ -9,15 +11,15 @@ export class TagWidget extends Widget {
   /**
    * Construct a new tag widget.
    */
-  constructor(name: string, darkTheme: boolean) {
+  constructor(name: string) {
     super();
     this.applied = true;
     this.name = name;
     this.addClass('tag');
-    this.buildTag(darkTheme);
+    this.buildTag();
   }
 
-  buildTag(theme: boolean) {
+  buildTag() {
     let text = document.createElement('span');
     text.textContent = this.name;
     text.style.textOverflow = 'ellipsis';
@@ -25,8 +27,15 @@ export class TagWidget extends Widget {
     tag.className = 'tag-holder';
     tag.appendChild(text);
     let img = document.createElement('span');
-    img.className = theme ? 'check-icon-dark' : 'check-icon';
-    img.classList.add('icon');
+    defaultIconRegistry.icon({
+      name: 'check',
+      container: img,
+      center: true,
+      height: '18px',
+      width: '18px',
+      marginLeft: '5px',
+      marginRight: '-3px'
+    });
     if (this.applied) {
       this.addClass('applied-tag');
     } else {
@@ -34,7 +43,6 @@ export class TagWidget extends Widget {
       img.style.display = 'none';
     }
     tag.appendChild(img);
-    this.img = img;
     this.node.appendChild(tag);
   }
 
@@ -105,16 +113,7 @@ export class TagWidget extends Widget {
     (this.node as HTMLElement).classList.remove('tag-hover');
   }
 
-  updateTheme() {
-    let darkTheme = this.parent.getTheme();
-    this.img.classList.remove('check-icon-dark');
-    this.img.classList.remove('check-icon-dark');
-    let add = darkTheme ? 'check-icon-dark' : 'check-icon';
-    this.img.classList.add(add);
-  }
-
   public name: string;
   private applied: boolean;
-  private img: HTMLSpanElement;
   public parent: TagTool;
 }

packages/celltags/static/add-24px-dark.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 13H13V20H11V13H4V11H11V4H13V11H20V13Z" fill="white" fill-opacity="0.54"/>
-</svg>

packages/celltags/static/add-24px.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" fill="black" fill-opacity="0.54"/>
-</svg>

packages/celltags/static/check-24px-dark.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.00016 16.17L4.83016 12L3.41016 13.41L9.00016 19L21.0002 7L19.5902 5.59L9.00016 16.17Z" fill="white" fill-opacity="0.87"/>
-</svg>

packages/celltags/static/check-24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>

packages/celltags/style/base.css

@@ -42,37 +42,6 @@
   align-items: center;
 }
 
-.icon {
-  display: inline-block;
-  height: 18px;
-  min-width: 18px;
-  background-size: 18px;
-}
-
-.check-icon {
-  background-image: url('../static/check-24px.svg');
-  margin-left: 5px;
-  margin-right: -3px;
-}
-
-.add-icon {
-  background-image: url('../static/add-24px.svg');
-  margin-left: 3px;
-  margin-right: -5px;
-}
-
-.check-icon-dark {
-  background-image: url('../static/check-24px-dark.svg');
-  margin-left: 5px;
-  margin-right: -3px;
-}
-
-.add-icon-dark {
-  background-image: url('../static/add-24px-dark.svg');
-  margin-left: 3px;
-  margin-right: -5px;
-}
-
 .tag-hover {
   background-color: var(--jp-layout-color2);
 }

packages/ui-components/src/icon/iconimports.ts

@@ -33,6 +33,7 @@ import notTrustedSvg from '../../style/icons/statusbar/not-trusted.svg';
 import terminalSvg from '../../style/icons/statusbar/terminal.svg';
 import trustedSvg from '../../style/icons/statusbar/trusted.svg';
 import addSvg from '../../style/icons/toolbar/add.svg';
+import checkSvg from '../../style/icons/toolbar/check.svg';
 import copySvg from '../../style/icons/toolbar/copy.svg';
 import cutSvg from '../../style/icons/toolbar/cut.svg';
 import pasteSvg from '../../style/icons/toolbar/paste.svg';
@@ -69,6 +70,7 @@ export namespace IconImports {
     { name: 'terminal', svg: terminalSvg },
     { name: 'trusted', svg: trustedSvg },
     { name: 'add', svg: addSvg },
+    { name: 'check', svg: checkSvg },
     { name: 'copy', svg: copySvg },
     { name: 'cut', svg: cutSvg },
     { name: 'paste', svg: pasteSvg },

packages/ui-components/style/deprecated.css

@@ -37,6 +37,7 @@
   --jp-icon-terminal: url('icons/statusbar/terminal.svg');
   --jp-icon-trusted: url('icons/statusbar/trusted.svg');
   --jp-icon-add: url('icons/toolbar/add.svg');
+  --jp-icon-check: url('icons/toolbar/check.svg');
   --jp-icon-copy: url('icons/toolbar/copy.svg');
   --jp-icon-cut: url('icons/toolbar/cut.svg');
   --jp-icon-paste: url('icons/toolbar/paste.svg');
@@ -123,6 +124,9 @@
 .jp-AddIcon {
   background-image: var(--jp-icon-add);
 }
+.jp-CheckIcon {
+  background-image: var(--jp-icon-check);
+}
 .jp-CopyIcon {
   background-image: var(--jp-icon-copy);
 }

packages/ui-components/style/icons/toolbar/check.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g class="jp-icon3" fill="#616161"> 
+   <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+  </g>
+</svg>