Commit 69341f54 authored by brittainjackson7's avatar brittainjackson7
Browse files

Add Help Bar 

information not included (in progress)
parent 8fc7340e

src/components/presentational/HelpBox.jsx

0 → 100644
+74 −0
Original line number Diff line number Diff line 
import React, { useState } from 'react';



function RasterVsVectorBox() {

    return (

        <div className="contentBox">

            <h3>Raster vs Vector</h3>

            <p> This is some sort of information In Raster vs Vector</p>

        </div>

    );

}



function SortingBox() {

    return (

        <div className="contentBox">

            <h3>Sorting</h3>

            <p> This is some sort of information In Sorting</p>

        </div>

    );

}



function FootprintCardBox() {

    return (

        <div className="contentBox">

            <h3>Footprint Card</h3>

            <p> This is some sort of information in FootprintCard</p>

        </div>

    );

}



export default function HelpBox({ isOpen, onClose }) {

    if(!isOpen) return null;



    const [showSubPopup, setShowSubPopup] = useState(null);



    const handleRasterVsVectorClick = () => {

        setShowSubPopup('rasterVsVector');

    };



    const handleSortingClick = () => {

        setShowSubPopup('sorting');

    };



    const handleFootprintCardClick = () => {

        setShowSubPopup('footprintCard');

    };



    return (

        <div id="helpBoxBackground">

            <div className="helpBoxContent">

                <h2>Help Menu</h2>

                <button className="helpButton" onClick={handleRasterVsVectorClick}>Raster vs Vector</button>

                <button className="helpButton" onClick={handleSortingClick}>Sorting</button>

                <button className="helpButton" onClick={handleFootprintCardClick}>Footprint Card</button>

                <button onClick={onClose} className="closeButton">Close</button>

            </div>



            {showSubPopup === 'rasterVsVector' &&

                <div className="subPopup">

                    <RasterVsVectorBox/>

                </div>

            }

            {showSubPopup === 'sorting' &&

                <div className="subPopup">

                    <SortingBox/>

                </div>

            }

            {showSubPopup === 'footprintCard' &&

                <div className="subPopup">

                    <FootprintCardBox/>

                </div>

            }

        </div>

    );

}

src/components/presentational/SearchAndFilterInput.jsx

+40 −26
Original line number Diff line number Diff line
@@ -19,6 +19,8 @@ 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
@@ -85,6 +87,9 @@ 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 = () => {
@@ -299,7 +304,14 @@ export default function SearchAndFilterInput(props) { 


  }, [props.targetName]);



  //help box

  const handleOpenHelpBox = () => {

    setShowHelpBox(true);

  };



  const handleCloseHelpBox = () => {

    setShowHelpBox(false);

  }



  /* Control IDs for reference:

  sortBySelect
@@ -442,6 +454,8 @@ export default function SearchAndFilterInput(props) { 
          </Collapse>

        </div>

      </Collapse>

      <button onClick={handleOpenHelpBox} style={{marginTop: "20px"}}>Help</button>

      <HelpBox isOpen={showHelpBox} onClose={handleCloseHelpBox} />

    </div>

  );

}

src/styles.css

+73 −1
Original line number Diff line number Diff line
@@ -490,3 +490,75 @@ summary { 
  opacity: 1;

  pointer-events: all;

}



/*

Help Box Inside Search and Filter

*/

#helpBoxBackground {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: rgba(0, 0, 0, 0.7);

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 1000;

}



.helpBoxContent, .subPopup {

  width: 300px;

  padding: 20px;

  background-color: #fff;

  border-radius: 8px;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: stretch;

}

.helpButton {

  margin: 10px 0;

  padding: 15px;

  flex: 1;

  border: none;

  border-radius: 5px;

  cursor: pointer;

  background-color: #351370;

  color: white;

  font-weight: bold;

  transition: background-color 0.3s;



  &:hover {

    background-color: #113851;

  }

}

.closeButton {

  margin: 10px 0;

  padding: 15px;

  flex: 1;

  border: none;

  border-radius: 5px;

  cursor: pointer;

  background-color: #e10e19;

  color: white;

  font-weight: bold;

  transition: background-color 0.8s ease;



  &:hover {

    background-color: #980000;

  }

}



.contentBox h3 {

  font-size: 24px;

  margin-bottom: 20px;

  color: #333;

}



.contentBox p {

  font-size: 16px;

  line-height: 1.5;

  color: #555;

}