1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Add keyboard support

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-11-09 10:50:57 +03:00
parent a0030cbd8a
commit 57622e33a1
2 changed files with 14 additions and 2 deletions

View File

@ -47,6 +47,11 @@
} }
.menu { .menu {
width: 184px; width: 185px;
margin-top: -10px; margin-top: -10px;
} }
.avatar {
font-weight: 500;
margin-right: 1.25rem;
}

View File

@ -83,6 +83,12 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
toggle(); toggle();
}; };
const onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {
if (evt.code == "Space") {
toggle();
}
};
const toggle = () => { const toggle = () => {
setOpened(!opened); setOpened(!opened);
}; };
@ -91,13 +97,14 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
const id = `cluster-${metadata.uid}`; const id = `cluster-${metadata.uid}`;
return ( return (
<div className={styles.SidebarCluster} tabIndex={0} id={id}> <div className={styles.SidebarCluster} tabIndex={0} id={id} onKeyDown={onKeyDown} role="menubar">
<Avatar <Avatar
title={metadata.name} title={metadata.name}
colorHash={`${metadata.name}-${metadata.source}`} colorHash={`${metadata.name}-${metadata.source}`}
width={40} width={40}
height={40} height={40}
src={spec.icon?.src} src={spec.icon?.src}
className={styles.avatar}
/> />
<div className={styles.clusterName}> <div className={styles.clusterName}>
{metadata.name} {metadata.name}