Revert "Revert "Disable map recenter button when auto centering is on (…

…#585)" (#589)" a0b98a7
mbta · Apr 16, 2020 · 5d5f7ab · 5d5f7ab
1 parent e544fcf
commit 5d5f7ab
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 20 deletions.
diff --git a/assets/css/_vehicle_map.scss b/assets/css/_vehicle_map.scss
@@ -51,4 +51,13 @@
     stroke: $black;
     stroke-width: 1.8;
   }
+
+  .m-vehicle-map--auto-centering & a {
+    background-color: $color-button-disabled;
+    color: $color-font-grey;
+
+    path {
+      stroke: $color-font-grey;
+    }
+  }
 }
diff --git a/assets/src/components/map.tsx b/assets/src/components/map.tsx
@@ -387,10 +387,14 @@ const Map = (props: Props): ReactElement<HTMLDivElement> => {
     setMapState({ map, markers, shapes })
   }, [shouldAutoCenter, props, containerRef, appState])
 
+  const autoCenteringClass = shouldAutoCenter
+    ? "m-vehicle-map--auto-centering"
+    : ""
+
   return (
     <div
       id="id-vehicle-map"
-      className="m-vehicle-map"
+      className={`m-vehicle-map ${autoCenteringClass}`}
       ref={(container) => (containerRef.current = container)}
     />
   )

diff --git a/assets/tests/components/__snapshots__/map.test.tsx.snap b/assets/tests/components/__snapshots__/map.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`map renders 1`] = `
 <div
-  className="m-vehicle-map"
+  className="m-vehicle-map m-vehicle-map--auto-centering"
   id="id-vehicle-map"
 />
 `;
