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

Added scaling to map and token select for small screens

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-09-06 13:20:05 +10:00
parent 9bdbb9cb4c
commit 24a3387b51
7 changed files with 183 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Modal.js
View File

@ -7,6 +7,7 @@ function StyledModal({
onRequestClose,
children,
allowClose,
style,
...props
}) {
const { theme } = useThemeUI();
@ -26,6 +27,7 @@ function StyledModal({
marginRight: "-50%",
transform: "translate(-50%, -50%)",
maxHeight: "100%",
...style,
},
}}
{...props}
@ -44,6 +46,7 @@ function StyledModal({
StyledModal.defaultProps = {
allowClose: true,
style: {},
};
export default StyledModal;

41
src/components/map/MapTile.js
View File

@ -16,6 +16,7 @@ function MapTile({
onMapRemove,
onMapReset,
onDone,
large,
}) {
const [isMapTileMenuOpen, setIsTileMenuOpen] = useState(false);
const isDefault = map.type === "default";
@ -46,7 +47,7 @@ function MapTile({
}}
bg="overlay"
sx={{ borderRadius: "50%" }}
m={1}
m={2}
>
<ExpandMoreDotIcon />
</IconButton>
@ -65,7 +66,7 @@ function MapTile({
}}
bg="overlay"
sx={{ borderRadius: "50%" }}
m={1}
m={2}
>
<RemoveMapIcon />
</IconButton>
@ -85,7 +86,7 @@ function MapTile({
}}
bg="overlay"
sx={{ borderRadius: "50%" }}
m={1}
m={2}
>
<ResetMapIcon />
</IconButton>
@ -96,18 +97,17 @@ function MapTile({
<Flex
key={map.id}
sx={{
borderColor: "primary",
borderStyle: isSelected ? "solid" : "none",
borderWidth: "4px",
position: "relative",
width: "150px",
height: "150px",
width: large ? "49%" : "32%",
height: "0",
paddingTop: large ? "49%" : "32%",
borderRadius: "4px",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
overflow: "hidden",
}}
m={2}
my={1}
bg="muted"
onClick={(e) => {
e.stopPropagation();
@ -123,7 +123,14 @@ function MapTile({
}}
>
<UIImage
sx={{ width: "100%", height: "100%", objectFit: "contain" }}
sx={{
width: "100%",
height: "100%",
objectFit: "contain",
position: "absolute",
top: 0,
left: 0,
}}
src={mapSource}
/>
<Flex
@ -149,6 +156,20 @@ function MapTile({
{map.name}
</Text>
</Flex>
<Box
sx={{
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
borderColor: "primary",
borderStyle: isSelected ? "solid" : "none",
borderWidth: "4px",
pointerEvents: "none",
borderRadius: "4px",
}}
/>
{/* Show expand button only if both reset and remove is available */}
{isSelected && (
<Box sx={{ position: "absolute", top: 0, right: 0 }}>

34
src/components/map/MapTiles.js
View File

@ -1,6 +1,7 @@
import React, { useContext } from "react";
import { Flex, Box, Text } from "theme-ui";
import SimpleBar from "simplebar-react";
import { useMedia } from "react-media";
import AddIcon from "../../icons/AddIcon";
@ -20,16 +21,18 @@ function MapTiles({
onDone,
}) {
const { databaseStatus } = useContext(DatabaseContext);
const isSmallScreen = useMedia({ query: "(max-width: 500px)" });
return (
<Box sx={{ position: "relative" }}>
<SimpleBar style={{ maxHeight: "300px", width: "500px" }}>
<SimpleBar style={{ maxHeight: "300px" }}>
<Flex
py={2}
p={2}
bg="muted"
sx={{
flexWrap: "wrap",
width: "500px",
borderRadius: "4px",
justifyContent: "space-between",
}}
onClick={() => onMapSelect(null)}
>
@ -45,19 +48,31 @@ function MapTiles({
":active": {
color: "secondary",
},
width: "150px",
height: "150px",
width: isSmallScreen ? "49%" : "32%",
height: "0",
paddingTop: isSmallScreen ? "49%" : "32%",
borderRadius: "4px",
justifyContent: "center",
alignItems: "center",
position: "relative",
cursor: "pointer",
}}
m={2}
my={1}
bg="muted"
aria-label="Add Map"
title="Add Map"
>
<AddIcon large />
<Flex
sx={{
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
justifyContent: "center",
alignItems: "center",
}}
>
<AddIcon large />
</Flex>
</Flex>
{maps.map((map) => {
const isSelected = selectedMap && map.id === selectedMap.id;
@ -73,6 +88,7 @@ function MapTiles({
onMapRemove={onMapRemove}
onMapReset={onMapReset}
onDone={onDone}
large={isSmallScreen}
/>
);
})}

38
src/components/token/TokenTile.js
View File

@ -9,7 +9,7 @@ import {
unknownSource,
} from "../../tokens";
function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove }) {
function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove, large }) {
const tokenSource = useDataSource(token, defaultTokenSources, unknownSource);
const isDefault = token.type === "default";
@ -17,22 +17,28 @@ function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove }) {
<Flex
onClick={() => onTokenSelect(token)}
sx={{
borderColor: "primary",
borderStyle: isSelected ? "solid" : "none",
borderWidth: "4px",
position: "relative",
width: "150px",
height: "150px",
width: large ? "49%" : "32%",
height: "0",
paddingTop: large ? "49%" : "32%",
borderRadius: "4px",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
overflow: "hidden",
}}
m={2}
my={1}
bg="muted"
>
<Image
sx={{ width: "100%", height: "100%", objectFit: "contain" }}
sx={{
width: "100%",
height: "100%",
objectFit: "contain",
position: "absolute",
top: 0,
left: 0,
}}
src={tokenSource}
/>
<Flex
@ -58,6 +64,20 @@ function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove }) {
{token.name}
</Text>
</Flex>
<Box
sx={{
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
borderColor: "primary",
borderStyle: isSelected ? "solid" : "none",
borderWidth: "4px",
pointerEvents: "none",
borderRadius: "4px",
}}
/>
{isSelected && !isDefault && (
<Box sx={{ position: "absolute", top: 0, right: 0 }}>
<IconButton
@ -68,7 +88,7 @@ function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove }) {
}}
bg="overlay"
sx={{ borderRadius: "50%" }}
m={1}
m={2}
>
<RemoveTokenIcon />
</IconButton>

130
src/components/token/TokenTiles.js
View File

@ -1,10 +1,14 @@
import React from "react";
import { Flex } from "theme-ui";
import React, { useContext } from "react";
import { Flex, Box, Text } from "theme-ui";
import SimpleBar from "simplebar-react";
import { useMedia } from "react-media";
import AddIcon from "../../icons/AddIcon";
import TokenTile from "./TokenTile";
import Link from "../Link";
import DatabaseContext from "../../contexts/DatabaseContext";
function TokenTiles({
tokens,
@ -13,54 +17,90 @@ function TokenTiles({
selectedToken,
onTokenRemove,
}) {
const { databaseStatus } = useContext(DatabaseContext);
const isSmallScreen = useMedia({ query: "(max-width: 500px)" });
return (
<SimpleBar style={{ maxHeight: "300px", width: "500px" }}>
<Flex
py={2}
bg="muted"
sx={{
flexWrap: "wrap",
width: "500px",
borderRadius: "4px",
}}
>
<Box sx={{ position: "relative" }}>
<SimpleBar style={{ maxHeight: "300px" }}>
<Flex
onClick={onTokenAdd}
sx={{
":hover": {
color: "primary",
},
":focus": {
outline: "none",
},
":active": {
color: "secondary",
},
width: "150px",
height: "150px",
borderRadius: "4px",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
}}
m={2}
p={2}
bg="muted"
aria-label="Add Token"
title="Add Token"
sx={{
flexWrap: "wrap",
borderRadius: "4px",
justifyContent: "space-between",
}}
>
<AddIcon large />
<Box
onClick={onTokenAdd}
sx={{
":hover": {
color: "primary",
},
":focus": {
outline: "none",
},
":active": {
color: "secondary",
},
width: isSmallScreen ? "49%" : "32%",
height: "0",
paddingTop: isSmallScreen ? "49%" : "32%",
borderRadius: "4px",
position: "relative",
cursor: "pointer",
}}
my={1}
bg="muted"
aria-label="Add Token"
title="Add Token"
>
<Flex
sx={{
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
justifyContent: "center",
alignItems: "center",
}}
>
<AddIcon large />
</Flex>
</Box>
{tokens.map((token) => (
<TokenTile
key={token.id}
token={token}
isSelected={selectedToken && token.id === selectedToken.id}
onTokenSelect={onTokenSelect}
onTokenRemove={onTokenRemove}
large={isSmallScreen}
/>
))}
</Flex>
{tokens.map((token) => (
<TokenTile
key={token.id}
token={token}
isSelected={selectedToken && token.id === selectedToken.id}
onTokenSelect={onTokenSelect}
onTokenRemove={onTokenRemove}
/>
))}
</Flex>
</SimpleBar>
</SimpleBar>
{databaseStatus === "disabled" && (
<Box
sx={{
position: "absolute",
top: 0,
left: 0,
right: 0,
textAlign: "center",
}}
bg="highlight"
p={1}
>
<Text as="p" variant="body2">
Token saving is unavailable. See <Link to="/faq#saving">FAQ</Link>{" "}
for more information.
</Text>
</Box>
)}
</Box>
);
}

6
src/modals/SelectMapModal.js
View File

@ -272,7 +272,11 @@ function SelectMapModal({
};
return (
<Modal isOpen={isOpen} onRequestClose={handleClose}>
<Modal
isOpen={isOpen}
onRequestClose={handleClose}
style={{ maxWidth: "542px", width: "100%" }}
>
<ImageDrop onDrop={handleImagesUpload} dropText="Drop map to upload">
<input
onChange={(event) => handleImagesUpload(event.target.files)}

6
src/modals/SelectTokensModal.js
View File

@ -131,7 +131,11 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
const selectedTokenWithChanges = { ...selectedToken, ...tokenSettingChanges };
return (
<Modal isOpen={isOpen} onRequestClose={handleRequestClose}>
<Modal
isOpen={isOpen}
onRequestClose={handleRequestClose}
style={{ maxWidth: "542px", width: "100%" }}
>
<ImageDrop onDrop={handleImagesUpload} dropText="Drop token to upload">
<input
onChange={(event) => handleImagesUpload(event.target.files)}