mirror of
https://github.com/bunny-lab-io/Borealis.git
synced 2025-10-27 00:21:57 -06:00
Adjust variable editor layout
This commit is contained in:
@@ -902,8 +902,15 @@ export default function AssemblyEditor({
|
|||||||
key={variable.id}
|
key={variable.id}
|
||||||
sx={{ p: 2, bgcolor: BACKGROUND_COLORS.field, border: "1px solid #2b3544", borderRadius: 1 }}
|
sx={{ p: 2, bgcolor: BACKGROUND_COLORS.field, border: "1px solid #2b3544", borderRadius: 1 }}
|
||||||
>
|
>
|
||||||
<Grid container spacing={2} alignItems="center">
|
<Box
|
||||||
<Grid item xs={12} md={3}>
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: 2
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box sx={{ flex: { xs: "1 1 100%", md: "0 1 23%" } }}>
|
||||||
<TextField
|
<TextField
|
||||||
label="Variable Name"
|
label="Variable Name"
|
||||||
value={variable.name}
|
value={variable.name}
|
||||||
@@ -912,8 +919,8 @@ export default function AssemblyEditor({
|
|||||||
variant="outlined"
|
variant="outlined"
|
||||||
sx={INPUT_BASE_SX}
|
sx={INPUT_BASE_SX}
|
||||||
/>
|
/>
|
||||||
</Grid>
|
</Box>
|
||||||
<Grid item xs={12} md={3}>
|
<Box sx={{ flex: { xs: "1 1 100%", md: "0 1 18%" } }}>
|
||||||
<TextField
|
<TextField
|
||||||
label="Display Label"
|
label="Display Label"
|
||||||
value={variable.label}
|
value={variable.label}
|
||||||
@@ -922,8 +929,8 @@ export default function AssemblyEditor({
|
|||||||
variant="outlined"
|
variant="outlined"
|
||||||
sx={INPUT_BASE_SX}
|
sx={INPUT_BASE_SX}
|
||||||
/>
|
/>
|
||||||
</Grid>
|
</Box>
|
||||||
<Grid item xs={12} md={2}>
|
<Box sx={{ flex: { xs: "1 1 100%", md: "0 1 18%" } }}>
|
||||||
<TextField
|
<TextField
|
||||||
select
|
select
|
||||||
fullWidth
|
fullWidth
|
||||||
@@ -937,8 +944,14 @@ export default function AssemblyEditor({
|
|||||||
<MenuItem key={opt.key} value={opt.key}>{opt.label}</MenuItem>
|
<MenuItem key={opt.key} value={opt.key}>{opt.label}</MenuItem>
|
||||||
))}
|
))}
|
||||||
</TextField>
|
</TextField>
|
||||||
</Grid>
|
</Box>
|
||||||
<Grid item xs={12} md={3}>
|
<Box
|
||||||
|
sx={{
|
||||||
|
flex: { xs: "1 1 100%", md: "0 1 27%" },
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center"
|
||||||
|
}}
|
||||||
|
>
|
||||||
{variable.type === "boolean" ? (
|
{variable.type === "boolean" ? (
|
||||||
<FormControlLabel
|
<FormControlLabel
|
||||||
control={
|
control={
|
||||||
@@ -949,6 +962,11 @@ export default function AssemblyEditor({
|
|||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
label="Default Value"
|
label="Default Value"
|
||||||
|
sx={{
|
||||||
|
color: "#9ba3b4",
|
||||||
|
m: 0,
|
||||||
|
"& .MuiFormControlLabel-label": { fontSize: "0.95rem" }
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<TextField
|
<TextField
|
||||||
@@ -960,8 +978,15 @@ export default function AssemblyEditor({
|
|||||||
sx={INPUT_BASE_SX}
|
sx={INPUT_BASE_SX}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Grid>
|
</Box>
|
||||||
<Grid item xs={12} md={1} sx={{ display: "flex", justifyContent: "center" }}>
|
<Box
|
||||||
|
sx={{
|
||||||
|
flex: { xs: "1 1 100%", md: "0 0 6%" },
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center"
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Tooltip title="Required">
|
<Tooltip title="Required">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={Boolean(variable.required)}
|
checked={Boolean(variable.required)}
|
||||||
@@ -969,25 +994,23 @@ export default function AssemblyEditor({
|
|||||||
sx={{ color: "#58a6ff" }}
|
sx={{ color: "#58a6ff" }}
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</Grid>
|
</Box>
|
||||||
<Grid item xs={12}>
|
<Box sx={{ flex: { xs: "1 1 100%", md: "1 1 0%" }, minWidth: { md: 120 } }}>
|
||||||
<TextField
|
<TextField
|
||||||
label="Description"
|
label="Description"
|
||||||
value={variable.description}
|
value={variable.description}
|
||||||
onChange={(e) => updateVariable(variable.id, { description: e.target.value })}
|
onChange={(e) => updateVariable(variable.id, { description: e.target.value })}
|
||||||
fullWidth
|
fullWidth
|
||||||
multiline
|
|
||||||
minRows={2}
|
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
sx={INPUT_BASE_SX}
|
sx={INPUT_BASE_SX}
|
||||||
/>
|
/>
|
||||||
</Grid>
|
</Box>
|
||||||
<Grid item xs={12} sx={{ display: "flex", justifyContent: "flex-end" }}>
|
<Box sx={{ flex: "1 1 100%", display: "flex", justifyContent: "flex-end" }}>
|
||||||
<IconButton onClick={() => removeVariable(variable.id)} sx={{ color: "#ff6b6b" }}>
|
<IconButton onClick={() => removeVariable(variable.id)} sx={{ color: "#ff6b6b" }}>
|
||||||
<DeleteIcon />
|
<DeleteIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Grid>
|
</Box>
|
||||||
</Grid>
|
</Box>
|
||||||
</Paper>
|
</Paper>
|
||||||
))}
|
))}
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
Reference in New Issue
Block a user