Start adding Styles UI to pose picker
Add the tab UI, though the styles aren't in it yet; and add text label to help make the whole UI more discoverable.
This commit is contained in:
parent
57beca1b3c
commit
e2ab8bbc9c
2 changed files with 68 additions and 33 deletions
|
|
@ -11,6 +11,11 @@ import {
|
|||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
Portal,
|
||||
Tab,
|
||||
Tabs,
|
||||
TabList,
|
||||
TabPanel,
|
||||
TabPanels,
|
||||
VisuallyHidden,
|
||||
useColorModeValue,
|
||||
useTheme,
|
||||
|
|
@ -63,7 +68,6 @@ function PosePicker({
|
|||
onUnlockFocus,
|
||||
...props
|
||||
}) {
|
||||
const theme = useTheme();
|
||||
const initialFocusRef = React.useRef();
|
||||
const { loading, error, poseInfos } = usePoses(speciesId, colorId, pose);
|
||||
const [isInSupportMode, setIsInSupportMode] = useLocalStorage(
|
||||
|
|
@ -164,35 +168,46 @@ function PosePicker({
|
|||
</PopoverTrigger>
|
||||
<Portal>
|
||||
<PopoverContent>
|
||||
<Box p="4" position="relative">
|
||||
{isInSupportMode ? (
|
||||
<PosePickerSupport
|
||||
speciesId={speciesId}
|
||||
colorId={colorId}
|
||||
pose={pose}
|
||||
appearanceId={appearanceId}
|
||||
initialFocusRef={initialFocusRef}
|
||||
dispatchToOutfit={dispatchToOutfit}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<PosePickerTable
|
||||
poseInfos={poseInfos}
|
||||
onChange={onChange}
|
||||
initialFocusRef={initialFocusRef}
|
||||
/>
|
||||
{numStandardPoses == 0 && <PosePickerEmptyExplanation />}
|
||||
</>
|
||||
)}
|
||||
<SupportOnly>
|
||||
<Box position="absolute" top="5" left="3">
|
||||
<PosePickerSupportSwitch
|
||||
isChecked={isInSupportMode}
|
||||
onChange={(e) => setIsInSupportMode(e.target.checked)}
|
||||
/>
|
||||
</Box>
|
||||
</SupportOnly>
|
||||
</Box>
|
||||
<Tabs size="sm" variant="soft-rounded">
|
||||
<TabPanels position="relative">
|
||||
<TabPanel>
|
||||
{isInSupportMode ? (
|
||||
<PosePickerSupport
|
||||
speciesId={speciesId}
|
||||
colorId={colorId}
|
||||
pose={pose}
|
||||
appearanceId={appearanceId}
|
||||
initialFocusRef={initialFocusRef}
|
||||
dispatchToOutfit={dispatchToOutfit}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<PosePickerTable
|
||||
poseInfos={poseInfos}
|
||||
onChange={onChange}
|
||||
initialFocusRef={initialFocusRef}
|
||||
/>
|
||||
{numStandardPoses == 0 && (
|
||||
<PosePickerEmptyExplanation />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<SupportOnly>
|
||||
<Box position="absolute" top="5" left="3">
|
||||
<PosePickerSupportSwitch
|
||||
isChecked={isInSupportMode}
|
||||
onChange={(e) => setIsInSupportMode(e.target.checked)}
|
||||
/>
|
||||
</Box>
|
||||
</SupportOnly>
|
||||
</TabPanel>
|
||||
<TabPanel>WIP: Styles go here!</TabPanel>
|
||||
</TabPanels>
|
||||
<TabList paddingX="2" paddingY="1">
|
||||
<Tab width="50%">Expressions</Tab>
|
||||
<Tab width="50%">Styles</Tab>
|
||||
</TabList>
|
||||
</Tabs>
|
||||
<PopoverArrow />
|
||||
</PopoverContent>
|
||||
</Portal>
|
||||
|
|
@ -217,10 +232,13 @@ function PosePickerButton({ pose, isOpen, ...props }, ref) {
|
|||
_focus={{ borderColor: "gray.50" }}
|
||||
_hover={{ borderColor: "gray.50" }}
|
||||
outline="initial"
|
||||
fontSize="sm"
|
||||
fontWeight="normal"
|
||||
className={cx(
|
||||
css`
|
||||
border: 1px solid transparent !important;
|
||||
transition: border-color 0.2s !important;
|
||||
padding-inline: 0.75em;
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
|
|
@ -237,7 +255,9 @@ function PosePickerButton({ pose, isOpen, ...props }, ref) {
|
|||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<EmojiImage src={getIcon(pose)} alt="Choose a pose" />
|
||||
<EmojiImage src={getIcon(pose)} alt="" />
|
||||
<Box width=".5em" />
|
||||
{getLabel(pose)}
|
||||
</Button>
|
||||
)}
|
||||
</ClassNames>
|
||||
|
|
@ -514,7 +534,7 @@ function PosePickerEmptyExplanation() {
|
|||
marginTop="2"
|
||||
>
|
||||
We're still working on labeling these! For now, we're just giving you one
|
||||
of the poses we have.
|
||||
of the expressions we have.
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -654,7 +674,21 @@ function getIcon(pose) {
|
|||
} else if (pose === "UNCONVERTED") {
|
||||
return twemojiSunglasses;
|
||||
} else {
|
||||
return twemojiQuestion;
|
||||
return twemojiPaintbrush;
|
||||
}
|
||||
}
|
||||
|
||||
function getLabel(pose) {
|
||||
if (pose === "HAPPY_MASC" || pose === "HAPPY_FEM") {
|
||||
return "Happy";
|
||||
} else if (pose === "SAD_MASC" || pose === "SAD_FEM") {
|
||||
return "Sad";
|
||||
} else if (pose === "SICK_MASC" || pose === "SICK_FEM") {
|
||||
return "Sick";
|
||||
} else if (pose === "UNCONVERTED") {
|
||||
return "Classic UC";
|
||||
} else {
|
||||
return "Default";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#3B88C3" d="M14.57 27.673c2.814-1.692 6.635-3.807 9.899-7.071 7.03-7.029 12.729-16.97 11.314-18.385C34.369.803 24.428 6.502 17.398 13.531c-3.265 3.265-5.379 7.085-7.071 9.899l4.243 4.243z"/><path fill="#C1694F" d="M.428 34.744s7.071 1.414 12.021-3.536c2.121-2.121 2.121-4.949 2.121-4.949l-2.829-2.829s-3.535.708-4.95 2.122c-1.414 1.414-2.518 4.232-2.888 5.598-.676 2.502-3.475 3.594-3.475 3.594z"/><path fill="#CCD6DD" d="M17.882 25.328l-5.168-5.168c-.391-.391-.958-.326-1.27.145l-1.123 1.705c-.311.471-.271 1.142.087 1.501l4.122 4.123c.358.358 1.03.397 1.501.087l1.705-1.124c.472-.311.536-.878.146-1.269z"/><path fill="#A0041E" d="M11.229 32.26c-1.191.769-1.826.128-1.609-.609.221-.751-.12-1.648-1.237-1.414-1.117.233-1.856-.354-1.503-1.767.348-1.393-1.085-1.863-1.754-.435-.582 1.16-1.017 2.359-1.222 3.115-.677 2.503-3.476 3.595-3.476 3.595s5.988 1.184 10.801-2.485z"/></svg>
|
||||
|
After Width: | Height: | Size: 950 B |
Loading…
Reference in a new issue