Merge pull request #131 from jtpio/logo

Update logo
jupyterlab · May 26, 2021 · 16d2a1a · 16d2a1a
2 parents 4826d8d + b545003
commit 16d2a1a
Show file tree

Hide file tree

Showing 12 changed files with 360 additions and 80 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,10 @@
-![retrolab-logo](./retrolab.png)
+<h1 align="center">
+  <img
+      alt="RetroLab"
+      src="./logo.png"
+      width="256"
+    />
+</h1>
 
 ![Github Actions Status](https://github.com/jtpio/retrolab/workflows/Build/badge.svg)
 [![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gist/jtpio/77c82c512f6779a1a05ab59d915dfc36/master?urlpath=/retro/notebooks/tour.ipynb)
@@ -68,6 +74,19 @@ Support for existing JupyterLab themes!
 
 ![themes](https://user-images.githubusercontent.com/591645/101953333-75d9c180-3bfa-11eb-868f-af54d1ea7091.gif)
 
+For an even more retro look, you might want to start `retrolab` with the `--retro-logo` CLI flag:
+
+```bash
+jupyter retro --retro-logo
+
+# or
+# jupyter retro --RetroApp.retro_logo=True
+```
+
+Example with the [JupyterLab Miami Nights Theme](https://github.com/timkpaine/jupyterlab_miami_nights) installed as a prebuilt extension:
+
+![image](https://user-images.githubusercontent.com/591645/119634905-77e3b580-be13-11eb-9c4c-d187ebea9df8.png)
+
 ### Zen Mode 😌
 
 ![compact-zen-mode](https://user-images.githubusercontent.com/591645/101923740-149cf880-3bd0-11eb-9617-e3349a76d034.gif)

diff --git a/logo.png b/logo.png
diff --git a/logo.svg b/logo.svg
diff --git a/packages/application-extension/src/index.ts b/packages/application-extension/src/index.ts
@@ -27,7 +27,7 @@ import { ITranslator, TranslationManager } from '@jupyterlab/translation';
 
 import { RetroApp, RetroShell, IRetroShell } from '@retrolab/application';
 
-import { jupyterIcon } from '@retrolab/ui-components';
+import { jupyterIcon, retroInlineIcon } from '@retrolab/ui-components';
 
 import { Widget } from '@lumino/widgets';
 
@@ -84,7 +84,10 @@ const logo: JupyterFrontEndPlugin<void> = {
     node.target = '_blank';
     node.rel = 'noopener noreferrer';
     const logo = new Widget({ node });
-    jupyterIcon.element({
+
+    const retroLogo = PageConfig.getOption('retroLogo') === 'true';
+    const icon = retroLogo ? retroInlineIcon : jupyterIcon;
+    icon.element({
       container: node,
       elementPosition: 'center',
       padding: '2px 2px 2px 8px',

diff --git a/packages/help-extension/src/index.tsx b/packages/help-extension/src/index.tsx
@@ -111,7 +111,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
         const title = (
           <>
             <span className="jp-AboutRetro-header">
-              <retroIcon.react height="128px" width="auto" />
+              <retroIcon.react height="256px" width="auto" />
             </span>
           </>
         );
@@ -136,7 +136,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
           </>
         );
 
-        return showDialog({
+        const dialog = new Dialog({
           title,
           body,
           buttons: [
@@ -147,6 +147,8 @@ const plugin: JupyterFrontEndPlugin<void> = {
             })
           ]
         });
+        dialog.addClass('jp-AboutRetro');
+        void dialog.launch();
       }
     });
 

diff --git a/packages/help-extension/style/base.css b/packages/help-extension/style/base.css
@@ -1,3 +1,7 @@
+.jp-AboutRetro .jp-Dialog-header {
+  justify-content: center;
+}
+
 .jp-AboutRetro-header {
   display: flex;
   flex-direction: row;

diff --git a/packages/lab-extension/src/index.ts b/packages/lab-extension/src/index.ts
@@ -21,7 +21,7 @@ import {
   NotebookPanel
 } from '@jupyterlab/notebook';
 
-import { jupyterIcon } from '@jupyterlab/ui-components';
+import { retroSunIcon } from '@retrolab/ui-components';
 
 import { CommandRegistry } from '@lumino/commands';
 
@@ -56,7 +56,7 @@ class RetroButton
   createNew(panel: NotebookPanel): IDisposable {
     const button = new ToolbarButton({
       tooltip: 'Open with RetroLab',
-      icon: jupyterIcon,
+      icon: retroSunIcon,
       onClick: () => {
         this._commands.execute(CommandIDs.openRetro);
       }

diff --git a/packages/ui-components/src/icon/iconimports.ts b/packages/ui-components/src/icon/iconimports.ts
@@ -9,6 +9,10 @@ import jupyterSvgstr from '../../style/icons/jupyter.svg';
 
 import retroSvgstr from '../../style/icons/retrolab.svg';
 
+import retroInlineSvgstr from '../../style/icons/retrolabInline.svg';
+
+import retroSunSvgstr from '../../style/icons/retrolabSun.svg';
+
 export const jupyterIcon = new LabIcon({
   name: 'retro-ui-components:jupyter',
   svgstr: jupyterSvgstr
@@ -18,3 +22,13 @@ export const retroIcon = new LabIcon({
   name: 'retro-ui-components:retrolab',
   svgstr: retroSvgstr
 });
+
+export const retroInlineIcon = new LabIcon({
+  name: 'retro-ui-components:retrolabInline',
+  svgstr: retroInlineSvgstr
+});
+
+export const retroSunIcon = new LabIcon({
+  name: 'retro-ui-components:retroSun',
+  svgstr: retroSunSvgstr
+});