Make panels collapsible (#239)

* Make panels collapsible

- Add Panel component with collapse logic
- Use the component in all the necessary panel groups

* Remove unnecessary container from PanelCanvas

* Add "hide property" to Pane component to hide Panel contents using a prop

- Instead of doing conditional rendering, pass the condition to Panel as props

* Change collapse icon rotation for closed

- Use one icon and use CSS transforms to rotate it

* Remove unnecessary imports from PanelSelection

src/components/Panel.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+
+interface PanelProps {
+  title: string;
+  defaultCollapsed?: boolean;
+  hide?: boolean;
+}
+
+export const Panel: React.FC<PanelProps> = ({
+  title,
+  children,
+  defaultCollapsed = false,
+  hide = false
+}) => {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+
+  if (hide) return null;
+
+  return (
+    <div className="panel">
+      <h4>{title}</h4>
+      <button
+        className="btn-panel-collapse"
+        type="button"
+        onClick={e => {
+          e.preventDefault();
+          setCollapsed(collapsed => !collapsed);
+        }}
+      >
+        {
+          <span
+            className={`btn-panel-collapse-icon ${
+              collapsed ? "btn-panel-collapse-icon-closed" : ""
+            }`}
+          >
+            ▼
+          </span>
+        }
+      </button>
+      {!collapsed && <div className="panelColumn">{children}</div>}
+    </div>
+  );
+};

src/components/panels/PanelCanvas.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { ColorPicker } from "../ColorPicker";
+import { Panel } from "../Panel";
 
 interface PanelCanvasProps {
   viewBackgroundColor: string;
@@ -14,9 +15,7 @@ export const PanelCanvas: React.FC<PanelCanvasProps> = ({
   onClearCanvas
 }) => {
   return (
-    <>
+    <Panel title="Canvas">
-      <h4>Canvas</h4>
-      <div className="panelColumn">
       <h5>Canvas Background Color</h5>
       <ColorPicker
         color={viewBackgroundColor}
@@ -29,7 +28,6 @@ export const PanelCanvas: React.FC<PanelCanvasProps> = ({
       >
         Clear canvas
       </button>
-      </div>
+    </Panel>
-    </>
   );
 };

src/components/panels/PanelExport.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { EditableText } from "../EditableText";
+import { Panel } from "../Panel";
 
 interface PanelExportProps {
   projectName: string;
@@ -21,8 +22,7 @@ export const PanelExport: React.FC<PanelExportProps> = ({
   onExportAsPNG
 }) => {
   return (
-    <>
+    <Panel title="Export">
-      <h4>Export</h4>
       <div className="panelColumn">
         <h5>Name</h5>
         {projectName && (
@@ -47,6 +47,6 @@ export const PanelExport: React.FC<PanelExportProps> = ({
         <button onClick={onSaveScene}>Save as...</button>
         <button onClick={onLoadScene}>Load file...</button>
       </div>
-    </>
+    </Panel>
   );
 };

src/components/panels/PanelSelection.tsx

@@ -14,8 +14,7 @@ export const PanelSelection: React.FC<PanelSelectionProps> = ({
   onSendToBack
 }) => {
   return (
-    <>
+    <div>
-      <h4>Selection</h4>
       <div className="buttonList">
         <button type="button" onClick={onBringForward}>
           Bring forward
@@ -30,6 +29,6 @@ export const PanelSelection: React.FC<PanelSelectionProps> = ({
           Send to back
         </button>
       </div>
-    </>
+    </div>
   );
 };

src/components/panels/PanelTools.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { SHAPES } from "../../shapes";
 import { capitalizeString } from "../../utils";
+import { Panel } from "../Panel";
 
 interface PanelToolsProps {
   activeTool: string;
@@ -13,8 +14,7 @@ export const PanelTools: React.FC<PanelToolsProps> = ({
   onToolChange
 }) => {
   return (
-    <>
+    <Panel title="Shapes">
-      <h4>Shapes</h4>
       <div className="panelTools">
         {SHAPES.map(({ value, icon }) => (
           <label
@@ -33,6 +33,6 @@ export const PanelTools: React.FC<PanelToolsProps> = ({
           </label>
         ))}
       </div>
-    </>
+    </Panel>
   );
 };

src/index.tsx

@@ -46,6 +46,7 @@ import { PanelSelection } from "./components/panels/PanelSelection";
 import { PanelColor } from "./components/panels/PanelColor";
 import { PanelExport } from "./components/panels/PanelExport";
 import { PanelCanvas } from "./components/panels/PanelCanvas";
+import { Panel } from "./components/Panel";
 
 import "./styles.scss";
 
@@ -381,8 +382,7 @@ class App extends React.Component<{}, AppState> {
               this.forceUpdate();
             }}
           />
-          {someElementIsSelected(elements) && (
+          <Panel title="Selection" hide={!someElementIsSelected(elements)}>
-            <div className="panelColumn">
             <PanelSelection
               onBringForward={this.moveOneRight}
               onBringToFront={this.moveAllRight}
@@ -485,8 +485,7 @@ class App extends React.Component<{}, AppState> {
             <button onClick={this.deleteSelectedElements}>
               Delete selected
             </button>
-            </div>
+          </Panel>
-          )}
           <PanelCanvas
             onClearCanvas={this.clearCanvas}
             onViewBackgroundColorChange={val =>

src/styles.scss

@@ -30,6 +30,27 @@ body {
     margin: 10px 0 10px 0;
   }
 
+  .panel {
+    position: relative;
+    .btn-panel-collapse {
+      position: absolute;
+      top: -2px;
+      right: 5px;
+      background: none;
+      margin: 0px;
+      color: black;
+    }
+
+    .btn-panel-collapse-icon {
+      transform: none;
+      display: inline-block;
+    }
+
+    .btn-panel-collapse-icon-closed {
+      transform: rotateZ(90deg);
+    }
+  }
+
   .panelTools {
     display: flex;
     flex-wrap: wrap;