Merge pull request #6587 from ellisonbg/launcher-ux-1.0

Restyle the launcher, enable keyboard navigation
jupyterlab · Jun 15, 2019 · 54dc755 · 54dc755
2 parents b386dfb + 8f92726
commit 54dc755
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 10 deletions.
diff --git a/packages/launcher/src/index.tsx b/packages/launcher/src/index.tsx
@@ -347,7 +347,7 @@ function Card(
   const args = { ...item.args, cwd: launcher.cwd };
   const caption = commands.caption(command, args);
   const label = commands.label(command, args);
-  const title = caption || label;
+  const title = kernel ? label : caption || label;
 
   // Build the onclick handler.
   let onclick = () => {
@@ -375,12 +375,22 @@ function Card(
       });
   };
 
+  // With tabindex working, you can now pick a kernel by tabbing around and
+  // pressing Enter.
+  let onkeypress = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      onclick();
+    }
+  };
+
   // Return the VDOM element.
   return (
     <div
       className="jp-LauncherCard"
       title={title}
       onClick={onclick}
+      onKeyPress={onkeypress}
+      tabIndex={100}
       data-category={item.category || 'Other'}
       key={Private.keyProperty.get(item)}
     >
@@ -400,7 +410,7 @@ function Card(
         )}
       </div>
       <div className="jp-LauncherCard-label" title={title}>
-        {label}
+        <p>{label}</p>
       </div>
     </div>
   );

diff --git a/packages/launcher/style/base.css b/packages/launcher/style/base.css
@@ -9,8 +9,8 @@
   --jp-private-launcher-top-padding: 16px;
   --jp-private-launcher-side-padding: 32px;
   --jp-private-launcher-card-size: 100px;
-  --jp-private-launcher-card-label-height: 25px;
-  --jp-private-launcher-card-icon-height: 75px;
+  --jp-private-launcher-card-label-height: 32px;
+  --jp-private-launcher-card-icon-height: 68px;
   --jp-private-launcher-large-icon-size: 52px;
   --jp-private-launcher-small-icon-size: 32px;
 }
@@ -117,10 +117,19 @@
   border-radius: var(--jp-border-radius);
 }
 
+.jp-LauncherCard:focus:not(:active) {
+  border: 1px solid var(--jp-brand-color1);
+  box-shadow: var(--jp-elevation-z6);
+}
+
 .jp-LauncherCard:hover {
   box-shadow: var(--jp-elevation-z6);
 }
 
+.jp-LauncherCard:active {
+  box-shadow: var(--jp-elevation-z4);
+}
+
 .jp-LauncherCard-icon {
   width: 100%;
   height: var(--jp-private-launcher-card-icon-height);
@@ -150,15 +159,19 @@
 .jp-LauncherCard-label {
   width: 100%;
   height: var(--jp-private-launcher-card-label-height);
-  line-height: var(--jp-private-launcher-card-label-height);
-  font-size: var(--jp-ui-font-size1);
-  padding: 0 8px;
-  color: var(--jp-ui-font-color1);
+  padding: 0 4px 4px 4px;
   box-sizing: border-box;
   overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+}
+
+.jp-LauncherCard-label p {
+  height: 28px;
+  word-break: break-word;
   text-align: center;
+  color: var(--jp-ui-font-color1);
+  line-height: 14px;
+  font-size: 12px;
+  overflow: hidden;
 }
 
 /* Icons, kernel icons */