feat: better control layout

This commit is contained in:
TrèsAbhi committed 2024-04-06 18:28:16 -05:00
1 parent c057e295d2
commit 8160935081
1 file changed
+58 -56
+58 -56
View File
@@ -292,52 +292,67 @@ export default function Page() {
return ( return (
<PageWrapper color="crimson" size="100%"> <PageWrapper color="crimson" size="100%">
<Flex justify="center" gap="2" align="center" mt="4"> <Flex justify="center" gap="2" align="center" mt="4" direction="column">
<Dialog.Root <Flex gap="2">
open={addTankDialogOpen} <Dialog.Root
onOpenChange={setAddTankDialogOpen} open={addTankDialogOpen}
> onOpenChange={setAddTankDialogOpen}
<Dialog.Trigger> >
<Button> <Dialog.Trigger>
<PlusIcon /> Add <Button>
</Button> <PlusIcon /> Add
</Dialog.Trigger> </Button>
</Dialog.Trigger>
<Dialog.Content> <Dialog.Content>
<Flex gap="4" direction="column"> <Flex gap="4" direction="column">
<Flex <Flex
direction="column" direction="column"
gap="4" gap="4"
style={{ flex: 1 }} style={{ flex: 1 }}
justify="center" justify="center"
> >
<TankSearch <TankSearch
compact compact
onSelect={(tank) => { onSelect={(tank) => {
mutateCompareTemporary((draft) => { mutateCompareTemporary((draft) => {
draft.members.push( draft.members.push(
tankToCompareMember(tank, awaitedSkillDefinitions),
);
draft.sorting = undefined;
});
setAddTankDialogOpen(false);
}}
onSelectAll={(tanks) => {
mutateCompareTemporary((draft) => {
draft.members.push(
...tanks.map((tank) =>
tankToCompareMember(tank, awaitedSkillDefinitions), tankToCompareMember(tank, awaitedSkillDefinitions),
), );
); draft.sorting = undefined;
draft.sorting = undefined; });
}); setAddTankDialogOpen(false);
setAddTankDialogOpen(false); }}
}} onSelectAll={(tanks) => {
/> mutateCompareTemporary((draft) => {
draft.members.push(
...tanks.map((tank) =>
tankToCompareMember(tank, awaitedSkillDefinitions),
),
);
draft.sorting = undefined;
});
setAddTankDialogOpen(false);
}}
/>
</Flex>
</Flex> </Flex>
</Flex> </Dialog.Content>
</Dialog.Content> </Dialog.Root>
</Dialog.Root>
<Button
variant="soft"
color="red"
onClick={() => {
mutateCompareTemporary((draft) => {
draft.members = [];
draft.sorting = undefined;
});
}}
>
<TrashIcon /> Clear
</Button>
</Flex>
<SegmentedControl.Root <SegmentedControl.Root
value={deltaMode} value={deltaMode}
@@ -357,19 +372,6 @@ export default function Page() {
Nominal Nominal
</SegmentedControl.Item> </SegmentedControl.Item>
</SegmentedControl.Root> </SegmentedControl.Root>
<IconButton
variant="soft"
color="red"
onClick={() => {
mutateCompareTemporary((draft) => {
draft.members = [];
draft.sorting = undefined;
});
}}
>
<TrashIcon />
</IconButton>
</Flex> </Flex>
{members.length > 0 && ( {members.length > 0 && (