diff --git a/src/components/token/TokenSettings.js b/src/components/token/TokenSettings.js
index a01817d..e2c4724 100644
--- a/src/components/token/TokenSettings.js
+++ b/src/components/token/TokenSettings.js
@@ -1,7 +1,6 @@
import React from "react";
-import { Flex, Box, Input, IconButton, Label, Checkbox } from "theme-ui";
+import { Flex, Box, Input, Label } from "theme-ui";
-import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
import { isEmpty } from "../../helpers/shared";
import Select from "../Select";
@@ -12,12 +11,7 @@ const categorySettings = [
{ value: "vehicle", label: "Vehicle / Mount" },
];
-function TokenSettings({
- token,
- onSettingsChange,
- showMore,
- onShowMoreChange,
-}) {
+function TokenSettings({ token, onSettingsChange }) {
const tokenEmpty = !token || isEmpty(token);
return (
@@ -37,64 +31,29 @@ function TokenSettings({
/>
- {showMore && (
- <>
-
-
- onSettingsChange("name", e.target.value)}
- disabled={tokenEmpty || token.type === "default"}
- my={1}
- />
-
-
-
-
-
-
-
-
-
- >
- )}
- {
- e.stopPropagation();
- e.preventDefault();
- onShowMoreChange(!showMore);
- }}
- sx={{
- transform: `rotate(${showMore ? "180deg" : "0"})`,
- alignSelf: "center",
- }}
- aria-label={showMore ? "Show Less" : "Show More"}
- title={showMore ? "Show Less" : "Show More"}
- >
-
-
+
+
+
+
+
+ onSettingsChange("name", e.target.value)}
+ disabled={tokenEmpty || token.type === "default"}
+ my={1}
+ />
+
);
}
diff --git a/src/components/token/TokenTiles.js b/src/components/token/TokenTiles.js
index e0c518a..3a8e462 100644
--- a/src/components/token/TokenTiles.js
+++ b/src/components/token/TokenTiles.js
@@ -6,6 +6,8 @@ import Case from "case";
import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
import GroupIcon from "../../icons/GroupIcon";
+import TokenHideIcon from "../../icons/TokenHideIcon";
+import TokenShowIcon from "../../icons/TokenShowIcon";
import TokenTile from "./TokenTile";
import Link from "../Link";
@@ -26,15 +28,19 @@ function TokenTiles({
search,
onSearchChange,
onTokensGroup,
+ onTokensHide,
}) {
const { databaseStatus } = useContext(DatabaseContext);
const isSmallScreen = useMedia({ query: "(max-width: 500px)" });
let hasSelectedDefaultToken = false;
+ let allTokensVisible = true;
for (let token of selectedTokens) {
if (token.type === "default") {
hasSelectedDefaultToken = true;
- break;
+ }
+ if (token.hideInSidebar) {
+ allTokensVisible = false;
}
}
@@ -61,6 +67,21 @@ function TokenTiles({
const multipleSelected = selectedTokens.length > 1;
+ let hideTitle = "";
+ if (multipleSelected) {
+ if (allTokensVisible) {
+ hideTitle = "Hide Tokens in Sidebar";
+ } else {
+ hideTitle = "Show Tokens in Sidebar";
+ }
+ } else {
+ if (allTokensVisible) {
+ hideTitle = "Hide Token in Sidebar";
+ } else {
+ hideTitle = "Show Token in Sidebar";
+ }
+ }
+
return (
onTokenSelect()}
/>
+ onTokensHide(allTokensVisible)}
+ >
+ {allTokensVisible ? : }
+
diff --git a/src/modals/SelectTokensModal.js b/src/modals/SelectTokensModal.js
index fcafd48..489663b 100644
--- a/src/modals/SelectTokensModal.js
+++ b/src/modals/SelectTokensModal.js
@@ -136,6 +136,10 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
setSelectedTokenIds([]);
}
+ async function handleTokensHide(hideInSidebar) {
+ await updateTokens(selectedTokenIds, { hideInSidebar });
+ }
+
// Either single, multiple or range
const [selectMode, setSelectMode] = useState("single");
@@ -215,6 +219,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
search={search}
onSearchChange={handleSearchChange}
onTokensGroup={() => setIsGroupModalOpen(true)}
+ onTokensHide={handleTokensHide}
/>