From 6a9b7380de905343c2680b48809b9c0cea36d81e Mon Sep 17 00:00:00 2001
From: BrittainJackson7 <brittainjackson7@gmail.com>
Date: Mon, 16 Oct 2023 22:18:06 -0700
Subject: [PATCH] Move HelpBox to Menubar
---
src/components/presentational/Menubar.jsx | 20 ++++++++++++++++++-
.../presentational/SearchAndFilterInput.jsx | 16 ---------------
src/styles.css | 1 +
3 files changed, 20 insertions(+), 17 deletions(-)
diff --git a/src/components/presentational/Menubar.jsx b/src/components/presentational/Menubar.jsx
index c81fd8d5c..b53eacc24 100644
--- a/src/components/presentational/Menubar.jsx
+++ b/src/components/presentational/Menubar.jsx
@@ -4,6 +4,7 @@ import OpenInFullIcon from "@mui/icons-material/OpenInFull";
import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
import GeoStacWhiteIcon from "../../images/logos/geostac-logo-white.svg";
+import HelpBox from "./HelpBox.jsx";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
@@ -11,7 +12,7 @@ import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
-
+
export default function Menubar(props) {
const [showAbout, setShowAbout] = React.useState(false);
@@ -23,6 +24,16 @@ export default function Menubar(props) {
setShowAbout(false);
};
+ const handleOpenHelpBox = () => {
+ setShowHelpBox(true);
+ };
+
+ const handleCloseHelpBox = () => {
+ setShowHelpBox(false);
+ }
+
+ const [showHelpBox, setShowHelpBox] = React.useState(false);
+
return (
<div id="menu-bar">
<div className="menu-item" onClick={handleOpenAbout}>
@@ -47,6 +58,13 @@ export default function Menubar(props) {
<span className="menu-item-text">Help</span>
</div>
</a>
+
+ <div className="menu-item"onClick={handleOpenHelpBox}>
+ <span className="menu-item-text">Interactions</span>
+ </div>
+
+ <HelpBox isOpen={showHelpBox} onClose={handleCloseHelpBox} />
+
<div className="menu-item" onClick={props.handleOpenCloseHeader}>
{props.showHeaderFooter ? (
<>
diff --git a/src/components/presentational/SearchAndFilterInput.jsx b/src/components/presentational/SearchAndFilterInput.jsx
index 40d6f13ce..1152cc7fb 100644
--- a/src/components/presentational/SearchAndFilterInput.jsx
+++ b/src/components/presentational/SearchAndFilterInput.jsx
@@ -19,8 +19,6 @@ import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
import { Collapse, Divider } from "@mui/material";
import ListItemText from "@mui/material/ListItemText";
- //help box
-import HelpBox from "./HelpBox.jsx";
/**
* Controls css styling for this component using js to css
@@ -87,9 +85,6 @@ export default function SearchAndFilterInput(props) {
const [dateFromVal, setDateFromVal] = React.useState(null); // From Date
const [dateToVal, setDateToVal] = React.useState(null); // To Date
- // help box
- const [showHelpBox, setShowHelpBox] = React.useState(false);
-
//const for callback
const {UpdateQueryableTitles} = props;
const handleExpandFilterClick = () => {
@@ -304,15 +299,6 @@ export default function SearchAndFilterInput(props) {
}, [props.targetName]);
- //help box
- const handleOpenHelpBox = () => {
- setShowHelpBox(true);
- };
-
- const handleCloseHelpBox = () => {
- setShowHelpBox(false);
- }
-
/* Control IDs for reference:
sortBySelect
sortAscCheckBox
@@ -455,8 +441,6 @@ export default function SearchAndFilterInput(props) {
</Collapse>
</div>
</Collapse>
- <button onClick={handleOpenHelpBox} style={{marginTop: "20px"}}>Help</button>
- <HelpBox isOpen={showHelpBox} onClose={handleCloseHelpBox} />
</div>
);
}
diff --git a/src/styles.css b/src/styles.css
index 776d8554c..b20c70193 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -508,6 +508,7 @@ Help Box Inside Search and Filter
}
.helpBoxContent, .subPopup {
+ color: #000;
width: 300px;
padding: 20px;
background-color: #fff;
--
GitLab