forked from OpenNeo/impress
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
|
||||
* 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">
|
||||
<DarkMode>
|
||||
<SpeciesColorPicker
|
||||
|
@ -234,7 +228,7 @@ function OutfitControls({
|
|||
/>
|
||||
</DarkMode>
|
||||
</Box>
|
||||
<Flex flex="1 1 0" align="center" pl="2">
|
||||
<Flex flex="0 0 auto" align="center" pl="2">
|
||||
<PosePicker
|
||||
speciesId={outfitState.speciesId}
|
||||
colorId={outfitState.colorId}
|
||||
|
|
|
@ -23,6 +23,7 @@ import {
|
|||
useToast,
|
||||
useToken,
|
||||
} from "@chakra-ui/react";
|
||||
import { ChevronDownIcon } from "@chakra-ui/icons";
|
||||
import { loadable } from "../util";
|
||||
|
||||
import { petAppearanceFragment } from "../components/useOutfitAppearance";
|
||||
|
@ -144,10 +145,6 @@ function PosePicker({
|
|||
dispatchToOutfit,
|
||||
]);
|
||||
|
||||
if (loading) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// 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.
|
||||
if (error) {
|
||||
|
@ -175,7 +172,12 @@ function PosePicker({
|
|||
{({ isOpen }) => (
|
||||
<>
|
||||
<PopoverTrigger>
|
||||
<PosePickerButton pose={pose} isOpen={isOpen} {...props} />
|
||||
<PosePickerButton
|
||||
pose={pose}
|
||||
isOpen={isOpen}
|
||||
loading={loading}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverTrigger>
|
||||
<Portal>
|
||||
<PopoverContent>
|
||||
|
@ -248,7 +250,7 @@ function PosePicker({
|
|||
);
|
||||
}
|
||||
|
||||
function PosePickerButton({ pose, isOpen, ...props }, ref) {
|
||||
function PosePickerButton({ pose, isOpen, loading, ...props }, ref) {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
|
@ -265,16 +267,28 @@ function PosePickerButton({ pose, isOpen, ...props }, ref) {
|
|||
outline="initial"
|
||||
fontSize="sm"
|
||||
fontWeight="normal"
|
||||
minWidth="12ch"
|
||||
disabled={loading}
|
||||
className={cx(
|
||||
css`
|
||||
border: 1px solid transparent !important;
|
||||
transition: border-color 0.2s !important;
|
||||
padding-inline: 0.75em;
|
||||
color: ${theme.colors.gray["300"]};
|
||||
cursor: ${loading ? "wait" : "pointer"} !important;
|
||||
transition:
|
||||
color 0.2s,
|
||||
border-color 0.2s !important;
|
||||
padding-left: 0.75em;
|
||||
padding-right: 0.5em;
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.is-open {
|
||||
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 {
|
||||
|
@ -286,11 +300,11 @@ function PosePickerButton({ pose, isOpen, ...props }, ref) {
|
|||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<EmojiImage src={getIcon(pose)} alt="" />
|
||||
<SupportOnly>
|
||||
<Box width=".5em" />
|
||||
{getLabel(pose)}
|
||||
</SupportOnly>
|
||||
<EmojiImage src={getIcon(pose)} alt="Style" />
|
||||
<Box width=".5em" />
|
||||
{getLabel(pose)}
|
||||
<Box width=".5em" />
|
||||
<ChevronDownIcon />
|
||||
</Button>
|
||||
)}
|
||||
</ClassNames>
|
||||
|
|
Loading…
Reference in a new issue