OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

Compare commits

base: OpenNeo:bdfa3aad0b1fea458f69edcb6ac85d5e19cbd3a3
Branches Tags
OpenNeo:main
OpenNeo:modeling-tests
OpenNeo:rainbow-pool
OpenNeo:simpler-item-previews
..
compare: OpenNeo:49158b2c5459090814a069effcb3d9aa8402461d
Branches Tags
OpenNeo:main
OpenNeo:modeling-tests
OpenNeo:rainbow-pool
OpenNeo:simpler-item-previews

No commits in common. "bdfa3aad0b1fea458f69edcb6ac85d5e19cbd3a3" and "49158b2c5459090814a069effcb3d9aa8402461d" have entirely different histories.
bdfa3aad0b ... 49158b2c54

1 changed files with 12 additions and 22 deletions
Show stats Expand all files Collapse all files

34
app/javascript/wardrobe-2020/WardrobePage/PosePicker.js
View file

@ -17,7 +17,6 @@ import {
TabPanel, TabPanel,
TabPanels, TabPanels,
VisuallyHidden, VisuallyHidden,
useBreakpointValue,
useColorModeValue, useColorModeValue,
useTheme, useTheme,
useToast, useToast,
@ -81,13 +80,11 @@ function PosePicker({
const { isSupportUser } = useSupport(); const { isSupportUser } = useSupport();
const toast = useToast(); const toast = useToast();
const loading = posesQuery.loading || altStylesQuery.isLoading; const loading = posesQuery.loading || altStylesQuery.loading;
const error = posesQuery.error ?? altStylesQuery.error; const error = posesQuery.error ?? altStylesQuery.error;
const poseInfos = posesQuery.poseInfos; const poseInfos = posesQuery.poseInfos;
const altStyles = altStylesQuery.data ?? []; const altStyles = altStylesQuery.data ?? [];
const placement = useBreakpointValue({ base: "bottom-end", md: "top-end" });
// Resize the Popover when we toggle support mode, because it probably will // Resize the Popover when we toggle support mode, because it probably will
// affect the content size. // affect the content size.
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
@ -164,7 +161,7 @@ function PosePicker({
return ( return (
<Popover <Popover
placement={placement} placement="bottom-end"
returnFocusOnClose returnFocusOnClose
onOpen={onLockFocus} onOpen={onLockFocus}
onClose={onUnlockFocus} onClose={onUnlockFocus}
@ -179,22 +176,9 @@ function PosePicker({
</PopoverTrigger> </PopoverTrigger>
<Portal> <Portal>
<PopoverContent> <PopoverContent>
<Tabs <Tabs size="sm" variant="soft-rounded">
size="sm"
variant="soft-rounded"
display="flex"
flexDirection={{ base: "column", md: "column-reverse" }}
paddingY="2"
gap="2"
>
<SupportOnly>
<TabList paddingX="2" paddingY="0">
<Tab width="50%">Expressions</Tab>
<Tab width="50%">Styles</Tab>
</TabList>
</SupportOnly>
<TabPanels position="relative"> <TabPanels position="relative">
<TabPanel paddingX="4" paddingY="0"> <TabPanel>
{isInSupportMode ? ( {isInSupportMode ? (
<PosePickerSupport <PosePickerSupport
speciesId={speciesId} speciesId={speciesId}
@ -217,7 +201,7 @@ function PosePicker({
</> </>
)} )}
<SupportOnly> <SupportOnly>
<Box position="absolute" top="1" left="3"> <Box position="absolute" top="5" left="3">
<PosePickerSupportSwitch <PosePickerSupportSwitch
isChecked={isInSupportMode} isChecked={isInSupportMode}
onChange={(e) => setIsInSupportMode(e.target.checked)} onChange={(e) => setIsInSupportMode(e.target.checked)}
@ -225,11 +209,17 @@ function PosePicker({
</Box> </Box>
</SupportOnly> </SupportOnly>
</TabPanel> </TabPanel>
<TabPanel paddingX="4" paddingY="0"> <TabPanel>
<StyleSelect altStyles={altStyles} /> <StyleSelect altStyles={altStyles} />
<StyleExplanation /> <StyleExplanation />
</TabPanel> </TabPanel>
</TabPanels> </TabPanels>
<SupportOnly>
<TabList paddingX="2" paddingY="1">
<Tab width="50%">Expressions</Tab>
<Tab width="50%">Styles</Tab>
</TabList>
</SupportOnly>
</Tabs> </Tabs>
<PopoverArrow /> <PopoverArrow />
</PopoverContent> </PopoverContent>