Merge pull request #110 from HyperloopUPV-H8/ethernet-view/split-pane-logic

[ethernet-view] Collapsible elements

Author: andresdlt03

backend/.gitignore

@@ -11,7 +11,8 @@ Backend-H8
 backend
 !build
 # MacOS build
-cmd
+cmd/cmd
+cmd/logger/
 
 # EXCEL
 *.xlsx

ethernet-view/src/assets/svg/connection.svg

@@ -171,11 +171,11 @@ function getAffectedAndUnaffectedElements(
 
 function getNewMainElement(
     mainElement: SplitElement,
-    shrinkedElements: SplitElement[]
+    elements: SplitElement[]
 ): SplitElement {
     const mainElementLength =
         1 -
-        shrinkedElements.reduce((prevValue, currentElement) => {
+        elements.reduce((prevValue, currentElement) => {
             return prevValue + currentElement.length;
         }, 0);
 
@@ -195,10 +195,8 @@ function substractDisplacement(
     let remaindingDistance = Math.abs(distance);
 
     for (let i = 0; i < orderedElements.length; i++) {
-        const newLength = Math.max(
-            orderedElements[i].length - remaindingDistance,
-            orderedElements[i].minLength
-        );
+        let newLength = orderedElements[i].length - remaindingDistance;
+        if(newLength < orderedElements[i].minLength) newLength = 0;
         remaindingDistance = Math.max(
             remaindingDistance - (orderedElements[i].length - newLength),
             0

ethernet-view/src/assets/svg/letter.svg

@@ -0,0 +1,22 @@
+@use "src/styles/styles";
+
+.wrapper {
+    min-width: 0;
+    min-height: 0;
+}
+
+.collapsed {
+    padding: .6rem;
+    background-color: styles.$base-color;
+    border-radius: .8rem;
+}
+
+.icon {
+    width: 2rem;
+
+    img {
+        filter: invert(1);
+        width: 100%;
+        color: white;
+    }
+}

ethernet-view/src/assets/svg/paper-airplane.svg

@@ -0,0 +1,32 @@
+import styles from "layouts/SplitLayout/Pane/Pane.module.scss";
+
+type Props = {
+    component: React.ReactNode;
+    normalizedLength: number;
+    collapsedIcon: string;
+};
+
+export const Pane = ({ component, normalizedLength, collapsedIcon }: Props) => {
+
+    const isCollapsed = normalizedLength === 0;
+    
+    return (
+        <div
+            className={isCollapsed ? styles.collapsed : styles.wrapper}
+            style={{
+                flex: normalizedLength,
+            }}
+        >
+            <div className={styles.icon} style={{
+                display: isCollapsed ? "block" : "none"
+            }}>
+                <img src={collapsedIcon} alt="collapsed" />
+            </div>
+
+            <div style={isCollapsed ? {display: "none"} : {height: "100%"}}>
+                {component}
+            </div>
+            
+        </div>
+    );
+};

ethernet-view/src/hooks/useSplit/useSplit.ts

@@ -1,12 +1,15 @@
 import React from "react";
 import styles from "layouts/SplitLayout/SplitLayout.module.scss";
 import { useSplit } from "hooks/useSplit/useSplit";
-import { Component } from "layouts/SplitLayout/Component/Component";
+import { Pane } from "layouts/SplitLayout/Pane/Pane";
 import { Separator } from "layouts/SplitLayout/Separator/Separator";
 import { Orientation } from "hooks/useSplit/Orientation";
 
 type Props = {
-    components: React.ReactNode[];
+    components: {
+        component: React.ReactNode;
+        collapsedIcon: string;
+    }[];
     orientation?: Orientation;
 };
 
@@ -15,7 +18,7 @@ export const SplitLayout = ({
     components,
     orientation = Orientation.HORIZONTAL,
 }: Props) => {
-    const minSizes = components.map(() => 0.2);
+    const minSizes = components.map(() => 0.05);
     const [splitElements, onSeparatorMouseDown] = useSplit(
         minSizes,
         orientation
@@ -32,9 +35,10 @@ export const SplitLayout = ({
             {components.map((component, index) => {
                 return (
                     <React.Fragment key={index}>
-                        <Component
-                            component={component}
+                        <Pane
+                            component={component.component}
                             normalizedLength={splitElements[index].length}
+                            collapsedIcon={component.collapsedIcon}
                         />
                         {index < components.length - 1 && (
                             <Separator