Skip to content

made configuration labels in-line #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MrAtomicBombHead wants to merge 1 commit into
base: cert
Choose a base branch
from
Open

made configuration labels in-line #27

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 87 additions & 62 deletions src/frontend/insert/configurations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
import { Center, Checkbox, Loader, Select, TextInput } from "@mantine/core";
import {
Center,
Checkbox,
Group,
Loader,
Select,
Text,
TextInput
} from "@mantine/core";
import { useQuery } from "@tanstack/react-query";
import { useSearch } from "@tanstack/react-router";
import {
Expand Down Expand Up @@ -287,25 +295,29 @@ function EnumParameter(props: ParameterProps<EnumParameterObj>): ReactNode {
}

return (
<Select
label={parameter.name}
id={parameter.id}
data={visibleOptions.map((option) => ({
value: option.id,
label: option.name
}))}
value={currentOption.id}
allowDeselect={false}
mt="sm"
checkIconPosition="right"
maxDropdownHeight={250}
comboboxProps={{ withinPortal: true }}
onChange={(newValue) => {
if (newValue !== null) {
onValueChange(newValue);
}
}}
/>
<Group gap="sm" align="center" mt="sm">
<Text size="sm" style={{ minWidth: "120px", flexShrink: 0 }}>

@AlexKempen AlexKempen Jul 13, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you add component="label" and htmlFor={parameter.id}, you can link the text to the select so clicking the text also activates the select (this also applies to the other components)

{parameter.name}
</Text>
<Select
id={parameter.id}
data={visibleOptions.map((option) => ({
value: option.id,
label: option.name
}))}
value={currentOption.id}
allowDeselect={false}
checkIconPosition="right"
maxDropdownHeight={250}
comboboxProps={{ withinPortal: true }}
style={{ flex: 1 }}
onChange={(newValue) => {
if (newValue !== null) {
onValueChange(newValue);
}
}}
/>
</Group>
);
}

Expand All @@ -314,32 +326,37 @@ function BooleanParameter(
): ReactNode {
const { parameter, value, onValueChange } = props;
return (
<Checkbox
label={parameter.name}
labelPosition="left"
checked={value === "true"}
mt="sm"
styles={{
input: { cursor: "pointer" },
label: { cursor: "pointer" }
}}
onChange={handleBooleanChange((checked) =>
onValueChange(checked ? "true" : "false")
)}
/>
<Group gap="sm" align="center" mt="sm">

@AlexKempen AlexKempen Jul 13, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually think the existing checkbox implementation was pretty good and is fairly representative of what we should be aiming for in terms of styling
Image

<Text size="sm" style={{ minWidth: "120px", flexShrink: 0 }}>
{parameter.name}
</Text>
<Checkbox
checked={value === "true"}
styles={{
input: { cursor: "pointer" }
}}
onChange={handleBooleanChange((checked) =>
onValueChange(checked ? "true" : "false")
)}
/>
</Group>
);
}

function StringParameter(props: ParameterProps<StringParameterObj>): ReactNode {
const { parameter, value, onValueChange } = props;
return (
<TextInput
label={parameter.name}
id={parameter.id}
mt="sm"
value={value}
onChange={(event) => onValueChange(event.currentTarget.value)}
/>
<Group gap="sm" align="center" mt="sm">
<Text size="sm" style={{ minWidth: "120px", flexShrink: 0 }}>

@AlexKempen AlexKempen Jul 13, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think removing minWidth to more closely match the existing inputs would be good

{parameter.name}
</Text>
<TextInput
id={parameter.id}
value={value}
style={{ flex: 1 }}
onChange={(event) => onValueChange(event.currentTarget.value)}
/>
</Group>
);
}

Expand Down Expand Up @@ -436,27 +453,35 @@ function QuantityParameter(
}, [evaluateOptions, expression, onValueChange]);

return (
<TextInput
label={parameter.name}
id={parameter.id}
ref={ref}
value={focused ? expression : display}
error={errorMessage}
mt="sm"
onFocus={(event) => {
setFocused(true);
event.currentTarget.select();
}}
onBlur={handleSubmit}
onKeyDown={(event) => {
if (event.key === "Enter") {
ref.current?.blur();
handleSubmit();
}
}}
onChange={(event) => {
setExpression(event.currentTarget.value);
}}
/>
<Group gap="sm" align="flex-start" mt="sm">
<Text
size="sm"
style={{ minWidth: "120px", flexShrink: 0, paddingTop: "6px" }}
>
{parameter.name}
</Text>
<div style={{ flex: 1 }}>
<TextInput
id={parameter.id}
ref={ref}
value={focused ? expression : display}
error={errorMessage}
onFocus={(event) => {
setFocused(true);
event.currentTarget.select();
}}
onBlur={handleSubmit}
onKeyDown={(event) => {
if (event.key === "Enter") {
ref.current?.blur();
handleSubmit();
}
}}
onChange={(event) => {
setExpression(event.currentTarget.value);
}}
/>
</div>
</Group>
);
}
Loading