Skip to content

Commit

Permalink
Merge pull request smaranjitghose#723 from SalmaFarghaly/Changing_UI_…
Browse files Browse the repository at this point in the history 
…for_sketch

Changing UI for sketch
  • Loading branch information
@anushbhatia
anushbhatia authored Mar 18, 2021
2 parents 3e15d1d + 6eddfca commit 49267ed
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 56 deletions.
59 changes: 10 additions & 49 deletions src/pages/Sketch/components/Canvas.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import React, { useState, useEffect, useRef, useCallback } from "react";
import styles from "./Canvas.module.css";
import Toolbox from "./Toolbox/Toolbox";
import { FaPencilAlt, FaRegSquare, FaDownload, FaRegCircle, FaSlash, FaFont, FaStar } from "react-icons/fa";
import { BsArrowUpRight } from "react-icons/bs";
import { RiDeleteBinLine } from "react-icons/ri";
import { GiTriangleTarget } from "react-icons/gi";
import { BsDiamond } from "react-icons/bs";
import React, {useState, useEffect, useRef, useCallback} from 'react';
import styles from './Canvas.module.css';
import Toolbox from './Toolbox/Toolbox';
import {FaDownload} from 'react-icons/fa';
import {RiDeleteBinLine} from 'react-icons/ri';
import {FaStar} from 'react-icons/fa';
import IconsLibrary from "./IconLibrary/IconsLibrary";

const Mousetrap = require("mousetrap");

function Canvas() {

const canvasRef = useRef(null);
const textRef = useRef(null);
const iconLibRef = useRef(null);
Expand Down Expand Up @@ -416,6 +415,7 @@ function Canvas() {
context.fillStyle = background;
context.fill();
}

}, [background, context, canvasWidth, canvasHeight]);

return (
Expand All @@ -438,6 +438,7 @@ function Canvas() {
canvasStateAt={canvasStateAt}
canvasStates={canvasStates}
type={type}
setType={setType}
fontSize={fontSize}
setFontSize={setFontSize}
fontStyle={fontStyle}
Expand Down Expand Up @@ -471,34 +472,6 @@ function Canvas() {
</div>
</div>

{/* ----- Shapes ----- */}
<div className={`${styles.feature_container} ${styles.shapes}`}>
<Shape type_="pen" id="sketch-shapes-pen" label="Pen">
<FaPencilAlt size={15} />
</Shape>
<Shape type_="line" id="sketch-shapes-line" label="Line">
<FaSlash size={15} />
</Shape>
<Shape type_="square" id="sketch-shapes-square" label="Square">
<FaRegSquare size={15} />
</Shape>
<Shape type_="circle" id="sketch-shapes-circle" label="Circle">
<FaRegCircle size={15} />
</Shape>
<Shape type_="triangle" id="sketch-shapes-triangle" label="Triangle">
<GiTriangleTarget size={15} />
</Shape>
<Shape type_="arrow" id="sketch-shapes-arrow" label="Arrow">
<BsArrowUpRight size={15} />
</Shape>
<Shape type_="diamond" id="sketch-shapes-diamond" label="Diamond">
<BsDiamond size={15} />
</Shape>
<Shape type_="text" id="sketch-shapes-text" label="Text">
<FaFont size={15} />
</Shape>
</div>

<canvas
ref={canvasRef}
width={`${canvasWidth}`}
Expand Down Expand Up @@ -538,19 +511,7 @@ function Canvas() {
</>
);

function Shape({ type_, id, label, children }) {
return (
<label htmlFor={id} title={label}>
<div
className={`${styles.feature} ${type === type_ && styles.active_feature}`}
onClick={() => setType(type_)}
id={id}
>
{children}
</div>
</label>
);
}
}


export default Canvas;
2 changes: 1 addition & 1 deletion src/pages/Sketch/components/Canvas.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
.mousePosition {
position: absolute;
bottom: 11px;
left: 30px;
right: 30px;
font-size: 0.7rem;
}

Expand Down
61 changes: 56 additions & 5 deletions src/pages/Sketch/components/Toolbox/Toolbox.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
import React from 'react';
import styles from './Toolbox.module.css';
import stylesShapes from '../Canvas.module.css'
import {AiOutlineLine, AiOutlineSmallDash, AiOutlineDash} from 'react-icons/ai';
import {FaRegSquare, FaSquare, FaItalic, FaBold} from 'react-icons/fa';
import {MdUndo, MdRedo} from 'react-icons/md';
import {BsFonts} from 'react-icons/bs';
import {FaImage} from 'react-icons/fa';
import {FaPencilAlt, FaRegCircle, FaSlash, FaFont} from 'react-icons/fa';
import {BsArrowUpRight} from 'react-icons/bs';
import {GiTriangleTarget} from 'react-icons/gi';
import {BsDiamond} from 'react-icons/bs';

function Toolbox({
color,
Expand All @@ -24,6 +29,7 @@ function Toolbox({
canvasStateAt,
canvasStates,
type,
setType,
fontSize,
setFontSize,
fontStyle,
Expand All @@ -37,13 +43,41 @@ function Toolbox({

return (
<div className={styles.canvas_toolbox}>
<Feature title="Canvas Color">
<div className={styles.colorPicker}>
<input type="color" name="canvas_bg_color"
value={background} onChange={(e) => setBackground(e.target.value)}
<Feature title="Shapes">
<Shape type_="pen" id="sketch-shapes-pen" label="Pen">
<FaPencilAlt size={15}/>
</Shape>
<Shape type_="line" id="sketch-shapes-line" label="Line">
<FaSlash size={15}/>
</Shape>
<Shape type_="square" id="sketch-shapes-square" label="Square">
<FaRegSquare size={15}/>
</Shape>
<Shape type_="circle" id="sketch-shapes-circle" label="Circle">
<FaRegCircle size={15}/>
</Shape>
<Shape type_="triangle" id="sketch-shapes-triangle" label="Triangle">
<GiTriangleTarget size={15}/>
</Shape>
<Shape type_="arrow" id="sketch-shapes-arrow" label="Arrow">
<BsArrowUpRight size={15}/>
</Shape>
<Shape type_="diamond" id="sketch-shapes-diamond" label="Diamond">
<BsDiamond size={15}/>
</Shape>
<Shape type_="text" id="sketch-shapes-text" label="Text">
<FaFont size={15}/>
</Shape>
</Feature>



<Feature title="Color">
<input type="color" name="canvas_pen_color"
value={color} onChange={(e) => setColor(e.target.value)}

/>
<input className={styles.hexInput} placeholder="#" type="text" value={background} onInput={e => setBackground(e.target.value)} />
</div>
</Feature>

<Feature title="Color">
Expand Down Expand Up @@ -178,6 +212,11 @@ function Toolbox({
<MdRedo size={20}/>
</div>
</Feature>



{/* */}

</div>
)

Expand All @@ -191,6 +230,18 @@ function Toolbox({
</div>
)
}

function Shape({type_, id, label, children}) {
return (
<label style={{'marginTop':'3px'}} htmlFor={id} title={label}>
<div className={`${stylesShapes.feature} ${type === type_ && stylesShapes.active_feature}`}
onClick={() => setType(type_)}
id={id}>
{children}
</div>
</label>
)
}
}


Expand Down
4 changes: 3 additions & 1 deletion src/pages/Sketch/components/Toolbox/Toolbox.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@

.body {
display: flex;
flex-wrap: wrap;
width: 150px;
}

.colorPicker{
Expand Down Expand Up @@ -78,4 +80,4 @@
top: 0;
left: 0;
z-index: -1;
}
}

0 comments on commit 49267ed

Please sign in to comment.