diff --git a/packages/map-template/src/components/MapTemplate/MapTemplate.jsx b/packages/map-template/src/components/MapTemplate/MapTemplate.jsx index 1525126a9..08700a676 100644 --- a/packages/map-template/src/components/MapTemplate/MapTemplate.jsx +++ b/packages/map-template/src/components/MapTemplate/MapTemplate.jsx @@ -101,6 +101,7 @@ MapTemplate.propTypes = { useAppTitle: PropTypes.bool, showMapMarkers: PropTypes.bool, mapboxMapStyle: PropTypes.string, + modalLocation: PropTypes.string, devicePosition: PropTypes.object }; @@ -139,8 +140,9 @@ MapTemplate.propTypes = { * @param {boolean} [props.useAppTitle] - Specifies if the Map Template should set the document title as defined in the App Config. The default value is set to false. * @param {boolean} [props.showMapMarkers] - Specifies if the Map Template should show the base map providers Map Markers. The default value is set to true. * @param {string} [props.mapboxMapStyle] - Specifies the Mapbox Map Style to use. The default value is set to "mapbox://styles/mapbox/standard". + * @param {string} [props.modalLocation] - Specifies where the modal renders - default to top left. other options include topright, bottomleft, or bottomright. */ -function MapTemplate({ apiKey, gmApiKey, mapboxAccessToken, venue, locationId, primaryColor, logo, appUserRoles, directionsFrom, directionsTo, externalIDs, tileStyle, startZoomLevel, bearing, pitch, gmMapId, useMapProviderModule, kioskOriginLocationId, language, supportsUrlParameters, useKeyboard, timeout, miTransitionLevel, category, searchAllVenues, hideNonMatches, showRoadNames, showExternalIDs, searchExternalLocations, center, useAppTitle, showMapMarkers, mapboxMapStyle, devicePosition }) { +function MapTemplate({ apiKey, gmApiKey, mapboxAccessToken, venue, locationId, primaryColor, logo, appUserRoles, directionsFrom, directionsTo, externalIDs, tileStyle, startZoomLevel, bearing, pitch, gmMapId, useMapProviderModule, kioskOriginLocationId, language, supportsUrlParameters, useKeyboard, timeout, miTransitionLevel, category, searchAllVenues, hideNonMatches, showRoadNames, showExternalIDs, searchExternalLocations, center, useAppTitle, showMapMarkers, mapboxMapStyle, devicePosition, modalLocation }) { const [userSelectedLanguage, setUserSelectedLanguage] = useState(false); const [mapOptions, setMapOptions] = useState({ brandingColor: primaryColor }); @@ -796,6 +798,7 @@ function MapTemplate({ apiKey, gmApiKey, mapboxAccessToken, venue, locationId, p currentAppView={currentAppView} appViews={appStates} onRouteFinished={() => onRouteFinish()} + modalLocation={modalLocation} /> } {!isDesktop && diff --git a/packages/map-template/src/components/MapsIndoorsMap/MapsIndoorsMap.jsx b/packages/map-template/src/components/MapsIndoorsMap/MapsIndoorsMap.jsx index 4df89cda8..090c787e9 100644 --- a/packages/map-template/src/components/MapsIndoorsMap/MapsIndoorsMap.jsx +++ b/packages/map-template/src/components/MapsIndoorsMap/MapsIndoorsMap.jsx @@ -38,7 +38,8 @@ MapsIndoorsMap.propTypes = { useAppTitle: PropTypes.bool, showMapMarkers: PropTypes.bool, mapboxMapStyle: PropTypes.string, - devicePosition: PropTypes.object + devicePosition: PropTypes.object, + modalLocation: PropTypes.string, }; /** @@ -77,6 +78,7 @@ MapsIndoorsMap.propTypes = { * @param {boolean} [props.useAppTitle] - Specifies if the Map Template should set the document title as defined in the App Config. The default value is set to false. * @param {boolean} [props.showMapMarkers] - Specifies if the Map Template should show the Map Markers. The default value is set to true. * @param {string} [props.mapboxMapStyle] - Specifies the Mapbox Map Style to use. The default value is set to "mapbox://styles/mapbox/standard". + * @param {string} [props.modalLocation] - Specifies where the modal renders - default to top left. other options include topright, bottomleft, or bottomright. */ function MapsIndoorsMap(props) { @@ -99,7 +101,8 @@ function MapsIndoorsMap(props) { searchExternalLocations: true, showExternalIDs: false, hideNonMatches: false, - useAppTitle: false + useAppTitle: false, + modalLocation: 'topleft', }; const apiKeyQueryParameter = queryStringParams.get('apiKey'); @@ -135,6 +138,7 @@ function MapsIndoorsMap(props) { const useAppTitleQueryParameter = queryStringParams.get('useAppTitle'); const showMapMarkersQueryParameter = queryStringParams.get('showMapMarkers'); const mapboxMapStyleQueryParameter = queryStringParams.get('mapboxMapStyle'); + const modalLocationQueryParameter = queryStringParams.get('modalLocation'); // Set the initial props on the Map Template component. // For the apiKey and venue, set the venue to "AUSTINOFFICE" if the apiKey is "mapspeople3d" and no venue is provided. We want this as the default venue for the "mapspeople3d" apiKey. @@ -180,6 +184,7 @@ function MapsIndoorsMap(props) { useAppTitle: getBooleanValue(props.supportsUrlParameters, defaultProps.useAppTitle, props.useAppTitle, useAppTitleQueryParameter), showMapMarkers: getBooleanValue(props.supportsUrlParameters, defaultProps.showMapMarkers, props.showMapMarkers, showMapMarkersQueryParameter), mapboxMapStyle: props.supportsUrlParameters && mapboxMapStyleQueryParameter ? mapboxMapStyleQueryParameter : props.mapboxMapStyle, + modalLocation: props.supportsUrlParameters && modalLocationQueryParameter ? modalLocationQueryParameter : props.modalLocation, }); }, [props]); diff --git a/packages/map-template/src/components/Sidebar/Modal/Modal.jsx b/packages/map-template/src/components/Sidebar/Modal/Modal.jsx index 15dbdcffd..550c9db37 100644 --- a/packages/map-template/src/components/Sidebar/Modal/Modal.jsx +++ b/packages/map-template/src/components/Sidebar/Modal/Modal.jsx @@ -6,7 +6,8 @@ import PropTypes from 'prop-types'; Modal.propTypes = { children: PropTypes.node, - isOpen: PropTypes.bool + isOpen: PropTypes.bool, + modalLocation: PropTypes.string }; /** @@ -19,7 +20,7 @@ Modal.propTypes = { * @param {React.ReactNode} props.children - The content to be displayed inside the modal. * @param {boolean} props.isOpen - If the modal is open (visible) or not. */ -function Modal({ children, isOpen }) { +function Modal({ children, isOpen, modalLocation }) { /** Boolean for controlling the "full" CSS class modifier */ const [fullHeight, setFullHeight] = useState(false); @@ -48,7 +49,7 @@ function Modal({ children, isOpen }) { }, [contentRef]); return
{children} diff --git a/packages/map-template/src/components/Sidebar/Modal/Modal.scss b/packages/map-template/src/components/Sidebar/Modal/Modal.scss index de7f9d873..911a529c8 100644 --- a/packages/map-template/src/components/Sidebar/Modal/Modal.scss +++ b/packages/map-template/src/components/Sidebar/Modal/Modal.scss @@ -4,8 +4,6 @@ $desktop-breakpoint: 992px; position: absolute; z-index: var(--z-index-overlay); width: 568px; - left: var(--spacing-medium); - top: var(--spacing-medium); border-radius: var(--spacing-x-small); border: 1px solid var(--color-gray-30); background: var(--color-white-white); @@ -52,4 +50,33 @@ $desktop-breakpoint: 992px; min-height: 0; box-sizing: border-box; } + + &.topleft { + top: 10px; + left: 10px; + right: auto; + bottom: auto; + z-index: var(--z-index-dropdown); + } + &.topright { + top: 10px; + right: 100px; + left: auto; + bottom: auto; + z-index: var(--z-index-dropdown); + } + &.bottomleft { + bottom: 10px; + left: 10px; + top: auto; + right: auto; + z-index: var(--z-index-dropdown); + } + &.bottomright { + bottom: 10px; + right: 100px; + left: auto; + top: auto; + z-index: var(--z-index-dropdown); + } } diff --git a/packages/map-template/src/components/Sidebar/Sidebar.jsx b/packages/map-template/src/components/Sidebar/Sidebar.jsx index e89d2ad15..fbb9c2f84 100644 --- a/packages/map-template/src/components/Sidebar/Sidebar.jsx +++ b/packages/map-template/src/components/Sidebar/Sidebar.jsx @@ -19,7 +19,8 @@ Sidebar.propTypes = { currentAppView: PropTypes.string, appViews: PropTypes.object, filteredLocationsByExternalIDs: PropTypes.array, - onRouteFinished: PropTypes.func + onRouteFinished: PropTypes.func, + modalLocation: PropTypes.string }; /** @@ -36,9 +37,9 @@ Sidebar.propTypes = { * @param {array} props.appViews - Array of all possible views. * @param {array} props.filteredLocationsByExternalIDs - Array of locations filtered based on the external ID. * @param {function} props.onRouteFinished - Callback that fires when the route has finished. - * + * @param {string} props.modalLocation - The location of the modal in the sidebar. Can be "bottomright", "bottomleft", "centered". */ -function Sidebar({ directionsFromLocation, directionsToLocation, pushAppView, currentAppView, appViews, onRouteFinished }) { +function Sidebar({ directionsFromLocation, directionsToLocation, pushAppView, currentAppView, appViews, onRouteFinished, modalLocation }) { const [currentLocation, setCurrentLocation] = useRecoilState(currentLocationState); const [filteredLocationsByExternalIDs, setFilteredLocationsByExternalID] = useRecoilState(filteredLocationsByExternalIDState); const [, setLocationId] = useRecoilState(locationIdState); @@ -105,7 +106,7 @@ function Sidebar({ directionsFromLocation, directionsToLocation, pushAppView, cu } const pages = [ - + , @@ -115,7 +116,7 @@ function Sidebar({ directionsFromLocation, directionsToLocation, pushAppView, cu onLocationClick={(location) => setCurrentLocation(location)} /> , - + pushAppView(appViews.WAYFINDING)} onBack={() => closeLocationDetails()} @@ -123,7 +124,7 @@ function Sidebar({ directionsFromLocation, directionsToLocation, pushAppView, cu isOpen={currentAppView === appViews.LOCATION_DETAILS} /> , - + pushAppView(appViews.DIRECTIONS)} directionsToLocation={directionsToLocation} @@ -132,7 +133,7 @@ function Sidebar({ directionsFromLocation, directionsToLocation, pushAppView, cu isActive={currentAppView === appViews.WAYFINDING} /> , - + closeDirections()}