Merge pull request #2 from oslabs-beta/jon

Fix customization menu to be activated on click/drag, not hover / mouse over (T40-4)

Author: Eliza612

app/src/components/bottom/BottomPanel.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import BottomTabs from './BottomTabs';
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
 
 const BottomPanel = (props): JSX.Element => {
   let y: number = 0;
@@ -15,18 +16,17 @@ const BottomPanel = (props): JSX.Element => {
     //Start listeners when the user clicks the bottom panel tab
     document.addEventListener('mousemove', mouseMoveHandler);
     document.addEventListener('mouseup', mouseUpHandler);
-    window.addEventListener('message', handleIframeMessage);//listens for messages from the iframe when the mouse is over it
+    window.addEventListener('message', handleIframeMessage); //listens for messages from the iframe when the mouse is over it
   };
-  
+
   //Interpret the messages from the iframe
   const handleIframeMessage = (e) => {
     if (e.data === 'iframeMouseUp') {
       mouseUpHandler();
-    }else if(e.data.type === 'iframeMouseMove'){
-      mouseMoveHandler(e.data)
+    } else if (e.data.type === 'iframeMouseMove') {
+      mouseMoveHandler(e.data);
     }
-  }    
-
+  };
 
   const mouseMoveHandler = function (e: MouseEvent): void {
     // How far the mouse has been moved
@@ -54,12 +54,21 @@ const BottomPanel = (props): JSX.Element => {
 
   return (
     <>
-    <div className="bottom-panel" id="resize" ref={node}>
-      <div id="resize-drag" onMouseDown={mouseDownHandler} tabIndex={0}>
-        ......
+      <div className="bottom-panel" id="resize" ref={node}>
+        <div
+          id="resize-drag"
+          onMouseDown={mouseDownHandler}
+          onClick={() => props.setBottomShow(true)}
+          tabIndex={0}
+        >
+          {props.bottomShow ? <ExpandMore /> : <ExpandLess />}
+        </div>
+        <BottomTabs
+          setBottomShow={props.setBottomShow}
+          isThemeLight={props.isThemeLight}
+        />
       </div>
-      <BottomTabs setBottomShow = {props.setBottomShow} isThemeLight={props.isThemeLight} />
-    </div></>
+    </>
   );
 };
 

app/src/components/bottom/BottomTabs.tsx

@@ -57,7 +57,7 @@ const BottomTabs = (props): JSX.Element => {
         zIndex: 1,
         borderTop: '2px solid grey'
       }}
-      onMouseOver={() => {
+      onClick={() => {
         props.setBottomShow(true);
       }}
     >

app/src/containers/MainContainer.tsx

@@ -119,6 +119,7 @@ const MainContainer = (props): JSX.Element => {
       </div>
       <div className={showPanel} ref={ref}>
         <BottomPanel
+          bottomShow={bottomShow}
           setBottomShow={setBottomShow}
           isThemeLight={props.isThemeLight}
         />