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

Compare commits

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

2 commits
49158b2c54 ... bdfa3aad0b

Author SHA1 Message Date
Emi Matchu
bdfa3aad0b Oops, fix bug in alt styles query loading state 
Oh right, React Query's API is slightly different, fixed! (Previously,
this would cause the PosePicker to show before all the data was ready,
so alt styles would sometimes pop in after the popover was already
open.)
 2024-01-29 09:10:26 -08:00
Emi Matchu
8f934e83b8 Move Expressions/Styles tab to the top/bottom depending on placement 
On small screens, the PosePicker opens down, and we put the tabs on the
top, to be near the button.

On large screens, the PosePicker opens up, and we put the tabs on the
bottom, to be near the button.

Previously, we always set `placement="bottom-end"`, which on small
screens behaved as written, and on large screens there would not be
space to open downward so it would open upward instead.

Now, we set the placement explicitly based on a media breakpoint, and
we change the `flexDirection` of the tabs container on the same media
breakpoint.
 2024-01-29 09:09:09 -08:00
1 changed files with 22 additions and 12 deletions
Show stats Expand all files Collapse all files

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

@ -17,6 +17,7 @@ import {
TabPanel, TabPanel,
TabPanels, TabPanels,
VisuallyHidden, VisuallyHidden,
useBreakpointValue,
useColorModeValue, useColorModeValue,
useTheme, useTheme,
useToast, useToast,
@ -80,11 +81,13 @@ function PosePicker({
const { isSupportUser } = useSupport(); const { isSupportUser } = useSupport();
const toast = useToast(); const toast = useToast();
const loading = posesQuery.loading || altStylesQuery.loading; const loading = posesQuery.loading || altStylesQuery.isLoading;
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(() => {
@ -161,7 +164,7 @@ function PosePicker({
return ( return (
<Popover <Popover
placement="bottom-end" placement={placement}
returnFocusOnClose returnFocusOnClose
onOpen={onLockFocus} onOpen={onLockFocus}
onClose={onUnlockFocus} onClose={onUnlockFocus}
@ -176,9 +179,22 @@ function PosePicker({
</PopoverTrigger> </PopoverTrigger>
<Portal> <Portal>
<PopoverContent> <PopoverContent>
<Tabs size="sm" variant="soft-rounded"> <Tabs
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> <TabPanel paddingX="4" paddingY="0">
{isInSupportMode ? ( {isInSupportMode ? (
<PosePickerSupport <PosePickerSupport
speciesId={speciesId} speciesId={speciesId}
@ -201,7 +217,7 @@ function PosePicker({
</> </>
)} )}
<SupportOnly> <SupportOnly>
<Box position="absolute" top="5" left="3"> <Box position="absolute" top="1" left="3">
<PosePickerSupportSwitch <PosePickerSupportSwitch
isChecked={isInSupportMode} isChecked={isInSupportMode}
onChange={(e) => setIsInSupportMode(e.target.checked)} onChange={(e) => setIsInSupportMode(e.target.checked)}
@ -209,17 +225,11 @@ function PosePicker({
</Box> </Box>
</SupportOnly> </SupportOnly>
</TabPanel> </TabPanel>
<TabPanel> <TabPanel paddingX="4" paddingY="0">
<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>