Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added a scroll to dice tray buttons for small screens

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-08-07 10:56:06 +10:00
parent 0012428159
commit 6b97614a60
2 changed files with 116 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
src/components/dice/DiceButtons.js
View File

@ -1,5 +1,6 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Flex, IconButton } from "theme-ui"; import { Flex, IconButton, Box } from "theme-ui";
import SimpleBar from "simplebar-react";
import D20Icon from "../../icons/D20Icon"; import D20Icon from "../../icons/D20Icon";
import D12Icon from "../../icons/D12Icon"; import D12Icon from "../../icons/D12Icon";
@ -51,100 +52,123 @@ function DiceButtons({
setCurrentDice(dice); setCurrentDice(dice);
} }
let buttons = [
{
key: "d20",
title: "Add D20",
count: diceCounts.d20,
onClick: () => onDiceAdd(currentDice.class, "d20"),
children: <D20Icon />,
},
{
key: "d12",
title: "Add D12",
count: diceCounts.d12,
onClick: () => onDiceAdd(currentDice.class, "d12"),
children: <D12Icon />,
},
{
key: "d10",
title: "Add D10",
count: diceCounts.d10,
onClick: () => onDiceAdd(currentDice.class, "d10"),
children: <D10Icon />,
},
{
key: "d8",
title: "Add D8",
count: diceCounts.d8,
onClick: () => onDiceAdd(currentDice.class, "d8"),
children: <D8Icon />,
},
{
key: "d6",
title: "Add D6",
count: diceCounts.d6,
onClick: () => onDiceAdd(currentDice.class, "d6"),
children: <D6Icon />,
},
{
key: "d4",
title: "Add D4",
count: diceCounts.d4,
onClick: () => onDiceAdd(currentDice.class, "d4"),
children: <D4Icon />,
},
{
key: "d100",
title: "Add D100",
count: diceCounts.d100,
onClick: () => onDiceAdd(currentDice.class, "d100"),
children: <D100Icon />,
},
];
return ( return (
<Flex <Box
sx={{ sx={{
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
borderRadius: "4px", borderRadius: "4px",
position: "absolute", position: "absolute",
top: "0", top: "0",
left: "0", left: "0",
height: "100%",
maxHeight: "390px",
pointerEvents: "all",
}} }}
p={2}
bg="overlay" bg="overlay"
> >
<SelectDiceButton <SimpleBar style={{ width: "48px", height: "100%" }}>
onDiceChange={handleDiceChange} <Flex
currentDice={currentDice} sx={{
/> justifyContent: "center",
<Divider /> alignItems: "center",
<DiceButton flexDirection: "column",
title="Add D20" }}
count={diceCounts.d20} p={2}
onClick={() => onDiceAdd(currentDice.class, "d20")} >
> <SelectDiceButton
<D20Icon /> onDiceChange={handleDiceChange}
</DiceButton> currentDice={currentDice}
<DiceButton />
title="Add D12" <Divider />
count={diceCounts.d12} {buttons.map((button) => (
onClick={() => onDiceAdd(currentDice.class, "d12")} <DiceButton {...button} />
> ))}
<D12Icon /> <Divider />
</DiceButton> <IconButton
<DiceButton aria-label={
title="Add D10" diceTraySize === "single"
count={diceCounts.d10} ? "Expand Dice Tray"
onClick={() => onDiceAdd(currentDice.class, "d10")} : "Shrink Dice Tray"
> }
<D10Icon /> title={
</DiceButton> diceTraySize === "single"
<DiceButton ? "Expand Dice Tray"
title="Add D8" : "Shrink Dice Tray"
count={diceCounts.d8} }
onClick={() => onDiceAdd(currentDice.class, "d8")} sx={{
> transform:
<D8Icon /> diceTraySize === "single" ? "rotate(0)" : "rotate(180deg)",
</DiceButton> }}
<DiceButton onClick={() =>
title="Add D6" onDiceTraySizeChange(
count={diceCounts.d6} diceTraySize === "single" ? "double" : "single"
onClick={() => onDiceAdd(currentDice.class, "d6")} )
> }
<D6Icon /> >
</DiceButton> <ExpandMoreDiceTrayIcon />
<DiceButton </IconButton>
title="Add D4" <Divider />
count={diceCounts.d4} <IconButton
onClick={() => onDiceAdd(currentDice.class, "d4")} aria-label={shareDice ? "Hide Dice Rolls" : "Share Dice Rolls"}
> title={shareDice ? "Hide Dice Rolls" : "Share Dice Rolls"}
<D4Icon /> onClick={() => onShareDiceChange(!shareDice)}
</DiceButton> >
<DiceButton {shareDice ? <ShareDiceOnIcon /> : <ShareDiceOffIcon />}
title="Add D100" </IconButton>
count={diceCounts.d100} </Flex>
onClick={() => onDiceAdd(currentDice.class, "d100")} </SimpleBar>
> </Box>
<D100Icon />
</DiceButton>
<Divider />
<IconButton
aria-label={
diceTraySize === "single" ? "Expand Dice Tray" : "Shrink Dice Tray"
}
title={
diceTraySize === "single" ? "Expand Dice Tray" : "Shrink Dice Tray"
}
sx={{
transform: diceTraySize === "single" ? "rotate(0)" : "rotate(180deg)",
}}
onClick={() =>
onDiceTraySizeChange(diceTraySize === "single" ? "double" : "single")
}
>
<ExpandMoreDiceTrayIcon />
</IconButton>
<Divider />
<IconButton
aria-label={shareDice ? "Hide Dice Rolls" : "Share Dice Rolls"}
title={shareDice ? "Hide Dice Rolls" : "Share Dice Rolls"}
onClick={() => onShareDiceChange(!shareDice)}
>
{shareDice ? <ShareDiceOnIcon /> : <ShareDiceOffIcon />}
</IconButton>
</Flex>
); );
} }

8
src/components/dice/DiceTrayOverlay.js
View File

@ -297,11 +297,15 @@ function DiceTrayOverlay({
display: isOpen ? "block" : "none", display: isOpen ? "block" : "none",
position: "relative", position: "relative",
overflow: "visible", overflow: "visible",
pointerEvents: "all",
}} }}
> >
<Box <Box
sx={{ transform: "translateX(50px)", width: "100%", height: "100%" }} sx={{
transform: "translateX(50px)",
width: "100%",
height: "100%",
pointerEvents: "all",
}}
> >
<DiceInteraction <DiceInteraction
onSceneMount={handleSceneMount} onSceneMount={handleSceneMount}