diff --git a/src/components/SettingsManager.js b/src/components/SettingsManager.js index 1c1106c..2b9bb9c 100644 --- a/src/components/SettingsManager.js +++ b/src/components/SettingsManager.js @@ -5,6 +5,7 @@ import Constants from "../helpers/constants"; export default function SettingsManager(props) { const [ layers, setLayers ] = useState([]); const [ trackColorMode, setTrackColorMode ] = useState(Constants.trackColorModeDefault); + const [ showTrackHoverInfo, setShowTrackHoverInfo ] = useState(false); const [ settingsLoaded, setSettingsLoaded ] = useState(false); const loadLayersSettings = useCallback(() => { @@ -24,6 +25,7 @@ export default function SettingsManager(props) { return ( { props.children } diff --git a/src/components/map/track-hover-info/TrackHoverInfo.js b/src/components/map/track-hover-info/TrackHoverInfo.js index 4899b0f..7ea2233 100644 --- a/src/components/map/track-hover-info/TrackHoverInfo.js +++ b/src/components/map/track-hover-info/TrackHoverInfo.js @@ -5,6 +5,16 @@ import SettingsContext from "../../../contexts/SettingsContext"; import './TrackHoverInfo.css'; export default function TrackHoverInfo() { + const { showTrackHoverInfo } = useContext(SettingsContext); + + if (!showTrackHoverInfo) return null; + + return ( + + ); +} + +function InnerTrackHoverInfo() { const [ hoveredTrack, setHoveredTrack ] = useState(null); const mousePos = useRef({ x: 0, y: 0 }); const divRef = useRef(null); diff --git a/src/components/sidemenu/ShowTrackHoverInfoCheckbox.js b/src/components/sidemenu/ShowTrackHoverInfoCheckbox.js new file mode 100644 index 0000000..687fe7e --- /dev/null +++ b/src/components/sidemenu/ShowTrackHoverInfoCheckbox.js @@ -0,0 +1,23 @@ +import { useContext } from "react"; +import SettingsContext from "../../contexts/SettingsContext"; + +export default function ShowTrackHoverInfoCheckbox(props) { + const { showTrackHoverInfo, setShowTrackHoverInfo } = useContext(SettingsContext); + + const handleChange = (event) => { + setShowTrackHoverInfo(event.target.checked); + }; + + return ( +
+ +
+ ); +} diff --git a/src/components/sidemenu/SideMenu.css b/src/components/sidemenu/SideMenu.css index 7e34621..d17f7b3 100644 --- a/src/components/sidemenu/SideMenu.css +++ b/src/components/sidemenu/SideMenu.css @@ -56,3 +56,8 @@ margin-top: auto; align-items: flex-end; } + +.show-track-hover-info-checkbox input { + margin-right: 0.5em; + vertical-align: middle; +} diff --git a/src/components/sidemenu/SideMenu.js b/src/components/sidemenu/SideMenu.js index 16dd010..cbc2f7c 100644 --- a/src/components/sidemenu/SideMenu.js +++ b/src/components/sidemenu/SideMenu.js @@ -2,6 +2,7 @@ import {useContext} from 'react'; import MainContext from '../../contexts/MainContext'; import './SideMenu.css'; import LayersMenu from './LayersMenu'; +import ShowTrackHoverInfoCheckbox from './ShowTrackHoverInfoCheckbox'; import TrackColorMode from './track-color-mode/TrackColorMode'; import SceneryInfoButton from './SceneryInfoButton'; import DistanceMeterButton from './DistanceMeterButton'; @@ -18,6 +19,7 @@ export default function SideMenu() { +