From b1a90c002087b5184894b47b47f7041c0758f434 Mon Sep 17 00:00:00 2001 From: Paulo Menezes Date: Sat, 4 Jan 2020 00:58:20 -0300 Subject: [PATCH] Side panel (#95) * Side panel * Update arrow icon --- package-lock.json | 29 ++++++ package.json | 3 + src/index.tsx | 220 ++++++++++++++++++++++++---------------------- src/styles.css | 62 +++++++++++-- 4 files changed, 202 insertions(+), 112 deletions(-) diff --git a/package-lock.json b/package-lock.json index 017c3dfd4..b02c66f9b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1000,6 +1000,35 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.26", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.26.tgz", + "integrity": "sha512-CcM/fIFwZlRdiWG/25xE/wHbtyUuCtqoCTrr6BsWw7hH072fR++n4L56KPydAr3ANgMJMjT8v83ZFIsDc7kE+A==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.26", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.26.tgz", + "integrity": "sha512-3Dfd/v2IztP1TxKOxZiB5+4kaOZK9mNy0KU1vVK7nFlPWz3gzxrCWB+AloQhQUoJ8HhGqbzjliK89Vl7PExGbw==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.26" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.12.0.tgz", + "integrity": "sha512-CnpsWs6GhTs9ekNB3d8rcO5HYqRkXbYKf2YNiAlTWbj5eVlPqsd/XH1F9If8jkcR1aegryAbln/qYeKVZzpM0g==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.26" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.8.tgz", + "integrity": "sha512-I5h9YQg/ePA3Br9ISS18fcwOYmzQYDSM1ftH03/8nHkiqIVHtUyQBw482+60dnzvlr82gHt3mGm+nDUp159FCw==", + "requires": { + "prop-types": "^15.5.10" + } + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", diff --git a/package.json b/package.json index dec9ef384..ece0d6580 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,9 @@ "keywords": [], "main": "src/index.js", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.26", + "@fortawesome/free-solid-svg-icons": "^5.12.0", + "@fortawesome/react-fontawesome": "^0.1.8", "lodash": "4.17.15", "react": "16.12.0", "react-dom": "16.12.0", diff --git a/src/index.tsx b/src/index.tsx index 8e947c658..4ad3a7f7c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,6 +2,14 @@ import React from "react"; import ReactDOM from "react-dom"; import rough from "roughjs/bin/wrappers/rough"; import { RoughCanvas } from "roughjs/bin/canvas"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faMousePointer, + faSquare, + faCircle, + faLongArrowAltRight, + faFont +} from "@fortawesome/free-solid-svg-icons"; import "./styles.css"; @@ -598,28 +606,28 @@ const KEYS = { const SHAPES = [ { - label: "Rectange", + icon: faMousePointer, + value: "selection" + }, + { + icon: faSquare, value: "rectangle" }, { - label: "Ellipse", + icon: faCircle, value: "ellipse" }, { - label: "Arrow", + icon: faLongArrowAltRight, value: "arrow" }, { - label: "Text", + icon: faFont, value: "text" - }, - { - label: "Selection", - value: "selection" } ]; -const shapesShortcutKeys = SHAPES.map(shape => shape.label[0].toLowerCase()); +const shapesShortcutKeys = SHAPES.map(shape => shape.value[0]); function findElementByKey(key: string) { const defaultElement = "selection"; @@ -716,6 +724,7 @@ class App extends React.Component<{}, AppState> { public render() { return (
{ e.clipboardData.setData( "text/plain", @@ -756,28 +765,111 @@ class App extends React.Component<{}, AppState> { e.preventDefault(); }} > -
- Shapes - {SHAPES.map(({ value, label }) => ( -
- + + +
+

Export

+
+ + + +
+ (padding: + { + this.setState({ exportPadding: Number(e.target.value) }); + }} + disabled={!this.state.exportVisibleOnly} + /> + px) +
+
+ { e.preventDefault(); const { deltaX, deltaY } = e; @@ -958,84 +1050,6 @@ class App extends React.Component<{}, AppState> { this.forceUpdate(); }} /> -
- Colors - - - -
-
- Export - - - - (padding: - { - this.setState({ exportPadding: Number(e.target.value) }); - }} - disabled={!this.state.exportVisibleOnly} - /> - px) -
); } diff --git a/src/styles.css b/src/styles.css index 1b4cf16f7..b10aa8a3f 100644 --- a/src/styles.css +++ b/src/styles.css @@ -7,25 +7,62 @@ body { margin: 0; + font-family: Arial, Helvetica, sans-serif; } -/* Controls - Begin */ -fieldset { - margin: 5px; +.container { + display: flex; +} + +.sidePanel { + width: 230px; + background-color: #eee; + + padding: 10px; +} + +.sidePanel h4 { + margin: 10px 0 10px 0; +} + +.sidePanel .panelTools { + display: flex; +} + +.sidePanel .panelColumn { + display: flex; + flex-direction: column; +} + +.tool input[type="radio"] { + display: none; +} + +.tool input[type="radio"] + .toolIcon { + background-color: #ddd; + + width: 41px; + height: 41px; + + display: flex; + justify-content: center; + align-items: center; + + border-radius: 3px; +} + +.tool input[type="radio"]:checked + .toolIcon { + background-color: #bdbebc; } label { - margin-right: 10px; + margin-right: 6px; } label span { display: inline-block; } -label span::first-letter { - text-decoration: underline; -} - input[type="number"] { width: 30px; } @@ -33,4 +70,11 @@ input[type="number"] { input { margin-right: 5px; } -/* Controls - End */ + +button { + background-color: #ddd; + border: 1px solid #ccc; + border-radius: 4px; + + padding: 5px; +}