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

View file

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