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

Added map search UI and initial multi-select

Browse Source
This commit is contained in:
Mitchell McCaffrey
2020-09-30 12:30:33 +10:00
parent 78c86e6194
commit 670f047049
8 changed files with 258 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/Search.js Normal file
View File

@@ -0,0 +1,39 @@
import React from "react";
import { Box, Input } from "theme-ui";
import SearchIcon from "../icons/SearchIcon";
function Search(props) {
return (
<Box sx={{ position: "relative", flexGrow: 1 }}>
<Input
sx={{
borderRadius: "0",
border: "none",
borderRight: "1px solid",
":focus": {
outline: "none",
},
paddingRight: "36px",
}}
placeholder="Search"
{...props}
/>
<Box
sx={{
position: "absolute",
right: "8px",
top: "50%",
transform: "translateY(-50%)",
height: "24px",
width: "24px",
pointerEvents: "none",
}}
>
<SearchIcon />
</Box>
</Box>
);
}
export default Search;

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

@@ -6,7 +6,15 @@ import EditMapIcon from "../../icons/EditMapIcon";
import useDataSource from "../../helpers/useDataSource";
import { mapSources as defaultMapSources, unknownSource } from "../../maps";
function MapTile({ map, isSelected, onMapSelect, onMapEdit, onDone, large }) {
function MapTile({
map,
isSelected,
onMapSelect,
onMapEdit,
onDone,
large,
canEdit,
}) {
const [isMapTileMenuOpen, setIsTileMenuOpen] = useState(false);
const isDefault = map.type === "default";
const mapSource = useDataSource(
@@ -39,9 +47,7 @@ function MapTile({ map, isSelected, onMapSelect, onMapEdit, onDone, large }) {
onClick={(e) => {
e.stopPropagation();
setIsTileMenuOpen(false);
if (!isSelected) {
onMapSelect(map);
}
onMapSelect(map);
}}
onDoubleClick={(e) => {
if (!isMapTileMenuOpen) {
@@ -97,8 +103,7 @@ function MapTile({ map, isSelected, onMapSelect, onMapEdit, onDone, large }) {
borderRadius: "4px",
}}
/>
{/* Show expand button only if both reset and remove is available */}
{isSelected && (
{canEdit && (
<Box sx={{ position: "absolute", top: 0, right: 0 }}>
<IconButton
aria-label="Edit Map"

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

@@ -6,34 +6,88 @@ import { useMedia } from "react-media";
import AddIcon from "../../icons/AddIcon";
import RemoveMapIcon from "../../icons/RemoveMapIcon";
import ResetMapIcon from "../../icons/ResetMapIcon";
import SelectMultipleIcon from "../../icons/SelectMultipleIcon";
import SelectSingleIcon from "../../icons/SelectSingleIcon";
import MapTile from "./MapTile";
import Link from "../Link";
import Search from "../Search";
import DatabaseContext from "../../contexts/DatabaseContext";
function MapTiles({
maps,
selectedMap,
selectedMapState,
selectedMaps,
selectedMapStates,
onMapSelect,
onMapRemove,
onMapReset,
onMapsRemove,
onMapsReset,
onMapAdd,
onMapEdit,
onDone,
selectMode,
onSelectModeChange,
}) {
const { databaseStatus } = useContext(DatabaseContext);
const isSmallScreen = useMedia({ query: "(max-width: 500px)" });
const hasMapState =
selectedMapState &&
(Object.values(selectedMapState.tokens).length > 0 ||
selectedMapState.mapDrawActions.length > 0 ||
selectedMapState.fogDrawActions.length > 0);
let hasMapState = false;
if (selectedMapStates.length > 0) {
for (let state of selectedMapStates) {
if (
Object.values(state.tokens).length > 0 ||
state.mapDrawActions.length > 0 ||
state.fogDrawActions.length > 0
) {
hasMapState = true;
break;
}
}
}
return (
<Box sx={{ position: "relative" }}>
<Flex
bg="muted"
sx={{
border: "1px solid",
borderColor: "text",
borderRadius: "4px",
alignItems: "center",
":focus-within": {
outline: "1px auto",
outlineColor: "primary",
outlineOffset: "0px",
},
}}
onFocus={() => onMapSelect()}
>
<Search />
<IconButton
onClick={() =>
onSelectModeChange(selectMode === "single" ? "multiple" : "single")
}
aria-label={
selectMode === "single" ? "Select Multiple" : "Select Single"
}
title={selectMode === "single" ? "Select Multiple" : "Select Single"}
ml={1}
>
{selectMode === "single" ? (
<SelectMultipleIcon />
) : (
<SelectSingleIcon />
)}
</IconButton>
<IconButton
onClick={onMapAdd}
aria-label="Add Map"
title="Add Map"
mr={1}
>
<AddIcon />
</IconButton>
</Flex>
<SimpleBar style={{ maxHeight: "400px" }}>
<Flex
p={2}
@@ -43,49 +97,10 @@ function MapTiles({
flexWrap: "wrap",
borderRadius: "4px",
}}
onClick={() => onMapSelect(null)}
onClick={() => onMapSelect()}
>
<Flex
onClick={onMapAdd}
sx={{
":hover": {
color: "primary",
},
":focus": {
outline: "none",
},
":active": {
color: "secondary",
},
width: isSmallScreen ? "48%" : "32%",
height: "0",
paddingTop: isSmallScreen ? "48%" : "32%",
borderRadius: "4px",
position: "relative",
cursor: "pointer",
}}
my={1}
mx={`${isSmallScreen ? 1 : 2 / 3}%`}
bg="muted"
aria-label="Add Map"
title="Add Map"
>
<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;
const isSelected = selectedMaps.includes(map);
return (
<MapTile
key={map.id}
@@ -95,6 +110,7 @@ function MapTiles({
onMapEdit={onMapEdit}
onDone={onDone}
large={isSmallScreen}
canEdit={isSelected && selectMode === "single"}
/>
);
})}
@@ -118,7 +134,7 @@ function MapTiles({
</Text>
</Box>
)}
{selectedMap && (
{selectedMaps.length > 0 && (
<Flex
sx={{
position: "absolute",
@@ -132,13 +148,13 @@ function MapTiles({
<Close
title="Clear Selection"
aria-label="Clear Selection"
onClick={() => onMapSelect(null)}
onClick={() => onMapSelect()}
/>
<Flex>
<IconButton
aria-label="Reset Map"
title="Reset Map"
onClick={() => onMapReset(selectedMap.id)}
onClick={() => onMapsReset()}
disabled={!hasMapState}
>
<ResetMapIcon />
@@ -146,7 +162,7 @@ function MapTiles({
<IconButton
aria-label="Remove Map"
title="Remove Map"
onClick={() => onMapRemove(selectedMap.id)}
onClick={() => onMapsRemove()}
>
<RemoveMapIcon />
</IconButton>