Skip to content

Commit

Permalink
Move some UI elements from top terminal bar into terminal drawer.
Browse files Browse the repository at this point in the history
  • Loading branch information
@gbmhunter
gbmhunter committed May 17, 2024
1 parent f286ae4 commit 837bf60
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 78 deletions.
88 changes: 81 additions & 7 deletions src/view/Terminals/RightDrawer/RightDrawerView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import "react-resizable/css/styles.css";
import { App } from "src/model/App";
import MacroView from "./MacroRowView";
import MacroSettingsModalView from "./MacroSettingsModalView";
import { FormControl, FormControlLabel, InputAdornment, InputLabel, MenuItem, Select, Switch, Tooltip } from "@mui/material";
import ApplyableTextFieldView from "src/view/Components/ApplyableTextFieldView";
import { DataViewConfiguration, dataViewConfigEnumToDisplayName } from "src/model/Settings/DisplaySettings/DisplaySettings";

interface Props {
app: App;
Expand All @@ -21,7 +24,7 @@ export default observer((props: Props) => {
return (
<ResizableBox
className="box"
width={200}
width={400} // Default width, this can be changed by the user resizing
resizeHandles={["w"]}
axis="x"
style={{ padding: "0px 0px 0px 10px", margin: "0px 0px 10px 0px", fontSize: "12px" }}
Expand All @@ -43,12 +46,83 @@ export default observer((props: Props) => {
></div>
}
>
<div className="resizable-child-container"> {/* ResizableBox requires a single child component */}
<div>Macros</div>
<div className="macro-rows-container" style={{ display: "flex", flexDirection: "column", gap: "3px" }}>
{macroRows}
</div>
<MacroSettingsModalView app={app} macroController={app.terminals.rightDrawer.macroController} />
{/* ResizableBox requires a single child component */}
<div className="resizable-child-container" style={{ display: 'flex', flexDirection: 'column' }}>
{/* ======================================================= */}
{/* DATA VIEW CONFIGURATION */}
{/* ======================================================= */}
<Tooltip
title={
<div>
Controls how to display the TX and RX data. Different use cases require different view configurations.
<ul>
<li>Single terminal: TX and RX data is combined in the same pane. Useful for terminal style applications when escape codes are used.</li>
<li>
Separate TX/RX terminals: TX and RX data are kept in separate panes. Useful for when you have a lot of incoming basic RX data and what to still see the data you
are sending.
</li>
</ul>
</div>
}
placement="left"
>
<FormControl size="small" sx={{ minWidth: "210px", marginBottom: '10px' }}>
<InputLabel>Data View Configuration</InputLabel>
<Select
name="dataViewConfiguration"
value={app.settings.displaySettings.dataViewConfiguration}
onChange={(e) => {
app.settings.displaySettings.setDataViewConfiguration(Number(e.target.value));
}}
sx={{ fontSize: "0.8rem" }}
>
{Object.keys(DataViewConfiguration)
.filter((key) => !Number.isNaN(Number(key)))
.map((key) => {
return (
<MenuItem key={key} value={key}>
{dataViewConfigEnumToDisplayName[key]}
</MenuItem>
);
})}
</Select>
</FormControl>
</Tooltip>
{/* =============================================================================== */}
{/* CHAR SIZE */}
{/* =============================================================================== */}
<Tooltip title="The font size (in pixels) of characters displayed in the terminal." followCursor arrow>
<ApplyableTextFieldView
id="outlined-basic"
name="charSizePx"
label="Char Size"
variant="outlined"
size="small"
InputProps={{
endAdornment: <InputAdornment position="start">px</InputAdornment>,
}}
applyableTextField={app.settings.displaySettings.charSizePx}
sx={{ width: "80px" }}
/>
</Tooltip>
{/* ============================ LOCAL TX ECHO SWITCH =========================== */}
<FormControlLabel
control={
<Switch
name="localTxEcho"
checked={app.settings.rxSettings.config.localTxEcho}
onChange={(e) => {
app.settings.rxSettings.setLocalTxEcho(e.target.checked);
}}
/>
}
label="Local TX Echo"
/>
<div>Macros</div>
<div className="macro-rows-container" style={{ display: "flex", flexDirection: "column", gap: "3px" }}>
{macroRows}
</div>
<MacroSettingsModalView app={app} macroController={app.terminals.rightDrawer.macroController} />
</div>
</ResizableBox>
);
Expand Down
71 changes: 0 additions & 71 deletions src/view/Terminals/TerminalsView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,77 +183,6 @@ export default observer((props: Props) => {
sx={{ width: "200px" }}
/>
</Tooltip>
{/* DATA VIEW CONFIGURATION */}
{/* ======================================================= */}
<Tooltip
title={
<div>
Controls how to display the TX and RX data. Different use cases require different view configurations.
<ul>
<li>Single terminal: TX and RX data is combined in the same pane. Useful for terminal style applications when escape codes are used.</li>
<li>
Separate TX/RX terminals: TX and RX data are kept in separate panes. Useful for when you have a lot of incoming basic RX data and what to still see the data you
are sending.
</li>
</ul>
</div>
}
placement="left"
>
<FormControl size="small" sx={{ minWidth: "210px" }}>
<InputLabel>Data View Configuration</InputLabel>
<Select
name="dataViewConfiguration"
value={app.settings.displaySettings.dataViewConfiguration}
onChange={(e) => {
app.settings.displaySettings.setDataViewConfiguration(Number(e.target.value));
}}
sx={{ fontSize: "0.8rem" }}
>
{Object.keys(DataViewConfiguration)
.filter((key) => !Number.isNaN(Number(key)))
.map((key) => {
return (
<MenuItem key={key} value={key}>
{dataViewConfigEnumToDisplayName[key]}
</MenuItem>
);
})}
</Select>
</FormControl>
</Tooltip>

{/* =============================================================================== */}
{/* CHAR SIZE */}
{/* =============================================================================== */}
<Tooltip title="The font size (in pixels) of characters displayed in the terminal." followCursor arrow>
<ApplyableTextFieldView
id="outlined-basic"
name="charSizePx"
label="Char Size"
variant="outlined"
size="small"
InputProps={{
endAdornment: <InputAdornment position="start">px</InputAdornment>,
}}
applyableTextField={app.settings.displaySettings.charSizePx}
sx={{ width: "80px" }}
/>
</Tooltip>

{/* ============================ LOCAL TX ECHO SWITCH =========================== */}
<FormControlLabel
control={
<Switch
name="localTxEcho"
checked={app.settings.rxSettings.config.localTxEcho}
onChange={(e) => {
app.settings.rxSettings.setLocalTxEcho(e.target.checked);
}}
/>
}
label="Local TX Echo"
/>

{/* ==================================================================== */}
{/* SHOW/HIDE SIDE PANEL BUTTON */}
Expand Down

0 comments on commit 837bf60

Please sign in to comment.