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

Move Expressions/Styles tab to the top/bottom depending on placement

Browse source 
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.
This commit is contained in:
Emi Matchu 2024-01-29 09:09:09 -08:00
parent 49158b2c54
commit 8f934e83b8
1 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,6 +17,7 @@ import {
TabPanel,
TabPanels,
VisuallyHidden,
useBreakpointValue,
useColorModeValue,
useTheme,
useToast,
@ -85,6 +86,8 @@ function PosePicker({
const poseInfos = posesQuery.poseInfos;
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
// affect the content size.
React.useLayoutEffect(() => {
@ -161,7 +164,7 @@ function PosePicker({
return (
<Popover
placement="bottom-end"
placement={placement}
returnFocusOnClose
onOpen={onLockFocus}
onClose={onUnlockFocus}
@ -176,9 +179,22 @@ function PosePicker({
</PopoverTrigger>
<Portal>
<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">
<TabPanel>
<TabPanel paddingX="4" paddingY="0">
{isInSupportMode ? (
<PosePickerSupport
speciesId={speciesId}
@ -201,7 +217,7 @@ function PosePicker({
</>
)}
<SupportOnly>
<Box position="absolute" top="5" left="3">
<Box position="absolute" top="1" left="3">
<PosePickerSupportSwitch
isChecked={isInSupportMode}
onChange={(e) => setIsInSupportMode(e.target.checked)}
@ -209,17 +225,11 @@ function PosePicker({
</Box>
</SupportOnly>
</TabPanel>
<TabPanel>
<TabPanel paddingX="4" paddingY="0">
<StyleSelect altStyles={altStyles} />
<StyleExplanation />
</TabPanel>
</TabPanels>
<SupportOnly>
<TabList paddingX="2" paddingY="1">
<Tab width="50%">Expressions</Tab>
<Tab width="50%">Styles</Tab>
</TabList>
</SupportOnly>
</Tabs>
<PopoverArrow />
</PopoverContent>