Commit 49b5c05c authored by Jacob Cain's avatar Jacob Cain
Browse files

Better Expand/Collapse App Button

parent 3aa42b1d

src/components/container/App.jsx

+20 −3
Original line number Diff line number Diff line 
import React, { useEffect, useState } from "react";

import UsgsHeader from "../presentational/UsgsHeader.jsx";

import UsgsFooter from "../presentational/UsgsFooter.jsx";

import MenuBar from "../presentational/MenuBar.jsx";

import GeoStacApp from "./GeoStacApp.jsx";

import SplashScreen from "../presentational/SplashScreen.jsx";
@@ -13,6 +14,12 @@ import SplashScreen from "../presentational/SplashScreen.jsx"; 
 */

export default function App() {



  const [showHeaderFooter, setShowHeaderFooter] = React.useState(true);



  const handleOpenCloseHeader = () => {

    setShowHeaderFooter(!showHeaderFooter);

  }



  const [mainComponent, setMainComponent] = useState(() => {

    return(

      <SplashScreen />
@@ -224,16 +231,26 @@ export default function App() { 


    (async () => {

        aggregateMapList = await getStacAndAstroWebMapsData();

        setMainComponent(<GeoStacApp mapList={aggregateMapList} astroWebMaps={mapsJson[astroWebMaps]}/>);

        setMainComponent(

            <GeoStacApp 

                mapList={aggregateMapList}

                astroWebMaps={mapsJson[astroWebMaps]}

                showHeaderFooter={showHeaderFooter}

                setShowHeaderFooter={setShowHeaderFooter}

            />);

    })();



  }, [])



  return (

    <>

      <UsgsHeader />

      <UsgsHeader visible={showHeaderFooter}/>

      <MenuBar

        showHeaderFooter={showHeaderFooter}

        handleOpenCloseHeader={handleOpenCloseHeader}

      />

      {mainComponent}

      <UsgsFooter />

      <UsgsFooter visible={showHeaderFooter}/>

    </>

  );

}

src/components/container/GeoStacApp.jsx

+1 −28
Original line number Diff line number Diff line
@@ -4,21 +4,6 @@ import MapContainer from "./MapContainer.jsx"; 
import QueryConsole from "../presentational/QueryConsole.jsx";

import DisplayGeoTiff from "../presentational/DisplayGeoTiff.jsx";

import Sidebar from "../presentational/Sidebar.jsx";

import MenuBar from "../presentational/Menubar.jsx";



/**

 * Controls css styling for this component using js to css

 */

let css = {

  appFlex: {

    position: "relative",

  },

  appFull: {

    position: "fixed",

    height: "100%",

    width: "100%",

  },

};



/**

 * GeoStacApp is the parent component for all of the other components of the main app.
@@ -33,14 +18,6 @@ export default function GeoStacApp(props) { 
  const [queryString, setQueryString] = React.useState("?");

  const [collectionUrls, setCollectionUrls] = React.useState([]);



  const [appFullWindow, setAppFullWindow] = React.useState(true);

  const [appViewStyle, setAppViewStyle] = React.useState(css.appFlex);



  const handleAppViewChange = () => {

    setAppFullWindow(!appFullWindow);

    setAppViewStyle(appFullWindow ? css.appFull : css.appFlex);

  };



  /**

   * Handles target body selection

   * @param {*} value selection event
@@ -50,11 +27,7 @@ export default function GeoStacApp(props) { 
  };



  return (

    <div style={appViewStyle} className="flex col scroll-parent">

      <MenuBar

        handleAppViewChange={handleAppViewChange}

        appFullWindow={appFullWindow}

      />

    <div className="flex col scroll-parent">

      <div className="flex row scroll-parent">

        <div className="flex col">

          <ConsoleAppBar

src/components/presentational/Menubar.jsx

+2 −2
Original line number Diff line number Diff line
@@ -47,8 +47,8 @@ export default function MenuBar(props) { 
          <span className="menu-item-text">Help</span>

        </div>

      </a>

      <div className="menu-item" onClick={props.handleAppViewChange}>

        {props.appFullWindow ? (

      <div className="menu-item" onClick={props.handleOpenCloseHeader}>

        {props.showHeaderFooter ? (

          <>

            <OpenInFullIcon fontSize="small" />

            <span className="menu-item-text">Expand</span>

src/components/presentational/UsgsFooter.jsx

+49 −46
Original line number Diff line number Diff line 
import React from "react";

import { Collapse } from "@mui/material";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import {

  faSquareTwitter,
@@ -136,6 +137,7 @@ const socialLinks = [ 
 */

export default function UsgsFooter(props) {

  return (

    <Collapse in={props.visible} sx={{flexShrink: 0}}>

      <footer style={css.footer}>

        <div style={css.tmpContainer}>

          <div>
@@ -200,5 +202,6 @@ export default function UsgsFooter(props) { 
          </div>

        </div>

      </footer>

    </Collapse>

  );

}

src/components/presentational/UsgsHeader.jsx

+3 −2
Original line number Diff line number Diff line 
import React from "react";

import UsgsLogo from "../../images/logos/usgs-logo.png";

import { GovBanner } from "@trussworks/react-uswds";

import { Collapse } from "@mui/material";



const css = {

  headerNav: {
@@ -35,7 +36,7 @@ const css = { 
 */

export default function UsgsHeader(props) {

  return (

    <>

    <Collapse in={props.visible} sx={{flexShrink: 0}}>

      <GovBanner aria-label="Official government website" />

      <header id="navbar" style={css.headerNav} role="banner">

        <div style={css.tmpContainer}>
@@ -65,6 +66,6 @@ export default function UsgsHeader(props) { 
          </div>

        </div>

      </header>

    </>

    </Collapse>

  );

}