[feat](trx-frontend-http): rebuild the general radio controls row
Mode was a full-width select: 483px of the row to display "FM". The modes are three or four characters and there are at most twelve, so they become a segmented group like the Unit and Step Scale pickers beside them — a third of the width, and one click instead of two. The <select> stays as the mode's value. A dozen call sites and several plugins read #mode.value, so replacing it outright would have reached much further than a layout change should; it is hidden from sight and from assistive tech, the buttons write to it, and everything downstream runs unchanged. Every writer re-syncs the buttons, the plugins through a new trxCore.syncModePicker. The row itself was a grid with a track per column, but the WFM, SAM and transmit columns are hidden on most rigs, so it ended in some 500px of hole. It packs left now. Same fault one level down: the power buttons sat in three fixed tracks, so a rig with neither transmit nor lock kept two empty ones and left its label chip stranded at the far edge. Unit and Step Scale move out of the frequency row and in beside the wheel and the +/- they modify, which were some 600px away. Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
@@ -212,31 +212,20 @@ SPDX-License-Identifier: GPL-2.0-or-later
|
||||
<input class="status-input" id="center-freq" type="text" value="--" aria-describedby="center-freq-label" aria-label="SDR center frequency" />
|
||||
<div class="label" id="center-freq-label"><span>Center Frequency</span></div>
|
||||
</div>
|
||||
<div class="freq-field unit-col">
|
||||
<div class="jog-step" id="jog-step">
|
||||
<button type="button" data-step="1000000">MHz</button>
|
||||
<button type="button" data-step="1000" class="active">kHz</button>
|
||||
<button type="button" data-step="1">Hz</button>
|
||||
</div>
|
||||
<div class="label"><span>Unit</span></div>
|
||||
</div>
|
||||
<div class="freq-field mult-col">
|
||||
<div class="jog-mult" id="jog-mult">
|
||||
<button type="button" data-mult="1" class="active" aria-label="Use full tune step">1x</button>
|
||||
<button type="button" data-mult="10" aria-label="Use one tenth tune step">0.1x</button>
|
||||
</div>
|
||||
<div class="label"><span>Step Scale</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="full-row controls-tray-shell">
|
||||
<div class="controls-tray-scroll">
|
||||
<div class="controls-tray">
|
||||
<div class="controls-row full-row">
|
||||
<div class="controls-col label-below-col">
|
||||
<div class="controls-col controls-col-mode label-below-col">
|
||||
<div class="label"><span>Mode</span></div>
|
||||
<div class="inline">
|
||||
<select class="status-input" id="mode" aria-label="Demodulation mode"></select>
|
||||
<!-- The select stays as the mode's value: a dozen call sites and
|
||||
several plugins read #mode.value. It is hidden from sight and
|
||||
from assistive tech; the buttons beside it are the control. -->
|
||||
<select class="visually-hidden" id="mode" tabindex="-1" aria-hidden="true"></select>
|
||||
<div id="mode-picker" class="mode-picker" role="group" aria-label="Demodulation mode"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls-col controls-col-center">
|
||||
@@ -248,6 +237,25 @@ SPDX-License-Identifier: GPL-2.0-or-later
|
||||
<button id="jog-up" type="button" class="jog-btn">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls-col controls-col-step">
|
||||
<div class="inline step-controls-inline">
|
||||
<div class="freq-field unit-col">
|
||||
<div class="jog-step" id="jog-step">
|
||||
<button type="button" data-step="1000000">MHz</button>
|
||||
<button type="button" data-step="1000" class="active">kHz</button>
|
||||
<button type="button" data-step="1">Hz</button>
|
||||
</div>
|
||||
<div class="label"><span>Unit</span></div>
|
||||
</div>
|
||||
<div class="freq-field mult-col">
|
||||
<div class="jog-mult" id="jog-mult">
|
||||
<button type="button" data-mult="1" class="active" aria-label="Use full tune step">1x</button>
|
||||
<button type="button" data-mult="10" aria-label="Use one tenth tune step">0.1x</button>
|
||||
</div>
|
||||
<div class="label"><span>Step Scale</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls-col controls-col-wfm label-below-col" id="wfm-controls-col" style="display:none;">
|
||||
<div class="inline wfm-controls-inline">
|
||||
<label class="wfm-control">
|
||||
|
||||
Reference in New Issue
Block a user