[fix](trx-frontend-http): tidy up the map's filter bar
CI / lint (pull_request) Successful in 2m21s
CI / test (pull_request) Successful in 8m7s
CI / frontend (push) Successful in 2m57s
CI / reuse (push) Successful in 3s
CI / frontend (pull_request) Successful in 3m47s
CI / reuse (pull_request) Successful in 3s
CI / lint (push) Successful in 2m16s
CI / test (push) Successful in 7m19s
CI / lint (pull_request) Successful in 2m21s
CI / test (pull_request) Successful in 8m7s
CI / frontend (push) Successful in 2m57s
CI / reuse (push) Successful in 3s
CI / frontend (pull_request) Successful in 3m47s
CI / reuse (pull_request) Successful in 3s
CI / lint (push) Successful in 2m16s
CI / test (push) Successful in 7m19s
The bar explained itself in prose: "All bands visible by default" sat between the chips and the next group, taking width the bar could not spare and reading as a stray line of text. An "All" chip says the same thing in a chip's width and gives the selection somewhere to be undone. Band chips also came up dimmed at the very moment every band was on the map -- an empty selection is no filter at all, so nothing is dimmed until something is picked. The path toggles drop their "On"/"Off" suffix, which cost most of a row and only repeated what their own highlight already said; state moves to aria-pressed and the tooltip. The rest is alignment. The rule dividing the buttons from the filters is drawn on the button block's edge, and a centred block left it floating as a stub beside a two-row bar; stacked, it lay down the left of a block that sits underneath. The labels sat at their natural widths, so each row's first control started somewhere different, and the two pairs of phase buttons differed in width, so the groups after them missed each other by four pixels. One gutter for every label, one width for both pairs, and the search field moved last where it can take the room the fixed-width groups leave. The map layout test now covers the chips, the divider's height and the rows' shared start. Signed-off-by: Stan Grams <sjg@haxx.space>
This commit was merged in pull request #41.
This commit is contained in:
@@ -62,6 +62,7 @@ var mapWindow = window;
|
||||
const mapMarkers = /* @__PURE__ */ new Set();
|
||||
const DEFAULT_MAP_SOURCE_FILTER = { ais: true, vdes: true, aprs: true, bookmark: false, ft8: true, ft4: true, ft2: true, wspr: true, sat: false };
|
||||
const mapFilter = { ...DEFAULT_MAP_SOURCE_FILTER };
|
||||
const MAP_FILTER_ALL_KEY = "__all";
|
||||
const mapLocatorFilter = { phase: "band", bands: /* @__PURE__ */ new Set() };
|
||||
let mapSearchFilter = "";
|
||||
let mapRigFilter = "";
|
||||
@@ -838,38 +839,36 @@ var mapWindow = window;
|
||||
container.innerHTML = `<span class="map-locator-empty">No ${kind === "band" ? "bands" : "sources"} available</span>`;
|
||||
return;
|
||||
}
|
||||
let helperText = "";
|
||||
const noun = kind === "band" ? "bands" : "sources";
|
||||
const sourceKeys = kind === "source" ? Object.keys(DEFAULT_MAP_SOURCE_FILTER) : [];
|
||||
const noneSelected = kind === "source" && sourceKeys.every((k) => !mapFilter[k]);
|
||||
if (kind === "source") {
|
||||
if (noneSelected) {
|
||||
helperText = "All sources visible — click to filter";
|
||||
}
|
||||
} else if (!(selectedSet instanceof Set) || selectedSet.size === 0) {
|
||||
helperText = `All ${kind === "band" ? "bands" : "sources"} visible by default`;
|
||||
}
|
||||
const showingAll = kind === "source" ? sourceKeys.every((k) => !mapFilter[k]) : !(selectedSet instanceof Set) || selectedSet.size === 0;
|
||||
const allChip = document.createElement("button");
|
||||
allChip.type = "button";
|
||||
allChip.className = "map-locator-chip map-locator-chip-all";
|
||||
if (showingAll) allChip.classList.add("is-active");
|
||||
allChip.dataset.filterKind = kind;
|
||||
allChip.dataset.filterKey = MAP_FILTER_ALL_KEY;
|
||||
allChip.setAttribute("aria-pressed", showingAll ? "true" : "false");
|
||||
allChip.title = showingAll ? `All ${noun} shown` : `Show all ${noun}`;
|
||||
allChip.innerHTML = `<span class="map-locator-chip-text">All</span>`;
|
||||
container.appendChild(allChip);
|
||||
for (const item of items) {
|
||||
const btn = document.createElement("button");
|
||||
btn.type = "button";
|
||||
btn.className = "map-locator-chip";
|
||||
const isActive = kind === "source" ? !!mapFilter[item.key] : !!selectedSet?.has(item.key);
|
||||
if (kind === "source" && noneSelected) {
|
||||
if (showingAll) {
|
||||
btn.classList.add("is-default");
|
||||
} else if (!isActive) {
|
||||
btn.classList.add("is-inactive");
|
||||
}
|
||||
btn.setAttribute("aria-pressed", !showingAll && isActive ? "true" : "false");
|
||||
btn.dataset.filterKind = kind;
|
||||
btn.dataset.filterKey = item.key;
|
||||
btn.style.setProperty("--chip-color", item.color);
|
||||
btn.innerHTML = `<span class="map-locator-chip-text">${escapeMapHtml(item.label)}</span>`;
|
||||
container.appendChild(btn);
|
||||
}
|
||||
if (helperText) {
|
||||
const hint = document.createElement("span");
|
||||
hint.className = "map-locator-empty";
|
||||
hint.textContent = helperText;
|
||||
container.appendChild(hint);
|
||||
}
|
||||
}
|
||||
function renderMapLocatorPhaseRow(container, phase) {
|
||||
if (!container) return;
|
||||
@@ -977,11 +976,10 @@ var mapWindow = window;
|
||||
renderMapLocatorLegend(mapLocatorFilter.phase, sourceItems, bandItems);
|
||||
if (!phaseEl || !choiceEl || !choiceLabelEl) return;
|
||||
renderMapLocatorPhaseRow(phaseEl, mapLocatorFilter.phase);
|
||||
choiceLabelEl.textContent = "Show";
|
||||
if (mapLocatorFilter.phase === "band") {
|
||||
choiceLabelEl.textContent = "Visible Bands";
|
||||
renderMapLocatorChipRow(choiceEl, bandItems, mapLocatorFilter.bands, "band");
|
||||
} else {
|
||||
choiceLabelEl.textContent = "Visible Sources";
|
||||
renderMapLocatorChipRow(choiceEl, sourceItems, null, "source");
|
||||
}
|
||||
syncLocatorMarkerStyles();
|
||||
@@ -1533,7 +1531,13 @@ var mapWindow = window;
|
||||
const kind = String(chip.dataset.filterKind || "");
|
||||
const key = String(chip.dataset.filterKey || "");
|
||||
if (!key) return;
|
||||
if (kind === "source" && Object.prototype.hasOwnProperty.call(mapFilter, key)) {
|
||||
if (key === MAP_FILTER_ALL_KEY) {
|
||||
if (kind === "source") {
|
||||
for (const srcKey of Object.keys(DEFAULT_MAP_SOURCE_FILTER)) mapFilter[srcKey] = false;
|
||||
} else {
|
||||
mapLocatorFilter.bands.clear();
|
||||
}
|
||||
} else if (kind === "source" && Object.prototype.hasOwnProperty.call(mapFilter, key)) {
|
||||
const sourceKey = key;
|
||||
mapFilter[sourceKey] = !mapFilter[sourceKey];
|
||||
const srcKeys = Object.keys(DEFAULT_MAP_SOURCE_FILTER);
|
||||
@@ -2148,14 +2152,16 @@ var mapWindow = window;
|
||||
function updateMapContactPathsToggle() {
|
||||
const btn = mapEl("map-contact-paths-toggle");
|
||||
if (!btn) return;
|
||||
btn.textContent = mapDecodeContactPathsEnabled ? "Contact Paths On" : "Contact Paths Off";
|
||||
btn.classList.toggle("is-active", mapDecodeContactPathsEnabled);
|
||||
btn.setAttribute("aria-pressed", mapDecodeContactPathsEnabled ? "true" : "false");
|
||||
btn.title = mapDecodeContactPathsEnabled ? "Directed decode paths are drawn when the target locator is known" : "Directed decode paths are hidden";
|
||||
}
|
||||
function updateMapP2pPathsToggle() {
|
||||
const btn = mapEl("map-p2p-paths-toggle");
|
||||
if (!btn) return;
|
||||
btn.textContent = mapP2pRadioPathsEnabled ? "TRX Paths On" : "TRX Paths Off";
|
||||
btn.classList.toggle("is-active", mapP2pRadioPathsEnabled);
|
||||
btn.setAttribute("aria-pressed", mapP2pRadioPathsEnabled ? "true" : "false");
|
||||
btn.title = mapP2pRadioPathsEnabled ? "TRX paths are drawn from a station popup" : "TRX paths are hidden";
|
||||
}
|
||||
function scheduleDecodeMapMaintenance() {
|
||||
if (C.decodeHistoryMapRenderingDeferred()) {
|
||||
|
||||
Reference in New Issue
Block a user