mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Add tooltip to hotbar index (#2604)
* add tooltip to hotbar index Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * cleanup Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
parent
f4211d1be7
commit
476235b861
@ -12,6 +12,7 @@ import { Icon } from "../icon";
|
||||
import { Badge } from "../badge";
|
||||
import { CommandOverlay } from "../command-palette";
|
||||
import { HotbarSwitchCommand } from "./hotbar-switch-command";
|
||||
import { Tooltip, TooltipPosition } from "../tooltip";
|
||||
|
||||
interface Props {
|
||||
className?: IClassName;
|
||||
@ -43,7 +44,9 @@ export class HotbarMenu extends React.Component<Props> {
|
||||
|
||||
render() {
|
||||
const { className } = this.props;
|
||||
const hotbarIndex = HotbarStore.getInstance().activeHotbarIndex + 1;
|
||||
const hotbarStore = HotbarStore.getInstance();
|
||||
const hotbar = hotbarStore.getActive();
|
||||
const activeIndexDisplay = hotbarStore.activeHotbarIndex + 1;
|
||||
|
||||
return (
|
||||
<div className={cssNames("HotbarMenu flex column", className)}>
|
||||
@ -63,7 +66,13 @@ export class HotbarMenu extends React.Component<Props> {
|
||||
<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()} />
|
||||
<Badge id="hotbarIndex" small label={activeIndexDisplay} onClick={() => this.openSelector()} />
|
||||
<Tooltip
|
||||
targetId="hotbarIndex"
|
||||
preferredPositions={TooltipPosition.TOP}
|
||||
>
|
||||
{hotbar.name}
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Icon material="chevron_right" className="next box" onClick={() => this.next()} />
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user