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

tweak assembly editor layout and styling

Browse Source
This commit is contained in:
Nicole Rappe
2025-10-03 04:48:14 -06:00
parent 22e149ed99
commit 2005bc3d4e
1 changed files with 111 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,23 +48,34 @@ const VARIABLE_TYPE_OPTIONS = [
const INPUT_BASE_SX = { const INPUT_BASE_SX = {
"& .MuiOutlinedInput-root": { "& .MuiOutlinedInput-root": {
bgcolor: "#1f2329", bgcolor: "#202734",
color: "#e6edf3", color: "#e6edf3",
borderRadius: 1, borderRadius: 1,
minHeight: 42, minHeight: 40,
"& fieldset": { borderColor: "#2d333b" }, "& fieldset": { borderColor: "#2b3544" },
"&:hover fieldset": { borderColor: "#3b4a5c" }, "&:hover fieldset": { borderColor: "#3a4657" },
"&.Mui-focused fieldset": { borderColor: "#58a6ff" } "&.Mui-focused fieldset": { borderColor: "#58a6ff" }
}, },
"& .MuiOutlinedInput-input": { "& .MuiOutlinedInput-input": {
padding: "10px 12px", padding: "9px 12px",
fontSize: "0.95rem" fontSize: "0.95rem"
}, },
"& .MuiOutlinedInput-inputMultiline": { "& .MuiOutlinedInput-inputMultiline": {
padding: "10px 12px" padding: "9px 12px"
}, },
"& .MuiInputLabel-root": { color: "#9ba3b4" }, "& .MuiInputLabel-root": { color: "#9ba3b4" },
"& .MuiInputLabel-root.Mui-focused": { color: "#58a6ff" } "& .MuiInputLabel-root.Mui-focused": { color: "#58a6ff" },
"& input[type=number]": {
MozAppearance: "textfield"
},
"& input[type=number]::-webkit-outer-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 = {
@@ -78,23 +89,23 @@ const SELECT_BASE_SX = {
const SECTION_TITLE_SX = { const SECTION_TITLE_SX = {
color: "#58a6ff", color: "#58a6ff",
fontWeight: 500, fontWeight: 400,
fontSize: "14px", fontSize: "14px",
letterSpacing: 0.2 letterSpacing: 0.2
}; };
const SECTION_CARD_SX = { const SECTION_CARD_SX = {
bgcolor: "#161b22", bgcolor: "#1a202b",
borderRadius: 2, borderRadius: 2,
border: "1px solid #1f2a37" border: "1px solid #262f3d"
}; };
const MENU_PROPS = { const MENU_PROPS = {
PaperProps: { PaperProps: {
sx: { sx: {
bgcolor: "#1f2329", bgcolor: "#202734",
color: "#e6edf3", color: "#e6edf3",
border: "1px solid #2d333b", border: "1px solid #2b3544",
"& .MuiMenuItem-root.Mui-selected": { "& .MuiMenuItem-root.Mui-selected": {
bgcolor: "rgba(88,166,255,0.16)" bgcolor: "rgba(88,166,255,0.16)"
}, },
@@ -111,6 +122,8 @@ function keyBy(arr) {
const TYPE_MAP = keyBy(TYPE_OPTIONS_ALL); const TYPE_MAP = keyBy(TYPE_OPTIONS_ALL);
const PAGE_BACKGROUND = "#0d1117";
function highlightedHtml(code, prismLang) { function highlightedHtml(code, prismLang) {
try { try {
const grammar = Prism.languages[prismLang] || Prism.languages.markup; const grammar = Prism.languages[prismLang] || Prism.languages.markup;
@@ -595,9 +608,18 @@ export default function AssemblyEditor({
: []; : [];
return ( return (
<Box sx={{ display: "flex", flexDirection: "column", flex: 1, height: "100%", overflow: "hidden" }}> <Box
<Box sx={{ flex: 1, overflow: "auto", p: 2 }}> sx={{
<Paper sx={{ p: 3, ...SECTION_CARD_SX, minHeight: "100%" }} elevation={0}> display: "flex",
flexDirection: "column",
flex: 1,
height: "100%",
overflow: "hidden",
bgcolor: PAGE_BACKGROUND
}}
>
<Box sx={{ flex: 1, overflow: "auto", p: { xs: 2, md: 3 } }}>
<Paper sx={{ p: { xs: 2.5, md: 3 }, ...SECTION_CARD_SX, minHeight: "100%" }} elevation={0}>
<Box sx={{ mb: 3 }}> <Box sx={{ mb: 3 }}>
<Typography variant="h5" sx={{ color: "#58a6ff", fontWeight: 500, mb: 0.5 }}> <Typography variant="h5" sx={{ color: "#58a6ff", fontWeight: 500, mb: 0.5 }}>
Assembly Editor Assembly Editor
@@ -607,7 +629,7 @@ export default function AssemblyEditor({
</Typography> </Typography>
</Box> </Box>
<Box sx={{ display: "flex", alignItems: "center", gap: 2, mb: 3 }}> <Box sx={{ display: "flex", alignItems: "center", gap: 2, mb: 3, flexWrap: "wrap" }}>
<Box sx={{ flex: 1 }}> <Box sx={{ flex: 1 }}>
<Typography variant="caption" sx={SECTION_TITLE_SX}> <Typography variant="caption" sx={SECTION_TITLE_SX}>
Assembly Details Assembly Details
@@ -643,14 +665,14 @@ export default function AssemblyEditor({
color: "#58a6ff", color: "#58a6ff",
borderColor: "#58a6ff", borderColor: "#58a6ff",
textTransform: "none", textTransform: "none",
backgroundColor: saving ? "rgba(88,166,255,0.12)" : "#1f2329", backgroundColor: saving ? "rgba(88,166,255,0.12)" : "#202734",
"&:hover": { "&:hover": {
borderColor: "#7db7ff", borderColor: "#7db7ff",
backgroundColor: "rgba(88,166,255,0.18)" backgroundColor: "rgba(88,166,255,0.18)"
}, },
"&.Mui-disabled": { "&.Mui-disabled": {
color: "#3c4452", color: "#3c4452",
borderColor: "#2d333b" borderColor: "#2b3544"
} }
}} }}
> >
@@ -714,7 +736,7 @@ export default function AssemblyEditor({
<Typography variant="caption" sx={{ ...SECTION_TITLE_SX, mb: 1 }}> <Typography variant="caption" sx={{ ...SECTION_TITLE_SX, mb: 1 }}>
Script Content Script Content
</Typography> </Typography>
<Box sx={{ border: "1px solid #2d333b", borderRadius: 1, background: "#1f2329" }}> <Box sx={{ border: "1px solid #2b3544", borderRadius: 1, background: "#202734" }}>
<Editor <Editor
value={assembly.script} value={assembly.script}
onValueChange={(value) => updateAssembly({ script: value })} onValueChange={(value) => updateAssembly({ script: value })}
@@ -725,7 +747,7 @@ export default function AssemblyEditor({
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
fontSize: 14, fontSize: 14,
color: "#e6edf3", color: "#e6edf3",
background: "#1f2329", background: "#202734",
outline: "none", outline: "none",
minHeight: 320, minHeight: 320,
lineHeight: 1.45, lineHeight: 1.45,
@@ -739,11 +761,12 @@ export default function AssemblyEditor({
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<TextField <TextField
label="Timeout (seconds)" label="Timeout (seconds)"
type="number" type="text"
inputMode="numeric"
value={assembly.timeoutSeconds} value={assembly.timeoutSeconds}
onChange={(e) => { onChange={(e) => {
const val = Number(e.target.value); const nextValue = e.target.value.replace(/[^0-9]/g, "");
updateAssembly({ timeoutSeconds: Number.isNaN(val) ? 0 : val }); updateAssembly({ timeoutSeconds: nextValue ? Number(nextValue) : 0 });
}} }}
fullWidth fullWidth
variant="outlined" variant="outlined"
@@ -752,16 +775,21 @@ export default function AssemblyEditor({
/> />
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Typography variant="caption" sx={{ ...SECTION_TITLE_SX, mb: 1 }}> <Box
Sites sx={{
</Typography> display: "flex",
flexDirection: { xs: "column", sm: "row" },
gap: 2,
alignItems: "flex-start"
}}
>
<TextField <TextField
select select
fullWidth fullWidth
label="Site Scope" label="Site Scope"
value={siteScopeValue} value={siteScopeValue}
onChange={(e) => updateSitesMode(e.target.value)} onChange={(e) => updateSitesMode(e.target.value)}
sx={{ ...SELECT_BASE_SX, mb: siteScopeValue === "specific" ? 2 : 0 }} sx={{ ...SELECT_BASE_SX, flex: 1 }}
SelectProps={{ MenuProps: MENU_PROPS }} SelectProps={{ MenuProps: MENU_PROPS }}
> >
<MenuItem value="all">All Sites</MenuItem> <MenuItem value="all">All Sites</MenuItem>
@@ -774,7 +802,7 @@ export default function AssemblyEditor({
label="Allowed Sites" label="Allowed Sites"
value={selectedSiteValues} value={selectedSiteValues}
onChange={(e) => updateSelectedSites(Array.isArray(e.target.value) ? e.target.value : [])} onChange={(e) => updateSelectedSites(Array.isArray(e.target.value) ? e.target.value : [])}
sx={SELECT_BASE_SX} sx={{ ...SELECT_BASE_SX, flex: 1 }}
SelectProps={{ SelectProps={{
multiple: true, multiple: true,
renderValue: (selected) => { renderValue: (selected) => {
@@ -814,6 +842,7 @@ export default function AssemblyEditor({
)} )}
</TextField> </TextField>
) : null} ) : null}
</Box>
</Grid> </Grid>
</Grid> </Grid>
@@ -829,7 +858,7 @@ export default function AssemblyEditor({
{assembly.variables.map((variable) => ( {assembly.variables.map((variable) => (
<Paper <Paper
key={variable.id} key={variable.id}
sx={{ p: 2, bgcolor: "#1f2329", border: "1px solid #2d333b", borderRadius: 1 }} sx={{ p: 2, bgcolor: "#202734", border: "1px solid #2b3544", borderRadius: 1 }}
> >
<Grid container spacing={2} alignItems="center"> <Grid container spacing={2} alignItems="center">
<Grid item xs={12} md={3}> <Grid item xs={12} md={3}>
@@ -948,8 +977,8 @@ export default function AssemblyEditor({
key={file.id} key={file.id}
sx={{ sx={{
p: 1.5, p: 1.5,
bgcolor: "#1f2329", bgcolor: "#202734",
border: "1px solid #2d333b", border: "1px solid #2b3544",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "space-between" justifyContent: "space-between"