Quick styling pass (#45)

* Quick styling pass

* Fix filename typo

* Update Playwright Snapshots

* Switch to notebook sidebar on start

* Revert snapshot

* Add one second timeout

* Update Playwright Snapshots

* Ensure the logo is above notebook

* Update Playwright Snapshots

* Try the suggestion

Co-authored-by: Agriya Khetarpal <[email protected]>

* Update Playwright Snapshots

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Agriya Khetarpal <[email protected]>

Author: 3 people

src/icons.ts

@@ -4,7 +4,11 @@ import {
   folderIcon,
   addIcon,
   LabIcon,
-  linkIcon
+  linkIcon,
+  runIcon,
+  refreshIcon,
+  stopIcon,
+  fastForwardIcon
 } from '@jupyterlab/ui-components';
 
 import saveSvg from '../style/icons/save.svg';
@@ -15,6 +19,11 @@ import addSvg from '../style/icons/add.svg';
 import linkSvg from '../style/icons/link.svg';
 import competitionSvg from '../style/icons/competition.svg';
 import notebookSvg from '../style/icons/notebook.svg';
+import logoSvg from '../style/icons/logo.svg';
+import runSvg from '../style/icons/run.svg';
+import refreshSvg from '../style/icons/refresh.svg';
+import stopSvg from '../style/icons/stop.svg';
+import fastForwardSvg from '../style/icons/fast-forward.svg';
 
 export namespace EverywhereIcons {
   // Overwrite Jupyter default icons
@@ -38,7 +47,22 @@ export namespace EverywhereIcons {
     name: notebookIcon.name,
     svgstr: notebookSvg
   });
-  notebookIcon;
+  export const run = new LabIcon({
+    name: runIcon.name,
+    svgstr: runSvg
+  });
+  export const refresh = new LabIcon({
+    name: refreshIcon.name,
+    svgstr: refreshSvg
+  });
+  export const stop = new LabIcon({
+    name: stopIcon.name,
+    svgstr: stopSvg
+  });
+  export const fastForward = new LabIcon({
+    name: fastForwardIcon.name,
+    svgstr: fastForwardSvg
+  });
   // Addd custom icons
   export const folderSidebar = new LabIcon({
     name: 'everywhere:folder-sidebar',
@@ -52,4 +76,8 @@ export namespace EverywhereIcons {
     name: 'everywhere:competition',
     svgstr: competitionSvg
   });
+  export const logo = new LabIcon({
+    name: 'everywhere:logo',
+    svgstr: logoSvg
+  });
 }

src/index.ts

@@ -5,6 +5,7 @@ import { Dialog, showDialog, ReactWidget } from '@jupyterlab/apputils';
 import { PageConfig } from '@jupyterlab/coreutils';
 import { INotebookContent } from '@jupyterlab/nbformat';
 
+import { customSidebar } from './sidebar';
 import { SharingService } from './sharing-service';
 
 import {
@@ -218,4 +219,4 @@ const plugin: JupyterFrontEndPlugin<void> = {
   }
 };
 
-export default [plugin, notebookPlugin, files, competitions];
+export default [plugin, notebookPlugin, files, competitions, customSidebar];

src/pages/notebook.tsx

@@ -68,19 +68,19 @@ export const notebookPlugin: JupyterFrontEndPlugin<void> = {
       });
     }
 
