Merge pull request #100 from XpressAI/adry/refresh-labIcon

💄Change into labIcon and replace the refresh icon

src/debugger/SidebarDebugger.ts

@@ -6,6 +6,7 @@ import { commandIDs } from '../components/xircuitBodyWidget';
 import { DebuggerWidget } from './DebuggerWidget';
 import { XircuitFactory } from '../xircuitFactory';
 import { Toolbar, CommandToolbarButton } from '@jupyterlab/apputils';
+import { breakpointIcon } from '../ui-components/icons';
 
 export const DebuggerCommandIDs = {
   continue: 'Xircuits-debugger:continue',
@@ -166,7 +167,7 @@ export const DebuggerCommandIDs = {
       // Add command signal to toggle breakpoint
       app.commands.addCommand(commandIDs.breakpointXircuit, {
         caption: trans.__('Toggle Breakpoint'),
-        iconClass: 'jp-BreakpointLogo',
+        icon: breakpointIcon,
         isEnabled: () => {
           return debugMode ?? false;
         },

src/index.tsx

@@ -25,6 +25,8 @@ import { DocumentWidget } from '@jupyterlab/docregistry';
 import { runIcon, saveIcon } from '@jupyterlab/ui-components';
 import { addContextMenuCommands } from './commands/ContextMenu';
 import { Token } from '@lumino/coreutils';
+import { xircuitsIcon, debuggerIcon } from './ui-components/icons';
+
 
 const FACTORY = 'Xircuits editor';
 
@@ -83,7 +85,7 @@ const xircuits: JupyterFrontEndPlugin<void> = {
       name: 'xircuits',
       displayName: 'Xircuits',
       extensions: ['.xircuits'],
-      iconClass: 'jp-XircuitLogo'
+      icon: xircuitsIcon
     });
 
     // Registering the widget factory
@@ -115,6 +117,24 @@ const xircuits: JupyterFrontEndPlugin<void> = {
       name: widget => widget.context.path
     });
 
+    // Find the MainLogo widget in the shell and replace it with the Xircuits Logo
+    const widgets = app.shell.widgets('top');
+    let widget = widgets.next();
+
+    while (widget !== undefined) {
+      if (widget.id === 'jp-MainLogo') {
+        xircuitsIcon.element({
+          container: widget.node,
+          justify: 'center',
+          height: 'auto',
+          width: '25px'
+        });
+        break;
+      }
+
+      widget = widgets.next();
+    }
+
     // Creating the sidebar widget for the xai components
     const sidebarWidget = ReactWidget.create(<Sidebar lab={app}/>);
     sidebarWidget.id = 'xircuits-component-sidebar';
@@ -127,7 +147,7 @@ const xircuits: JupyterFrontEndPlugin<void> = {
     // Creating the sidebar debugger
     const sidebarDebugger = new XircuitsDebugger.Sidebar({ app, translator, widgetFactory })
     sidebarDebugger.id = 'xircuits-debugger-sidebar';
-    sidebarDebugger.title.iconClass = 'jp-DebuggerLogo';
+    sidebarDebugger.title.icon = debuggerIcon;
     sidebarDebugger.title.caption = "Xircuits Debugger";
     restorer.add(sidebarDebugger, sidebarDebugger.id);
     app.shell.add(sidebarDebugger, 'right', { rank: 1001 });
@@ -147,7 +167,7 @@ const xircuits: JupyterFrontEndPlugin<void> = {
     // Add a command for creating a new xircuits file.
     app.commands.addCommand(commandIDs.createNewXircuit, {
       label: 'Create New Xircuits',
-      iconClass: 'jp-XircuitLogo',
+      icon: xircuitsIcon,
       caption: 'Create a new xircuits file',
       execute: () => {
         app.commands

src/kernel/panel.ts

@@ -21,6 +21,7 @@ import { Message } from '@lumino/messaging';
 import { StackedPanel } from '@lumino/widgets';
 
 import { Log } from '../log/LogPlugin';
+import { xircuitsIcon } from '../ui-components/icons';
 import { XircuitFactory } from '../xircuitFactory';
 
 /**
@@ -46,7 +47,7 @@ export class OutputPanel extends StackedPanel {
         this.id = 'xircuit-output-panel';
         this.title.label = this._trans.__('Xircuit Output');
         this.title.closable = true;
-        this.title.iconClass = 'jp-XircuitLogo';
+        this.title.icon = xircuitsIcon;
 
         this._sessionContext = new SessionContext({
             sessionManager: manager.sessions,

src/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+    const value: string;
+    export default value;
+}

src/ui-components/icons.tsx

@@ -0,0 +1,10 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+import xircuitsSvg from '../../style/icons/xpress-logo.svg';
+import debuggerSvg from '../../style/icons/debugger.svg';
+import lockSvg from '../../style/icons/lock.svg';
+import breakpointSvg from '../../style/icons/breakpoint.svg';
+
+export const xircuitsIcon = new LabIcon({ name: 'xircuits:xircuits', svgstr: xircuitsSvg });
+export const debuggerIcon = new LabIcon({ name: 'xircuits:debuggerIcon', svgstr: debuggerSvg });
+export const lockIcon = new LabIcon({ name: 'xircuits:lockIcon', svgstr: lockSvg });
+export const breakpointIcon = new LabIcon({ name: 'xircuits:breakpointIcon', svgstr: breakpointSvg });

src/xircuitFactory.ts

@@ -24,6 +24,7 @@ import { commandIDs } from './components/xircuitBodyWidget';
 import { CommandIDs } from './log/LogPlugin';
 import { ServiceManager } from '@jupyterlab/services';
 import { RunSwitcher } from './components/RunSwitcher';
+import { lockIcon, xircuitsIcon } from './ui-components/icons';
 
 const XPIPE_CLASS = 'xircuits-editor';
 
@@ -107,7 +108,7 @@ export class XircuitFactory extends ABCWidgetFactory<DocumentWidget> {
 
     const widget = new DocumentWidget({ content, context });
     widget.addClass(XPIPE_CLASS);
-    widget.title.iconClass = 'jp-XircuitLogo';
+    widget.title.icon = xircuitsIcon;
 
     /**
      * Create a save button toolbar item.
@@ -190,7 +191,7 @@ export class XircuitFactory extends ABCWidgetFactory<DocumentWidget> {
      * Create a lock button toolbar item.
      */
      let lockButton = new ToolbarButton({
-      iconClass: 'jp-LockLogo',
+      icon: lockIcon,
       tooltip: "Lock all non-general nodes connected from start node",
       onClick: (): void => {
         this.commands.execute(commandIDs.lockXircuit);

style/base.css

@@ -3,13 +3,19 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-#jp-MainLogo {
-    background-image: url(../style/icons/xpress-logo.svg);
-    background-repeat: no-repeat;
+/* Refresh Icon */
+#main-logo{
+  background-image: url(../style/icons/xpress-logo.svg); 
+  background-repeat: no-repeat;
+  position: fixed;
+  width: 15%;
+  height: 15%; 
+  top: 50%;
+  left: 55%;
+  transform: translate(-50%, -50%);
 }
-
-#jp-MainLogo > svg {
-    visibility: hidden;
+#main-logo > svg{
+  visibility: hidden;
 }
 
 .jp-DebuggerWidget {
@@ -26,21 +32,6 @@
   flex: 0 0 auto;
 }
 
-.jp-XircuitLogo {
-  background-image: url(./icons/xpress-logo.svg);
-  background-repeat: no-repeat;
-}
-
-.jp-DebuggerLogo {
-  background-image: url(./icons/debugger.svg);
-  background-repeat: no-repeat;
-}
-
-.jp-LockLogo {
-  background-image: url(./icons/lock.svg);
-  background-repeat: no-repeat;
-}
-
 .jp-ComponentLibraryLogo {
   background-image: url(./icons/component-library.svg);
   background-repeat: no-repeat;
@@ -53,11 +44,6 @@
   background-size: 25px 25px;
 }
 
-.jp-BreakpointLogo {
-  background-image: url(./icons/breakpoint.svg);
-  background-repeat: no-repeat;
-}
-
 /* Close button for image viewer*/
 .close {
   color: #fff;