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

Move Rename into outfit menu

Browse source 
More stuff will be there later, mostly I'm just creating the new home, and making room for the new save UI
This commit is contained in:
Emi Matchu 2021-03-29 19:25:00 -07:00
parent 9f5b8a7e6e
commit 7a7c166148
1 changed files with 56 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
src/app/WardrobePage/ItemsPanel.js
View file

@ -10,13 +10,18 @@ import {
Skeleton, Skeleton,
Tooltip, Tooltip,
VisuallyHidden, VisuallyHidden,
Menu,
MenuButton,
MenuList,
MenuItem,
Portal,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { EditIcon, QuestionIcon } from "@chakra-ui/icons"; import { EditIcon, QuestionIcon } from "@chakra-ui/icons";
import { CSSTransition, TransitionGroup } from "react-transition-group"; import { CSSTransition, TransitionGroup } from "react-transition-group";
import { Delay, Heading1, Heading2 } from "../util"; import { Delay, Heading1, Heading2 } from "../util";
import Item, { ItemListContainer, ItemListSkeleton } from "./Item"; import Item, { ItemListContainer, ItemListSkeleton } from "./Item";
import WIPCallout from "../components/WIPCallout"; import { MdMoreVert } from "react-icons/md";
/** /**
* ItemsPanel shows the items in the current outfit, and lets the user toggle * ItemsPanel shows the items in the current outfit, and lets the user toggle
@ -239,58 +244,60 @@ function ItemZoneGroupSkeleton({ itemCount }) {
/** /**
* OutfitHeading is an editable outfit name, as a big pretty page heading! * OutfitHeading is an editable outfit name, as a big pretty page heading!
* It also contains the outfit menu, for saving etc.
*/ */
function OutfitHeading({ outfitState, dispatchToOutfit }) { function OutfitHeading({ outfitState, dispatchToOutfit }) {
return ( return (
<Flex align="flex-start" justify="space-between"> // The Editable wraps everything, including the menu, because the menu has
<Box marginRight="4"> // a Rename option.
<Box role="group" d="inline-block" position="relative" width="100%"> <Editable
<Heading1 mb="6"> // Make sure not to ever pass `undefined` into here, or else the
<Editable // component enters uncontrolled mode, and changing the value
// Make sure not to ever pass `undefined` into here, or else the // later won't fix it!
// component enters uncontrolled mode, and changing the value value={outfitState.name || ""}
// later won't fix it! placeholder="Untitled outfit"
value={outfitState.name || ""} onChange={(value) =>
placeholder="Untitled outfit" dispatchToOutfit({ type: "rename", outfitName: value })
onChange={(value) => }
dispatchToOutfit({ type: "rename", outfitName: value }) >
} {({ onEdit }) => (
> <Flex align="center" justify="space-between" marginBottom="6">
{({ isEditing, onEdit }) => ( <Box marginRight="4">
<Flex align="flex-top"> <Box role="group" d="inline-block" position="relative" width="100%">
<EditablePreview /> <Heading1>
<EditableInput /> <EditablePreview lineHeight="48px" />
{!isEditing && ( <EditableInput lineHeight="48px" />
<Box </Heading1>
opacity="0" </Box>
transition="opacity 0.5s" </Box>
_groupHover={{ opacity: "1" }} <Menu placement="bottom-end">
onClick={onEdit} <MenuButton
> as={IconButton}
<IconButton variant="ghost"
icon={<EditIcon />} icon={<MdMoreVert />}
variant="link" aria-label="Outfit menu"
aria-label="Edit outfit name" borderRadius="full"
title="Edit outfit name" fontSize="24px"
/> opacity="0.8"
</Box> />
)} <Portal>
</Flex> <MenuList>
)} <MenuItem
</Editable> icon={<EditIcon />}
</Heading1> onClick={() => {
</Box> // Start the rename after a tick, so finishing up the click
</Box> // won't just immediately remove focus from the Editable.
{outfitState.id && ( setTimeout(onEdit, 0);
<WIPCallout }}
details={`To save a new version of this outfit, use Classic DTI. But you can still play around in here for now!`} >
marginTop="1" Rename
placement="bottom-end" </MenuItem>
> </MenuList>
Saved outfits are WIP! </Portal>
</WIPCallout> </Menu>
</Flex>
)} )}
</Flex> </Editable>
); );
} }