Fix: remove hotbar name from status bar (#4679)

* Show tooltip with hotbar name manually

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Remove this.refreshPosition() call

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Remove hotbar name from status bar

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Convert HotbarSelector to use css modules

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Remove unused export

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing linter

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Clean up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Invert invisible prop

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Linter fix

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev authored and GitHub committed 2022-01-19 14:31:15 +03:00
1 parent e862d5bf1d
commit 74d92d09d9
9 files changed
+85 -167

No files matched your search

+7 -6
View File
@@ -25,14 +25,15 @@
pointer-events: none;
transition: opacity 150ms 150ms ease-in-out;
z-index: 100000;
opacity: 1;
box-shadow: 0 8px 16px rgba(0,0,0,0.24);
left: 0;
top: 0;
opacity: 0;
visibility: hidden;
&.invisible {
left: 0;
top: 0;
opacity: 0;
visibility: hidden;
&.visible {
opacity: 1;
visibility: visible;
}
&:empty {
+7 -3
View File
@@ -54,7 +54,7 @@ export class Tooltip extends React.Component<TooltipProps> {
@observable.ref elem: HTMLElement;
@observable activePosition: TooltipPosition;
@observable isVisible = !!this.props.visible;
@observable isVisible = false;
constructor(props: TooltipProps) {
super(props);
@@ -78,6 +78,10 @@ export class Tooltip extends React.Component<TooltipProps> {
this.hoverTarget.addEventListener("mouseleave", this.onLeaveTarget);
}
componentDidUpdate() {
this.refreshPosition();
}
componentWillUnmount() {
this.hoverTarget.removeEventListener("mouseenter", this.onEnterTarget);
this.hoverTarget.removeEventListener("mouseleave", this.onLeaveTarget);
@@ -210,9 +214,9 @@ export class Tooltip extends React.Component<TooltipProps> {
}
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, {
invisible: !this.isVisible,
visible: visible ?? this.isVisible,
formatter: !!formatters,
});
const tooltip = (