From 1cc4d718a541c34e62a3cc15705833d206036437 Mon Sep 17 00:00:00 2001 From: Matchu Date: Sun, 6 Sep 2020 23:49:04 -0700 Subject: [PATCH] basic modeling page cute cards! --- src/app/ModelingPage.js | 35 ++++-- src/app/WardrobePage/Item.js | 181 ++++++------------------------ src/app/components/ItemSummary.js | 151 +++++++++++++++++++++++++ 3 files changed, 211 insertions(+), 156 deletions(-) create mode 100644 src/app/components/ItemSummary.js diff --git a/src/app/ModelingPage.js b/src/app/ModelingPage.js index e8a4716..5538ea4 100644 --- a/src/app/ModelingPage.js +++ b/src/app/ModelingPage.js @@ -1,15 +1,17 @@ import React from "react"; -import { Box } from "@chakra-ui/core"; +import { Badge, Box, SimpleGrid } from "@chakra-ui/core"; import gql from "graphql-tag"; import { useQuery } from "@apollo/client"; import HangerSpinner from "./components/HangerSpinner"; -import { Heading1 } from "./util"; +import { Heading1, Heading2 } from "./util"; +import ItemSummary, { ItemSummaryBadgeList } from "./components/ItemSummary"; function ModelingPage() { return ( Modeling Hub + Item models we need ); @@ -42,24 +44,35 @@ function ItemModelsList() { return {error.message}; } - const items = [...data.itemsThatNeedModels].sort((a, b) => - a.name.localeCompare(b.name) - ); + const items = data.itemsThatNeedModels + // enough MMEs are broken that I just don't want to deal right now! + .filter((item) => !item.name.includes("MME")) + .sort((a, b) => a.name.localeCompare(b.name)); return ( - + {items.map((item) => ( - + ))} + + ); +} + +function ItemModelCard({ item, ...props }) { + return ( + + } /> ); } -function ItemModelCard({ item }) { +function ItemModelBadges({ item }) { return ( - - {item.name} - + + {item.speciesThatNeedModels.map((species) => ( + {species.name} + ))} + ); } diff --git a/src/app/WardrobePage/Item.js b/src/app/WardrobePage/Item.js index a220bce..b96b0f8 100644 --- a/src/app/WardrobePage/Item.js +++ b/src/app/WardrobePage/Item.js @@ -5,10 +5,8 @@ import { Box, Flex, IconButton, - Image, Skeleton, Tooltip, - Wrap, useColorModeValue, useTheme, } from "@chakra-ui/core"; @@ -20,7 +18,7 @@ import { } from "@chakra-ui/icons"; import loadable from "@loadable/component"; -import { safeImageUrl } from "../util"; +import ItemSummary, { ItemSummaryBadgeList } from "../components/ItemSummary"; import SupportOnly from "./support/SupportOnly"; const LoadableItemSupportDrawer = loadable(() => @@ -56,59 +54,19 @@ function Item({ }) { const [supportDrawerIsOpen, setSupportDrawerIsOpen] = React.useState(false); - const occupiedZoneLabels = getZoneLabels( - item.appearanceOn.layers.map((l) => l.zone) - ); - const restrictedZoneLabels = getZoneLabels( - item.appearanceOn.restrictedZones.filter((z) => z.isCommonlyUsedByItems) - ); - return ( <> - - + } + itemNameId={itemNameId} isWorn={isWorn} - isDisabled={isDisabled} + isDiabled={isDisabled} + focusSelector={containerHasFocus} /> - - - {item.name} - - - {item.isNc ? ( - - NC - - ) : ( - // The main purpose of the NP badge is alignment: if there are - // zone badges, we want them to start at the same rough position, - // even if there's an NC badge at the start. But if this view - // generally avoids zone badges, we'd rather have the NC badge be - // a little extra that might pop up and hide the NP case, rather - // than try to line things up like a table. - - NP - - )} - {occupiedZoneLabels.map((zoneLabel) => ( - - ))} - {restrictedZoneLabels.map((zoneLabel) => ( - - ))} - - {isInOutfit && ( l.zone) ); - - const focusBorderColor = useColorModeValue( - theme.colors.green["600"], - "transparent" + const restrictedZoneLabels = getZoneLabels( + item.appearanceOn.restrictedZones.filter((z) => z.isCommonlyUsedByItems) ); return ( - - - - - - ); -} - -/** - * ItemName shows the item's name, including some hover/focus and worn/unworn - * states. - */ -function ItemName({ children, isDisabled, ...props }) { - const theme = useTheme(); - - return ( - - {children} - + + {item.isNc ? ( + + NC + + ) : ( + // The main purpose of the NP badge is alignment: if there are + // zone badges, we want them to start at the same rough position, + // even if there's an NC badge at the start. But if this view + // generally avoids zone badges, we'd rather have the NC badge be + // a little extra that might pop up and hide the NP case, rather + // than try to line things up like a table. + + NP + + )} + {occupiedZoneLabels.map((zoneLabel) => ( + + ))} + {restrictedZoneLabels.map((zoneLabel) => ( + + ))} + ); } diff --git a/src/app/components/ItemSummary.js b/src/app/components/ItemSummary.js new file mode 100644 index 0000000..06347c0 --- /dev/null +++ b/src/app/components/ItemSummary.js @@ -0,0 +1,151 @@ +import React from "react"; +import { css } from "emotion"; +import { Box, Image, Wrap, useColorModeValue, useTheme } from "@chakra-ui/core"; + +import { safeImageUrl } from "../util"; + +function ItemSummary({ + item, + badges, + isWorn, + isDisabled, + itemNameId, + focusSelector, +}) { + return ( + + + + + + + {item.name} + + + {badges} + + + ); +} + +/** + * ItemThumbnail shows a small preview image for the item, including some + * hover/focus and worn/unworn states. + */ +function ItemThumbnail({ src, isWorn, isDisabled, focusSelector }) { + const theme = useTheme(); + + const borderColor = useColorModeValue( + theme.colors.green["700"], + "transparent" + ); + + const focusBorderColor = useColorModeValue( + theme.colors.green["600"], + "transparent" + ); + + return ( + + + + + + ); +} + +/** + * ItemName shows the item's name, including some hover/focus and worn/unworn + * states. + */ +function ItemName({ children, isDisabled, focusSelector, ...props }) { + const theme = useTheme(); + + return ( + + {children} + + ); +} + +export function ItemSummaryBadgeList({ children }) { + return ( + + {children} + + ); +} + +export default ItemSummary;