sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix](trx-frontend-http): move the map's fullscreen and filter toggles into the bar

Browse Source 
Fullscreen and Hide Filters floated in their own block over the map's
top-right corner, separate from the filter bar they sit beside.

Put them at the right-hand end of the bar, behind a separator. What made
this awkward before is that Hide Filters cannot live inside the thing it
hides, so the collapse now applies to the filters alone: the bar keeps its
two controls and shrinks to them at the map's right edge, leaving the whole
map visible and the way back one click away.

Fixes #38

Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
sjg
2026-08-05 19:34:09 +02:00
parent 08005c5c07
commit 88d04253ca
5 changed files with 119 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/map-core.js
+2 -1
View File
@@ -1335,7 +1335,8 @@ var mapWindow = window;
function applyMapOverlayPanelVisibility() {
const panel = document.querySelector("#map-stage .map-overlay-panel");
if (!panel) return;
panel.classList.toggle("is-hidden", !mapOverlayPanelVisible);
panel.classList.toggle("filters-hidden", !mapOverlayPanelVisible);
panel.querySelector(".map-overlay-filters")?.classList.toggle("is-hidden", !mapOverlayPanelVisible);
}
function updateMapOverlayToggleButton() {
const btn = mapEl("map-overlay-toggle-btn");
src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+42 -40
View File
@@ -1001,48 +1001,50 @@ SPDX-License-Identifier: GPL-2.0-or-later
<template id="tmpl-map">
<div id="map-stage">
<div class="map-overlay-panel">
<div class="map-locator-filter-group">
<span class="map-locator-filter-label">Filter by</span>
<div id="map-locator-phase" class="map-locator-phase-row"></div>
</div>
<div class="map-locator-filter-group">
<span class="map-locator-filter-label" id="map-locator-choice-label">Show</span>
<div id="map-locator-choice-filter" class="map-locator-chip-row"></div>
</div>
<div class="map-locator-filter-group">
<span class="map-locator-filter-label">Rig</span>
<select id="map-rig-filter" class="map-history-select" aria-label="Filter by rig">
<option value="">All</option>
</select>
</div>
<div class="map-locator-filter-group map-filter-grow">
<span class="map-locator-filter-label">Search</span>
<input type="text" id="map-search-filter" class="map-search-input" placeholder="Callsign, MMSI, locator, message..." />
</div>
<div class="map-locator-filter-group">
<span class="map-locator-filter-label">History</span>
<select id="map-history-limit" class="map-history-select" aria-label="Map history limit">
<option value="15">15 min</option>
<option value="30">30 min</option>
<option value="60">1 hr</option>
<option value="180">3 hrs</option>
<option value="360">6 hrs</option>
<option value="720">12 hrs</option>
<option value="1440">24 hrs</option>
</select>
</div>
<div class="map-locator-filter-group">
<span class="map-locator-filter-label">Paths</span>
<div class="map-locator-phase-row">
<button type="button" id="map-p2p-paths-toggle" class="map-locator-phase-btn" title="TRX paths are drawn from a station popup">TRX Paths On</button>
<button type="button" id="map-contact-paths-toggle" class="map-locator-phase-btn" title="Directed decode paths are drawn when the target locator is known">Contact Paths On</button>
<span class="map-paths-hint">TRX paths on popup, directed decode paths when target locator is known</span>
<div class="map-overlay-filters">
<div class="map-locator-filter-group">
<span class="map-locator-filter-label">Filter by</span>
<div id="map-locator-phase" class="map-locator-phase-row"></div>
</div>
<div class="map-locator-filter-group">
<span class="map-locator-filter-label" id="map-locator-choice-label">Show</span>
<div id="map-locator-choice-filter" class="map-locator-chip-row"></div>
</div>
<div class="map-locator-filter-group">
<span class="map-locator-filter-label">Rig</span>
<select id="map-rig-filter" class="map-history-select" aria-label="Filter by rig">
<option value="">All</option>
</select>
</div>
<div class="map-locator-filter-group map-filter-grow">
<span class="map-locator-filter-label">Search</span>
<input type="text" id="map-search-filter" class="map-search-input" placeholder="Callsign, MMSI, locator, message..." />
</div>
<div class="map-locator-filter-group">
<span class="map-locator-filter-label">History</span>
<select id="map-history-limit" class="map-history-select" aria-label="Map history limit">
<option value="15">15 min</option>
<option value="30">30 min</option>
<option value="60">1 hr</option>
<option value="180">3 hrs</option>
<option value="360">6 hrs</option>
<option value="720">12 hrs</option>
<option value="1440">24 hrs</option>
</select>
</div>
<div class="map-locator-filter-group">
<span class="map-locator-filter-label">Paths</span>
<div class="map-locator-phase-row">
<button type="button" id="map-p2p-paths-toggle" class="map-locator-phase-btn" title="TRX paths are drawn from a station popup">TRX Paths On</button>
<button type="button" id="map-contact-paths-toggle" class="map-locator-phase-btn" title="Directed decode paths are drawn when the target locator is known">Contact Paths On</button>
<span class="map-paths-hint">TRX paths on popup, directed decode paths when target locator is known</span>
</div>
</div>
</div>
</div>
<div class="map-corner-controls">
<button type="button" id="map-fullscreen-btn" class="map-fullscreen-btn">Fullscreen</button>
<button type="button" id="map-overlay-toggle-btn" class="map-overlay-toggle-btn">Hide Filters</button>
<div class="map-overlay-actions">
<button type="button" id="map-fullscreen-btn" class="map-fullscreen-btn">Fullscreen</button>
<button type="button" id="map-overlay-toggle-btn" class="map-overlay-toggle-btn">Hide Filters</button>
</div>
</div>
<div id="map-band-legend" class="map-band-legend" aria-label="Band color legend"></div>
<div id="aprs-map"></div>
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+36 -20
View File
@@ -2558,19 +2558,20 @@ button.map-qso-card:focus-visible {
}
/* A toolbar across the top of the map rather than a panel parked in a corner:
it leaves the map itself unobscured, and the bottom-left band legend keeps
its place. It stops short of the corner controls, which stay outside it --
the button that hides the filters cannot live inside the thing it hides. */
its place. Fullscreen and the filter toggle ride at its right-hand end;
only the filters themselves collapse, so the button that hides them is
still there to bring them back. */
.map-overlay-panel {
position: absolute;
top: 0.7rem;
/* Clear of Leaflet's zoom buttons, which draw over the top-left corner. */
left: 3.4rem;
right: 9.6rem;
right: 0.7rem;
z-index: 410;
display: flex;
flex-flow: row wrap;
flex-flow: row nowrap;
align-items: center;
gap: 0.35rem 0.5rem;
gap: 0.5rem;
width: auto;
max-height: calc(100% - 1.4rem);
padding: 0.45rem 0.6rem;
@@ -2584,6 +2585,32 @@ button.map-qso-card:focus-visible {
overflow: auto;
transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}
.map-overlay-filters {
display: flex;
flex: 1 1 auto;
flex-flow: row wrap;
align-items: center;
gap: 0.35rem 0.5rem;
min-width: 0;
}
.map-overlay-filters.is-hidden {
display: none;
}
/* With the filters collapsed the bar has no reason to span the map. */
.map-overlay-panel.filters-hidden {
left: auto;
}
.map-overlay-actions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 0.4rem;
}
/* Set off from the filters, but only while there are filters to set off. */
.map-overlay-panel:not(.filters-hidden) .map-overlay-actions {
padding-left: 0.5rem;
border-left: 1px solid color-mix(in srgb, var(--border-light) 55%, transparent);
}
.map-overlay-panel .map-locator-filter-group {
flex: 0 1 auto;
/* The label stays beside its control; only the bar itself wraps. */
@@ -2628,16 +2655,6 @@ button.map-qso-card:focus-visible {
transform: translateY(0.25rem);
pointer-events: none;
}
.map-corner-controls {
position: absolute;
top: 0.7rem;
right: 0.7rem;
z-index: 410;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.4rem;
}
.map-fullscreen-btn {
display: inline-flex;
align-items: center;
@@ -4166,7 +4183,7 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
top: 0.55rem;
left: 3.25rem;
right: 0.55rem;
flex-direction: column;
flex-flow: column nowrap;
align-items: stretch;
width: auto;
max-height: min(16.5rem, calc(100% - 1.1rem));
@@ -4179,15 +4196,14 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
padding-right: 0;
border-right: 0;
}
.map-overlay-actions {
justify-content: flex-end;
}
.map-overlay-panel .map-paths-hint {
display: block;
font-size: 0.75rem;
color: var(--text-muted);
}
.map-corner-controls {
top: 0.55rem;
right: 0.55rem;
}
.map-band-legend {
left: 0.55rem;
bottom: 0.55rem;
src/trx-client/trx-frontend/trx-frontend-http/frontend/src/map-core.ts
+4 -1
View File
@@ -1637,7 +1637,10 @@ const mapWindow = window as unknown as MapWindow;
function applyMapOverlayPanelVisibility() {
const panel = document.querySelector("#map-stage .map-overlay-panel");
if (!panel) return;
panel.classList.toggle("is-hidden", !mapOverlayPanelVisible);
// Only the filters collapse. The bar itself stays, because it carries the
// button that brings them back.
panel.classList.toggle("filters-hidden", !mapOverlayPanelVisible);
panel.querySelector(".map-overlay-filters")?.classList.toggle("is-hidden", !mapOverlayPanelVisible);
}
function updateMapOverlayToggleButton() {
src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/spectrum-layout.mjs
+35 -12
View File
@@ -225,9 +225,11 @@ try {
// The map's filter panel is a bar across the top of the map, not a window
// sitting on it: it has to stay one or two rows tall, span most of the width,
// and keep clear of the things that share the map's corners — Leaflet's zoom
// buttons, the Fullscreen/Hide Filters controls, and the band legend. A panel
// that grew a column would cover the map it filters.
// and keep clear of what shares the map's corners — Leaflet's zoom buttons and
// the band legend. A panel that grew a column would cover the map it filters.
// Fullscreen and the filter toggle ride at the bar's right-hand end, so only
// the filters collapse: the bar itself has to survive Hide Filters, or there
// is nothing left to click to bring them back.
const mapFixture = await startWebFixture({ spectrum: true });
const mapView = await startBrowser(chromium);
try {
@@ -242,7 +244,6 @@ try {
const panel = document.querySelector(".map-overlay-panel");
const stage = box(document.getElementById("map-stage"));
const zoom = box(document.querySelector("#aprs-map .leaflet-control-zoom"));
const corner = box(document.querySelector(".map-corner-controls"));
const legend = box(document.getElementById("map-band-legend"));
const panelBox = box(panel);
const hits = (a, b) => !!a && !!b
@@ -252,8 +253,10 @@ try {
height: Math.round(panelBox.height),
outsideStage: panelBox.right > stage.right + 1 || panelBox.bottom > stage.bottom + 1,
hitsZoom: hits(panelBox, zoom),
hitsCorner: hits(panelBox, corner),
hitsLegend: hits(panelBox, legend),
// Both controls belong to the bar now, not to a floating corner block.
actionsInBar: [...panel.querySelectorAll(".map-overlay-actions button")]
.map((button) => button.id).join(","),
clipped: panel.scrollWidth > panel.clientWidth + 1 || panel.scrollHeight > panel.clientHeight + 1,
};
});
@@ -261,21 +264,41 @@ try {
assert.ok(bar.height <= 140, `the filter bar is ${bar.height}px tall at ${width}px, not a bar`);
assert.equal(bar.outsideStage, false, `the filter bar runs off the map at ${width}px`);
assert.equal(bar.hitsZoom, false, `the filter bar covers the zoom buttons at ${width}px`);
assert.equal(bar.hitsCorner, false, `the filter bar covers the map controls at ${width}px`);
assert.equal(bar.actionsInBar, "map-fullscreen-btn,map-overlay-toggle-btn",
`the bar carries "${bar.actionsInBar}" at ${width}px`);
assert.equal(bar.hitsLegend, false, `the filter bar covers the band legend at ${width}px`);
assert.equal(bar.clipped, false, `the filter bar is clipping its own controls at ${width}px`);
}
// Hiding it still works, and gives the whole map back.
// Hiding gives the map back, but leaves the bar itself — collapsed to its
// two controls at the right-hand edge — so the filters can be brought back.
await mapView.page.locator("#map-overlay-toggle-btn").click();
await mapView.page.waitForTimeout(400);
const toggled = await mapView.page.evaluate(() => ({
hidden: document.querySelector(".map-overlay-panel").classList.contains("is-hidden"),
label: document.getElementById("map-overlay-toggle-btn").textContent.trim(),
}));
assert.equal(toggled.hidden, true, "the filter bar stayed up after Hide Filters");
const toggled = await mapView.page.evaluate(() => {
const panel = document.querySelector(".map-overlay-panel");
const stage = document.getElementById("map-stage").getBoundingClientRect();
const panelBox = panel.getBoundingClientRect();
const visible = (id) => document.getElementById(id).getBoundingClientRect().width > 0;
return {
filtersHidden: panel.querySelector(".map-overlay-filters").classList.contains("is-hidden"),
widthPct: Math.round((panelBox.width / stage.width) * 100),
rightGap: Math.round(stage.right - panelBox.right),
label: document.getElementById("map-overlay-toggle-btn").textContent.trim(),
togglesVisible: visible("map-fullscreen-btn") && visible("map-overlay-toggle-btn"),
};
});
assert.equal(toggled.filtersHidden, true, "the filters stayed up after Hide Filters");
assert.equal(toggled.togglesVisible, true, "Hide Filters took its own button down with it");
assert.ok(toggled.widthPct < 30, `the collapsed bar still covers ${toggled.widthPct}% of the map`);
assert.ok(toggled.rightGap < 30, `the collapsed bar sits ${toggled.rightGap}px from the map's edge`);
assert.equal(toggled.label, "Show Filters", `the toggle still reads "${toggled.label}"`);
await mapView.page.locator("#map-overlay-toggle-btn").click();
await mapView.page.waitForTimeout(400);
const restored = await mapView.page.evaluate(() =>
!document.querySelector(".map-overlay-filters").classList.contains("is-hidden"));
assert.equal(restored, true, "Show Filters did not bring the filters back");
assert.deepEqual(mapView.runtimeErrors, []);
} finally {
await mapView.browser.close();