Move contextual help, add icons, style

nebari-dev · Apr 25, 2024 · 63f9223 · 63f9223
1 parent 0ed8b6d
commit 63f9223
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -196,7 +196,8 @@
             "property-no-vendor-prefix": null,
             "selector-class-pattern": "^([a-z][A-z\\d]*)(-[A-z\\d]+)*$",
             "selector-no-vendor-prefix": null,
-            "value-no-vendor-prefix": null
+            "value-no-vendor-prefix": null,
+            "no-descending-specificity": null
         }
     }
 }
diff --git a/src/icons.ts b/src/icons.ts
@@ -1,7 +1,13 @@
 import { LabIcon } from '@jupyterlab/ui-components';
 import starSvgstr from '../style/icons/md/star.svg';
+import fileSvgstr from '../style/icons/md/file.svg';
 
 export const starIcon = new LabIcon({
   name: 'jupyterlab-new-launcher:star',
   svgstr: starSvgstr
 });
+
+export const fileIcon = new LabIcon({
+  name: 'jupyterlab-new-launcher:file',
+  svgstr: fileSvgstr
+});
diff --git a/src/launcher.tsx b/src/launcher.tsx
@@ -13,7 +13,9 @@ import {
   caretRightIcon,
   Table,
   UseSignal,
-  MenuSvg
+  MenuSvg,
+  notebookIcon,
+  consoleIcon
 } from '@jupyterlab/ui-components';
 import * as React from 'react';
 import {
@@ -24,7 +26,7 @@ import {
   ILastUsedDatabase,
   IFavoritesDatabase
 } from './types';
-import { starIcon } from './icons';
+import { starIcon, fileIcon } from './icons';
 import { Item } from './item';
 
 const STAR_BUTTON_CLASS = 'jp-starIconButton';
@@ -46,7 +48,6 @@ function TypeCard(props: {
         <LabIcon.resolveReact
           icon={item.icon}
           iconClass={classes(item.iconClass, 'jp-Icon-cover')}
-          stylesheet="launcherCard"
         />
       </div>
       <div className="jp-LauncherCard-label">
@@ -60,6 +61,7 @@ function CollapsibleSection(
   props: React.PropsWithChildren<{
     title: string;
     className: string;
+    icon: LabIcon;
     open: boolean;
   }>
 ) {
@@ -81,6 +83,10 @@ function CollapsibleSection(
         >
           <caretRightIcon.react className="jp-CollapsibleSection-CollapserIcon" />
         </div>
+        <props.icon.react
+          tag="span"
+          className="jp-CollapsibleSection-CategoryIcon"
+        />
         <h3 className="jp-CollapsibleSection-Title">{props.title}</h3>
       </summary>
       <div className="jp-Launcher-CardGroup jp-Launcher-cardContainer">
@@ -119,10 +125,11 @@ function LauncherBody(props: {
   typeItems: IItem[];
   notebookItems: IKernelItem[];
   consoleItems: IKernelItem[];
+  otherItems: IItem[];
   commands: CommandRegistry;
   settings: ISettingRegistry.ISettings;
 }): React.ReactElement {
-  const { trans, cwd, typeItems } = props;
+  const { trans, cwd, typeItems, otherItems } = props;
   const [query, updateQuery] = React.useState<string>('');
 
   const metadataAvailable = new Set<string>();
@@ -138,15 +145,22 @@ function LauncherBody(props: {
 
   return (
     <div className="jp-LauncherBody">
-      <div className="jp-Launcher-cwd">
-        <h3>
-          {trans.__('Current directory:')} <code>{cwd ? cwd : '/'}</code>
-        </h3>
+      <div className="jp-NewLauncher-TopBar">
+        <div className="jp-Launcher-cwd">
+          <h3>
+            {trans.__('Current folder:')} <code>{cwd ? cwd : '/'}</code>
+          </h3>
+        </div>
+        <div className="jp-NewLauncher-OtherItems">
+          {otherItems.map(item => (
+            <TypeCard item={item} trans={trans} />
+          ))}
+        </div>
       </div>
       <div className="jp-Launcher-searchBox">
         <FilterBox
           placeholder={trans.__('Filter')}
-          updateFilter={(fn, query) => {
+          updateFilter={(_, query) => {
             updateQuery(query ?? '');
           }}
           initialQuery={''}
@@ -156,6 +170,7 @@ function LauncherBody(props: {
       <CollapsibleSection
         className="jp-Launcher-openByType"
         title={trans.__('Create Empty')}
+        icon={fileIcon}
         open={true} // TODO: store this in layout/state higher up
       >
         {typeItems
@@ -171,6 +186,7 @@ function LauncherBody(props: {
       <CollapsibleSection
         className="jp-Launcher-openByKernel"
         title={trans.__('Launch Notebook')}
+        icon={notebookIcon}
         open={true} // TODO: store this in layout/state higher up
       >
         <KernelTable
@@ -186,6 +202,7 @@ function LauncherBody(props: {
       <CollapsibleSection
         className="jp-Launcher-openByKernel"
         title={trans.__('Launch Console')}
+        icon={consoleIcon}
         open={false}
       >
         <KernelTable
@@ -432,7 +449,7 @@ export function KernelTable(props: {
         <div className="jp-Launcher-searchBox">
           <FilterBox
             placeholder={trans.__('Filter')}
-            updateFilter={(fn, query) => {
+            updateFilter={(_, query) => {
               updateQuery(query ?? '');
             }}
             initialQuery={''}
@@ -572,9 +589,17 @@ export class NewLauncher extends Launcher {
     const consoleCategory = trans.__('Console');
     const kernelCategories = [notebookCategory, consoleCategory];
 
+    const otherCommands = ['inspector:open'];
+
+    const otherItems = items
+      .filter(item => otherCommands.includes(item.command))
+      .map(this.renderCommand);
+
     // TODO: maybe better to filter out everything from default lab and re-populate the kernel categories manually to get more metadata?
     const nonKernelItems = items.filter(
-      item => !item.category || !kernelCategories.includes(item.category)
+      item =>
+        (!item.category || !kernelCategories.includes(item.category)) &&
+        !otherCommands.includes(item.command)
     );
     const rankOverrides = {
       'terminal:create-new': 3, // TODO: replace with terminal which asks for environment choice?
@@ -606,7 +631,6 @@ export class NewLauncher extends Launcher {
       .filter(item => item.category && item.category === consoleCategory)
       .map(this.renderKernelCommand);
 
-
     // TODO: only create items once or if changed; dispose of them too
     const typeItems: IItem[] = typeCommands.map(this.renderCommand);
 
@@ -618,6 +642,7 @@ export class NewLauncher extends Launcher {
         typeItems={typeItems}
         notebookItems={notebookItems}
         consoleItems={consoleItems}
+        otherItems={otherItems}
         settings={this._settings}
       />
     );

diff --git a/style/base.css b/style/base.css
@@ -1,7 +1,3 @@
-.jp-Launcher-TypeCard {
-  user-select: none;
-}
-
 .jp-Launcher-CardGroup {
   justify-content: center;
 }
@@ -12,13 +8,60 @@
   --jp-title-height: 24px;
 
   padding: var(--jp-animation-depth);
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.jp-Launcher-cwd > h3 {
+  font-size: var(--jp-ui-font-size1);
+  margin: 0;
+}
+
+.jp-NewLauncher-OtherItems .jp-LauncherCard-label {
+  display: none;
+}
+
+.jp-NewLauncher-OtherItems .jp-Launcher-TypeCard {
+  width: unset;
+  min-height: unset;
+  flex-direction: row;
+  margin: 0;
+  box-shadow: none;
+  border-color: var(--jp-border-color0);
+}
+
+.jp-NewLauncher-OtherItems .jp-LauncherCard-icon {
+  height: 24px;
+}
+
+.jp-NewLauncher-OtherItems .jp-Launcher-TypeCard > .jp-LauncherCard-icon svg {
+  height: 16px;
+  height: 16px;
+}
+
+.jp-NewLauncher-TopBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.jp-Launcher-searchBox input {
+  box-shadow: none;
+  border: var(--jp-border-width) solid var(--jp-border-color1);
 }
 
 .jp-CollapsibleSection > summary {
   cursor: pointer;
   transition: margin var(--jp-animation-time) ease-out;
   list-style: none;
   display: inline-block; /* contain the clickable area */
+  padding-right: 12px; /* but extend it a little */
+  min-width: 185px;
+}
+
+.jp-CollapsibleSection > summary:hover {
+  background-color: var(--jp-layout-color2);
 }
 
 .jp-CollapsibleSection[open] > summary {
@@ -39,16 +82,24 @@
   display: inline-block;
 }
 
+.jp-CollapsibleSection-CategoryIcon > svg {
+  width: 24px;
+  height: 24px;
+  margin-left: 4px;
+  margin-right: 8px;
+}
+
 .jp-CollapsibleSection-Title {
   display: inline-block;
   line-height: var(--jp-title-height);
   vertical-align: top;
   margin: 0;
   user-select: none;
+  font-weight: normal;
 }
 
 .jp-LauncherBody {
-  padding: 0 12px;
+  padding: 0 24px;
   height: 100%;
   overflow-y: auto;
 }
@@ -62,7 +113,7 @@
 }
 
 .jp-NewLauncher-table .jp-sortable-table {
-  border: var(--jp-border-width) solid var(--jp-border-color3);
+  border: var(--jp-border-width) solid var(--jp-border-color2);
   border-top: 0;
 }
 
@@ -140,3 +191,14 @@
 .jp-NewLauncher-table tr {
   cursor: pointer;
 }
+
+.jp-Launcher-TypeCard {
+  user-select: none;
+}
+
+.jp-Launcher-TypeCard > .jp-LauncherCard-icon svg {
+  align-items: center;
+  display: flex;
+  height: 52px;
+  width: 52px;
+}
diff --git a/style/icons/md/file.svg b/style/icons/md/file.svg