hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Show tooltip with hotbar name manually

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-01-12 13:58:46 +03:00
parent d40071a9d5
commit 8638de7263
2 changed files with 58 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/renderer/components/hotbar/hotbar-selector.tsx
View File

@ -20,12 +20,12 @@
*/ */
import "./hotbar-selector.scss"; import "./hotbar-selector.scss";
import React from "react"; import React, { useRef, useState } from "react";
import { Icon } from "../icon"; import { Icon } from "../icon";
import { Badge } from "../badge"; import { Badge } from "../badge";
import hotbarManagerInjectable from "../../../common/hotbar-store.injectable"; import hotbarManagerInjectable from "../../../common/hotbar-store.injectable";
import { HotbarSwitchCommand } from "./hotbar-switch-command"; import { HotbarSwitchCommand } from "./hotbar-switch-command";
import { TooltipPosition } from "../tooltip"; import { Tooltip, TooltipPosition } from "../tooltip";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import type { Hotbar } from "../../../common/hotbar-types"; import type { Hotbar } from "../../../common/hotbar-types";
import { withInjectables } from "@ogre-tools/injectable-react"; import { withInjectables } from "@ogre-tools/injectable-react";
@ -45,25 +45,55 @@ interface Dependencies {
openCommandOverlay: (component: React.ReactElement) => void; openCommandOverlay: (component: React.ReactElement) => void;
} }
const NonInjectedHotbarSelector = observer(({ hotbar, hotbarManager, openCommandOverlay }: HotbarSelectorProps & Dependencies) => ( const NonInjectedHotbarSelector = observer(({ hotbar, hotbarManager, openCommandOverlay }: HotbarSelectorProps & Dependencies) => {
<div className="HotbarSelector flex align-center"> const [tooltipVisible, setTooltipVisible] = useState(false);
<Icon material="play_arrow" className="previous box" onClick={() => hotbarManager.switchToPrevious()} /> const tooltipTimeout = useRef<NodeJS.Timeout>();
<div className="box grow flex align-center">
<Badge const clearTimer = () => {
id="hotbarIndex" clearTimeout(tooltipTimeout.current);
small }
label={hotbarManager.getDisplayIndex(hotbarManager.getActive())}
onClick={() => openCommandOverlay(<HotbarSwitchCommand />)} const onTooltipShow = () => {
tooltip={{ setTooltipVisible(true);
preferredPositions: [TooltipPosition.TOP, TooltipPosition.TOP_LEFT], clearTimer();
children: hotbar.name, tooltipTimeout.current = setTimeout(() => setTooltipVisible(false), 1500);
}} };
className="SelectorIndex"
/> const onArrowClick = (switchTo: () => void) => {
onTooltipShow();
switchTo();
};
const onMouseEvent = (event: React.MouseEvent) => {
clearTimer();
setTooltipVisible(event.type == "mouseenter");
};
return (
<div className="HotbarSelector flex align-center">
<Icon material="play_arrow" className="previous box" onClick={() => onArrowClick(hotbarManager.switchToPrevious)} />
<div className="box grow flex align-center">
<Badge
id="hotbarIndex"
small
label={hotbarManager.getDisplayIndex(hotbarManager.getActive())}
onClick={() => openCommandOverlay(<HotbarSwitchCommand />)}
className="SelectorIndex"
onMouseEnter={onMouseEvent}
onMouseLeave={onMouseEvent}
/>
<Tooltip
visible={tooltipVisible}
targetId="hotbarIndex"
preferredPositions={[TooltipPosition.TOP, TooltipPosition.TOP_LEFT]}
>
{hotbar.name}
</Tooltip>
</div>
<Icon material="play_arrow" className="next box" onClick={() => onArrowClick(hotbarManager.switchToNext)} />
</div> </div>
<Icon material="play_arrow" className="next box" onClick={() => hotbarManager.switchToNext()} /> );
</div> });
));
export const HotbarSelector = withInjectables<Dependencies, HotbarSelectorProps>(NonInjectedHotbarSelector, { export const HotbarSelector = withInjectables<Dependencies, HotbarSelectorProps>(NonInjectedHotbarSelector, {
getProps: (di, props) => ({ getProps: (di, props) => ({

11
src/renderer/components/tooltip/tooltip.tsx
View File

@ -70,7 +70,7 @@ export class Tooltip extends React.Component<TooltipProps> {
@observable.ref elem: HTMLElement; @observable.ref elem: HTMLElement;
@observable activePosition: TooltipPosition; @observable activePosition: TooltipPosition;
@observable isVisible = !!this.props.visible; @observable isVisible = false;
constructor(props: TooltipProps) { constructor(props: TooltipProps) {
super(props); super(props);
@ -92,6 +92,11 @@ export class Tooltip extends React.Component<TooltipProps> {
componentDidMount() { componentDidMount() {
this.hoverTarget.addEventListener("mouseenter", this.onEnterTarget); this.hoverTarget.addEventListener("mouseenter", this.onEnterTarget);
this.hoverTarget.addEventListener("mouseleave", this.onLeaveTarget); this.hoverTarget.addEventListener("mouseleave", this.onLeaveTarget);
this.refreshPosition();
}
componentDidUpdate() {
this.refreshPosition();
} }
componentWillUnmount() { componentWillUnmount() {
@ -226,9 +231,9 @@ export class Tooltip extends React.Component<TooltipProps> {
} }
render() { render() {
const { style, formatters, usePortal, children } = this.props; const { style, formatters, usePortal, children, visible } = this.props;
const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, { const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
invisible: !this.isVisible, invisible: visible === undefined ? !this.isVisible : !visible,
formatter: !!formatters, formatter: !!formatters,
}); });
const tooltip = ( const tooltip = (