Merge kernel and icon columns

nebari-dev · May 6, 2024 · 6077109 · 6077109
1 parent 47fb10d
commit 6077109
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 40 deletions.
diff --git a/src/components/table.tsx b/src/components/table.tsx
@@ -122,50 +122,44 @@ export function KernelTable(props: {
   );
 
   const availableColumns: Table.IColumn<IKernelItem>[] = [
-    {
-      id: 'icon',
-      label: trans.__('Icon'),
-      renderCell: (row: IKernelItem) => (
-        <div
-          className="jp-LauncherCard-icon"
-          onClick={() => props.onClick(row)}
-        >
-          {row.kernelIconUrl ? (
-            <img
-              src={row.kernelIconUrl}
-              className="jp-Launcher-kernelIcon"
-              alt={row.label}
-            />
-          ) : (
-            <div className="jp-LauncherCard-noKernelIcon">
-              {row.label[0].toUpperCase()}
-            </div>
-          )}
-        </div>
-      ),
-      sort: (a: IKernelItem, b: IKernelItem) =>
-        a.command.localeCompare(b.command)
-    },
     {
       id: 'kernel',
       label: trans.__('Kernel'),
       renderCell: (row: IKernelItem) => (
-        <span
-          className={KERNEL_ITEM_CLASS}
-          onClick={event => {
-            props.onClick(row);
-            event.stopPropagation();
-          }}
-          onKeyDown={event => {
-            // TODO memoize func defs for perf
-            if (event.key === 'Enter') {
-              row.execute();
-            }
-          }}
-          tabIndex={0}
-        >
-          {row.label}
-        </span>
+        <>
+          <span
+            className="jp-LauncherCard-icon"
+            onClick={() => props.onClick(row)}
+          >
+            {row.kernelIconUrl ? (
+              <img
+                src={row.kernelIconUrl}
+                className="jp-Launcher-kernelIcon"
+                alt={row.label}
+              />
+            ) : (
+              <div className="jp-LauncherCard-noKernelIcon">
+                {row.label[0].toUpperCase()}
+              </div>
+            )}
+          </span>
+          <span
+            className={KERNEL_ITEM_CLASS}
+            onClick={event => {
+              props.onClick(row);
+              event.stopPropagation();
+            }}
+            onKeyDown={event => {
+              // TODO memoize func defs for perf
+              if (event.key === 'Enter') {
+                row.execute();
+              }
+            }}
+            tabIndex={0}
+          >
+            {row.label}
+          </span>
+        </>
       ),
       sort: (a: IKernelItem, b: IKernelItem) => a.label.localeCompare(b.label)
     },

diff --git a/style/base.css b/style/base.css
@@ -124,10 +124,20 @@
 
 .jp-NewLauncher-table .jp-LauncherCard-noKernelIcon {
   font-size: var(--jp-icon-size);
+  line-height: var(--jp-icon-size);
 }
 
 .jp-NewLauncher-table .jp-LauncherCard-icon {
   height: var(--jp-icon-size);
+  width: var(--jp-icon-size);
+  display: inline-block;
+}
+
+.jp-TableKernelItem {
+  display: inline-block;
+  line-height: var(--jp-icon-size);
+  vertical-align: top;
+  padding-left: 4px;
 }
 
 .jp-NewLauncher-table th[data-id='icon'],