From 022790d7f0def1316eeca7a7021d27ac1fc3dd39 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Wed, 30 Apr 2025 03:35:51 +0300 Subject: [PATCH] Add outlines to changeset highlights --- .../index/history-changesets-layer.js | 27 ++++++++++++++----- app/assets/stylesheets/common.scss | 2 ++ 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/index/history-changesets-layer.js b/app/assets/javascripts/index/history-changesets-layer.js index 1a53ab5f4..2f762e0d6 100644 --- a/app/assets/javascripts/index/history-changesets-layer.js +++ b/app/assets/javascripts/index/history-changesets-layer.js @@ -57,12 +57,12 @@ OSM.HistoryChangesetBboxBorderLayer = OSM.HistoryChangesetBboxLayer.extend({ } }); -OSM.HistoryChangesetBboxHighlightLayer = OSM.HistoryChangesetBboxLayer.extend({ +OSM.HistoryChangesetBboxHighlightBackLayer = OSM.HistoryChangesetBboxLayer.extend({ _getChangesetStyle: function (changeset) { return { interactive: false, - weight: 4, - color: "var(--changeset-border-color)", + weight: 6, + color: "var(--changeset-outline-color)", fillColor: "var(--changeset-fill-color)", fillOpacity: 0.3, className: this._getSidebarRelativeClassName(changeset) + " changeset-highlighted" @@ -70,6 +70,18 @@ OSM.HistoryChangesetBboxHighlightLayer = OSM.HistoryChangesetBboxLayer.extend({ } }); +OSM.HistoryChangesetBboxHighlightBorderLayer = OSM.HistoryChangesetBboxLayer.extend({ + _getChangesetStyle: function (changeset) { + return { + interactive: false, + weight: 4, + color: "var(--changeset-border-color)", + fill: false, + className: this._getSidebarRelativeClassName(changeset) + " changeset-highlighted" + }; + } +}); + OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({ updateChangesets: function (map, changesets) { this._changesets = new Map(changesets.map(changeset => [changeset.id, changeset])); @@ -167,9 +179,11 @@ OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({ if (!changeset) return; if (state) { - this._highlightLayer.addChangesetLayer(changeset); + this._highlightBackLayer.addChangesetLayer(changeset); + this._highlightBorderLayer.addChangesetLayer(changeset); } else { - this._highlightLayer.removeLayer(id); + this._highlightBackLayer.removeLayer(id); + this._highlightBorderLayer.removeLayer(id); } }, @@ -187,6 +201,7 @@ OSM.HistoryChangesetsLayer.addInitHook(function () { this._areaLayer = new OSM.HistoryChangesetBboxAreaLayer().addTo(this), this._outlineLayer = new OSM.HistoryChangesetBboxOutlineLayer().addTo(this), this._borderLayer = new OSM.HistoryChangesetBboxBorderLayer().addTo(this), - this._highlightLayer = new OSM.HistoryChangesetBboxHighlightLayer().addTo(this) + this._highlightBackLayer = new OSM.HistoryChangesetBboxHighlightBackLayer().addTo(this), + this._highlightBorderLayer = new OSM.HistoryChangesetBboxHighlightBorderLayer().addTo(this) ]; }); diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index f07cef846..dd1e3393c 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -606,6 +606,7 @@ tr.turn { .changeset-above-sidebar-viewport { --changeset-border-color: #CC7755; --changeset-fill-color: #888888; + --changeset-outline-color: #FFFFFF; } .changeset-in-sidebar-viewport { --changeset-border-color: #FF9500; @@ -618,6 +619,7 @@ tr.turn { .changeset-below-sidebar-viewport { --changeset-border-color: #8888AA; --changeset-fill-color: #888888; + --changeset-outline-color: #FFFFFF; } #sidebar .changesets { -- 2.39.5