From: Anton Khorev <tony29@yandex.ru>
Date: Sun, 13 Apr 2025 15:11:25 +0000 (+0300)
Subject: Move changeset colors to css
X-Git-Tag: live~31^2~3
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/29cfa650eaff016076ab54a4599bf3867b37267f?ds=inline

Move changeset colors to css
---

diff --git a/app/assets/javascripts/index/history-changesets-layer.js b/app/assets/javascripts/index/history-changesets-layer.js
index 751105e72..097c94642 100644
--- a/app/assets/javascripts/index/history-changesets-layer.js
+++ b/app/assets/javascripts/index/history-changesets-layer.js
@@ -2,16 +2,30 @@ OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({
   _changesets: new Map,
 
   _getChangesetStyle: function ({ isHighlighted }) {
+    let className = "changeset-in-sidebar-viewport";
+
+    if (isHighlighted) {
+      className += " changeset-highlighted";
+    }
+
     return {
       weight: isHighlighted ? 3 : 2,
-      color: isHighlighted ? "#FF6600" : "#FF9500",
-      fillColor: "#FFFFAF",
-      fillOpacity: isHighlighted ? 0.3 : 0
+      color: "var(--changeset-border-color)",
+      fillColor: "var(--changeset-fill-color)",
+      fillOpacity: isHighlighted ? 0.3 : 0,
+      className
     };
   },
 
   _updateChangesetStyle: function (changeset) {
-    this.getLayer(changeset.id)?.setStyle(this._getChangesetStyle(changeset));
+    const rect = this.getLayer(changeset.id);
+    if (!rect) return;
+
+    const style = this._getChangesetStyle(changeset);
+    rect.setStyle(style);
+    // setStyle doesn't update css classes: https://github.com/leaflet/leaflet/issues/2662
+    rect._path.classList.value = style.className;
+    rect._path.classList.add("leaflet-interactive");
   },
 
   updateChangesets: function (map, changesets) {
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 2cfd5eba7..f43415e80 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -601,6 +601,14 @@ tr.turn {
 
 /* Rules for the history sidebar */
 
+.changeset-in-sidebar-viewport {
+  --changeset-border-color: #FF9500;
+  &.changeset-highlighted {
+    --changeset-border-color: #FF6600;
+  }
+  --changeset-fill-color: #FFFFAF;
+}
+
 #sidebar .changesets {
   li {
     &.selected {