clickFunction(position)}
28 | key={'center' + position}
29 | title={`Change gradient center to ${position}`}
30 | />
31 | )
32 | );
33 | return (
34 |
35 |
CENTER
36 |
{renderPositions}
37 |
38 | );
39 | }
40 |
41 | export default Center;
42 |
--------------------------------------------------------------------------------
/src/Components/HexPicker/HexGradient.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import '../../Styles/HexPicker/HexGradient.css';
3 | import Draggable from 'react-draggable';
4 |
5 | function HexGradient(props) {
6 | const { colorwheelColor, SV, updatePosition } = props;
7 | const { x, y } = SV;
8 |
9 | function Slider() {
10 | return (
11 |
{
13 | updatePosition({ x: value.x, y: value.y });
14 | }}
15 | defaultPosition={{ x, y }}
16 | bounds={{ left: 0, right: 250, top: 0, bottom: 250 }}
17 | >
18 |
19 |
20 | );
21 | }
22 |
23 | return (
24 |
36 | );
37 | }
38 |
39 | export default HexGradient;
40 |
--------------------------------------------------------------------------------
/src/Components/HexPicker/HexPicker.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import '../../Styles/HexPicker/HexPicker.css';
3 | import ColorSlider from './ColorSlider';
4 | import HexGradient from './HexGradient';
5 | import CurrentColor from './CurrentColor';
6 |
7 | function HexPicker(props) {
8 | const {
9 | colorwheelColor,
10 | color,
11 | handleHexChange,
12 | handleRChange,
13 | handleGChange,
14 | handleBChange,
15 | hue,
16 | handleColorSlider,
17 | SV,
18 | updatePosition,
19 | } = props;
20 | return (
21 |
22 |
29 |
30 |
35 |
36 |
37 |
38 | );
39 | }
40 |
41 | export default HexPicker;
42 |
--------------------------------------------------------------------------------
/src/Components/Suggested/Suggested.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import '../../Styles/Suggested/Suggested.css';
3 | import SuggestedItem from './SuggestedItem';
4 | import { FiShuffle } from 'react-icons/fi';
5 | import { INPUT_TEXT_GRAY } from '../../Utils/hexConstants';
6 | import { ButtonBase } from '@material-ui/core';
7 |
8 | function Suggested(props) {
9 | const { selected, suggested, setSuggested, shuffleSuggested } = props;
10 |
11 | const renderSuggested = suggested.map((gradient) => (
12 |
setSuggested(e, gradient.name)}
17 | />
18 | ));
19 |
20 | return (
21 |
22 |
23 |
SUGGESTED
24 |
shuffleSuggested(e)}
27 | title='Shuffle'
28 | >
29 |
30 |
31 |
32 |
33 |
34 |
{renderSuggested}
35 |
50 | handleStopSlider(value)}
54 | title='Change stops'
55 | />
56 |
57 | );
58 | }
59 |
60 | export default StopBar;
61 |
--------------------------------------------------------------------------------
/src/Components/HexPicker/CurrentColor.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import '../../Styles/HexPicker/CurrentColor.css';
3 |
4 | function CurrentColor(props) {
5 | const {
6 | color,
7 | handleHexChange,
8 | handleRChange,
9 | handleGChange,
10 | handleBChange,
11 | } = props;
12 | const { hex, r, g, b } = color;
13 |
14 | return (
15 |
16 |
COLOR
17 |
18 |
22 |
23 |
#
24 |
handleHexChange(e, false)}
29 | title='Enter hex code'
30 | >
31 |
R
32 |
handleRChange(e)}
36 | title='Enter red value'
37 | >
38 |
G
39 |
handleGChange(e)}
43 | title='Enter green value'
44 | >
45 |
B
46 |
handleBChange(e)}
50 | title='Enter blue value'
51 | >
52 |
53 |
54 |
54 | handleColorSlider(value)}
60 | title='Change hue'
61 | />
62 |
63 | );
64 | }
65 |
66 | export default ColorSlider;
67 |
--------------------------------------------------------------------------------
/src/Utils/Gradient.js:
--------------------------------------------------------------------------------
1 | import { toBgString, toStopBarBgString, toCSSBgString } from './colorUtils';
2 |
3 | class Gradient {
4 | constructor(stack, isLinear, degrees, center, name) {
5 | this.stack = stack; // array of Color objects
6 | this.isLinear = isLinear; // false if radial
7 | this.degrees = degrees; // Number 0 - 360
8 | this.center = center; // one of 9 positions
9 | this.name = name; // name of friendo if suggested
10 | }
11 |
12 | toBgString = () => {
13 | return toBgString(this);
14 | };
15 |
16 | toStopBarBgString = () => {
17 | return toStopBarBgString(this);
18 | };
19 |
20 | toCSSBgString = () => {
21 | return toCSSBgString(this);
22 | };
23 |
24 | // sort stack by increasing order of stop values
25 | sortStack = () => {
26 | const { stack } = this;
27 | stack.sort((a, b) => (a.stop > b.stop ? 1 : -1));
28 | let selected;
29 | for (let i = 0; i < stack.length; i++) {
30 | const color = stack[i];
31 | color.index = i;
32 | if (color.selected) {
33 | selected = i;
34 | }
35 | }
36 | return selected;
37 | };
38 |
39 | clone = () => {
40 | return new Gradient(
41 | this.stack.map((color) => color.clone()),
42 | this.isLinear,
43 | this.degrees,
44 | this.center,
45 | ''
46 | );
47 | };
48 |
49 | getSortedStops = () => {
50 | const { stack } = this;
51 | return stack
52 | .map((color) => color.stop)
53 | .sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));
54 | };
55 |
56 | reverse = () => {
57 | const { stack } = this;
58 | let stops = this.getSortedStops();
59 | let stopValue;
60 |
61 | stack.reverse();
62 |
63 | for (let i = 0; i < stack.length; i++) {
64 | const color = stack[i];
65 | color.index = i;
66 | color.stop = stops[i];
67 |
68 | if (color.selected) {
69 | stopValue = stops[i];
70 | }
71 | }
72 |
73 | return stopValue;
74 | };
75 | }
76 |
77 | export { Gradient };
78 |
--------------------------------------------------------------------------------
/src/Components/Stack/Stack.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import '../../Styles/Stack/Stack.css';
3 | import StackItem from './StackItem';
4 | import AddColorButton from './AddColorButton';
5 | import { BsArrowUpDown } from 'react-icons/bs';
6 | import { INPUT_TEXT_GRAY } from '../../Utils/hexConstants';
7 | import { ButtonBase } from '@material-ui/core';
8 |
9 | function Stack(props) {
10 | const {
11 | gradient,
12 | addColor,
13 | changeSelected,
14 | deleteColor,
15 | handleKeyDown,
16 | changeValue,
17 | stopValue,
18 | handleHexChange,
19 | onDragStart,
20 | onDragOver,
21 | onDragEnd,
22 | reverseStack,
23 | handleStopChange,
24 | } = props;
25 | const { stack } = gradient;
26 |
27 | const renderStack = stack.map((color) => (
28 | deleteColor(e, color.index)}
32 | changeSelected={() => changeSelected(color.index)}
33 | key={'stackitem-' + color.index}
34 | cannotDelete={stack.length === 2}
35 | handleKeyDown={handleKeyDown}
36 | changeValue={changeValue}
37 | stopValue={stopValue}
38 | handleHexChange={handleHexChange}
39 | onDragStart={onDragStart}
40 | onDragOver={onDragOver}
41 | onDragEnd={onDragEnd}
42 | handleStopChange={handleStopChange}
43 | />
44 | ));
45 |
46 | return (
47 |
48 |
49 |
STACK
50 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
HEX
64 |
%
65 |
66 | {renderStack}
67 |
71 |
29 |
onDragOver(e, color)}
33 | >
34 |
onDragStart(e, color)}
38 | onDragEnd={onDragEnd}
39 | >
40 |
41 |
47 |
48 |
49 |
50 | {
56 | handleHexChange(e, true);
57 | }}
58 | title='Enter hex code'
59 | >
60 |
61 |
handleKeyDown(e)}
65 | onChange={(e) => changeValue(e)}
66 | onBlur={(e) => handleStopChange(e)}
67 | title='Enter stop value'
68 | >
69 |
80 |
81 |
84 |
85 |
PREVIEW
86 |
90 |
91 |
92 |
100 |
104 |
105 |
106 |
107 |
108 |
109 |
115 | {Customize}
116 |
117 |
551 |
552 |
553 |
554 |
555 |
556 |
560 |
561 |
562 |
583 |
584 |
585 |
604 |
612 |
613 |
614 |
615 |
616 |
640 |
643 |
644 |
649 | gradient is currently not supported on mobile
650 | devices. Please use the site on a larger screen.
651 |
652 |
653 |