exlim/navigator
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add explicit X close buttons to context dialog, Preferences dialog, and Directions panel
All checks were successful
CI / test-and-build (push) Successful in 45s
Details

Browse Source
This commit is contained in:
hermes-explorigin 2026-08-10 21:21:12 +00:00
parent fbf939d236
commit c2051a665b
3 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/lib/components/DirectionsPanel.svelte
View File

@ -37,6 +37,8 @@
destination: { lat: number; lon: number; label?: string } | null;
/** Called whenever the destination should change. */
onDestinationChange: (d: { lat: number; lon: number; label?: string } | null) => void;
/** Called when the user closes the panel (X button). */
onClose: () => void;
}
let {
@ -52,7 +54,8 @@
runRoute,
savedPoints = [],
destination = null,
onDestinationChange
onDestinationChange,
onClose
}: Props = $props();
// --- destination ---
@ -231,7 +234,10 @@
</script>
<div class="dirs" role="dialog" aria-label="Directions">
<div class="dir-head">Directions</div>
<div class="dir-head-row">
<div class="dir-head">Directions</div>
<button class="dir-x" aria-label="Close directions" onclick={() => onClose()}>×</button>
</div>
<!-- Origin (already selected) -->
<div class="point"><span class="dot a"></span> A · {origin.label || `${origin.lat.toFixed(4)}, ${origin.lon.toFixed(4)}`}</div>
@ -374,7 +380,13 @@
padding: 12px; min-width: 240px; max-width: 340px; font: 0.8rem system-ui, sans-serif; color: #0f172a;
box-sizing: border-box; max-height: 100%; overflow-y: auto;
}
.dir-head { font-weight: 700; margin-bottom: 8px; }
.dir-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dir-head { font-weight: 700; margin: 0; }
.dir-x {
width: 26px; height: 26px; border: none; background: none; cursor: pointer;
font-size: 20px; line-height: 1; color: #64748b; border-radius: 6px; text-align: center; padding: 0; flex: none;
}
.dir-x:hover { background: #f1f5f9; color: #0f172a; }
.point { padding: 6px 8px; background: #f1f5f9; border-radius: 6px; margin: 4px 0; display: flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.a { background: #16a34a; } .dot.b { background: #dc2626; }

9
src/lib/components/LocationDialog.svelte
View File

@ -61,6 +61,7 @@
<button class="ctx-backdrop" aria-label="Close" onclick={() => onClose()}></button>
<div class="ctx" role="dialog" aria-label="Location" tabindex="-1" style="left:{LEFT}px; top:{TOP}px" onclick={(e) => e.stopPropagation()} onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}>
<div class="ctx-arrow" style="left:{Math.min(Math.max(x - LEFT, 10), 268)}px"></div>
<button class="ctx-x" aria-label="Close" onclick={() => onClose()}>×</button>
{#if isPoint}
<div class="ctx-title">{title}</div>
@ -132,7 +133,13 @@
position: absolute; top: -8px; width: 16px; height: 16px; background: #fff;
transform: translateX(-50%) rotate(45deg); border-radius: 3px; box-shadow: -2px -2px 6px rgba(0,0,0,.08);
}
.ctx-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 2px; }
.ctx-x {
position: absolute; top: 6px; right: 8px; width: 24px; height: 24px;
border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1;
color: #64748b; border-radius: 6px; text-align: center; padding: 0;
}
.ctx-x:hover { background: #f1f5f9; color: #0f172a; }
.ctx-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 2px; padding-right: 20px; }
.ctx-coords { color: #94a3b8; font-size: 0.72rem; margin-bottom: 8px; }
.ctx-id { color: #8b5cf6; font-size: 0.7rem; font-weight: 600; margin-bottom: 6px; }
.ctx-note { color: #64748b; font-size: 0.75rem; margin-bottom: 8px; }

14
src/lib/components/MapView.svelte
View File

@ -632,6 +632,7 @@
savedPoints={savedPointsList}
destination={destination}
onDestinationChange={(d) => (destination = d)}
onClose={() => (showDirections = false)}
progress={routeProgress}
computing={computingRoute}
{runRoute}
@ -645,7 +646,10 @@
onclick={() => (showPrefs = false)}
onkeydown={(e) => { if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); showPrefs = false; } }}>
<div class="pref-dialog" role="dialog" aria-label="Preferences" tabindex="-1" onclick={(e) => e.stopPropagation()}>
<div class="pref-title">Preferences</div>
<div class="pref-title-row">
<div class="pref-title">Preferences</div>
<button class="pref-x" aria-label="Close preferences" onclick={() => (showPrefs = false)}>×</button>
</div>
<div class="pref-row">
<span class="pref-label">Unit system</span>
<select bind:value={$prefs.system}>
@ -769,7 +773,13 @@
box-shadow: 0 12px 40px rgba(0,0,0,.35); width: 300px; max-width: 90vw;
padding: 18px 20px; font-family: system-ui, sans-serif;
}
.pref-title { font-weight: 700; font-size: 1rem; margin-bottom: 12px; }
.pref-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pref-title { font-weight: 700; font-size: 1rem; margin-bottom: 0; }
.pref-x {
width: 26px; height: 26px; border: none; background: none; cursor: pointer;
font-size: 20px; line-height: 1; color: #64748b; border-radius: 6px; text-align: center; padding: 0;
}
.pref-x:hover { background: #f1f5f9; color: #0f172a; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; }
.pref-label { font-size: 0.82rem; color: #475569; }
.pref-row select {