Merge pull request #2 from oslabs-beta/hideShowLeftContainer

Hide show left container

Author: wang9hu

app/src/components/main/Canvas.tsx

@@ -29,24 +29,24 @@ function Canvas(props): JSX.Element {
             let id = (parentId) ? parentId : null;
             if (child.typeId < 1000){
               masterArr.push({
-                type: "HTML Element", 
-                typeId: child.typeId, 
+                type: "HTML Element",
+                typeId: child.typeId,
                 childId: id
               })
               if (child.children.length) {
                 deepChildCopy(child.children, child.childId);
-              } 
+              }
             }
           }
         }
         deepChildCopy(children, null);
         setCopiedChildrenArr(masterArr);
       }
-  
+
       const components = state.components
 
         // find the ID of the newly created component
-      const newId = components[components.length -1]['id']      
+      const newId = components[components.length -1]['id']
       dispatch({
         type: 'ADD CHILD',
         payload: {
@@ -56,8 +56,8 @@ function Canvas(props): JSX.Element {
         }
       });
     }
-    setNewComp(false)
-  }, [newComp]) 
+    setNewComp(false) // initially set to false
+  }, [newComp])
 
   // Caret start
   Arrow.deleteLines();
@@ -73,7 +73,7 @@ function Canvas(props): JSX.Element {
     // onClickHandler is responsible for changing the focused component and child component
     function onClickHandler(event) {
       event.stopPropagation();
-      // note: a null value for the child id means that we are focusing on the top-level component rather than any child 
+      // note: a null value for the child id means that we are focusing on the top-level component rather than any child
       changeFocus(state.canvasFocus.componentId, null);
     };
 
@@ -150,7 +150,7 @@ function Canvas(props): JSX.Element {
 
           // able to duplicate a component in dev only does not work for prod
           // create a new component
-          
+
           // let name = prompt("Component already has a parent. \nDo you want to create a new component and import its elements?", "Enter component name here");
           // while (components.some(comp => comp.name === name)) {
           //   name = prompt(`${name} component already exists. \nPlease pick a new name.`);
@@ -160,20 +160,20 @@ function Canvas(props): JSX.Element {
           //     type: 'ADD COMPONENT',
           //     payload: { componentName: name, root: false }
           //   });
-            
+
           //   setNewComp(true);
           //   setNewComp(!newComp)
           // }
-          
+
         }
-        
+
       }
     },
     collect: monitor => ({
       isOver: !!monitor.isOver()
     })
   });
-  
+
   // Styling for Canvas
   const defaultCanvasStyle = {
     width: '100%',
@@ -198,7 +198,7 @@ function Canvas(props): JSX.Element {
   // Combine the default styles of the canvas with the custom styles set by the user for that component
   // The render children function renders all direct children of a given component
   // Direct children are draggable/clickable
-  
+
   // const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   const darkCombinedCanvasStyle = combineStyles(darkCanvasStyle, currentComponent.style);

app/src/containers/CustomizationPanel.tsx

@@ -56,7 +56,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     .children.find((el) => {
       return el.childId === state.canvasFocus.childId;
     });
-  
+
   useEffect( () => {
     currFocus?.attributes?.compLink && setCompLink(currFocus.attributes.compLink);
   }, [state]);
@@ -215,7 +215,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     searchNestedChildren(state.components);
     return isLinked;
   };
-  
+
   const updateAttributeWithState = (attributeName, componentProviderId, statePropsId, statePropsRow, stateKey='') => {
     const newInput = statePropsRow.value;
     // get the stateProps of the componentProvider
@@ -382,7 +382,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
       document.removeEventListener('keydown', keyBindedFunc);
     };
   }, []);
-  
+
   if(state.canvasFocus.childId === null) {
     return (
       <div className="column right" id="rightContainer" style={style}>

app/src/containers/LeftContainer.tsx

@@ -4,6 +4,7 @@ import ComponentDrag from '../components/right/ComponentDrag';
 import DragDropPanel from '../components/left/DragDropPanel';
 import StateContext from '../context/context';
 import { styleContext } from './AppContainer';
+
 // Left-hand portion of the app, where component options are displayed
 const LeftContainer = (props): JSX.Element => {
   const { style } = useContext(styleContext);
@@ -23,16 +24,20 @@ const LeftContainer = (props): JSX.Element => {
   }, []);
 
   return (
-    <div className="column left" style={style}>
-      <Grid container direction="column" alignItems="center">
-        <h4>Drag and Drop</h4>
-        <DragDropPanel isThemeLight={props.isThemeLight}/>
-        <div id={'CompBottomHalf'}>
-          <ComponentDrag isThemeLight={props.isThemeLight}/>
+    <div style={{borderRight: "4px solid #3FD0A2"}}>
+        <div className="column left hide-show" style={style}>
+          <Grid container direction="column" alignItems="center">
+            <h4>Drag and Drop</h4>
+            <DragDropPanel isThemeLight={props.isThemeLight}/>
+            <div id={'CompBottomHalf'}>
+              <ComponentDrag isThemeLight={props.isThemeLight}/>
+            </div>
+          </Grid>
         </div>
-      </Grid>
     </div>
   );
 };
 
+{/* <div className="arrow-right"></div> */}
+
 export default LeftContainer;

app/src/public/styles/style.css

@@ -47,7 +47,7 @@ h4 {
   height: 300px;
   width: 410px;
   flex-grow: 1;
-  padding-left: 10px; 
+  padding-left: 10px;
   padding-right: 10px;
 }
 .HTMLItemCreate {
@@ -88,16 +88,34 @@ LEFT COLUMN
 /////////////////////////////////////////////////
 */
 
+.app-container {
+  position: relative;
+}
+
 .left {
   padding: 10px 10px 10px 0px;
   display: flex;
-  width: 225px;
-  min-width: 225px;
+  /* width: 225px;
+  min-width: 225px; */
   flex-direction: column;
   align-content: center;
   position: relative;
   overflow-x: hidden;
 }
+.hide-show {
+  opacity: 0;
+  width: 0;
+  transition: opacity 0.5s linear, width 0.5s ease-in-out;
+  position: absolute;
+  height: 100%;
+}
+.hide-show:hover {
+  opacity: 1;
+  width: 225px;
+  min-width: 225px;
+  z-index: 289;
+}
+
 .HTMLItems {
   display: flex;
   flex-direction: column;
@@ -281,7 +299,7 @@ h1 {
 //////////////////////////////////////////////////
 RIGHT COLUMN
 /////////////////////////////////////////////////
-// RIGHT NOW, I'M NOT SURE WHAT RIGHT COL IS REFERING TO 
+// RIGHT NOW, I'M NOT SURE WHAT RIGHT COL IS REFERING TO
 */
 #rightContainer {
   overflow-y: scroll;
@@ -357,9 +375,9 @@ RIGHT COLUMN
   cursor: pointer;
 }
 
-/* 
+/*
 /////////////////////////////////////////////////////
-BOTTOM PANEL 
+BOTTOM PANEL
 /////////////////////////////////////////////////////
 */
 
@@ -409,6 +427,7 @@ BOTTOM PANEL
   background-color: 252526;
 }
 
+
 /*
 //////////////////////////////////////////
 NAVBAR
@@ -423,7 +442,7 @@ NAVBAR
 #customized-menu {
   width: 16%;
 }
-/* 
+/*
 /////////////////////////////////////////////////
 ANNOTATIONS
 /////////////////////////////////////////////////
@@ -607,4 +626,4 @@ a.nav_link:hover {
   display: flex;
   flex-direction: column;
   align-items: center;
-}
+}