Overhaul pose picker button to have text now, for all users
This one isn't reserved just for Support users! I think this button stands out a lot more with the text, and I want people to be able to discover it!
This commit is contained in:
parent
4025dcd968
commit
33bcabab83
2 changed files with 29 additions and 21 deletions
|
@ -215,12 +215,6 @@ function OutfitControls({
|
||||||
* We try to center the species/color picker, but the left spacer will
|
* We try to center the species/color picker, but the left spacer will
|
||||||
* shrink more than the pose picker container if we run out of space!
|
* shrink more than the pose picker container if we run out of space!
|
||||||
*/}
|
*/}
|
||||||
<Flex
|
|
||||||
flex="1 1 0"
|
|
||||||
paddingRight="3"
|
|
||||||
align="center"
|
|
||||||
justify="flex-end"
|
|
||||||
/>
|
|
||||||
<Box flex="0 0 auto">
|
<Box flex="0 0 auto">
|
||||||
<DarkMode>
|
<DarkMode>
|
||||||
<SpeciesColorPicker
|
<SpeciesColorPicker
|
||||||
|
@ -234,7 +228,7 @@ function OutfitControls({
|
||||||
/>
|
/>
|
||||||
</DarkMode>
|
</DarkMode>
|
||||||
</Box>
|
</Box>
|
||||||
<Flex flex="1 1 0" align="center" pl="2">
|
<Flex flex="0 0 auto" align="center" pl="2">
|
||||||
<PosePicker
|
<PosePicker
|
||||||
speciesId={outfitState.speciesId}
|
speciesId={outfitState.speciesId}
|
||||||
colorId={outfitState.colorId}
|
colorId={outfitState.colorId}
|
||||||
|
|
|
@ -23,6 +23,7 @@ import {
|
||||||
useToast,
|
useToast,
|
||||||
useToken,
|
useToken,
|
||||||
} from "@chakra-ui/react";
|
} from "@chakra-ui/react";
|
||||||
|
import { ChevronDownIcon } from "@chakra-ui/icons";
|
||||||
import { loadable } from "../util";
|
import { loadable } from "../util";
|
||||||
|
|
||||||
import { petAppearanceFragment } from "../components/useOutfitAppearance";
|
import { petAppearanceFragment } from "../components/useOutfitAppearance";
|
||||||
|
@ -144,10 +145,6 @@ function PosePicker({
|
||||||
dispatchToOutfit,
|
dispatchToOutfit,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// This is a low-stakes enough control, where enough pairs don't have data
|
// This is a low-stakes enough control, where enough pairs don't have data
|
||||||
// anyway, that I think I want to just not draw attention to failures.
|
// anyway, that I think I want to just not draw attention to failures.
|
||||||
if (error) {
|
if (error) {
|
||||||
|
@ -175,7 +172,12 @@ function PosePicker({
|
||||||
{({ isOpen }) => (
|
{({ isOpen }) => (
|
||||||
<>
|
<>
|
||||||
<PopoverTrigger>
|
<PopoverTrigger>
|
||||||
<PosePickerButton pose={pose} isOpen={isOpen} {...props} />
|
<PosePickerButton
|
||||||
|
pose={pose}
|
||||||
|
isOpen={isOpen}
|
||||||
|
loading={loading}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<Portal>
|
<Portal>
|
||||||
<PopoverContent>
|
<PopoverContent>
|
||||||
|
@ -248,7 +250,7 @@ function PosePicker({
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function PosePickerButton({ pose, isOpen, ...props }, ref) {
|
function PosePickerButton({ pose, isOpen, loading, ...props }, ref) {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -265,16 +267,28 @@ function PosePickerButton({ pose, isOpen, ...props }, ref) {
|
||||||
outline="initial"
|
outline="initial"
|
||||||
fontSize="sm"
|
fontSize="sm"
|
||||||
fontWeight="normal"
|
fontWeight="normal"
|
||||||
|
minWidth="12ch"
|
||||||
|
disabled={loading}
|
||||||
className={cx(
|
className={cx(
|
||||||
css`
|
css`
|
||||||
border: 1px solid transparent !important;
|
border: 1px solid transparent !important;
|
||||||
transition: border-color 0.2s !important;
|
color: ${theme.colors.gray["300"]};
|
||||||
padding-inline: 0.75em;
|
cursor: ${loading ? "wait" : "pointer"} !important;
|
||||||
|
transition:
|
||||||
|
color 0.2s,
|
||||||
|
border-color 0.2s !important;
|
||||||
|
padding-left: 0.75em;
|
||||||
|
padding-right: 0.5em;
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&.is-open {
|
&.is-open {
|
||||||
border-color: ${theme.colors.gray["50"]} !important;
|
border-color: ${theme.colors.gray["50"]} !important;
|
||||||
|
color: ${theme.colors.gray["50"]};
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: ${theme.colors.gray["50"]} !important;
|
||||||
|
box-shadow: ${theme.shadows.outline};
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-open {
|
&.is-open {
|
||||||
|
@ -286,11 +300,11 @@ function PosePickerButton({ pose, isOpen, ...props }, ref) {
|
||||||
{...props}
|
{...props}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
>
|
>
|
||||||
<EmojiImage src={getIcon(pose)} alt="" />
|
<EmojiImage src={getIcon(pose)} alt="Style" />
|
||||||
<SupportOnly>
|
|
||||||
<Box width=".5em" />
|
<Box width=".5em" />
|
||||||
{getLabel(pose)}
|
{getLabel(pose)}
|
||||||
</SupportOnly>
|
<Box width=".5em" />
|
||||||
|
<ChevronDownIcon />
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</ClassNames>
|
</ClassNames>
|
||||||
|
|
Loading…
Reference in a new issue