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

[fix](trx-frontend): improve spectrum resize interaction

Browse Source 
Make the spectrum resize grip easier to use and style it closer to\nexisting controls.\n\nKeep auto-max behavior by default while allowing manual drag to\nresize beyond viewport fill, enforcing only the minimum height.\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:08:16 +01:00
parent a905fa9678
commit 4c69e2bcde
2 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+10 -8
View File
@@ -2012,13 +2012,9 @@ function updateSpectrumAutoHeight() {
} }
const bounds = spectrumHeightBoundsPx(tabMainEl, contentEl, spectrumCanvasEl); const bounds = spectrumHeightBoundsPx(tabMainEl, contentEl, spectrumCanvasEl);
const requestedSpectrumHeight = spectrumManualPlotHeightPx == null const nextSpectrumHeight = spectrumManualPlotHeightPx == null
? bounds.max ? bounds.max
: spectrumManualPlotHeightPx; : Math.max(bounds.min, Math.round(spectrumManualPlotHeightPx));
const nextSpectrumHeight = Math.max(
bounds.min,
Math.min(bounds.max, Math.round(requestedSpectrumHeight)),
);
if (spectrumManualPlotHeightPx != null) { if (spectrumManualPlotHeightPx != null) {
spectrumManualPlotHeightPx = nextSpectrumHeight; spectrumManualPlotHeightPx = nextSpectrumHeight;
} }
@@ -2042,9 +2038,12 @@ function beginSpectrumResize(clientY) {
const spectrumPanelEl = document.getElementById("spectrum-panel"); const spectrumPanelEl = document.getElementById("spectrum-panel");
if (!tabMainEl || !contentEl || !spectrumCanvasEl || !spectrumPanelEl) return false; if (!tabMainEl || !contentEl || !spectrumCanvasEl || !spectrumPanelEl) return false;
if (getComputedStyle(spectrumPanelEl).display === "none") return false; if (getComputedStyle(spectrumPanelEl).display === "none") return false;
const bounds = spectrumHeightBoundsPx(tabMainEl, contentEl, spectrumCanvasEl);
const startHeight = Math.max(bounds.min, currentSpectrumHeightPx(spectrumCanvasEl));
spectrumResizeState = { spectrumResizeState = {
startY: clientY, startY: clientY,
startHeight: currentSpectrumHeightPx(spectrumCanvasEl), startHeight,
minHeight: bounds.min,
}; };
document.body.classList.add("spectrum-resizing"); document.body.classList.add("spectrum-resizing");
return true; return true;
@@ -2053,7 +2052,10 @@ function beginSpectrumResize(clientY) {
function updateSpectrumResize(clientY) { function updateSpectrumResize(clientY) {
if (!spectrumResizeState) return; if (!spectrumResizeState) return;
const deltaY = clientY - spectrumResizeState.startY; const deltaY = clientY - spectrumResizeState.startY;
spectrumManualPlotHeightPx = spectrumResizeState.startHeight + deltaY; spectrumManualPlotHeightPx = Math.max(
spectrumResizeState.minHeight,
Math.round(spectrumResizeState.startHeight + deltaY),
);
updateSpectrumAutoHeight(); updateSpectrumAutoHeight();
} }
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+9 -5
View File
@@ -2191,24 +2191,28 @@ button:focus-visible, input:focus-visible, select:focus-visible {
} }
#spectrum-size-grip { #spectrum-size-grip {
position: relative; position: relative;
height: 0.9rem; height: 1.1rem;
margin-top: 0.1rem; margin: 0.18rem 0 0.42rem;
margin-bottom: 0.3rem;
cursor: ns-resize; cursor: ns-resize;
touch-action: none; touch-action: none;
border-radius: 999px;
} }
#spectrum-size-grip::before { #spectrum-size-grip::before {
content: ""; content: "";
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
width: 3.8rem; width: 4.2rem;
height: 0.26rem; height: 0.3rem;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border-radius: 999px; border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border-light) 76%, transparent); border: 1px solid color-mix(in srgb, var(--border-light) 76%, transparent);
background: color-mix(in srgb, var(--btn-bg) 78%, transparent); background: color-mix(in srgb, var(--btn-bg) 78%, transparent);
} }
#spectrum-size-grip:hover::before {
border-color: color-mix(in srgb, var(--accent-yellow) 55%, var(--border-light));
background: color-mix(in srgb, var(--accent-yellow) 22%, var(--btn-bg));
}
#spectrum-freq-axis span { #spectrum-freq-axis span {
position: absolute; position: absolute;
transform: translateX(-50%); transform: translateX(-50%);