diff --git a/frontend/react/src/ui/components/ollocation.tsx b/frontend/react/src/ui/components/ollocation.tsx index f5ab162a..11845d25 100644 --- a/frontend/react/src/ui/components/ollocation.tsx +++ b/frontend/react/src/ui/components/ollocation.tsx @@ -29,7 +29,7 @@ export function OlLocation(props: { location: LatLng; className?: string; refere > MGRS - {MGRS ? MGRS.string : "Error"} + {MGRS ? MGRS.groups.join(" ") : "Error"} ); } else if (referenceSystem === "LatLngDec") { diff --git a/frontend/react/src/ui/components/olstatebutton.tsx b/frontend/react/src/ui/components/olstatebutton.tsx index 9650fa16..3f0c3153 100644 --- a/frontend/react/src/ui/components/olstatebutton.tsx +++ b/frontend/react/src/ui/components/olstatebutton.tsx @@ -21,6 +21,7 @@ export function OlStateButton(props: { }) { const [hover, setHover] = useState(false); const [hoverTimeout, setHoverTimeout] = useState(null as number | null); + const [isMouseHovering, setIsMouseHovering] = useState(false); var buttonRef = useRef(null); const className = @@ -48,11 +49,12 @@ export function OlStateButton(props: { style={{ border: props.buttonColor ? "2px solid " + props.buttonColor : "0px solid transparent", background: setOpacity( - props.checked || hover ? (props.buttonColor ? props.buttonColor : colors.OLYMPUS_LIGHT_BLUE) : colors.OLYMPUS_BLUE, - !props.checked && hover ? 0.3 : 1 + props.checked || isMouseHovering ? (props.buttonColor ? props.buttonColor : colors.OLYMPUS_LIGHT_BLUE) : colors.OLYMPUS_BLUE, + !props.checked && isMouseHovering ? 0.3 : 1 ), }} onMouseEnter={() => { + setIsMouseHovering(true); setHoverTimeout( window.setTimeout(() => { setHover(true); @@ -61,6 +63,7 @@ export function OlStateButton(props: { ); }} onMouseLeave={() => { + setIsMouseHovering(false); setHover(false); if (hoverTimeout) { window.clearTimeout(hoverTimeout); @@ -100,7 +103,7 @@ export function OlRoundStateButton(props: { icon: IconProp; tooltip?: string | (() => JSX.Element | JSX.Element[]); tooltipPosition?: string; - onClick: () => void; + onClick: (event) => void; }) { const [hover, setHover] = useState(false); const [hoverTimeout, setHoverTimeout] = useState(null as number | null); @@ -123,8 +126,8 @@ export function OlRoundStateButton(props: { <>