QMAPS-1883 refactor close buttons

src/components/ui/Panel.jsx

@@ -51,6 +51,7 @@ class Panel extends React.Component {
     isMapBottomUIDisplayed: PropTypes.bool,
     floatingItems: PropTypes.arrayOf(PropTypes.object),
     onTransitionEnd: PropTypes.func,
+    onClose: PropTypes.func,
   };
 
   static defaultProps = {

src/panel/PanelManager.jsx

@@ -1,3 +1,4 @@
+/* globals _ */
 import React from 'react';
 import PropTypes from 'prop-types';
 import SearchInput from '../ui_components/search_input';
@@ -9,7 +10,7 @@ import CategoryPanel from 'src/panel/category/CategoryPanel';
 import DirectionPanel from 'src/panel/direction/DirectionPanel';
 import Telemetry from 'src/libs/telemetry';
 import CategoryService from 'src/adapters/category_service';
-import { parseQueryString, getCurrentUrl } from 'src/libs/url_utils';
+import { parseQueryString, getCurrentUrl, buildQueryString } from 'src/libs/url_utils';
 import { fire, listen } from 'src/libs/customEvents';
 import { isNullOrEmpty } from 'src/libs/object';
 import { isMobileDevice } from 'src/libs/device';
@@ -77,12 +78,17 @@ export default class PanelManager extends React.Component {
     const { ActivePanel, options } = this.state;
 
     if (prevState.ActivePanel !== ActivePanel || prevState.options !== options) {
-      // poiFilters indicate we are in a "list of POI" context, where markers should be persistent
+      // Not in a "list of PoI" context (options.poiFilters is null)
       if (isNullOrEmpty(options?.poiFilters)) {
+        // Markers are not persistent
         fire('remove_category_markers');
       }
 
+      // Handle search bar's style and text content
       this.updateSearchBarContent(options);
+
+      // Handle top bar's return button
+      this.updateTopBarReturnButton(options);
     }
   }
 
@@ -104,6 +110,51 @@ export default class PanelManager extends React.Component {
     }
   }
 
+  updateTopBarReturnButton({ poiFilters = {} } = {}) {
+    const topBarReturnButton = document.querySelector('.search_form__return-to-list');
+    const backAction =
+      poiFilters.category || poiFilters.query ? this.backToList : this.backToFavorite;
+    topBarReturnButton.onclick = e => {
+      backAction(e, poiFilters);
+    };
+  }
+
+  // Hide return arrow on mobile
+  hideReturnButton() {
+    const topBarHandle = document.querySelector('.top_bar');
+    topBarHandle.classList.remove('top_bar--poi-from-list');
+  }
+
+  backToList(e, poiFilters) {
+    e.stopPropagation();
+    const queryObject = {};
+    const mappingParams = {
+      query: 'q',
+      category: 'type',
+    };
+
+    for (const name in poiFilters) {
+      if (!poiFilters[name]) {
+        continue;
+      }
+      const key = mappingParams[name];
+      queryObject[key || name] = poiFilters[name];
+    }
+
+    const params = buildQueryString(queryObject);
+    const uri = `/places/${params}`;
+
+    Telemetry.add(Telemetry.POI_BACKTOLIST);
+    fire('restore_location');
+    window.app.navigateTo(uri);
+  }
+
+  backToFavorite(e) {
+    e.stopPropagation();
+    Telemetry.add(Telemetry.POI_BACKTOFAVORITE);
+    window.app.navigateTo('/favs');
+  }
+
   initRouter() {
     const router = this.props.router;
 
@@ -120,6 +171,7 @@ export default class PanelManager extends React.Component {
         },
         panelSize: 'default',
       });