diff --git a/assets/tests/components/__snapshots__/propertiesPanel.test.tsx.snap b/assets/tests/components/__snapshots__/propertiesPanel.test.tsx.snap
@@ -415,7 +415,7 @@ Array [
           className="m-vehicle-properties-panel__map"
         >
           <div
-            className="m-vehicle-map"
+            className="m-vehicle-map m-vehicle-map--auto-centering"
             id="id-vehicle-map"
           />
         </div>

diff --git a/assets/tests/components/__snapshots__/searchPage.test.tsx.snap b/assets/tests/components/__snapshots__/searchPage.test.tsx.snap
@@ -171,7 +171,7 @@ exports[`SearchPage renders a selected vehicle 1`] = `
     className="m-search-page__map"
   >
     <div
-      className="m-vehicle-map"
+      className="m-vehicle-map m-vehicle-map--auto-centering"
       id="id-vehicle-map"
     />
   </div>
@@ -396,7 +396,7 @@ exports[`SearchPage renders a selected vehicle 1`] = `
           className="m-vehicle-properties-panel__map"
         >
           <div
-            className="m-vehicle-map"
+            className="m-vehicle-map m-vehicle-map--auto-centering"
             id="id-vehicle-map"
           />
         </div>
@@ -587,7 +587,7 @@ exports[`SearchPage renders the empty state 1`] = `
     className="m-search-page__map"
   >
     <div
-      className="m-vehicle-map"
+      className="m-vehicle-map m-vehicle-map--auto-centering"
       id="id-vehicle-map"
     />
   </div>
@@ -765,7 +765,7 @@ exports[`SearchPage renders vehicle data 1`] = `
     className="m-search-page__map"
   >
     <div
-      className="m-vehicle-map"
+      className="m-vehicle-map m-vehicle-map--auto-centering"
       id="id-vehicle-map"
     />
   </div>

diff --git a/assets/tests/components/__snapshots__/shuttleMapPage.test.tsx.snap b/assets/tests/components/__snapshots__/shuttleMapPage.test.tsx.snap
@@ -203,7 +203,7 @@ exports[`Shuttle Map Page renders 1`] = `
     className="m-shuttle-map__map"
   >
     <div
-      className="m-vehicle-map"
+      className="m-vehicle-map m-vehicle-map--auto-centering"
       id="id-vehicle-map"
     />
   </div>
@@ -413,7 +413,7 @@ exports[`Shuttle Map Page renders a selected shuttle vehicle 1`] = `
     className="m-shuttle-map__map"
   >
     <div
-      className="m-vehicle-map"
+      className="m-vehicle-map m-vehicle-map--auto-centering"
       id="id-vehicle-map"
     />
   </div>
@@ -609,7 +609,7 @@ exports[`Shuttle Map Page renders a selected shuttle vehicle 1`] = `
           className="m-vehicle-properties-panel__map"
         >
           <div
-            className="m-vehicle-map"
+            className="m-vehicle-map m-vehicle-map--auto-centering"
             id="id-vehicle-map"
           />
         </div>
@@ -832,7 +832,7 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
     className="m-shuttle-map__map"
   >
     <div
-      className="m-vehicle-map"
+      className="m-vehicle-map m-vehicle-map--auto-centering"
       id="id-vehicle-map"
     />
   </div>
@@ -1042,7 +1042,7 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
     className="m-shuttle-map__map"
   >
     <div
-      className="m-vehicle-map"
+      className="m-vehicle-map m-vehicle-map--auto-centering"
       id="id-vehicle-map"
     />
   </div>

diff --git a/assets/tests/components/propertiesPanel/__snapshots__/vehiclePropertiesPanel.test.tsx.snap b/assets/tests/components/propertiesPanel/__snapshots__/vehiclePropertiesPanel.test.tsx.snap
@@ -218,7 +218,7 @@ exports[`VehiclePropertiesPanel renders a vehicle properties panel 1`] = `
       className="m-vehicle-properties-panel__map"
     >
       <div
-        className="m-vehicle-map"
+        className="m-vehicle-map m-vehicle-map--auto-centering"
         id="id-vehicle-map"
       />
     </div>
@@ -444,7 +444,7 @@ exports[`VehiclePropertiesPanel renders for a headway-based vehicle 1`] = `
       className="m-vehicle-properties-panel__map"
     >
       <div
-        className="m-vehicle-map"
+        className="m-vehicle-map m-vehicle-map--auto-centering"
         id="id-vehicle-map"
       />
     </div>
@@ -670,7 +670,7 @@ exports[`VehiclePropertiesPanel renders for a late vehicle 1`] = `
       className="m-vehicle-properties-panel__map"
     >
       <div
-        className="m-vehicle-map"
+        className="m-vehicle-map m-vehicle-map--auto-centering"
         id="id-vehicle-map"
       />
     </div>
@@ -867,7 +867,7 @@ exports[`VehiclePropertiesPanel renders for a shuttle 1`] = `
       className="m-vehicle-properties-panel__map"
     >
       <div
-        className="m-vehicle-map"
+        className="m-vehicle-map m-vehicle-map--auto-centering"
         id="id-vehicle-map"
       />
     </div>
@@ -1202,7 +1202,7 @@ exports[`VehiclePropertiesPanel renders for a vehicle with block waivers 1`] = `
       className="m-vehicle-properties-panel__map"
     >
       <div
-        className="m-vehicle-map"
+        className="m-vehicle-map m-vehicle-map--auto-centering"
         id="id-vehicle-map"
       />
     </div>
@@ -1428,7 +1428,7 @@ exports[`VehiclePropertiesPanel renders for an early vehicle 1`] = `
       className="m-vehicle-properties-panel__map"
     >
       <div
-        className="m-vehicle-map"
+        className="m-vehicle-map m-vehicle-map--auto-centering"
         id="id-vehicle-map"
       />
     </div>
@@ -1668,7 +1668,7 @@ exports[`VehiclePropertiesPanel renders for an off-course vehicle 1`] = `
       className="m-vehicle-properties-panel__map"
     >
       <div
-        className="m-vehicle-map"
+        className="m-vehicle-map m-vehicle-map--auto-centering"
         id="id-vehicle-map"
       />
     </div>
@@ -1894,7 +1894,7 @@ exports[`VehiclePropertiesPanel renders with route data 1`] = `
       className="m-vehicle-properties-panel__map"
     >
       <div
-        className="m-vehicle-map"
+        className="m-vehicle-map m-vehicle-map--auto-centering"
         id="id-vehicle-map"
       />
     </div>