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 751105e7227a3f7fbb7b23ac5440efc2359b5eec..097c946424323c0f9b0250639c7456e4256d640b 100644 (file)
--- 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 2cfd5eba732348b338be53952e627319efc59f5c..f43415e80852461e1d86eb6e9216cacf4dcba189 100644 (file)
--- 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 {