Skip to content

Commit

Permalink
BugFix : colorpicker
Browse files Browse the repository at this point in the history
  • Loading branch information
@ashuvssut
ashuvssut committed Jun 1, 2021
1 parent 35f4978 commit 4246584
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 25 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
"pdf-lib": "^1.16.0",
"react": "^17.0.2",
"react-bootstrap": "^1.6.0",
"react-color": "^2.19.3",
"react-dom": "^17.0.2",
"react-draggable": "^4.4.3",
"react-dropzone": "^11.3.2",
Expand Down
72 changes: 54 additions & 18 deletions src/pages/Sketch/components/Toolbox/Toolbox.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// import React, {useState} from "react";
import React from "react";
import React, { useState } from "react";
import styles from "./toolbox.module.scss";
import {
AiOutlineLine,
Expand Down Expand Up @@ -30,6 +29,7 @@ import {
ListItemText,
ListItemIcon,
Divider,
ClickAwayListener,
} from "@material-ui/core";
import {
AccountTree,
Expand All @@ -42,6 +42,7 @@ import {
Save,
} from "@material-ui/icons";
import IconsLibrary from "./../IconLibrary/IconsLibrary";
import { ChromePicker } from "react-color";

const useStyles = makeStyles(theme => ({
root: {
Expand Down Expand Up @@ -136,6 +137,41 @@ function VerticalTabs(props) {
loadLastState,
saveInstance,
} = props;
const [displayColorPicker, setDisplayColorPicker] = useState(false);
const ColorPicker = props => {
const { width, name, color, onColorChange } = props;
return (
<div className={styles.root}>
<div className={styles.swatch}>
<div
className={styles.colorIndicator}
style={{
backgroundColor: props.color || "#fff",
}}
onMouseDown={() => {
setDisplayColorPicker(true);
}}
/>
</div>
{displayColorPicker ? (
<ClickAwayListener
onClickAway={() => {
setDisplayColorPicker(false);
}}
>
<div className={styles.popover}>
<ChromePicker
width={width}
name={name}
color={color}
onChangeComplete={color => onColorChange(color.hex)}
/>
</div>
</ClickAwayListener>
) : null}
</div>
);
};

const classes = useStyles();
const [value, setValue] = React.useState(0);
Expand Down Expand Up @@ -296,11 +332,11 @@ function VerticalTabs(props) {
<List component="div">
<Feature title="Canvas Setup">
<div className={styles.colorPicker}>
<input
type="color"
<ColorPicker
width={200}
name="canvas_bg_color"
value={background}
onChange={e => setBackground(e.target.value)}
color={background}
onColorChange={setBackground}
/>
<input
className={styles.hexInput}
Expand Down Expand Up @@ -372,11 +408,11 @@ function VerticalTabs(props) {
<>
<Feature title="Fill Color">
<div className={styles.colorPicker}>
<input
type="color"
<ColorPicker
width={200}
name="canvas_pen_color"
value={fillColor}
onChange={e => setFillColor(e.target.value)}
color={fillColor}
onColorChange={setFillColor}
/>
<input
className={styles.hexInput}
Expand Down Expand Up @@ -455,11 +491,11 @@ function VerticalTabs(props) {

<Feature title="Stroke">
<div className={styles.colorPicker}>
<input
type="color"
<ColorPicker
width={200}
name="canvas_pen_color"
value={color}
onChange={e => setColor(e.target.value)}
color={color}
onColorChange={setColor}
/>
<input
className={styles.hexInput}
Expand Down Expand Up @@ -550,11 +586,11 @@ function VerticalTabs(props) {
<List component="div">
<Feature title="Stroke">
<div className={styles.colorPicker}>
<input
type="color"
<ColorPicker
width={200}
name="canvas_pen_color"
value={color}
onChange={e => setColor(e.target.value)}
color={color}
onColorChange={setColor}
/>
<input
className={styles.hexInput}
Expand Down
21 changes: 16 additions & 5 deletions src/pages/Sketch/components/Toolbox/toolbox.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,14 +89,25 @@
display: flex;
justify-content: flex-start;
align-items: center;
input[type="color"] {
border: none;
outline: none;
width: 20px;
height: 20px;
.root {
position: relative;
.swatch {
box-shadow: 0px 0px 8px 5px #ede8e8;
border-radius: 5px;
padding: 2px;
.colorIndicator {
border-radius: 3px;
height: 22px;
width: 27px;
}
}
.popover {
position: absolute;
}
}
.hexInput {
font-size: 80%;
font-family: monospace;
height: 1.7rem;
margin-top: 2px;
margin-left: 10px;
Expand Down
39 changes: 37 additions & 2 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1322,6 +1322,11 @@
gud "^1.0.0"
warning "^4.0.3"

"@icons/material@^0.2.4":
version "0.2.4"
resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==

"@istanbuljs/load-nyc-config@^1.0.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
Expand Down Expand Up @@ -7523,7 +7528,7 @@ locate-path@^5.0.0:
dependencies:
p-locate "^4.1.0"

lodash-es@^4.17.20:
lodash-es@^4.17.15, lodash-es@^4.17.20:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
Expand Down Expand Up @@ -7598,7 +7603,7 @@ lodash.uniq@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=

"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.5, lodash@^4.7.0:
"lodash@>=3.5 <5", lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.5, lodash@^4.7.0:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
Expand Down Expand Up @@ -7705,6 +7710,11 @@ map-visit@^1.0.0:
dependencies:
object-visit "^1.0.0"

material-colors@^1.2.1:
version "1.2.6"
resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==

md5.js@^1.3.4:
version "1.3.5"
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
Expand Down Expand Up @@ -9743,6 +9753,19 @@ react-bootstrap@^1.6.0:
uncontrollable "^7.2.1"
warning "^4.0.3"

react-color@^2.19.3:
version "2.19.3"
resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
dependencies:
"@icons/material" "^0.2.4"
lodash "^4.17.15"
lodash-es "^4.17.15"
material-colors "^1.2.1"
prop-types "^15.5.10"
reactcss "^1.2.0"
tinycolor2 "^1.4.1"

react-dev-utils@^11.0.3:
version "11.0.4"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"
Expand Down Expand Up @@ -10049,6 +10072,13 @@ react@^17.0.2:
loose-envify "^1.1.0"
object-assign "^4.1.1"

reactcss@^1.2.0:
version "1.2.3"
resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
dependencies:
lodash "^4.0.1"

reactstrap@^8.9.0:
version "8.9.0"
resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-8.9.0.tgz#bca4afa3f5cd18899ef9b33d877a141886d5abae"
Expand Down Expand Up @@ -11544,6 +11574,11 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==

tinycolor2@^1.4.1:
version "1.4.2"
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==

[email protected]:
version "1.0.4"
resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
Expand Down

0 comments on commit 4246584

Please sign in to comment.