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

[feat](trx-frontend): add signal split slider and align spectrum side controls

Browse Source 
Add a right-side slider to control the waterfall/waveform split and\npersist the selected ratio locally.\n\nRework spectrum height layout so manual resize adjusts total plot height\nwhile split controls the overview/spectrum ratio.\n\nKeep center-frequency arrows and side bookmark stacks vertically centered\nwithin the full spectrum view container.\n\nCo-authored-by: Codex <codex@openai.com>

Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
Stan Grams
2026-03-05 18:17:34 +01:00
parent 4c69e2bcde
commit 083d009aa5
3 changed files with 152 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+55 -2
View File
@@ -529,6 +529,43 @@ small { color: var(--text-muted); }
gap: 0;
margin-bottom: 0.9rem;
}
#signal-split-control {
position: absolute;
top: 50%;
right: 0.32rem;
transform: translateY(-50%);
z-index: 9;
display: none;
flex-direction: column;
align-items: center;
gap: 0.3rem;
padding: 0.32rem 0.25rem;
border: 1px solid color-mix(in srgb, var(--border-light) 78%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--card-bg) 78%, transparent);
backdrop-filter: blur(8px) saturate(125%);
-webkit-backdrop-filter: blur(8px) saturate(125%);
box-shadow:
0 8px 16px color-mix(in srgb, #000000 14%, transparent),
inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}
#signal-split-slider {
writing-mode: vertical-lr;
direction: rtl;
width: 0.95rem;
height: 7.2rem;
margin: 0;
accent-color: var(--accent-yellow);
cursor: ns-resize;
}
#signal-split-value {
min-width: 2.9rem;
text-align: center;
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text-muted);
}
#signal-overlay-canvas {
position: absolute;
top: 0;
@@ -1805,6 +1842,22 @@ button:focus-visible, input:focus-visible, select:focus-visible {
.header-rig-switch { width: auto; justify-content: flex-end; }
.header-rig-switch select { min-width: 6.5rem; }
.overview-toolbar { top: calc(var(--header-waterfall-overlap) + 0.15rem); }
#signal-split-control {
top: 0.35rem;
right: 0.35rem;
transform: none;
flex-direction: row;
gap: 0.4rem;
border-radius: 0.7rem;
padding: 0.28rem 0.42rem;
}
#signal-split-slider {
writing-mode: horizontal-tb;
direction: ltr;
width: 5.5rem;
height: 1rem;
cursor: ew-resize;
}
.controls-row { grid-template-columns: 1fr auto; }
.controls-col-wfm { grid-column: 1 / -1; }
.controls-col-power { grid-column: 1 / -1; }
@@ -2132,7 +2185,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
}
.spectrum-edge-shift {
position: absolute;
top: calc(var(--spectrum-plot-height) / 2);
top: 50%;
transform: translateY(-50%);
z-index: 8;
width: 1.7rem;
@@ -2261,7 +2314,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
}
.spectrum-bookmark-side {
position: absolute;
top: calc(var(--spectrum-plot-height) / 2);
top: 50%;
transform: translateY(-50%);
z-index: 7;
width: 7.25rem;