diff --git a/packages/launcher/src/index.tsx b/packages/launcher/src/index.tsx index ed178ed60d1b..4bc885919dec 100644 --- 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 (
@@ -400,7 +410,7 @@ function Card( )}
- {label} +

{label}

); diff --git a/packages/launcher/style/base.css b/packages/launcher/style/base.css index fdf880ca7dba..d9708e315d83 100644 --- 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 */