fix(ui): simplify operator layout picker
CI / lint (push) Failing after 1s
CI / test (push) Failing after 0s
CI / reuse (push) Failing after 0s
CI / lint (pull_request) Failing after 2s
CI / test (pull_request) Failing after 2s
CI / reuse (pull_request) Failing after 1s

This commit was merged in pull request #19.
This commit is contained in:
sjg
2026-08-01 11:25:32 +02:00
parent 53736ef750
commit d9fc623ef4
2 changed files with 6 additions and 26 deletions
@@ -2949,8 +2949,7 @@ button.is-active {
#ptt-btn.is-active { background: var(--accent-red) !important; border-color: var(--accent-red) !important; color: white !important; } #ptt-btn.is-active { background: var(--accent-red) !important; border-color: var(--accent-red) !important; color: white !important; }
.is-busy { cursor: progress !important; opacity: 0.68; } .is-busy { cursor: progress !important; opacity: 0.68; }
.operator-layout-picker { .operator-layout-picker {
display: inline-grid; display: inline-flex;
grid-template-columns: auto auto;
align-items: center; align-items: center;
min-height: 2rem; min-height: 2rem;
padding-left: 0.6rem; padding-left: 0.6rem;
@@ -2980,17 +2979,6 @@ button.is-active {
} }
.operator-layout-picker:focus-within { border-color: var(--accent-green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-green) 20%, transparent); } .operator-layout-picker:focus-within { border-color: var(--accent-green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-green) 20%, transparent); }
.operator-layout-picker select:focus-visible { outline: 0; } .operator-layout-picker select:focus-visible { outline: 0; }
.operator-layout-description {
grid-column: 1 / -1;
max-width: 22rem;
padding: 0 0.55rem 0.35rem 0;
color: var(--text-muted);
font-size: var(--fs-xs);
font-weight: 500;
letter-spacing: 0;
line-height: 1.35;
text-transform: none;
}
.advanced-radio-controls { .advanced-radio-controls {
margin-top: var(--space-3); margin-top: var(--space-3);
border: 1px solid color-mix(in srgb, var(--border-light) 75%, transparent); border: 1px solid color-mix(in srgb, var(--border-light) 75%, transparent);
@@ -126,10 +126,10 @@
}; };
const layouts = { const layouts = {
compact: { label: "Compact", description: "Essential tuning and audio controls", advanced: false, preferredTab: "main" }, compact: { label: "Compact", advanced: false, preferredTab: "main" },
broadcast: { label: "Broadcast", description: "WFM, RDS, stereo and interference monitoring", unavailable: "Broadcast requires an enumerated WFM-capable receiver", advanced: false, preferredTab: "main", capability: "broadcast" }, broadcast: { label: "Broadcast", unavailable: "Broadcast requires an enumerated WFM-capable receiver", advanced: false, preferredTab: "main", capability: "broadcast" },
digital: { label: "Digital", description: "Decoder status, messages and background decoding", unavailable: "Digital requires a compatible rig mode and an available decoder", advanced: false, preferredTab: "digital-modes", capability: "digital" }, digital: { label: "Digital", unavailable: "Digital requires a compatible rig mode and an available decoder", advanced: false, preferredTab: "digital-modes", capability: "digital" },
full: { label: "Full controls", description: "Every control supported by the selected rig", advanced: true, preferredTab: "main" }, full: { label: "Full controls", advanced: true, preferredTab: "main" },
}; };
const layoutCapabilities = { broadcast: false, digital: false }; const layoutCapabilities = { broadcast: false, digital: false };
let activeRigId = null; let activeRigId = null;
@@ -151,12 +151,6 @@
return unavailable.length ? `Unavailable: ${unavailable.map(layout => layout.unavailable).join("; ")}.` : ""; return unavailable.length ? `Unavailable: ${unavailable.map(layout => layout.unavailable).join("; ")}.` : "";
} }
function updateLayoutDescription(layout) {
const description = document.getElementById("operator-layout-description");
if (!description) return;
description.textContent = [layout.description, unavailableLayoutMessage()].filter(Boolean).join(" · ");
}
function refreshLayoutOptions() { function refreshLayoutOptions() {
const select = document.getElementById("operator-layout-select"); const select = document.getElementById("operator-layout-select");
if (!select) return; if (!select) return;
@@ -170,7 +164,6 @@
select.value = available ? previous : "compact"; select.value = available ? previous : "compact";
if (!available && previous !== "compact") api.applyLayout("compact", { persist: false }); if (!available && previous !== "compact") api.applyLayout("compact", { persist: false });
select.title = unavailableLayoutMessage(); select.title = unavailableLayoutMessage();
updateLayoutDescription(layouts[select.value] || layouts.compact);
} }
api.setLayoutCapabilities = function setLayoutCapabilities(capabilities = {}) { api.setLayoutCapabilities = function setLayoutCapabilities(capabilities = {}) {
@@ -202,7 +195,6 @@
if (options.persist !== false) localStorage.setItem(layoutStorageKey(), document.body.dataset.operatorLayout); if (options.persist !== false) localStorage.setItem(layoutStorageKey(), document.body.dataset.operatorLayout);
const details = document.getElementById("advanced-radio-controls"); const details = document.getElementById("advanced-radio-controls");
if (details) details.open = layout.advanced; if (details) details.open = layout.advanced;
updateLayoutDescription(layout);
if (options.navigate && typeof window.navigateToTab === "function") { if (options.navigate && typeof window.navigateToTab === "function") {
window.navigateToTab(layout.preferredTab); window.navigateToTab(layout.preferredTab);
} }
@@ -213,7 +205,7 @@
if (actions && !document.getElementById("operator-layout-select")) { if (actions && !document.getElementById("operator-layout-select")) {
const label = document.createElement("label"); const label = document.createElement("label");
label.className = "operator-layout-picker"; label.className = "operator-layout-picker";
label.innerHTML = '<span class="visually-hidden">Operator layout</span><select id="operator-layout-select" aria-label="Operator layout" aria-describedby="operator-layout-description"></select><span id="operator-layout-description" class="operator-layout-description"></span>'; label.innerHTML = '<span class="visually-hidden">Operator layout</span><select id="operator-layout-select" aria-label="Operator layout"></select>';
const select = label.querySelector("select"); const select = label.querySelector("select");
const savedLayout = savedLayoutName(); const savedLayout = savedLayoutName();
actions.insertBefore(label, actions.firstChild); actions.insertBefore(label, actions.firstChild);