-    shell.add(
-      new SidebarIcon({
-        label: 'Notebook',
-        icon: EverywhereIcons.notebook,
-        execute: () => {
-          if (tracker.currentWidget) {
-            shell.activateById(tracker.currentWidget.id);
-          }
+    const sidebarItem = new SidebarIcon({
+      label: 'Notebook',
+      icon: EverywhereIcons.notebook,
+      execute: () => {
+        if (tracker.currentWidget) {
+          shell.activateById(tracker.currentWidget.id);
         }
-      }),
-      'left',
-      { rank: 100 }
-    );
+      }
+    });
+    shell.add(sidebarItem, 'left', { rank: 100 });
+
+    app.shell.activateById(sidebarItem.id);
+    app.restored.then(() => app.shell.activateById(sidebarItem.id));
 
     /**
      * Create a "Share" button

src/sidebar.ts

@@ -0,0 +1,61 @@
+import { TabBar, Widget } from '@lumino/widgets';
+import { ILabShell, JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application';
+import { SidebarIcon } from './ui-components/SidebarIcon';
+import { EverywhereIcons } from './icons';
+
+export const customSidebar: JupyterFrontEndPlugin<void> = {
+  id: 'jupytereverywhere:sidebar',
+  autoStart: true,
+  requires: [ILabShell],
+  activate: (app: JupyterFrontEnd, shell: ILabShell) => {
+    // Overwrite behaviour of the sidebar panel
+    const leftHandler = shell['_leftHandler'];
+    const sidebar: TabBar<Widget> = leftHandler._sideBar;
+    leftHandler._refreshVisibility = () => {
+      sidebar.setHidden(false);
+      leftHandler._stackedPanel.setHidden(true);
+      leftHandler._updated.emit();
+    };
+    sidebar.currentChanged.connect(
+      (_sender: TabBar<Widget>, args: TabBar.ICurrentChangedArgs<Widget>) => {
+        const oldWidget = args.previousTitle
+          ? leftHandler._findWidgetByTitle(args.previousTitle)
+          : null;
+        const newWidget = args.currentTitle
+          ? leftHandler._findWidgetByTitle(args.currentTitle)
+          : null;
+        console.log(newWidget);
+        if (newWidget && newWidget instanceof SidebarIcon) {
+          const cancel = newWidget.execute();
+          if (cancel) {
+            console.log('Attempting to revert to:', oldWidget.label);
+            if (args.previousTitle) {
+              const previousIndex = sidebar.titles.indexOf(oldWidget);
+              if (previousIndex >= 0) {
+                sidebar.currentIndex = previousIndex;
+              } else {
+                sidebar.currentIndex = -1;
+              }
+            } else {
+              sidebar.currentIndex = -1;
+            }
+          }
+        }
+      },
+      this
+    );
+    // Add Jupyter Everywhere icon
+    shell.add(
+      new SidebarIcon({
+        label: 'Jupyter Everywhere',
+        icon: EverywhereIcons.logo,
+        execute: () => {
+          console.log('TODO');
+          return true;
+        }
+      }),
+      'left',
+      { rank: 0 }
+    );
+  }
+};

src/ui-components/SidebarIcon.ts

@@ -4,13 +4,13 @@ import { StackedPanel } from '@lumino/widgets';
 
 // it could extend Widget, StackedPanel is just temporary as it gives 0-width layout
 export class SidebarIcon extends StackedPanel {
-  constructor(private _options: { label: string; icon: LabIcon; execute: () => void }) {
+  constructor(private _options: { label: string; icon: LabIcon; execute: () => boolean | void }) {
     super();
     this.title.caption = _options.label;
     this.title.icon = _options.icon;
     this.id = UUID.uuid4();
   }
-  protected onBeforeShow() {
-    this._options.execute();
+  execute() {
+    return this._options.execute();
   }
 }

style/base.css

@@ -35,3 +35,19 @@
   background: #e8e3e3;
   cursor: pointer;
 }
+
+#jp-main-dock-panel[data-mode='single-document'] {
+  padding: 25px !important;
+  background: #d8b8dc;
+}
+
+#jp-main-dock-panel[data-mode='single-document'] .jp-MainAreaWidget {
+  border-radius: 15px;
+}
+
+.jp-SideBar {
+  /* Override colors in sidebar */
+  --jp-layout-color1: #e6e6e6;
+  --jp-layout-color2: #fff;
+  --jp-border-width: 0px;
+}