undo badge streamlining

I figured that we'd want simpler UI in the ItemsPanel when possible… but now that we've got it pretty simple and comfy, I think the consistency is better
This commit is contained in:
Emi Matchu 2020-09-01 03:15:19 -07:00
parent fd0edeca3d
commit e95cc36995
2 changed files with 30 additions and 31 deletions

View file

@ -62,10 +62,6 @@ function Item({
const restrictedZoneLabels = getZoneLabels( const restrictedZoneLabels = getZoneLabels(
item.appearanceOn.restrictedZones.filter((z) => z.isCommonlyUsedByItems) item.appearanceOn.restrictedZones.filter((z) => z.isCommonlyUsedByItems)
); );
const zonesAreSimple =
occupiedZoneLabels.length <= 1 && restrictedZoneLabels.length === 0;
const shouldHideZones = hideSimpleZones && zonesAreSimple;
const shouldShowZones = !shouldHideZones;
return ( return (
<> <>
@ -84,35 +80,39 @@ function Item({
{item.isNc ? ( {item.isNc ? (
<Badge colorScheme="purple">NC</Badge> <Badge colorScheme="purple">NC</Badge>
) : ( ) : (
// 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.
<Badge>NP</Badge> <Badge>NP</Badge>
)} )}
{shouldShowZones && {occupiedZoneLabels.map((zoneLabel) => (
occupiedZoneLabels.map((zoneLabel) => ( <Badge key={zoneLabel}>{getZoneShorthand(zoneLabel)}</Badge>
<Badge key={zoneLabel}>{getZoneShorthand(zoneLabel)}</Badge> ))}
))} {restrictedZoneLabels.map((zoneLabel) => (
{shouldShowZones && <Tooltip
restrictedZoneLabels.map((zoneLabel) => ( label={
<Tooltip <Box textAlign="center">
label={ Restricted: This isn't a {zoneLabel} item, but you can't
<Box textAlign="center"> wear {zoneLabel} items with it
Restricted: This isn't a {zoneLabel} item, but you can't </Box>
wear {zoneLabel} items with it }
</Box> placement="top"
} openDelay={250}
placement="top" >
openDelay={250} <Badge
key={zoneLabel}
display="flex"
flexDirection="row"
alignItems="center"
> >
<Badge {getZoneShorthand(zoneLabel)}
key={zoneLabel} <NotAllowedIcon marginLeft="1" />
display="flex" </Badge>
flexDirection="row" </Tooltip>
alignItems="center" ))}
>
{getZoneShorthand(zoneLabel)}
<NotAllowedIcon marginLeft="1" />
</Badge>
</Tooltip>
))}
</Wrap> </Wrap>
</Box> </Box>
<Box flex="0 0 auto"> <Box flex="0 0 auto">

View file

@ -123,7 +123,6 @@ function ItemZoneGroup({ zoneLabel, items, outfitState, dispatchToOutfit }) {
isWorn={outfitState.wornItemIds.includes(item.id)} isWorn={outfitState.wornItemIds.includes(item.id)}
isInOutfit={outfitState.allItemIds.includes(item.id)} isInOutfit={outfitState.allItemIds.includes(item.id)}
dispatchToOutfit={dispatchToOutfit} dispatchToOutfit={dispatchToOutfit}
hideSimpleZones
/> />
</label> </label>
</CSSTransition> </CSSTransition>