weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(state buttons): state buttons hovering styles will be applied instantly

Browse Source
This commit is contained in:
MarcoJayUsai 2025-03-28 20:11:35 +01:00
parent 011ccc0a99
commit b600b2503b
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/react/src/ui/components/olstatebutton.tsx
View File

@ -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);