From 68fae56b9dfcaec172b282fc09c7e4521267b8ae 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] Remove controls sprite --- app/assets/images/sprite.svg | 62 ------------------- app/assets/javascripts/leaflet.locate.js | 11 +++- 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 | 5 +- app/assets/stylesheets/common.scss | 35 +---------- app/views/dashboards/show.html.erb | 2 + app/views/diary_entries/_form.html.erb | 2 + app/views/layouts/_control_icons.html.erb | 21 +++++++ app/views/layouts/map.html.erb | 3 + app/views/profiles/edit.html.erb | 2 + app/views/site/_add_a_note.html.erb | 8 ++- 13 files changed, 64 insertions(+), 105 deletions(-) delete mode 100644 app/assets/images/sprite.svg create mode 100644 app/views/layouts/_control_icons.html.erb 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 8fc182f38..c706b59ce 100644 --- a/app/assets/javascripts/leaflet.locate.js +++ b/app/assets/javascripts/leaflet.locate.js @@ -2,8 +2,6 @@ L.OSM.locate = function (options) { const control = L.control.locate({ - icon: "icon geolocate", - iconLoading: "icon geolocate", strings: { title: OSM.i18n.t("javascripts.map.locate.title"), popup: function (options) { @@ -21,7 +19,14 @@ L.OSM.locate = function (options) { .children("a") .attr("href", "#") .removeClass("leaflet-bar-part leaflet-bar-part-single") - .addClass("control-button"); + .addClass("control-button") + .empty() + .append( + $(L.SVG.create("svg")) + .attr("class", "h-100 w-100") + .append( + $(L.SVG.create("use")) + .attr("href", "#icon-geolocate"))); return container; }; diff --git a/app/assets/javascripts/leaflet.note.js b/app/assets/javascripts/leaflet.note.js index e093d371e..38048abab 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 3dfa71d0e..e882854c8 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 eb96acf75..21a61d3a5 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", OSM.i18n.t(buttonTitle)); } diff --git a/app/assets/javascripts/leaflet.zoom.js b/app/assets/javascripts/leaflet.zoom.js index 1947b631d..dbc383833 100644 --- a/app/assets/javascripts/leaflet.zoom.js +++ b/app/assets/javascripts/leaflet.zoom.js @@ -37,7 +37,10 @@ L.OSM.Zoom = L.Control.extend({ link.href = "#"; link.title = title; - L.DomUtil.create("span", "icon " + className, link); + $(L.SVG.create("svg")) + .append($(L.SVG.create("use")).attr("href", "#icon-" + className)) + .attr("class", "h-100 w-100") + .appendTo(link); const stop = L.DomEvent.stopPropagation; diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 5d598d9db..fb8aa04c9 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 { @@ -282,6 +253,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; @@ -306,10 +279,6 @@ body.small-nav { border-end-start-radius: 4px; margin-bottom: 10px; } - - .icon { - margin: 10px; - } } .leaflet-control.active .control-button { diff --git a/app/views/dashboards/show.html.erb b/app/views/dashboards/show.html.erb index fe748e1a3..7f5071cab 100644 --- a/app/views/dashboards/show.html.erb +++ b/app/views/dashboards/show.html.erb @@ -2,6 +2,8 @@

<%= t ".title" %>

<% end %> +<%= render :partial => "layouts/control_icons", :locals => { :icons => %w[zoomin zoomout geolocate] } %> +
<% if !current_user.home_location? %> diff --git a/app/views/diary_entries/_form.html.erb b/app/views/diary_entries/_form.html.erb index a449b0d39..ab439e66c 100644 --- a/app/views/diary_entries/_form.html.erb +++ b/app/views/diary_entries/_form.html.erb @@ -5,6 +5,8 @@
<%= t ".location" -%> + <%= render :partial => "layouts/control_icons", :locals => { :icons => %w[zoomin zoomout] } %> + <%= tag.div "", :id => "map", :class => "border border-secondary-subtle rounded mb-3 z-0", :data => { :lat => @lat, :lon => @lon, :zoom => @zoom } %>
diff --git a/app/views/layouts/_control_icons.html.erb b/app/views/layouts/_control_icons.html.erb new file mode 100644 index 000000000..c99de4664 --- /dev/null +++ b/app/views/layouts/_control_icons.html.erb @@ -0,0 +1,21 @@ +<% paths = { + "zoomin" => { :d => "M16 8H12V4L11 3H10L9 4V8H5L4 9v1l1 1H9v4l1 1h1l1-1V11h4l1-1V9z" }, + "zoomout" => { :d => "M4 9v1l1 1H16l1-1V9L16 8H5Z" }, + "geolocate" => { :d => "M10 10v6h2L16 6V4H14L4 8v2Z" }, + "layers" => { :d => "M4.094 13.5 9.5 16h1l5.406-2.5L17 14v1l-6.5 3h-1L3 15V14l1.094-.5Zm0-4L9.5 12h1l5.406-2.5L17 10v1l-6.5 3h-1L3 11V10l1.094-.5ZM9.5 3h1L17 6V7l-6.5 3h-1L3 7V6L9.5 3Z" }, + "key" => { :d => "M9 3 8 4V6L9 7h2l1-1V4L11 3zM9 9 8 10v6l1 1h2l1-1V10L11 9z" }, + "share" => { :d => "m15 2-1 1V5h-2c-6 0-6 7-6 7s2-4 6-4h2v2l1 1 4-4.5L15 2ZM2 6 1 7v9l1 1h10l1-1V10h-1c-.32 0-.66.073-1 .188V15H3V8h1.531c.344-.669.792-1.348 1.344-2H2Z" }, + "note" => { :d => "M17 12H15v2H13v2h2v2h2V16h2V14H17V12ZM3 12H6l2 3 2-3h3l1-1V4L13 3H3L2 4v7Z" } + } + + icons.each do |icon| %> + <% if paths[icon] %> + /> + <% end %> + <% if icon == "query" %> + + + ? + + <% end %> + <% end %> diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb index 62e979c05..3a15ec9a5 100644 --- a/app/views/layouts/map.html.erb +++ b/app/views/layouts/map.html.erb @@ -50,6 +50,9 @@ <%= render :partial => "layouts/banner" %>
+ <%= render :partial => "layouts/control_icons", + :locals => { :icons => %w[zoomin zoomout geolocate layers key share note query] } %> +