+      this.hideReturnButton();
     });
 
     router.addRoute('noresult', '/noresult', (_, options) => {
@@ -128,15 +180,33 @@ export default class PanelManager extends React.Component {
         panelSize: 'default',
         options: { ...options },
       });
+      this.hideReturnButton();
     });
 
     router.addRoute('POI', '/place/([^?]+)', async (poiUrl, options = {}) => {
       const poiId = poiUrl.split('@')[0];
       this.setState({
         ActivePanel: PoiPanel,
-        options: { ...options, poiId },
+        options: {
+          ...options,
+          poiId,
+          backToList: this.backToList,
+          backToFavorite: this.backToFavorite,
+        },
         panelSize: 'default',
       });
+
+      // Show return arrow (on mobile) if user comes from PoI / favorites list
+      const { poiFilters = {}, isFromFavorite } = options;
+      if (poiFilters.category || poiFilters.query || isFromFavorite) {
+        const topBarHandle = document.querySelector('.top_bar');
+        topBarHandle.classList.add('top_bar--poi-from-list');
+      }
+
+      // Show PoI name in search field
+      SearchInput.setInputValue(options.poi.name);
+      const topBarHandle = document.querySelector('.top_bar');
+      topBarHandle.classList.add('top_bar--search_filled');
     });
 
     router.addRoute('Favorites', '/favs', () => {
@@ -145,6 +215,8 @@ export default class PanelManager extends React.Component {
         options: {},
         panelSize: 'default',
       });
+
+      SearchInput.setInputValue(_('Favorites', 'search bar'));
     });
 
     if (directionConf.enabled) {
@@ -161,6 +233,7 @@ export default class PanelManager extends React.Component {
           options: { ...params, ...options, isPublicTransportActive },
           panelSize: 'default',
         });
+        this.hideReturnButton();
       });
     }
 
@@ -171,6 +244,7 @@ export default class PanelManager extends React.Component {
       } else {
         router.routeUrl('/');
       }
+      this.hideReturnButton();
     });
 
     // Default matching route
@@ -183,6 +257,7 @@ export default class PanelManager extends React.Component {
       if (options?.focusSearch) {
         SearchInput.select();
       }
+      this.hideReturnButton();
     });
 
     // Route the initial URL

src/panel/direction/RouteResult.jsx

@@ -3,7 +3,6 @@ import React, { useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { listen, unListen } from 'src/libs/customEvents';
 import Telemetry from 'src/libs/telemetry';
-
 import RoutesList from './RoutesList';
 import { SourceFooter } from 'src/components/ui';
 

src/panel/poi/PoiPanel.jsx

@@ -9,16 +9,17 @@ import PoiBlockContainer from './PoiBlockContainer';
 import OsmContribution from 'src/components/OsmContribution';
 import CategoryList from 'src/components/CategoryList';
 import { isFromPagesJaunes, isFromOSM } from 'src/libs/pois';
-import { buildQueryString, shouldShowBackToQwant } from 'src/libs/url_utils';
+import { shouldShowBackToQwant } from 'src/libs/url_utils';
 import IdunnPoi from 'src/adapters/poi/idunn_poi';
 import Poi from 'src/adapters/poi/poi.js';
 import { fire, listen, unListen } from 'src/libs/customEvents';
 import { addToFavorites, removeFromFavorites, isInFavorites } from 'src/adapters/store';
 import PoiItem from 'src/components/PoiItem';
 import { isNullOrEmpty } from 'src/libs/object';
 import { DeviceContext } from 'src/libs/device';
-import { Flex, Panel, PanelNav, CloseButton, Divider, Button } from 'src/components/ui';
+import { Flex, Panel, PanelNav, Divider, Button } from 'src/components/ui';
 import { BackToQwantButton } from 'src/components/BackToQwantButton';
+import SearchInput from '../../ui_components/search_input';
 
 const covid19Enabled = (nconf.get().covid19 || {}).enabled;
 
@@ -28,6 +29,8 @@ export default class PoiPanel extends React.Component {
     poi: PropTypes.object,
     poiFilters: PropTypes.object,
     centerMap: PropTypes.bool,
+    backToList: PropTypes.func,
+    backToFavorite: PropTypes.func,
   };
 
   static defaultProps = {
@@ -130,12 +133,6 @@ export default class PoiPanel extends React.Component {
     });
   }
 
-  backToFavorite = e => {
-    e.stopPropagation();
-    Telemetry.add(Telemetry.POI_BACKTOFAVORITE);
-    window.app.navigateTo('/favs');
-  };
-
   getBestPoi() {
     return this.state.fullPoi || this.props.poi;
   }
@@ -156,31 +153,6 @@ export default class PoiPanel extends React.Component {
     window.app.navigateTo('/');
   };
 
