refactor(paraBar): use CSS to implement hide/show function (#212)

refactor(parameterBar): use CSS to implement hide/show function The styling and functionality of the ParametersBar component has been updated so it can be hidden or revealed by the user. A new styled component, 'Pane', has been created to wrap the original 'Container' component and added to the return statement. Transition properties have been added to create smooth movement of the UI elements as they hide and reveal. The 'ShowHideButton' component has been updated to support the new functionality. The changes aim to provide a better user interface experience by offering more flexibility in viewing options.
techlauncher-mlai-edge-physics · Dec 1, 2023 · fd89c5d · fd89c5d
1 parent 3e84021
commit fd89c5d
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 29 deletions.
diff --git a/public/pic.png b/public/pic.png
diff --git a/src/components/ParametersBar.tsx b/src/components/ParametersBar.tsx
@@ -23,15 +23,35 @@ import { type SpaceSize } from 'antd/es/space';
 import ParameterButton from './ParameterComponents/ParameterButton';
 import ParameterLabel from './ParameterComponents/ParameterLabel';
 
-const Container = styled(Space)`
+interface Visible {
+  isHidden: boolean;
+}
+
+const Pane = styled.div<Visible>`
+  width: 22rem;
+  height: calc(100% - 5rem);
+
+  font-size: 2rem;
+  position: absolute;
+  display: flex;
+
+  text-align: left;
+
+  @media (max-width: 760px) {
+    display: none;
+  }
+  z-index: 1;
+`;
+const Container = styled(Space)<Visible>`
   background-color: #797979;
   color: #fff;
 
   width: 20rem;
-  height: calc(100% - 6rem);
+  height: calc(100% - 25px);
 
   font-size: 2rem;
   position: absolute;
+  left: ${(props) => (props.isHidden ? '-20rem' : '0')};
   display: flex;
 
   text-align: left;
@@ -44,12 +64,10 @@ const Container = styled(Space)`
   @media (max-width: 760px) {
     display: none;
   }
-`;
-
-const ButtonDiv = styled.span`
-  top: calc(6rem - 5px);
-  position: absolute;
-  left: 10px;
+  visibility: ${(props) => (props.isHidden ? 'hidden' : 'visible')};
+  transition:
+    left 0.5s linear,
+    visibility 0.5s linear;
 `;
 
 const Title = styled.span`
@@ -69,15 +87,20 @@ const Category = styled(Card)`
   color: #ffffff;
 `;
 
-const BackButton = styled.button`
-  width: 40px;
-  height: 40px;
+const BackButton = styled.button<Visible>`
+  position: absolute;
+  top: 0.5rem;
+  left: ${(props) => (props.isHidden ? '0.5rem' : '22.5rem')};
+  width: 2.75rem;
+  height: 2.75rem;
   border-radius: 50%;
   background-color: #d9d9d9;
   color: #464646;
   font-size: 16px;
   border: none;
   cursor: pointer;
+  z-index: 100;
+  transition: left 0.5s linear;
 `;
 
 const DropdownMenu = styled.a`
@@ -95,6 +118,7 @@ function ShowHideButton(props: {
 
   return (
     <BackButton
+      isHidden={!isVisible}
       onClick={() => {
         setVisible(!isVisible);
       }}
@@ -133,7 +157,7 @@ export default function ParametersBar(props: {
   params: SimulationParams;
   setParams: React.Dispatch<React.SetStateAction<SimulationParams>>;
 }): React.ReactElement {
-  const [isPaneVisible, setPaneVisible] = useState<boolean>(true);
+  const [containerVisible, setContainerVisible] = useState<boolean>(true);
   const space: [SpaceSize, SpaceSize] = ['large', 'small'];
 
   // for ease of development, we'll default to expert mode for now
@@ -160,16 +184,15 @@ export default function ParametersBar(props: {
     });
   }, [renderHeightMap, isCameraControlMode, setParams]);
 
-  if (isPaneVisible) {
-    return (
-      <Container direction="vertical" size={space}>
+  return (
+    <Pane isHidden={!containerVisible}>
+      <ShowHideButton
+        isVisible={containerVisible}
+        setVisible={setContainerVisible}
+      />
+      <Container direction="vertical" size={space} isHidden={!containerVisible}>
         {/* hide button */}
-        <Row justify="end">
-          <ShowHideButton
-            isVisible={isPaneVisible}
-            setVisible={setPaneVisible}
-          />
-        </Row>
+        <Row justify="end"></Row>
 
         {/* header */}
         <Title>Parameters</Title>
@@ -276,14 +299,8 @@ export default function ParametersBar(props: {
           </DropdownMenu>
         </Dropdown>
       </Container>
-    );
-  } else {
-    return (
-      <ButtonDiv>
-        <ShowHideButton isVisible={isPaneVisible} setVisible={setPaneVisible} />
-      </ButtonDiv>
-    );
-  }
+    </Pane>
+  );
 }
 
 // CATEGORIES