smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improved color picker (#174)

Browse source 
* Add react-color

* Prettier

* Better styles

* Use enum for color pickers instead of strings

* Run prettier on .scss file
This commit is contained in:
Jared Palmer 2020-01-05 13:05:55 -08:00 • committed by Christopher Chedeau
parent e7e676e1eb
commit b5c67260d7
4 changed files with 207 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

141
src/index.tsx
View file

@ -2,6 +2,7 @@ import React from "react";
import ReactDOM from "react-dom";
import rough from "roughjs/bin/wrappers/rough";
import { RoughCanvas } from "roughjs/bin/canvas";
import { SketchPicker } from "react-color";
import { moveOneLeft, moveAllLeft, moveOneRight, moveAllRight } from "./zindex";
@ -816,9 +817,16 @@ function restore(
}
}
enum ColorPicker {
CANVAS_BACKGROUND,
SHAPE_STROKE,
SHAPE_BACKGROUND
}
type AppState = {
draggingElement: ExcalidrawElement | null;
resizingElement: ExcalidrawElement | null;
currentColorPicker: ColorPicker | null;
elementType: string;
exportBackground: boolean;
currentItemStrokeColor: string;
@ -889,7 +897,6 @@ const SHAPES = [
const shapesShortcutKeys = SHAPES.map(shape => shape.value[0]);
function capitalize(str: string) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
@ -953,6 +960,7 @@ class App extends React.Component<{}, AppState> {
draggingElement: null,
resizingElement: null,
elementType: "selection",
currentColorPicker: null,
exportBackground: true,
currentItemStrokeColor: "#000000",
currentItemBackgroundColor: "#ffffff",
@ -1134,7 +1142,11 @@ class App extends React.Component<{}, AppState> {
<h4>Shapes</h4>
<div className="panelTools">
{SHAPES.map(({ value, icon }) => (
<label key={value} className="tool" title={`${capitalize(value)} - ${capitalize(value)[0]}`}>
<label
key={value}
className="tool"
title={`${capitalize(value)} - ${capitalize(value)[0]}`}
>
<input
type="radio"
checked={this.state.elementType === value}
@ -1152,36 +1164,123 @@ class App extends React.Component<{}, AppState> {
</div>
<h4>Colors</h4>
<div className="panelColumn">
<label>
<input
type="color"
value={this.state.viewBackgroundColor}
onChange={e => {
this.setState({ viewBackgroundColor: e.target.value });
<h5>Canvas Background</h5>
<div>
<button
className="swatch"
style={{
backgroundColor: this.state.viewBackgroundColor
}}
/>
Background
</label>
<label>
onClick={() =>
this.setState(s => ({
currentColorPicker:
s.currentColorPicker === ColorPicker.CANVAS_BACKGROUND
? null
: ColorPicker.CANVAS_BACKGROUND
}))
}
></button>
{this.state.currentColorPicker === ColorPicker.CANVAS_BACKGROUND ? (
<div className="popover">
<div
className="cover"
onClick={() => this.setState({ currentColorPicker: null })}
></div>
<SketchPicker
color={this.state.viewBackgroundColor}
onChange={color => {
this.setState({ viewBackgroundColor: color.hex });
}}
/>
</div>
) : null}
<input
type="color"
type="text"
className="swatch-input"
value={this.state.viewBackgroundColor}
onChange={e =>
this.setState({ viewBackgroundColor: e.target.value })
}
/>
</div>
<h5>Shape Stroke</h5>
<div>
<button
className="swatch"
style={{
backgroundColor: this.state.currentItemStrokeColor
}}
onClick={() =>
this.setState(s => ({
currentColorPicker:
s.currentColorPicker === ColorPicker.SHAPE_STROKE
? null
: ColorPicker.SHAPE_STROKE
}))
}
></button>
{this.state.currentColorPicker === ColorPicker.SHAPE_STROKE ? (
<div className="popover">
<div
className="cover"
onClick={() => this.setState({ currentColorPicker: null })}
></div>
<SketchPicker
color={this.state.currentItemStrokeColor}
onChange={color => {
this.setState({ currentItemStrokeColor: color.hex });
}}
/>
</div>
) : null}
<input
type="text"
className="swatch-input"
value={this.state.currentItemStrokeColor}
onChange={e => {
this.setState({ currentItemStrokeColor: e.target.value });
}}
/>
Shape Stroke
</label>
<label>
</div>
<h5>Shape Background</h5>
<div>
<button
className="swatch"
style={{
backgroundColor: this.state.currentItemBackgroundColor
}}
onClick={() =>
this.setState(s => ({
currentColorPicker:
s.currentColorPicker === ColorPicker.SHAPE_BACKGROUND
? null
: ColorPicker.SHAPE_BACKGROUND
}))
}
></button>
{this.state.currentColorPicker === ColorPicker.SHAPE_BACKGROUND ? (
<div className="popover">
<div
className="cover"
onClick={() => this.setState({ currentColorPicker: null })}
></div>
<SketchPicker
color={this.state.currentItemBackgroundColor}
onChange={color => {
this.setState({ currentItemBackgroundColor: color.hex });
}}
/>
</div>
) : null}
<input
type="color"
value={this.state.currentItemBackgroundColor}
type="text"
className="swatch-input"
value={this.state.currentItemStrokeColor}
onChange={e => {
this.setState({ currentItemBackgroundColor: e.target.value });
this.setState({ currentItemStrokeColor: e.target.value });
}}
/>
Shape Background
</label>
</div>
</div>
<h4>Canvas</h4>
<div className="panelColumn">

41
src/styles.scss
View file

@ -22,7 +22,6 @@ body {
.sidePanel {
width: 230px;
background-color: #eee;
padding: 10px;
overflow-y: auto;
@ -42,6 +41,17 @@ body {
.panelColumn {
display: flex;
flex-direction: column;
h5 {
margin-top: 4px;
margin-bottom: 4px;
font-size: 12px;
color: #333;
}
h5:first-of-type {
margin-top: 0;
}
}
}
@ -134,3 +144,32 @@ button {
cursor: not-allowed;
}
}
.popover {
position: absolute;
z-index: 2;
.cover {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
.swatch {
height: 24px;
width: 24px;
display: inline;
margin-right: 4px;
}
.swatch-input {
font-size: 16px;
display: inline;
width: 100px;
border-radius: 2px;
padding: 2px 4px;
border: 1px solid #ddd;
}