apps/mapix
4
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

feat: refine map control group states

Browse Source
This commit is contained in:
Arne Baeumler
2026-06-13 08:31:33 +02:00
parent df17afeb41
commit 8eec2d4ca4
3 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/app.ts
View File

@@ -251,6 +251,7 @@ function setRouteVisible(visible) {
route.addTo(map); route.addTo(map);
} }
routeToggle.setAttribute("aria-label", "Hide route line"); routeToggle.setAttribute("aria-label", "Hide route line");
routeToggle.setAttribute("aria-pressed", "true");
routeToggleIcon.innerHTML = routeToggleIcon.innerHTML =
'<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' + '<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' +
'<path d="M3 11.5 6.2 8.2c.4-.4 1-.5 1.5-.2l1.1.7c.5.3 1.1.2 1.5-.2L13 5.8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>' + '<path d="M3 11.5 6.2 8.2c.4-.4 1-.5 1.5-.2l1.1.7c.5.3 1.1.2 1.5-.2L13 5.8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>' +
@@ -262,6 +263,7 @@ function setRouteVisible(visible) {
map.removeLayer(route); map.removeLayer(route);
} }
routeToggle.setAttribute("aria-label", "Show route line"); routeToggle.setAttribute("aria-label", "Show route line");
routeToggle.setAttribute("aria-pressed", "false");
routeToggleIcon.innerHTML = routeToggleIcon.innerHTML =
'<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' + '<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' +
'<path d="M3 11.5 6.2 8.2c.4-.4 1-.5 1.5-.2l1.1.7c.5.3 1.1.2 1.5-.2L13 5.8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>' + '<path d="M3 11.5 6.2 8.2c.4-.4 1-.5 1.5-.2l1.1.7c.5.3 1.1.2 1.5-.2L13 5.8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>' +

27
src/server/app-assets.ts
View File

@@ -291,7 +291,12 @@ export const APP_STYLES = ` :root {
right: 16px; right: 16px;
z-index: 900; z-index: 900;
display: grid; display: grid;
gap: 8px; gap: 2px;
padding: 4px;
background: var(--timeline-surface-soft);
border: 1px solid var(--timeline-border);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(14px);
} }
.route-toggle { .route-toggle {
@@ -303,15 +308,29 @@ export const APP_STYLES = ` :root {
.theme-toggle, .theme-toggle,
.route-toggle { .route-toggle {
background: var(--timeline-surface-soft); background: transparent;
color: var(--timeline-text); color: var(--timeline-text);
border: 1px solid var(--timeline-border); border: 1px solid transparent;
box-shadow: var(--shadow-soft); box-shadow: none;
opacity: 0.78;
} }
.theme-toggle:hover, .theme-toggle:hover,
.route-toggle:hover { .route-toggle:hover {
background: var(--timeline-surface-strong); background: var(--timeline-surface-strong);
border-color: var(--timeline-border);
opacity: 1;
}
.route-toggle[aria-pressed="true"] {
background: var(--timeline-surface-strong);
border-color: var(--timeline-border-strong);
color: var(--route-color);
opacity: 1;
}
.route-toggle[aria-pressed="false"] {
color: var(--timeline-text-muted);
} }
.theme-toggle .button-icon, .theme-toggle .button-icon,

2
src/server/page-template.ts
View File

@@ -27,7 +27,7 @@ ${APP_STYLES}
</svg> </svg>
</span> </span>
</button> </button>
<button class="secondary route-toggle" id="route-toggle" type="button" aria-label="Hide route line"> <button class="secondary route-toggle" id="route-toggle" type="button" aria-label="Hide route line" aria-pressed="true">
<span class="button-icon" id="route-toggle-icon" aria-hidden="true"> <span class="button-icon" id="route-toggle-icon" aria-hidden="true">
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 11.5 6.2 8.2c.4-.4 1-.5 1.5-.2l1.1.7c.5.3 1.1.2 1.5-.2L13 5.8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 11.5 6.2 8.2c.4-.4 1-.5 1.5-.2l1.1.7c.5.3 1.1.2 1.5-.2L13 5.8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>