Make panels collapsible

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

src/components/Panel.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+
+interface PanelProps {
+  title: string;
+  defaultCollapsed?: boolean;
+}
+
+export const Panel: React.FC<PanelProps> = ({
+  title,
+  children,
+  defaultCollapsed = false
+}) => {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  return (
+    <div className="panel">
+      <h4>{title}</h4>
+      <button
+        className="btn-panel-collapse"
+        type="button"
+        onClick={e => {
+          e.preventDefault();
+          setCollapsed(collapsed => !collapsed);
+        }}
+      >
+        {collapsed ? "▲" : "▼"}
+      </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,8 +15,7 @@ export const PanelCanvas: React.FC<PanelCanvasProps> = ({
   onClearCanvas
 }) => {
   return (
-    <>
-      <h4>Canvas</h4>
+    <Panel title="Canvas">
       <div className="panelColumn">
         <h5>Canvas Background Color</h5>
         <ColorPicker
@@ -30,6 +30,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 (
-    <>
-      <h4>Export</h4>
+    <Panel title="Export">
       <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

@@ -1,4 +1,5 @@
 import React from "react";
+import { Panel } from "../Panel";
 
 interface PanelSelectionProps {
   onBringForward: React.MouseEventHandler;
@@ -14,8 +15,7 @@ export const PanelSelection: React.FC<PanelSelectionProps> = ({
   onSendToBack
 }) => {
   return (
-    <>
-      <h4>Selection</h4>
+    <div>
       <div className="buttonList">
         <button type="button" onClick={onBringForward}>
           Bring forward
@@ -30,6 +30,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 (
-    <>
-      <h4>Shapes</h4>
+    <Panel title="Shapes">
       <div className="panelTools">
         {SHAPES.map(({ value, icon }) => (
           <label
@@ -33,6 +33,6 @@ export const PanelTools: React.FC<PanelToolsProps> = ({
           </label>
         ))}
       </div>
-    </>
+    </Panel>
   );
 };

src/index.tsx

@@ -43,6 +43,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";
 
 const { elements } = createScene();
 const { history } = createHistory();
@@ -381,7 +382,7 @@ class App extends React.Component<{}, AppState> {
             }}
           />
           {someElementIsSelected(elements) && (
-            <div className="panelColumn">
+            <Panel title="Selection">
               <PanelSelection
                 onBringForward={this.moveOneRight}
                 onBringToFront={this.moveAllRight}
@@ -484,7 +485,7 @@ class App extends React.Component<{}, AppState> {
               <button onClick={this.deleteSelectedElements}>
                 Delete selected
               </button>
-            </div>
+            </Panel>
           )}
           <PanelCanvas
             onClearCanvas={this.clearCanvas}

src/styles.scss

@@ -30,6 +30,17 @@ body {
     margin: 10px 0 10px 0;
   }
 
+  .panel {
+    position: relative;
+    .btn-panel-collapse {
+      position: absolute;
+      top: -2px;
+      right: 5px;
+      background: none;
+      margin: 0px;
+    }
+  }
+
   .panelTools {
     display: flex;
     flex-wrap: wrap;