Fix token preview rendering for token groups
This commit is contained in:
parent
359be5373b
commit
1eed2eb15d
@ -19,15 +19,20 @@ function MapTileGroup({ group, maps, isSelected, onSelect, onDoubleClick }) {
|
|||||||
<Grid
|
<Grid
|
||||||
columns={`repeat(${layout.groupGridColumns}, 1fr)`}
|
columns={`repeat(${layout.groupGridColumns}, 1fr)`}
|
||||||
p={2}
|
p={2}
|
||||||
sx={{ gridGap: 2 }}
|
sx={{
|
||||||
|
gridGap: 2,
|
||||||
|
gridTemplateRows: `repeat(${layout.groupGridColumns}, 1fr)`,
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{maps.slice(0, 9).map((map) => (
|
{maps
|
||||||
<MapImage
|
.slice(0, layout.groupGridColumns * layout.groupGridColumns)
|
||||||
sx={{ borderRadius: "8px" }}
|
.map((map) => (
|
||||||
map={map}
|
<MapImage
|
||||||
key={`${map.id}-group-tile`}
|
sx={{ borderRadius: "8px" }}
|
||||||
/>
|
map={map}
|
||||||
))}
|
key={`${map.id}-group-tile`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
</Tile>
|
</Tile>
|
||||||
);
|
);
|
||||||
|
@ -70,11 +70,16 @@ function TokenBarTokenGroup({ group, tokens, draggable }) {
|
|||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<Grid
|
<Grid
|
||||||
columns="2fr 2fr"
|
columns="1fr 1fr"
|
||||||
alt={group.name}
|
alt={group.name}
|
||||||
title={group.name}
|
title={group.name}
|
||||||
bg="muted"
|
bg="muted"
|
||||||
sx={{ borderRadius: "8px", gridGap: "4px", minHeight: "48px" }}
|
sx={{
|
||||||
|
borderRadius: "8px",
|
||||||
|
gridGap: "4px",
|
||||||
|
height: "48px",
|
||||||
|
gridTemplateRows: "1fr 1fr",
|
||||||
|
}}
|
||||||
p="2px"
|
p="2px"
|
||||||
{...listeners}
|
{...listeners}
|
||||||
{...attributes}
|
{...attributes}
|
||||||
|
@ -23,7 +23,7 @@ const TokenImage = React.forwardRef(({ token, ...props }, ref) => {
|
|||||||
<Box
|
<Box
|
||||||
title={props.alt}
|
title={props.alt}
|
||||||
aria-label={props.alt}
|
aria-label={props.alt}
|
||||||
sx={{ width: "100%", height: "100%" }}
|
sx={{ width: "100%", height: "100%", minHeight: 0 }}
|
||||||
>
|
>
|
||||||
<TokenOutlineSVG
|
<TokenOutlineSVG
|
||||||
outline={token.outline}
|
outline={token.outline}
|
||||||
|
@ -25,15 +25,21 @@ function TokenTileGroup({
|
|||||||
<Grid
|
<Grid
|
||||||
columns={`repeat(${layout.groupGridColumns}, 1fr)`}
|
columns={`repeat(${layout.groupGridColumns}, 1fr)`}
|
||||||
p={2}
|
p={2}
|
||||||
sx={{ gridGap: 2 }}
|
sx={{
|
||||||
|
gridGap: 2,
|
||||||
|
height: "100%",
|
||||||
|
gridTemplateRows: `repeat(${layout.groupGridColumns}, 1fr)`,
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{tokens.slice(0, 9).map((token) => (
|
{tokens
|
||||||
<TokenImage
|
.slice(0, layout.groupGridColumns * layout.groupGridColumns)
|
||||||
sx={{ borderRadius: "8px" }}
|
.map((token) => (
|
||||||
token={token}
|
<TokenImage
|
||||||
key={`${token.id}-group-tile`}
|
sx={{ borderRadius: "8px" }}
|
||||||
/>
|
token={token}
|
||||||
))}
|
key={`${token.id}-group-tile`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
</Tile>
|
</Tile>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user