From 7a9871c1b3d6317b361af5110eadae97ee3b5725 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 1/4] Unify active control button behaviour --- app/assets/javascripts/index/new_note.js | 7 ++++--- app/assets/javascripts/index/query.js | 13 +++++++------ app/assets/stylesheets/common.scss | 9 ++++----- 3 files changed, 15 insertions(+), 14 deletions(-) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index b1457d10b..a8be3917f 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; @@ -127,7 +128,7 @@ OSM.NewNote = function (map) { }; page.load = function (path) { - addNoteButton.addClass("active"); + control.addClass("active"); map.addLayer(noteLayer); @@ -181,7 +182,7 @@ OSM.NewNote = function (map) { map.off("click", moveNewNotMarkerToClick); 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 c0395c701..3cf1ac9d8 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"); @@ -302,7 +303,7 @@ OSM.Query = function (map) { } function enableQueryMode() { - queryButton.addClass("active"); + control.addClass("active"); map.on("click", clickHandler); $(map.getContainer()).addClass("query-active"); } @@ -311,7 +312,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/stylesheets/common.scss b/app/assets/stylesheets/common.scss index c1728f870..9135655c6 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; } @@ -297,10 +296,6 @@ body.small-nav { cursor: default; } - &.active { - background-color: $vibrant-green; - } - &-first { border-start-start-radius: 4px; } @@ -315,6 +310,10 @@ body.small-nav { } } +.leaflet-control.active .control-button { + background-color: $vibrant-green; +} + /* Rules for the sidebar and main map area */ .map-layout { From cd1a05af94e88053c24f56404bd03418d2568bc0 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Wed, 5 Mar 2025 19:27:43 +0100 Subject: [PATCH 2/4] Set fixthemap note link in template --- app/assets/javascripts/fixthemap.js | 6 +++--- app/views/site/fixthemap.html.erb | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/fixthemap.js b/app/assets/javascripts/fixthemap.js index 46afb0f68..96bd061f9 100644 --- a/app/assets/javascripts/fixthemap.js +++ b/app/assets/javascripts/fixthemap.js @@ -1,8 +1,8 @@ $(function () { const params = OSM.params(); - let url = "/note/new"; if (!params.zoom) params.zoom = 17; - if (params.lat && params.lon) url += OSM.formatHash(params); - $(".icon.note").attr("href", url); + if (params.lat && params.lon) { + $("a.new-note")[0].href += OSM.formatHash(params); + } }); diff --git a/app/views/site/fixthemap.html.erb b/app/views/site/fixthemap.html.erb index 9d9ef9232..82ac8d641 100644 --- a/app/views/site/fixthemap.html.erb +++ b/app/views/site/fixthemap.html.erb @@ -22,7 +22,7 @@

<%= t "site.welcome.add_a_note.title" %>

<%= t "site.welcome.add_a_note.para_1" %>

-

<%= t ".how_to_help.add_a_note.instructions_1_html", :note_icon => tag.a(:class => "icon note bg-dark rounded-1") %>

+

<%= t ".how_to_help.add_a_note.instructions_1_html", :note_icon => tag.a(:href => new_note_path, :class => "icon note bg-dark rounded-1 new-note") %>

From 0fca1716574a7a5044709527a43d9a5addd8b914 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Wed, 5 Mar 2025 19:37:37 +0100 Subject: [PATCH 3/4] Click links instead of icons in tests --- test/system/index_test.rb | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/test/system/index_test.rb b/test/system/index_test.rb index 2944b817e..7fd32c8a6 100644 --- a/test/system/index_test.rb +++ b/test/system/index_test.rb @@ -5,16 +5,16 @@ class IndexTest < ApplicationSystemTestCase node = create(:node) visit node_path(node) assert_selector "#content.overlay-right-sidebar" - find(".icon.share").click + find(".control-share a").click assert_no_selector "#content.overlay-right-sidebar" - find(".icon.share").click + find(".control-share a").click assert_selector "#content.overlay-right-sidebar" end test "should add an overlay on close" do node = create(:node) visit node_path(node) - find(".icon.share").click + find(".control-share a").click assert_no_selector "#content.overlay-right-sidebar" find(".share-ui .btn-close").click assert_selector "#content.overlay-right-sidebar" @@ -23,16 +23,16 @@ class IndexTest < ApplicationSystemTestCase test "should not add overlay when not closing right menu popup" do node = create(:node) visit node_path(node) - find(".icon.share").click + find(".control-share a").click - find(".icon.key").click + find(".control-key a").click assert_no_selector "#content.overlay-right-sidebar" - find(".icon.layers").click + find(".control-layers a").click assert_no_selector "#content.overlay-right-sidebar" - find(".icon.key").click + find(".control-key a").click assert_no_selector "#content.overlay-right-sidebar" - find(".icon.key").click + find(".control-key a").click assert_selector "#content.overlay-right-sidebar" end From 1f182c673bc66404934fce5692561befa17c19b4 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Wed, 5 Mar 2025 17:33:07 +0100 Subject: [PATCH 4/4] Remove controls sprite --- app/assets/images/sprite.svg | 62 ------------------- app/assets/javascripts/leaflet.locate.js | 4 +- app/assets/javascripts/leaflet.note.js | 6 +- app/assets/javascripts/leaflet.query.js | 6 +- .../javascripts/leaflet.sidebar-pane.js | 6 +- app/assets/javascripts/leaflet.zoom.js | 7 ++- app/assets/javascripts/user.js | 4 +- app/assets/stylesheets/common.scss | 40 +++--------- app/views/layouts/map.html.erb | 13 ++++ app/views/site/fixthemap.html.erb | 11 +++- app/views/site/welcome.html.erb | 9 ++- 11 files changed, 62 insertions(+), 106 deletions(-) delete mode 100644 app/assets/images/sprite.svg diff --git a/app/assets/images/sprite.svg b/app/assets/images/sprite.svg deleted file mode 100644 index ae2e03c6b..000000000 --- a/app/assets/images/sprite.svg +++ /dev/null @@ -1,62 +0,0 @@ - - - - - ? - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/app/assets/javascripts/leaflet.locate.js b/app/assets/javascripts/leaflet.locate.js index 81b4f1a4e..0fbf3c09d 100644 --- a/app/assets/javascripts/leaflet.locate.js +++ b/app/assets/javascripts/leaflet.locate.js @@ -1,7 +1,7 @@ L.OSM.locate = function (options) { const control = L.control.locate({ - icon: "icon geolocate", - iconLoading: "icon geolocate", + icon: "geolocate h-100 w-100 d-inline-block", + iconLoading: "geolocate h-100 w-100 d-inline-block", strings: { title: I18n.t("javascripts.map.locate.title"), popup: function (options) { diff --git a/app/assets/javascripts/leaflet.note.js b/app/assets/javascripts/leaflet.note.js index e2ca4ffdf..4ebdf0505 100644 --- a/app/assets/javascripts/leaflet.note.js +++ b/app/assets/javascripts/leaflet.note.js @@ -8,9 +8,13 @@ L.OSM.note = function (options) { const link = $("") .attr("class", "control-button") .attr("href", "#") - .html("") .appendTo($container); + $(L.SVG.create("svg")) + .append($(L.SVG.create("use")).attr("href", "#icon-note")) + .attr("class", "h-100 w-100") + .appendTo(link); + map.on("zoomend", update); function update() { diff --git a/app/assets/javascripts/leaflet.query.js b/app/assets/javascripts/leaflet.query.js index 041764877..fd8872a2a 100644 --- a/app/assets/javascripts/leaflet.query.js +++ b/app/assets/javascripts/leaflet.query.js @@ -8,9 +8,13 @@ L.OSM.query = function (options) { const link = $("") .attr("class", "control-button") .attr("href", "#") - .html("") .appendTo($container); + $(L.SVG.create("svg")) + .append($(L.SVG.create("use")).attr("href", "#icon-query")) + .attr("class", "h-100 w-100") + .appendTo(link); + map.on("zoomend", update); function update() { diff --git a/app/assets/javascripts/leaflet.sidebar-pane.js b/app/assets/javascripts/leaflet.sidebar-pane.js index 06fad7b66..ffe6f1260 100644 --- a/app/assets/javascripts/leaflet.sidebar-pane.js +++ b/app/assets/javascripts/leaflet.sidebar-pane.js @@ -8,9 +8,13 @@ L.OSM.sidebarPane = function (options, uiClass, buttonTitle, paneTitle) { const button = $("") .attr("class", "control-button") .attr("href", "#") - .html("") .on("click", toggle); + $(L.SVG.create("svg")) + .append($(L.SVG.create("use")).attr("href", "#icon-" + uiClass)) + .attr("class", "h-100 w-100") + .appendTo(button); + if (buttonTitle) { button.attr("title", I18n.t(buttonTitle)); } diff --git a/app/assets/javascripts/leaflet.zoom.js b/app/assets/javascripts/leaflet.zoom.js index 71662608c..671389fb1 100644 --- a/app/assets/javascripts/leaflet.zoom.js +++ b/app/assets/javascripts/leaflet.zoom.js @@ -33,11 +33,16 @@ L.OSM.Zoom = L.Control.extend({ _createButton: function (html, title, className, container, fn, context) { const link = L.DomUtil.create("a", "control-button " + className, container); + const paths = { zoomin: "M16 8H12V4L11 3H10L9 4V8H5L4 9v1l1 1H9v4l1 1h1l1-1V11h4l1-1V9z", zoomout: "M4 9v1l1 1H16l1-1V9L16 8H5Z" }; link.innerHTML = html; link.href = "#"; link.title = title; - L.DomUtil.create("span", "icon " + className, link); + $(L.SVG.create("svg")) + .append($(L.SVG.create("path")).attr("d", paths[className])) + .attr("fill", "currentColor") + .attr("class", "h-100 w-100") + .appendTo(link); const stop = L.DomEvent.stopPropagation; diff --git a/app/assets/javascripts/user.js b/app/assets/javascripts/user.js index f3fe02e0c..924fe0fb7 100644 --- a/app/assets/javascripts/user.js +++ b/app/assets/javascripts/user.js @@ -23,8 +23,8 @@ $(function () { const locate = L.control.locate({ position: position, - icon: "icon geolocate", - iconLoading: "icon geolocate", + icon: "geolocate h-100 w-100 d-inline-block", + iconLoading: "geolocate h-100 w-100 d-inline-block", strings: { title: I18n.t("javascripts.map.locate.title"), popup: function (options) { diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 9135655c6..d81c34568 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -16,35 +16,6 @@ time[title] { text-decoration: underline dotted; } -/* Rules for icons */ - -.icon { - display: inline-block; - vertical-align: top; - width: 20px; - height: 20px; - background: transparent image-url("sprite.svg") no-repeat 0 0; - text-indent: -9999px; - overflow: hidden; -} - -.icon.search { /*rtl:ignore*/ background-position: 0 0; } -.icon.donate { /*rtl:ignore*/ background-position: -20px 0; } -.icon.zoomin { /*rtl:ignore*/ background-position: -40px 0; } -.icon.zoomout { /*rtl:ignore*/ background-position: -60px 0; } -.icon.geolocate { /*rtl:ignore*/ background-position: -80px 0; } -.icon.layers { /*rtl:ignore*/ background-position: -100px 0; } -.icon.key { /*rtl:ignore*/ background-position: -120px 0; } -.icon.share { /*rtl:ignore*/ background-position: -140px 0; } -.icon.clipboard { /*rtl:ignore*/ background-position: -160px 0; } -.icon.link { /*rtl:ignore*/ background-position: -180px 0; } -.icon.close { /*rtl:ignore*/ background-position: -200px 0; } -.icon.close:hover { /*rtl:ignore*/ background-position: -200px -20px; } -.icon.check { /*rtl:ignore*/ background-position: -220px 0; } -.icon.note { /*rtl:ignore*/ background-position: -240px 0; } -.icon.note.grey { /*rtl:ignore*/ background-position: -240px -20px; } -.icon.query { /*rtl:ignore*/ background-position: -260px 0; } - /* Utility for de-emphasizing content */ .text-body-secondary a { @@ -280,6 +251,8 @@ body.small-nav { display: block; height: 40px; width: 40px; + color: white; + padding: 10px; background-color: #333; background-color: rgba(0,0,0,.6); outline: none; @@ -304,16 +277,17 @@ body.small-nav { border-end-start-radius: 4px; margin-bottom: 10px; } - - .icon { - margin: 10px; - } } .leaflet-control.active .control-button { background-color: $vibrant-green; } +.geolocate { + background: currentColor; + clip-path: polygon(20% 50%, 20% 40%, 70% 20%, 80% 20%, 80% 30%, 60% 80%, 50% 80%, 50% 50%); +} + /* Rules for the sidebar and main map area */ .map-layout { diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb index 72f6076b4..276c05eda 100644 --- a/app/views/layouts/map.html.erb +++ b/app/views/layouts/map.html.erb @@ -47,6 +47,19 @@ <%= render :partial => "layouts/banner" %> + + + + + + + + + ? + + + +