Redesign idea (#343)

* Redisign idea

* Code cleanup

* Fixed to right container

* Reoredered layout

* Reordering panels

* Export dialog

* Removed redunant code

* Fixed not removing temp canvas

* Fixed preview not using only selected elements

* Returned file name on export

* Toggle export selected/all elements

* Hide copy to clipboard button if no support of clipboard

* Added border to swatches

* Fixed modal flickering

src/actions/actionCanvas.tsx

@@ -2,43 +2,46 @@ import React from "react";
 import { Action } from "./types";
 import { ColorPicker } from "../components/ColorPicker";
 import { getDefaultAppState } from "../appState";
+import { trash } from "../components/icons";
+import { ToolIcon } from "../components/ToolIcon";
 
 export const actionChangeViewBackgroundColor: Action = {
   name: "changeViewBackgroundColor",
   perform: (elements, appState, value) => {
     return { appState: { ...appState, viewBackgroundColor: value } };
   },
-  PanelComponent: ({ appState, updateData }) => (
-    <>
-      <h5>Canvas Background Color</h5>
-      <ColorPicker
-        type="canvasBackground"
-        color={appState.viewBackgroundColor}
-        onChange={color => updateData(color)}
-      />
-    </>
-  )
+  PanelComponent: ({ appState, updateData }) => {
+    return (
+      <div style={{ position: "relative" }}>
+        <ColorPicker
+          type="canvasBackground"
+          color={appState.viewBackgroundColor}
+          onChange={color => updateData(color)}
+        />
+      </div>
+    );
+  }
 };
 
 export const actionClearCanvas: Action = {
   name: "clearCanvas",
-  perform: (elements, appState, value) => {
+  perform: () => {
     return {
       elements: [],
       appState: getDefaultAppState()
     };
   },
   PanelComponent: ({ updateData }) => (
-    <button
+    <ToolIcon
       type="button"
+      icon={trash}
+      title="Clear the canvas & reset background color"
+      aria-label="Clear the canvas & reset background color"
       onClick={() => {
         if (window.confirm("This will clear the whole canvas. Are you sure?")) {
           updateData(null);
         }
       }}
-      title="Clear the canvas & reset background color"
-    >
-      Clear canvas
-    </button>
+    />
   )
 };

src/actions/actionExport.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import { Action } from "./types";
 import { EditableText } from "../components/EditableText";
 import { saveAsJSON, loadFromJSON } from "../scene";
+import { load, save } from "../components/icons";
+import { ToolIcon } from "../components/ToolIcon";
 
 export const actionChangeProjectName: Action = {
   name: "changeProjectName",
@@ -9,15 +11,10 @@ export const actionChangeProjectName: Action = {
     return { appState: { ...appState, name: value } };
   },
   PanelComponent: ({ appState, updateData }) => (
-    <>
-      <h5>Name</h5>
-      {appState.name && (
-        <EditableText
-          value={appState.name}
-          onChange={(name: string) => updateData(name)}
-        />
-      )}
-    </>
+    <EditableText
+      value={appState.name || "Unnamed"}
+      onChange={(name: string) => updateData(name)}
+    />
   )
 };
 
@@ -34,8 +31,8 @@ export const actionChangeExportBackground: Action = {
         onChange={e => {
           updateData(e.target.checked);
         }}
-      />
-      background
+      />{" "}
+      With background
     </label>
   )
 };
@@ -47,7 +44,13 @@ export const actionSaveScene: Action = {
     return {};
   },
   PanelComponent: ({ updateData }) => (
-    <button onClick={() => updateData(null)}>Save as...</button>
+    <ToolIcon
+      type="button"
+      icon={save}
+      title="Save"
+      aria-label="Save"
+      onClick={() => updateData(null)}
+    />
   )
 };
 
@@ -57,14 +60,16 @@ export const actionLoadScene: Action = {
     return { elements: loadedElements };
   },
   PanelComponent: ({ updateData }) => (
-    <button
+    <ToolIcon
+      type="button"
+      icon={load}
+      title="Load"
+      aria-label="Load"
       onClick={() => {
         loadFromJSON().then(({ elements }) => {
           updateData(elements);
         });
       }}
-    >
-      Load file...
-    </button>
+    />
   )
 };

src/actions/actionProperties.tsx

@@ -3,8 +3,8 @@ import { Action } from "./types";
 import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
 import { getSelectedAttribute } from "../scene";
 import { ButtonSelect } from "../components/ButtonSelect";
-import { PanelColor } from "../components/panels/PanelColor";
 import { isTextElement, redrawTextBoundingBox } from "../element";
+import { ColorPicker } from "../components/ColorPicker";
 
 const changeProperty = (
   elements: readonly ExcalidrawElement[],
@@ -31,17 +31,14 @@ export const actionChangeStrokeColor: Action = {
     };
   },
   PanelComponent: ({ elements, appState, updateData }) => (
-    <PanelColor
-      title="Stroke Color"
-      colorType="elementStroke"
-      onColorChange={(color: string) => {
-        updateData(color);
-      }}
-      colorValue={getSelectedAttribute(
-        elements,
-        element => element.strokeColor
-      )}
-    />
+    <>
+      <h5>Stroke</h5>
+      <ColorPicker
+        type="elementStroke"
+        color={getSelectedAttribute(elements, element => element.strokeColor)}
+        onChange={updateData}
+      />
+    </>
   )
 };
 
@@ -58,17 +55,17 @@ export const actionChangeBackgroundColor: Action = {
     };
   },
   PanelComponent: ({ elements, updateData }) => (
-    <PanelColor
-      title="Background Color"
-      colorType="elementBackground"
-      onColorChange={(color: string) => {
-        updateData(color);
-      }}
-      colorValue={getSelectedAttribute(
-        elements,
-        element => element.backgroundColor
-      )}
-    />
+    <>
+      <h5>Background</h5>
+      <ColorPicker
+        type="elementBackground"
+        color={getSelectedAttribute(
+          elements,
+          element => element.backgroundColor
+        )}
+        onChange={updateData}
+      />
+    </>
   )
 };
 

src/actions/types.ts

@@ -52,7 +52,7 @@ export interface ActionsManagerInterface {
   ) => { label: string; action: () => void }[];
   renderAction: (
     name: string,
-    elements: ExcalidrawElement[],
+    elements: readonly ExcalidrawElement[],
     appState: AppState,
     updater: UpdaterFn
   ) => React.ReactElement | null;