-  backToList = e => {
-    e.stopPropagation();
-    const { poiFilters } = this.props;
-    const queryObject = {};
-    const mappingParams = {
-      query: 'q',
-      category: 'type',
-    };
-
-    for (const name in poiFilters) {
-      if (!poiFilters[name]) {
-        continue;
-      }
-      const key = mappingParams[name];
-      queryObject[key || name] = poiFilters[name];
-    }
-
-    const params = buildQueryString(queryObject);
-    const uri = `/places/${params}`;
-
-    Telemetry.add(Telemetry.POI_BACKTOLIST);
-    fire('restore_location');
-    window.app.navigateTo(uri);
-  };
-
   onClickPhoneNumber = () => {
     const poi = this.getBestPoi();
     const source = poi.meta && poi.meta.source;
@@ -218,11 +190,16 @@ export default class PoiPanel extends React.Component {
       return null;
     }
 
+    // Ensure PoI name is present in search field
+    SearchInput.setInputValue(poi.name);
+    const topBarHandle = document.querySelector('.top_bar');
+    topBarHandle.classList.add('top_bar--search_filled');
+
     const backAction =
       poiFilters.category || poiFilters.query
-        ? this.backToList
+        ? this.props.backToList
         : isFromFavorite
-        ? this.backToFavorite
+        ? this.props.backToFavorite
         : this.closeAction;
 
     const NavHeader = ({ isMobile }) => {
@@ -238,10 +215,17 @@ export default class PoiPanel extends React.Component {
         );
       }
 
+      // If source is a PoI list: show a button to return to the list
       if (backAction !== this.closeAction) {
         return (
           <PanelNav>
-            <Button icon="arrow-left" variant="tertiary" onClick={backAction}>
+            <Button
+              icon="arrow-left"
+              variant="tertiary"
+              onClick={e => {
+                backAction(e, poiFilters);
+              }}
+            >
               {_('Display all results')}
             </Button>
           </PanelNav>
@@ -276,10 +260,6 @@ export default class PoiPanel extends React.Component {
                   withOpeningHours
                   onClick={this.center}
                 />
-                <CloseButton
-                  onClick={isMobile ? backAction : this.closeAction}
-                  position="topRight"
-                />
               </Flex>
               <div className="u-mb-l">
                 <ActionButtons

src/panel/poi/blocks/Covid19.jsx

@@ -85,17 +85,19 @@ const getContent = ({ status, opening_hours, note, contribute_url }) => {
 const LocalizedWarning = ({ countryCode }) => {
   const { frInformationUrl } = useConfig('covid19');
 
-  return <div>
-    <p>{_('Please comply with government travel restrictions.', 'covid19')}</p>
-    {countryCode === 'FR' && (
-      <p>
-        {_('More information at', 'covid19')}{' '}
-        <a rel="noopener noreferrer" href={frInformationUrl}>
-          gouvernement.fr/info-coronavirus
-        </a>
-      </p>
-    )}
-  </div>
+  return (
+    <div>
+      <p>{_('Please comply with government travel restrictions.', 'covid19')}</p>
+      {countryCode === 'FR' && (
+        <p>
+          {_('More information at', 'covid19')}{' '}
+          <a rel="noopener noreferrer" href={frInformationUrl}>
+            gouvernement.fr/info-coronavirus
+          </a>
+        </p>
+      )}
+    </div>
+  );
 };
 
 const LegalWarning = ({ countryCode }) => (

src/scss/includes/search_form.scss

@@ -86,8 +86,9 @@ input[type="search"] {
   }
 }
 
-// Return arrow
-.search_form__return {
+// Return arrows
+.search_form__return,
+.search_form__return-to-list {
   display: none;
 }
 
@@ -191,7 +192,8 @@ input[type="search"] {
     font-size: 14px;
   }
 
-  .search_form__return {
+  .search_form__return,
+  .search_form__return-to-list {
     display: none;
     font-size: 20px;
     text-align: center;
@@ -303,4 +305,25 @@ input[type="search"] {
       display: none;
     }
   }
+
+  // When a PoI Panel is displayed
+  .top_bar--poi-from-list {
+
+    // Show the return arrow
+    .search_form__return-to-list {
+      display: block;
+    }
+
+    // If the search field is focused, hide it
+    &.top_bar--search_focus {
+      .search_form__return-to-list {
+        display: none;
+      }
+    }
+
+    // Make room for it on the left of the field
+    .search_form__wrapper {
+      padding-left: $spacing-xxl-3;
+    }
+  }
 }