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

add clickable index to switcher

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
Jari Kolehmainen 2021-04-19 09:49:48 +03:00
parent 3a537002ce
commit 05f75beec8
2 changed files with 15 additions and 0 deletions

View File

@ -27,5 +27,9 @@
position: absolute;
bottom: 0;
width: 100%;
.Badge {
cursor: pointer;
}
}
}

View File

@ -11,6 +11,9 @@ import { catalogEntityRunContext } from "../../api/catalog-entity";
import { reaction } from "mobx";
import { Notifications } from "../notifications";
import { Icon } from "../icon";
import { Badge } from "../badge";
import { CommandOverlay } from "../command-palette";
import { HotbarSwitchCommand } from "./hotbar-switch-command";
interface Props {
className?: IClassName;
@ -60,8 +63,13 @@ export class HotbarMenu extends React.Component<Props> {
hotbarStore.activeHotbarId = hotbarStore.hotbars[index].id;
}
openSelector() {
CommandOverlay.open(<HotbarSwitchCommand />);
}
render() {
const { className } = this.props;
const hotbarIndex = hotbarStore.activeHotbarIndex + 1;
return (
<div className={cssNames("HotbarMenu flex column", className)}>
@ -80,6 +88,9 @@ export class HotbarMenu extends React.Component<Props> {
</div>
<div className="HotbarSelector flex gaps auto">
<Icon material="chevron_left" className="previous box" onClick={() => this.previous()} />
<div className="box">
<Badge small label={hotbarIndex} onClick={() => this.openSelector()} />
</div>
<Icon material="chevron_right" className="next box" onClick={() => this.next()} />
</div>
</div>