2025-summer/team-3
12
Fork 0
Code Issues Pull requests Projects Releases Activity

custom icons

Browse source
This commit is contained in:
Dennis Orlando 2025-08-02 09:13:39 +02:00
parent d5b9d8e97d
commit 4158885c11
4 changed files with 21 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/c3nav/editor/static/editor/css/editor.scss
View file

@ -572,6 +572,7 @@ label.theme-color-label {
/* watchout for leaflet.css trying to override a:hover with a different height/width */
a.snap-toggle, a.snap-to-original-toggle {
background-size: 30px 30px;
display: block;
width: 30px;
height: 30px;
@ -585,14 +586,22 @@ label.theme-color-label {
}
&.active {
background-color: #4CAF50;
background-color: #45a049;
color: white;
&:hover {
background-color: #45a049;
background-color: #b0ecb2;
}
}
}
/* icons */
a.snap-toggle {
background-image: url("/static/img/snap-to-edges-icon.svg");
}
a.snap-to-original-toggle {
background-image: url("/static/img/snap-to-original-icon.svg");
}
}
/* Snap indicator styles */

8
src/c3nav/editor/static/editor/js/editor.js
View file

@ -1664,8 +1664,8 @@ editor = {
},
// Snap-to-edges functionality
_snap_enabled: true,
_snap_to_original_enabled: true,
_snap_enabled: false,
_snap_to_original_enabled: false,
_snap_distance: 30, // pixels
_extension_area_multiplier: 4, // Extension area = snap_distance * this multiplier
_snap_to_base_map: false,
@ -1688,7 +1688,7 @@ editor = {
snapControl.onAdd = function() {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-snap');
container.innerHTML = '<a href="#" title="Toggle Snap to Edges" class="snap-toggle ' +
(editor._snap_enabled ? 'active' : '') + '">⚡</a>';
(editor._snap_enabled ? 'active' : '') + '"</a>';
L.DomEvent.on(container.querySelector('.snap-toggle'), 'click', function(e) {
e.preventDefault();
@ -1705,7 +1705,7 @@ editor = {
snapToOriginalControl.onAdd = function() {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-snap');
container.innerHTML = '<a href="#" title="Toggle Snap to Edges" class="snap-to-original-toggle ' +
(editor._snap_to_original_enabled ? 'active' : '') + '">S</a>';
(editor._snap_to_original_enabled ? 'active' : '') + '"></a>';
L.DomEvent.on(container.querySelector('.snap-to-original-toggle'), 'click', function(e) {
e.preventDefault();

3
src/c3nav/static/img/snap-to-edges-icon.svg Normal file
View file

@ -0,0 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" style="background: transparent; background-color: transparent; color-scheme: light dark;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="101px" height="126px" viewBox="-0.5 -0.5 101 126"><defs/><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="pwFeD8oKGOq7wNB7DZdw-4"><g><path d="M 60 22 L 100 52 L 60 82 Z" fill="none" stroke="#000000" style="stroke: rgb(0, 0, 0);" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="pwFeD8oKGOq7wNB7DZdw-6"><g><rect x="0" y="32" width="60" height="60" fill="none" stroke="#000000" style="stroke: rgb(0, 0, 0);" pointer-events="all"/></g></g><g data-cell-id="pwFeD8oKGOq7wNB7DZdw-3"><g><path d="M 60 2 L 60 122" fill="none" stroke="#000000" style="stroke: rgb(0, 0, 0);" stroke-width="5" stroke-miterlimit="10" stroke-dasharray="15 15" pointer-events="stroke"/></g></g></g></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

3
src/c3nav/static/img/snap-to-original-icon.svg Normal file
View file

@ -0,0 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" style="background: transparent; background-color: transparent; color-scheme: light;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="114px" height="124px" viewBox="-0.5 -0.5 114 124"><defs/><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="pwFeD8oKGOq7wNB7DZdw-7"><g><path d="M 11 71 L 71 1" fill="none" stroke="#000000" style="stroke: rgb(0, 0, 0);" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="6 6" pointer-events="stroke"/></g></g><g data-cell-id="pwFeD8oKGOq7wNB7DZdw-8"><g><path d="M 81 101 L 11 71" fill="none" stroke="#000000" style="stroke: rgb(0, 0, 0);" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="6 6" pointer-events="stroke"/></g></g><g data-cell-id="pwFeD8oKGOq7wNB7DZdw-9"><g><path d="M 81 101 L 71 1" fill="none" stroke="#000000" style="stroke: rgb(0, 0, 0);" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="6 6" pointer-events="stroke"/></g></g><g data-cell-id="pwFeD8oKGOq7wNB7DZdw-10"><g><path d="M 1 71 L 31 1" fill="none" stroke="#000000" style="stroke: rgb(0, 0, 0);" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/></g></g><g data-cell-id="pwFeD8oKGOq7wNB7DZdw-11"><g><path d="M 111 121 L 1 71" fill="none" stroke="#000000" style="stroke: rgb(0, 0, 0);" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/></g></g><g data-cell-id="pwFeD8oKGOq7wNB7DZdw-12"><g><path d="M 111 121 L 31 1" fill="none" stroke="#000000" style="stroke: rgb(0, 0, 0);" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/></g></g></g></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB