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,
Tooltip,
VisuallyHidden,
Menu,
MenuButton,
MenuList,
MenuItem,
Portal,
} from "@chakra-ui/react";
import { EditIcon, QuestionIcon } from "@chakra-ui/icons";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import { Delay, Heading1, Heading2 } from "../util";
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
@ -239,58 +244,60 @@ function ItemZoneGroupSkeleton({ itemCount }) {
/**
* 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 }) {
return (
<Flex align="flex-start" justify="space-between">
<Box marginRight="4">
<Box role="group" d="inline-block" position="relative" width="100%">
<Heading1 mb="6">
<Editable
// Make sure not to ever pass `undefined` into here, or else the
// component enters uncontrolled mode, and changing the value
// later won't fix it!
value={outfitState.name || ""}
placeholder="Untitled outfit"
onChange={(value) =>
dispatchToOutfit({ type: "rename", outfitName: value })
}
>
{({ isEditing, onEdit }) => (
<Flex align="flex-top">
<EditablePreview />
<EditableInput />
{!isEditing && (
<Box
opacity="0"
transition="opacity 0.5s"
_groupHover={{ opacity: "1" }}
onClick={onEdit}
>
<IconButton
icon={<EditIcon />}
variant="link"
aria-label="Edit outfit name"
title="Edit outfit name"
/>
</Box>
)}
</Flex>
)}
</Editable>
</Heading1>
</Box>
</Box>
{outfitState.id && (
<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"
placement="bottom-end"
>
Saved outfits are WIP!
</WIPCallout>
// The Editable wraps everything, including the menu, because the menu has
// a Rename option.
<Editable
// Make sure not to ever pass `undefined` into here, or else the
// component enters uncontrolled mode, and changing the value
// later won't fix it!
value={outfitState.name || ""}
placeholder="Untitled outfit"
onChange={(value) =>
dispatchToOutfit({ type: "rename", outfitName: value })
}
>
{({ onEdit }) => (
<Flex align="center" justify="space-between" marginBottom="6">
<Box marginRight="4">
<Box role="group" d="inline-block" position="relative" width="100%">
<Heading1>
<EditablePreview lineHeight="48px" />
<EditableInput lineHeight="48px" />
</Heading1>
</Box>
</Box>
<Menu placement="bottom-end">
<MenuButton
as={IconButton}
variant="ghost"
icon={<MdMoreVert />}
aria-label="Outfit menu"
borderRadius="full"
fontSize="24px"
opacity="0.8"
/>
<Portal>
<MenuList>
<MenuItem
icon={<EditIcon />}
onClick={() => {
// Start the rename after a tick, so finishing up the click
// won't just immediately remove focus from the Editable.
setTimeout(onEdit, 0);
}}
>
Rename
</MenuItem>
</MenuList>
</Portal>
</Menu>
</Flex>
)}
</Flex>
</Editable>
);
}