Add arrow buttons to PosePickerSupport

Easier to move between appearances quickly! I'm adding this in anticipation of a use case of rapidly labeling Unknown appearances—I want it to be easy to label one and go to the next!
This commit is contained in:
Emi Matchu 2020-08-30 23:22:06 -07:00
parent 5ce5356825
commit 45ab35216f
2 changed files with 82 additions and 28 deletions

View file

@ -13,6 +13,7 @@ function Metadata({ children, ...otherProps }) {
gridTemplateColumns="max-content auto" gridTemplateColumns="max-content auto"
gridRowGap="1" gridRowGap="1"
gridColumnGap="2" gridColumnGap="2"
{...otherProps}
> >
{children} {children}
</Box> </Box>

View file

@ -1,7 +1,8 @@
import React from "react"; import React from "react";
import gql from "graphql-tag"; import gql from "graphql-tag";
import { useQuery } from "@apollo/client"; import { useQuery } from "@apollo/client";
import { Box, Select, Switch } from "@chakra-ui/core"; import { Box, IconButton, Select, Switch } from "@chakra-ui/core";
import { ArrowBackIcon, ArrowForwardIcon } from "@chakra-ui/icons";
import HangerSpinner from "../../components/HangerSpinner"; import HangerSpinner from "../../components/HangerSpinner";
import Metadata, { MetadataLabel, MetadataValue } from "./Metadata"; import Metadata, { MetadataLabel, MetadataValue } from "./Metadata";
@ -143,33 +144,13 @@ function PosePickerSupport({
return ( return (
<Box> <Box>
<Box display="flex" justifyContent="flex-end" marginBottom="4"> <PosePickerSupportNavigator
<Select petAppearances={data.petAppearances}
size="sm" currentPetAppearance={currentPetAppearance}
width="auto" canonicalAppearanceIds={canonicalAppearanceIds}
value={appearanceId} dispatchToOutfit={dispatchToOutfit}
onChange={(e) => { />
const id = e.target.value; <Metadata fontSize="sm">
const petAppearance = data.petAppearances.find(
(pa) => pa.id === id
);
dispatchToOutfit({
type: "setPose",
pose: petAppearance.pose,
appearanceId: petAppearance.id,
});
}}
>
{data.petAppearances.map((pa) => (
<option key={pa.id} value={pa.id}>
{POSE_NAMES[pa.pose]} ({pa.id}){" "}
{canonicalAppearanceIds.includes(pa.id) && "⭐️"}
{pa.isGlitched && "👾"}
</option>
))}
</Select>
</Box>
<Metadata>
<MetadataLabel>DTI ID:</MetadataLabel> <MetadataLabel>DTI ID:</MetadataLabel>
<MetadataValue>{appearanceId}</MetadataValue> <MetadataValue>{appearanceId}</MetadataValue>
<MetadataLabel>Pose:</MetadataLabel> <MetadataLabel>Pose:</MetadataLabel>
@ -214,6 +195,78 @@ function PosePickerSupport({
); );
} }
function PosePickerSupportNavigator({
petAppearances,
currentPetAppearance,
canonicalAppearanceIds,
dispatchToOutfit,
}) {
const currentIndex = petAppearances.indexOf(currentPetAppearance);
const prevPetAppearance = petAppearances[currentIndex - 1];
const nextPetAppearance = petAppearances[currentIndex + 1];
return (
<Box
display="flex"
justifyContent="flex-end"
marginBottom="4"
// Space for the position-absolute PosePicker mode switcher
paddingLeft="12"
>
<IconButton
aria-label="Go to previous appearance"
icon={<ArrowBackIcon />}
size="sm"
marginRight="2"
isDisabled={prevPetAppearance == null}
onClick={() =>
dispatchToOutfit({
type: "setPose",
pose: prevPetAppearance.pose,
appearanceId: prevPetAppearance.id,
})
}
/>
<Select
size="sm"
width="auto"
value={currentPetAppearance.id}
onChange={(e) => {
const id = e.target.value;
const petAppearance = petAppearances.find((pa) => pa.id === id);
dispatchToOutfit({
type: "setPose",
pose: petAppearance.pose,
appearanceId: petAppearance.id,
});
}}
>
{petAppearances.map((pa) => (
<option key={pa.id} value={pa.id}>
{POSE_NAMES[pa.pose]}{" "}
{canonicalAppearanceIds.includes(pa.id) && "⭐️"}
{pa.isGlitched && "👾"} ({pa.id})
</option>
))}
</Select>
<IconButton
aria-label="Go to next appearance"
icon={<ArrowForwardIcon />}
size="sm"
marginLeft="2"
isDisabled={nextPetAppearance == null}
onClick={() =>
dispatchToOutfit({
type: "setPose",
pose: nextPetAppearance.pose,
appearanceId: nextPetAppearance.id,
})
}
/>
</Box>
);
}
export function PosePickerSupportSwitch({ isChecked, onChange }) { export function PosePickerSupportSwitch({ isChecked, onChange }) {
return ( return (
<Box as="label" display="flex" flexDirection="row" alignItems="center"> <Box as="label" display="flex" flexDirection="row" alignItems="center">