From f5e392c410361ac27d26756413e619a2529c1fac Mon Sep 17 00:00:00 2001 From: Scott Feeney Date: Wed, 24 Jan 2024 19:19:07 -0800 Subject: [PATCH] Fade top bar away when viewing detailed itinerary This gives more space for viewing the itinerary And avoids the pitfall of accidentally clicking the Back button, meaning to go out of the itinerary and back to the route list, but actually clearing the routes entirely. --- src/components/App.jsx | 46 +++++++++++++++++++++++++++--------------- 1 file changed, 30 insertions(+), 16 deletions(-) diff --git a/src/components/App.jsx b/src/components/App.jsx index 911012ae..b457c34f 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { useDispatch, useSelector, shallowEqual } from 'react-redux'; import { IntlProvider } from 'react-intl'; +import { Transition } from '@headlessui/react'; import AlertBar from './AlertBar'; import DirectionsNullState from './DirectionsNullState'; import MapPlusOverlay from './MapPlusOverlay'; @@ -15,18 +16,21 @@ import { import './App.css'; function App(props) { - const { hasRoutes, hasLocations, isEditingLocations } = useSelector( - (state) => ({ - hasLocations: !!( - state.routeParams.end || - (state.routeParams.start && - state.routeParams.start.source !== LocationSourceType.UserGeolocation) - ), - hasRoutes: !!state.routes.routes, - isEditingLocations: state.routeParams.editingLocation != null, - }), - shallowEqual, - ); + const { hasRoutes, hasLocations, isEditingLocations, viewingDetails } = + useSelector( + (state) => ({ + hasLocations: !!( + state.routeParams.end || + (state.routeParams.start && + state.routeParams.start.source !== + LocationSourceType.UserGeolocation) + ), + hasRoutes: !!state.routes.routes, + isEditingLocations: state.routeParams.editingLocation != null, + viewingDetails: state.routes.viewingDetails, + }), + shallowEqual, + ); const dispatch = useDispatch(); @@ -50,10 +54,20 @@ function App(props) { } const topBar = ( - + + + ); return (