#1475 Collapsable sidebar (#1548)

pixiebrix · Oct 5, 2021 · 68a2228 · 68a2228
1 parent 15c88f6
commit 68a2228
Show file tree

Hide file tree

Showing 10 changed files with 257 additions and 176 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -106,9 +106,9 @@
     "react-select-virtualized": "^3.5.0",
     "react-shadow-root": "^6.1.0",
     "react-spinners": "0.9.0",
-    "react-split-pane": "^0.1.92",
     "react-table": "^7.7.0",
     "react-toast-notifications": "^2.4.4",
+    "react-transition-group": "^4.4.2",
     "react-virtualized": "^9.22.3",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.6",

diff --git a/src/devTools/Editor.module.scss b/src/devTools/Editor.module.scss
@@ -0,0 +1,6 @@
+.root {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+}
diff --git a/src/devTools/Editor.tsx b/src/devTools/Editor.tsx
@@ -15,11 +15,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import React, { useCallback, useContext, useMemo } from "react";
-import { Container } from "react-bootstrap";
 import Sidebar from "@/devTools/editor/sidebar/Sidebar";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "@/devTools/store";
-import SplitPane from "react-split-pane";
 import { cancelSelectElement } from "@/background/devtools";
 import { DevToolsContext } from "@/devTools/context";
 import { selectExtensions } from "@/options/selectors";
@@ -37,11 +35,10 @@ import GenericInsertPane from "@/devTools/editor/panes/insert/GenericInsertPane"
 import { ADAPTERS } from "@/devTools/editor/extensionPoints/adapter";
 import { actions } from "@/devTools/editor/slices/editorSlice";
 import { useGetMarketplaceListingsQuery } from "@/services/api";
+import styles from "./Editor.module.scss";
 
 const selectEditor = ({ editor }: RootState) => editor;
 
-const DEFAULT_SIDEBAR_WIDTH_PX = 260;
-
 const Editor: React.FunctionComponent = () => {
   const { tabState, port, connecting } = useContext(DevToolsContext);
   const installed = useSelector(selectExtensions);
@@ -141,22 +138,15 @@ const Editor: React.FunctionComponent = () => {
   ]);
 
   return (
-    <Container fluid className="h-100">
-      <SplitPane
-        split="vertical"
-        allowResize
-        minSize={DEFAULT_SIDEBAR_WIDTH_PX}
-        defaultSize={DEFAULT_SIDEBAR_WIDTH_PX}
-      >
-        <Sidebar
-          installed={installed}
-          elements={elements}
-          activeElement={activeElement}
-          inserting={inserting}
-        />
-        {body}
-      </SplitPane>
-    </Container>
+    <div className={styles.root}>
+      <Sidebar
+        installed={installed}
+        elements={elements}
+        activeElement={activeElement}
+        inserting={inserting}
+      />
+      {body}
+    </div>
   );
 };
 

diff --git a/src/devTools/Panel.scss b/src/devTools/Panel.scss
@@ -54,7 +54,6 @@
   }
 
   .container-fluid {
-    padding-left: 0;
     padding-right: 0;
   }
 
@@ -81,55 +80,6 @@
     }
   }
 
-  .Sidebar {
-    height: 100%;
-
-    border-right: 2px solid #c6bfdb;
-
-    &__extensions {
-      overflow-y: scroll;
-    }
-
-    .list-group {
-      border-radius: 0;
-
-      .list-group-item {
-        padding-left: 12px;
-        padding-right: 12px;
-        border-right: none;
-        font-size: 0.875rem;
-      }
-    }
-
-    &__actions {
-      .badge {
-        margin-top: -5px;
-      }
-    }
-
-    &__logo {
-      background-color: #6462aa; // Make logo icon look square
-    }
-    &__logo:hover {
-      filter: brightness(0.75);
-    }
-
-    &__actions button {
-      border-radius: 0;
-      margin-right: 0;
-      margin-left: 0;
-    }
-
-    label {
-      font-size: 0.875rem;
-    }
-
-    &__footer {
-      font-size: 0.875rem;
-      background-color: lightgray;
-    }
-  }
-
   label.AutoRun {
     font-size: 0.875rem;
   }

diff --git a/src/devTools/editor/ElementWizard.module.scss b/src/devTools/editor/ElementWizard.module.scss
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-$nav-height: 32px;
+$nav-height: 31px; // To match the height of the actions of the Sidebar
 
 .nav {
   height: $nav-height;

diff --git a/src/devTools/editor/sidebar/Footer.module.scss b/src/devTools/editor/sidebar/Footer.module.scss
@@ -0,0 +1,10 @@
+.root {
+  font-size: 0.875rem;
+  background-color: lightgray;
+  flex-grow: 0;
+  display: flex;
+}
+
+.scope {
+  flex: 1;
+}
diff --git a/src/devTools/editor/sidebar/Footer.tsx b/src/devTools/editor/sidebar/Footer.tsx
@@ -19,19 +19,18 @@ import React, { useContext } from "react";
 import AuthContext from "@/auth/AuthContext";
 import { DevToolsContext } from "@/devTools/context";
 import BeatLoader from "react-spinners/BeatLoader";
+import styles from "./Footer.module.scss";
 
 const Footer: React.FunctionComponent = () => {
   const { scope } = useContext(AuthContext);
   const { connecting } = useContext(DevToolsContext);
 
   return (
-    <div className="Sidebar__footer flex-grow-0">
-      <div className="d-flex">
-        <div className="flex-grow-1">
-          Scope: <code>{scope}</code>
-        </div>
-        <div>{connecting && <BeatLoader size={7} />}</div>
+    <div className={styles.root}>
+      <div className={styles.scope}>
+        Scope: <code>{scope}</code>
       </div>
+      {connecting && <BeatLoader size={7} />}
     </div>
   );
 };

diff --git a/src/devTools/editor/sidebar/Sidebar.module.scss b/src/devTools/editor/sidebar/Sidebar.module.scss
@@ -0,0 +1,96 @@
+$logoSize: 31px;
+
+.root {
+  flex-direction: column;
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  border-right: 2px solid #c6bfdb;
+
+  &.collapsed {
+    flex: 0 0 $logoSize;
+    align-items: center;
+    transition: transform 100ms;
+  }
+  &.expanded {
+    flex: 0 0 260px;
+    transition: transform 100ms;
+  }
+
+  &.hidden {
+    transform: translate3d(-100%, 0, 0);
+  }
+  &.hidden.showing {
+    transform: none;
+  }
+
+  label {
+    font-size: 0.875rem;
+  }
+
+  :global {
+    .list-group {
+      border-radius: 0;
+
+      .list-group-item {
+        padding-left: 12px;
+        padding-right: 12px;
+        border-right: none;
+        font-size: 0.875rem;
+      }
+    }
+  }
+}
+
+.logo {
+  background-color: #6462aa; // Make logo icon look square
+  width: $logoSize;
+  height: $logoSize;
+
+  &:hover {
+    filter: brightness(0.75);
+  }
+}
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+
+  button {
+    border-radius: 0;
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  :global(.badge) {
+    margin-top: -5px;
+  }
+}
+
+.actionsLeft {
+  display: flex;
+}
+
+.toggle {
+  border-radius: 0 !important;
+  background-color: white !important;
+  &:hover {
+    background-color: #e9ecef !important;
+  }
+
+  .expanded & {
+    padding: 0 5px !important;
+  }
+  .collapsed & {
+    padding: 5px !important;
+  }
+}
+
+.unavailable {
+  margin: 5px;
+}
+
+.extensions {
+  overflow-y: scroll;
+  flex: 1;
+}