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

add appearance layer support modal

Browse source 
Just some metadata for now, want to add body modification next!
This commit is contained in:
Emi Matchu 2020-08-01 12:50:01 -07:00
parent 05fe511bda
commit 488299353a
2 changed files with 134 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
src/app/WardrobePage/support/ItemSupportAppearanceLayerModal.js Normal file
View file

@ -0,0 +1,87 @@
import * as React from "react";
import {
Button,
Box,
HStack,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalHeader,
ModalOverlay,
} from "@chakra-ui/core";
import { ExternalLinkIcon } from "@chakra-ui/icons";
function ItemSupportAppearanceLayerModal({ item, itemLayer, isOpen, onClose }) {
return (
<Modal size="xl" isOpen={isOpen} onClose={onClose}>
<ModalOverlay>
<ModalContent>
<ModalHeader>
Layer {itemLayer.id}: {item.name}
</ModalHeader>
<ModalCloseButton />
<ModalBody mb="4" pb="4">
<Box
as="dl"
display="grid"
gridTemplateColumns="max-content auto"
gridRowGap="1"
gridColumnGap="2"
>
<Box as="dt" gridColumn="1" fontWeight="bold">
ID:
</Box>
<Box as="dd" gridColumn="2">
{itemLayer.id}
</Box>
<Box as="dt" gridColumn="1" fontWeight="bold">
Zone:
</Box>
<Box as="dd" gridColumn="2">
{itemLayer.zone.label} ({itemLayer.zone.id})
</Box>
<Box as="dt" gridColumn="1" fontWeight="bold">
Assets:
</Box>
<HStack as="dd" gridColumn="2" spacing="2">
{itemLayer.svgUrl ? (
<Button
as="a"
size="xs"
target="_blank"
href={itemLayer.svgUrl}
colorScheme="teal"
>
SVG <ExternalLinkIcon ml="1" />
</Button>
) : (
<Button size="xs" isDisabled>
No SVG
</Button>
)}
{itemLayer.imageUrl ? (
<Button
as="a"
size="xs"
target="_blank"
href={itemLayer.imageUrl}
colorScheme="teal"
>
PNG <ExternalLinkIcon ml="1" />
</Button>
) : (
<Button size="xs" isDisabled>
No PNG
</Button>
)}
</HStack>
</Box>
</ModalBody>
</ModalContent>
</ModalOverlay>
</Modal>
);
}
export default ItemSupportAppearanceLayerModal;

54
src/app/WardrobePage/support/ItemSupportDrawer.js
View file

@ -1,6 +1,7 @@
import * as React from "react";
import gql from "graphql-tag";
import { useQuery, useMutation } from "@apollo/client";
import { css } from "emotion";
import {
Badge,
Box,
@ -20,9 +21,11 @@ import {
Spinner,
Stack,
useBreakpointValue,
useDisclosure,
} from "@chakra-ui/core";
import { CheckCircleIcon, ExternalLinkIcon } from "@chakra-ui/icons";
import { CheckCircleIcon, EditIcon, ExternalLinkIcon } from "@chakra-ui/icons";
import ItemSupportAppearanceLayerModal from "./ItemSupportAppearanceLayerModal";
import { OutfitLayers } from "../../components/OutfitPreview";
import useOutfitAppearance from "../../components/useOutfitAppearance";
import useSupportSecret from "./useSupportSecret";
@ -244,11 +247,12 @@ function ItemSupportAppearanceFields({ item, outfitState }) {
return (
<FormControl>
<FormLabel>Appearance layers</FormLabel>
<HStack spacing="4" overflow="auto">
<HStack spacing="4" overflow="auto" paddingX="1">
{itemLayers.map((itemLayer) => (
<ItemSupportAppearanceLayer
biologyLayers={biologyLayers}
itemLayer={itemLayer}
item={item}
/>
))}
</HStack>
@ -257,9 +261,18 @@ function ItemSupportAppearanceFields({ item, outfitState }) {
);
}
function ItemSupportAppearanceLayer({ biologyLayers, itemLayer }) {
function ItemSupportAppearanceLayer({ biologyLayers, itemLayer, item }) {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<Box width="150px" textAlign="center" fontSize="xs">
<Box
as="button"
width="150px"
textAlign="center"
fontSize="xs"
position="relative"
onClick={onOpen}
>
<Box
width="150px"
height="150px"
@ -269,11 +282,38 @@ function ItemSupportAppearanceLayer({ biologyLayers, itemLayer }) {
>
<OutfitLayers visibleLayers={[...biologyLayers, itemLayer]} />
</Box>
<Box>
<b>{itemLayer.zone.label}</b>
</Box>
<Box fontWeight="bold">{itemLayer.zone.label}</Box>
<Box>Zone ID: {itemLayer.zone.id}</Box>
<Box>Layer ID: {itemLayer.id}</Box>
<Box
className={css`
opacity: 0;
transition: opacity 0.2s;
button:hover > &,
button:focus > & {
opacity: 1;
}
`}
background="rgba(255, 255, 255, 0.8)"
borderRadius="full"
position="absolute"
top="2"
right="2"
padding="2"
alignItems="center"
justifyContent="center"
width="32px"
height="32px"
>
<EditIcon boxSize="16px" position="relative" top="-2px" right="-1px" />
</Box>
<ItemSupportAppearanceLayerModal
item={item}
itemLayer={itemLayer}
isOpen={isOpen}
onClose={onClose}
/>
</Box>
);
}