From 47c92e657dc2e6c9b91dddcc99fd337fa4b71fbe Mon Sep 17 00:00:00 2001
From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com>
Date: Wed, 5 Mar 2025 16:35:07 +0100
Subject: [PATCH] Unify active control button behaviour

---
 app/assets/javascripts/index/new_note.js  |  7 ++++---
 app/assets/javascripts/index/query.js     | 13 +++++++------
 app/assets/javascripts/leaflet.sidebar.js |  2 ++
 app/assets/stylesheets/common.scss        |  9 ++++-----
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js
index ff4a44126..d852d7482 100644
--- a/app/assets/javascripts/index/new_note.js
+++ b/app/assets/javascripts/index/new_note.js
@@ -2,7 +2,8 @@ OSM.NewNote = function (map) {
   const noteLayer = map.noteLayer,
         content = $("#sidebar_content"),
         page = {},
-        addNoteButton = $(".control-note .control-button");
+        control = $(".control-note"),
+        addNoteButton = control.find(".control-button");
   let newNoteMarker,
       halo;
 
@@ -109,7 +110,7 @@ OSM.NewNote = function (map) {
   };
 
   page.load = function (path) {
-    addNoteButton.addClass("active");
+    control.addClass("active");
 
     map.addLayer(noteLayer);
 
@@ -165,7 +166,7 @@ OSM.NewNote = function (map) {
     map.off("click", moveNewNoteMarkerToClick);
     addNoteButton.off("disabled enabled", updateControls);
     removeNewNoteMarker();
-    addNoteButton.removeClass("active");
+    control.removeClass("active");
   };
 
   return page;
diff --git a/app/assets/javascripts/index/query.js b/app/assets/javascripts/index/query.js
index 790057400..0864418ea 100644
--- a/app/assets/javascripts/index/query.js
+++ b/app/assets/javascripts/index/query.js
@@ -1,7 +1,8 @@
 OSM.Query = function (map) {
   const url = OSM.OVERPASS_URL,
         credentials = OSM.OVERPASS_CREDENTIALS,
-        queryButton = $(".control-query .control-button"),
+        control = $(".control-query"),
+        queryButton = control.find(".control-button"),
         uninterestingTags = ["source", "source_ref", "source:ref", "history", "attribution", "created_by", "tiger:county", "tiger:tlid", "tiger:upload_uuid", "KSJ2:curve_id", "KSJ2:lat", "KSJ2:lon", "KSJ2:coordinate", "KSJ2:filename", "note:ja"];
   let marker;
 
@@ -17,19 +18,19 @@ OSM.Query = function (map) {
     e.preventDefault();
     e.stopPropagation();
 
-    if (queryButton.hasClass("active")) {
+    if (control.hasClass("active")) {
       disableQueryMode();
     } else if (!queryButton.hasClass("disabled")) {
       enableQueryMode();
     }
   }).on("disabled", function () {
-    if (queryButton.hasClass("active")) {
+    if (control.hasClass("active")) {
       map.off("click", clickHandler);
       $(map.getContainer()).removeClass("query-active").addClass("query-disabled");
       $(this).tooltip("show");
     }
   }).on("enabled", function () {
-    if (queryButton.hasClass("active")) {
+    if (control.hasClass("active")) {
       map.on("click", clickHandler);
       $(map.getContainer()).removeClass("query-disabled").addClass("query-active");
       $(this).tooltip("hide");
@@ -304,7 +305,7 @@ OSM.Query = function (map) {
   }
 
   function enableQueryMode() {
-    queryButton.addClass("active");
+    control.addClass("active");
     map.on("click", clickHandler);
     $(map.getContainer()).addClass("query-active");
   }
@@ -313,7 +314,7 @@ OSM.Query = function (map) {
     if (marker) map.removeLayer(marker);
     $(map.getContainer()).removeClass("query-active").removeClass("query-disabled");
     map.off("click", clickHandler);
-    queryButton.removeClass("active");
+    control.removeClass("active");
   }
 
   const page = {};
diff --git a/app/assets/javascripts/leaflet.sidebar.js b/app/assets/javascripts/leaflet.sidebar.js
index f16156b72..f6b2b67f8 100644
--- a/app/assets/javascripts/leaflet.sidebar.js
+++ b/app/assets/javascripts/leaflet.sidebar.js
@@ -26,6 +26,7 @@ L.OSM.sidebar = function (selector) {
       .trigger("hide");
 
     currentButton
+      .parent()
       .removeClass("active");
 
     if (current === pane) {
@@ -56,6 +57,7 @@ L.OSM.sidebar = function (selector) {
       .trigger("show");
 
     currentButton
+      .parent()
       .addClass("active");
   };
 
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 07128de47..5d598d9db 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -33,7 +33,6 @@ time[title] {
 .icon.zoomin      { /*rtl:ignore*/ background-position: -40px 0; }
 .icon.zoomout     { /*rtl:ignore*/ background-position: -60px 0; }
 .icon.geolocate   { /*rtl:ignore*/ background-position: -80px 0; }
-.active .icon.geolocate   { /*rtl:ignore*/ background-position: -80px -20px; }
 .icon.layers      { /*rtl:ignore*/ background-position: -100px 0; }
 .icon.key         { /*rtl:ignore*/ background-position: -120px 0; }
 .icon.share       { /*rtl:ignore*/ background-position: -140px 0; }
@@ -299,10 +298,6 @@ body.small-nav {
     cursor: default;
   }
 
-  &.active {
-    background-color: $vibrant-green;
-  }
-
   &-first {
     border-start-start-radius: 4px;
   }
@@ -317,6 +312,10 @@ body.small-nav {
   }
 }
 
+.leaflet-control.active .control-button {
+  background-color: $vibrant-green;
+}
+
 /* Rules for the sidebar and main map area */
 
 .map-layout {
-- 
2.39.5