bunny-lab/Borealis-Github-Replica
1
0
Fork 0
mirror of https://github.com/bunny-lab-io/Borealis.git synced 2025-10-27 02:21:57 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fixed Placeholder Text and Field Scaling

Browse Source
This commit is contained in:
Nicole Rappe
2025-10-03 16:30:42 -06:00
parent 80646ee842
commit 40840089fe
1 changed files with 59 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
Data/Server/WebUI/src/Assemblies/Assembly_Editor.jsx
View File

@@ -66,26 +66,29 @@ const INPUT_BASE_SX = {
"&:hover fieldset": { borderColor: "#3a4657" }, "&:hover fieldset": { borderColor: "#3a4657" },
"&.Mui-focused fieldset": { borderColor: "#58a6ff" } "&.Mui-focused fieldset": { borderColor: "#58a6ff" }
}, },
"& .MuiOutlinedInput-input": { "& .MuiOutlinedInput-input": {
padding: "9px 12px", padding: "9px 12px",
fontSize: "0.95rem" fontSize: "0.95rem",
lineHeight: 1.4
}, },
"& .MuiOutlinedInput-inputMultiline": { "& .MuiOutlinedInput-inputMultiline": {
padding: "9px 12px" padding: "9px 12px"
}, },
"& .MuiInputLabel-root": { color: "#9ba3b4" },
"& .MuiInputLabel-root": {
color: "#9ba3b4",
transform: "translate(12px, 11px) scale(0.8)" // label at rest (inside field)
},
"& .MuiInputLabel-root.Mui-focused": { color: "#58a6ff" }, "& .MuiInputLabel-root.Mui-focused": { color: "#58a6ff" },
"& input[type=number]": { "& .MuiInputLabel-root.MuiInputLabel-shrink": {
MozAppearance: "textfield" transform: "translate(12px, -6px) scale(0.75)" // floated label position
}, },
"& input[type=number]::-webkit-outer-spin-button": {
WebkitAppearance: "none", "& input[type=number]": { MozAppearance: "textfield" },
margin: 0 "& input[type=number]::-webkit-outer-spin-button": { WebkitAppearance: "none", margin: 0 },
}, "& input[type=number]::-webkit-inner-spin-button": { WebkitAppearance: "none", margin: 0 }
"& input[type=number]::-webkit-inner-spin-button": {
WebkitAppearance: "none",
margin: 0
}
}; };
const SELECT_BASE_SX = { const SELECT_BASE_SX = {
@@ -914,7 +917,7 @@ export default function AssemblyEditor({
> >
<Box sx={{ flex: { xs: "1 1 100%", lg: "0 1 28%" }, minWidth: { lg: 220 } }}> <Box sx={{ flex: { xs: "1 1 100%", lg: "0 1 28%" }, minWidth: { lg: 220 } }}>
<Tooltip <Tooltip
title="This is the name of the variable you will be referencing inside of the script. Within the script you will reference this variable with a prefixed \"$env:<variable>\". For example, a variable named \"message\" would be written in the script as \"$env:message\"." title="This is the name of the variable you will be referencing inside of the script via $env:<variable>."
arrow arrow
placement="top-start" placement="top-start"
> >
@@ -944,22 +947,7 @@ export default function AssemblyEditor({
/> />
</Tooltip> </Tooltip>
</Box> </Box>
<Box sx={{ flex: { xs: "1 1 100%", lg: "0 1 28%" }, minWidth: { lg: 220 } }}>
<Tooltip
title="Instruct the operator in why this variable exists and how to set it appropriately."
arrow
placement="top-start"
>
<TextField
label="Description"
value={variable.description}
onChange={(e) => updateVariable(variable.id, { description: e.target.value })}
fullWidth
variant="outlined"
sx={INPUT_BASE_SX}
/>
</Tooltip>
</Box>
<Box sx={{ flex: { xs: "1 1 100%", lg: "0 1 18%" }, minWidth: { lg: 160 } }}> <Box sx={{ flex: { xs: "1 1 100%", lg: "0 1 18%" }, minWidth: { lg: 160 } }}>
<Tooltip <Tooltip
title="This defines the type of variable data the script should expect." title="This defines the type of variable data the script should expect."
@@ -1028,6 +1016,22 @@ export default function AssemblyEditor({
</Tooltip> </Tooltip>
)} )}
</Box> </Box>
<Box sx={{ flex: { xs: "1 1 100%", lg: "0 1 28%" }, minWidth: { lg: 220 } }}>
<Tooltip
title="Instruct the operator in why this variable exists and how to set it appropriately."
arrow
placement="top-start"
>
<TextField
label="Description"
value={variable.description}
onChange={(e) => updateVariable(variable.id, { description: e.target.value })}
fullWidth
variant="outlined"
sx={INPUT_BASE_SX}
/>
</Tooltip>
</Box>
<Box <Box
sx={{ sx={{
flex: { xs: "1 1 100%", lg: "0 0 auto" }, flex: { xs: "1 1 100%", lg: "0 0 auto" },
@@ -1051,25 +1055,33 @@ export default function AssemblyEditor({
gap: { xs: 2, lg: 1.5 } gap: { xs: 2, lg: 1.5 }
}} }}
> >
<Box <Box
sx={{ sx={{
flex: { xs: "1 1 100%", lg: "0 1 50%" }, flex: { xs: "1 1 100%", lg: "0 1 50%" },
minWidth: { lg: 220 }, minWidth: { lg: 220 },
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: 1.5 gap: 1.5
}} }}
>
<Typography
variant="caption"
sx={{ color: "#9ba3b4", fontSize: "0.75rem", ml: 0.5}} /* Left-Hand Spacing for the "Required" label to the left of the checkbox */
> >
<Typography variant="caption" sx={{ color: "#9ba3b4", fontSize: "0.75rem" }}> Required
Required </Typography>
</Typography> <Checkbox
<Checkbox checked={Boolean(variable.required)}
checked={Boolean(variable.required)} onChange={(e) =>
onChange={(e) => updateVariable(variable.id, { required: e.target.checked })} updateVariable(variable.id, { required: e.target.checked })
sx={{ color: "#58a6ff", p: 0.5 }} }
inputProps={{ "aria-label": "Required" }} sx={{
/> color: "#58a6ff",
</Box> p: 0.5,
}}
inputProps={{ "aria-label": "Required" }}
/>
</Box>
</Box> </Box>
</Box> </Box>
</Paper> </Paper>