From 0b5fe015d94299bb86f762b4a2ea1a7e86010ba9 Mon Sep 17 00:00:00 2001
From: Paul Bienkowski <pb@opatut.de>
Date: Mon, 12 Sep 2022 17:25:49 +0200
Subject: [PATCH] Add button to close road info overlay (fixes #275)

---
 frontend/src/pages/MapPage/RoadInfo.tsx | 12 ++++++++++++
 frontend/src/pages/MapPage/index.tsx    |  7 ++++++-
 frontend/src/translations/de.yaml       |  1 +
 frontend/src/translations/en.yaml       |  1 +
 4 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/MapPage/RoadInfo.tsx b/frontend/src/pages/MapPage/RoadInfo.tsx
index e48ff06..a4c988a 100644
--- a/frontend/src/pages/MapPage/RoadInfo.tsx
+++ b/frontend/src/pages/MapPage/RoadInfo.tsx
@@ -8,6 +8,7 @@ import {
   Icon,
   Table,
   Message,
+  Button,
 } from "semantic-ui-react";
 import { Layer, Source } from "react-map-gl";
 import { of, from, concat } from "rxjs";
@@ -140,9 +141,11 @@ function HistogramChart({ bins, counts, zone }) {
 export default function RoadInfo({
   clickLocation,
   hasFilters,
+  onClose,
 }: {
   clickLocation: Location | null;
   hasFilters: boolean;
+  onClose: () => void;
 }) {
   const { t } = useTranslation();
   const [direction, setDirection] = useState("forwards");
@@ -201,6 +204,15 @@ export default function RoadInfo({
           {loading
             ? "..."
             : info?.road.name || t("MapPage.roadInfo.unnamedWay")}
+
+          <Button
+            style={{ float: "right" }}
+            onClick={onClose}
+            title={t("MapPage.roadInfo.closeTooltip")}
+            size="small"
+            icon="close"
+            basic
+          />
         </Header>
 
         {hasFilters && (
diff --git a/frontend/src/pages/MapPage/index.tsx b/frontend/src/pages/MapPage/index.tsx
index af2f638..7b37d7d 100644
--- a/frontend/src/pages/MapPage/index.tsx
+++ b/frontend/src/pages/MapPage/index.tsx
@@ -134,6 +134,9 @@ function MapPage({ login }) {
     },
     [setClickLocation]
   );
+  const onCloseRoadInfo = useCallback(() => {
+    setClickLocation(null);
+  }, [setClickLocation]);
 
   const [layerSidebar, setLayerSidebar] = useState(true);
 
@@ -240,7 +243,9 @@ function MapPage({ login }) {
               ))}
             </Source>
 
-            <RoadInfo {...{ clickLocation, hasFilters }} />
+            <RoadInfo
+              {...{ clickLocation, hasFilters, onClose: onCloseRoadInfo }}
+            />
           </Map>
         </div>
       </div>
diff --git a/frontend/src/translations/de.yaml b/frontend/src/translations/de.yaml
index b73d4e6..7b59764 100644
--- a/frontend/src/translations/de.yaml
+++ b/frontend/src/translations/de.yaml
@@ -175,6 +175,7 @@ MapPage:
 
 
   roadInfo:
+    closeTooltip: Infobox schließen
     unnamedWay: Unbenannter Weg
     oneway: Einbahnstraße
     direction: Richtung
diff --git a/frontend/src/translations/en.yaml b/frontend/src/translations/en.yaml
index 18c1d4b..6820f51 100644
--- a/frontend/src/translations/en.yaml
+++ b/frontend/src/translations/en.yaml
@@ -179,6 +179,7 @@ MapPage:
       after: After
 
   roadInfo:
+    closeTooltip: Close overlay
     unnamedWay: Unnamed way
     oneway: oneway
     direction: Direction