Skip to content

Commit

Permalink
Improve macro modal UI.
Browse files Browse the repository at this point in the history
  • Loading branch information
@gbmhunter
gbmhunter committed May 17, 2024
1 parent 837bf60 commit 9be78aa
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 86 deletions.
3 changes: 3 additions & 0 deletions src/model/Terminals/RightDrawer/Macros/MacroController.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@ export class Macro {
console.log('Send macro data:', this.data);
// Send the data to the serial port
// Convert string to Uint8Array
// If the user presses enter in the multiline text field, it will add a newline character
// (0x0A or 10) to the string.
const data = new TextEncoder().encode(this.data);
console.log('Data:', data);
this.app.writeBytesToSerialPort(data);
}

Expand Down
1 change: 1 addition & 0 deletions src/view/Terminals/RightDrawer/MacroRowView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export default observer((props: Props) => {
},
}}
value={macro.data}
fullWidth // Take up available width (so it changes size as the drawer is resized)
onChange={(e) => macro.setData(e.target.value)}
onKeyDown={(e) => {
e.stopPropagation();
Expand Down
47 changes: 30 additions & 17 deletions src/view/Terminals/RightDrawer/MacroSettingsModalView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { IconButton, Modal, TextField, Tooltip } from "@mui/material";
import { Button, IconButton, Modal, TextField, Tooltip } from "@mui/material";
import { observer } from "mobx-react-lite";
import "react-resizable/css/styles.css";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
import CloseIcon from '@mui/icons-material/Close';

import { Macro, MacroController } from "src/model/Terminals/RightDrawer/Macros/MacroController";
import { App } from "src/model/App";
import { PortState } from "src/model/Settings/PortConfigurationSettings/PortConfigurationSettings";

interface Props {
app: App;
Expand All @@ -25,12 +26,11 @@ export default observer((props: Props) => {
aria-describedby="modal-modal-description"
style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
>
<div style={{ padding: "20px", backgroundColor: "#202020", width: "80%", height: "80%", display: "flex", flexDirection: "column", gap: "20px" }}>
<div style={{ padding: "20px", backgroundColor: "#202020", width: "80%", maxHeight: "80%", display: "flex", flexDirection: "column", gap: "20px" }}>
<span>Macro Settings</span>
<TextField
size="small"
variant="outlined"
label="Data"
label="Macro Data"
inputProps={{
style: {
padding: 5,
Expand All @@ -41,19 +41,32 @@ export default observer((props: Props) => {
value={macroController.macroToDisplayInModal?.data}
onChange={(e) => macroController.macroToDisplayInModal?.setData(e.target.value)}
onKeyDown={(e) => {
e.stopPropagation();
}} // Don't want the global keydown event to trigger
/>
<IconButton
aria-label="send-macro-data"
size="small"
style={{ padding: "1px" }}
onClick={() => {
macroController.macroToDisplayInModal?.send();
e.stopPropagation(); // Don't want the global keydown event to trigger
}}
>
<ArrowForwardIcon />
</IconButton>
/>
<div className="button-row" style={{ display: 'flex', justifyContent: 'end', alignItems: 'center', gap: '10px' }}>
<Button
variant="contained"
aria-label="send-macro-data"
startIcon={<ArrowForwardIcon />}
disabled={app.portState !== PortState.OPENED}
onClick={() => {
macroController.macroToDisplayInModal?.send();
}}
>
Send
</Button>
<Button
variant="outlined"
aria-label="send-macro-data"
startIcon={<CloseIcon />}
onClick={() => {
macroController.setIsModalOpen(false);
}}
>
Close
</Button>
</div>
</div>
</Modal>
);
Expand Down
148 changes: 80 additions & 68 deletions src/view/Terminals/RightDrawer/RightDrawerView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,78 +47,90 @@ export default observer((props: Props) => {
}
>
{/* 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"
<div className="resizable-child-container" style={{ display: "flex", flexDirection: "column" }}>
<div
className="a-grid"
style={{
display: "grid",
gridTemplateColumns: "repeat(3, 1fr)",
gridAutoRows: "minmax(10px, auto)",
}}
>
<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));
{/* ======================================================= */}
{/* 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" style={{ maxWidth: "210px", marginBottom: "10px", gridColumn: "1/3", gridRow: "1/1" }}>
<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>,
}}
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>
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>
{/* =============================================================================== */}
{/* CHAR SIZE */}
{/* MACROS */}
{/* =============================================================================== */}
<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>
<h2>Macros</h2>
<div className="macro-rows-container" style={{ display: "flex", flexDirection: "column", gap: "3px" }}>
{macroRows}
</div>
Expand Down
12 changes: 11 additions & 1 deletion src/view/Terminals/TerminalsView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,15 @@ export default observer((props: Props) => {
},
};

let showHideSidePanelButtonText;
if (isSmallScreen) {
showHideSidePanelButtonText = '';
} else if (!app.terminals.showRightDrawer) {
showHideSidePanelButtonText = 'Show Side Panel';
} else {
showHideSidePanelButtonText = 'Hide Side Panel';
}

return (
<div
id="terminal-view-outer"
Expand Down Expand Up @@ -200,10 +209,11 @@ export default observer((props: Props) => {
}}
startIcon={<VisibilityIcon />}
sx={buttonSx}
style={{ width: '200px' }}
data-testid="show-hide-side-panel-button"
>
{/* Specify a width to prevent it resizing when the text changes */}
{isSmallScreen ? "" : "SHOW SIDE PANEL"}
{showHideSidePanelButtonText}
</Button>

{/* ============================ VERSION NUMBER =========================== */}
Expand Down

0 comments on commit 9be78aa

Please sign in to comment.