Skip to content

Commit 09f43c9

Browse files
geekyoriongeekyorion
committed
modify page added
1 parent ac28b38 commit 09f43c9

File tree

5 files changed

+146
-26
lines changed

5 files changed

+146
-26
lines changed

‎public/manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"icons": [
55
{
66
"src": "favicon_16.ico",
7-
"sizes": "256x256 48x48 16x16",
7+
"sizes": "16x16",
88
"type": "image/x-icon"
99
}
1010
],

‎src/components/codegenerator/codegenerator.jsx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import React from 'react';
22
// import ReactDOM from 'react-dom';
33
import './codegenerator.css';
44
import { ButtonGroup, Button, ButtonToolbar } from 'react-bootstrap';
5-
import { ShowCopyCode, DownloadFile, ViewGradients } from '../modals/modals.jsx';
5+
import { ShowCopyCode, DownloadFile, ViewGradients } from './../modals/modals.jsx';
66
import { Link } from 'react-router-dom';
77

88
export default class CodeGenerator extends React.Component {
99
constructor(props) {
1010
super(props);
1111
this.state = {
12-
degrees: 135,
12+
angle: 135,
1313
color1: this.generateBackground().color_first,
1414
color2: this.generateBackground().color_second,
1515
modalShowCode: false,
@@ -57,31 +57,31 @@ export default class CodeGenerator extends React.Component {
5757
}
5858

5959
generateRandomBackground() {
60-
this.setState({ degrees: 135, color1: this.generateBackground().color_first, color2: this.generateBackground().color_second });
60+
this.setState({ angle: 135, color1: this.generateBackground().color_first, color2: this.generateBackground().color_second });
6161
}
6262

6363
rotateAntiClockWise() {
64-
if (this.state.degrees - 45 === -45) {
65-
this.setState({ degrees: 315 });
66-
// this.setState({ degrees: 315 }, () => {
67-
// this.displayMessage("Angle: " + this.state.degrees);
64+
if (this.state.angle - 45 === -45) {
65+
this.setState({ angle: 315 });
66+
// this.setState({ angle: 315 }, () => {
67+
// this.displayMessage("Angle: " + this.state.angle);
6868
// });
6969
} else {
70-
this.setState({ degrees: this.state.degrees - 45 });
70+
this.setState({ angle: this.state.angle - 45 });
7171
}
7272
}
7373

7474
rotateClockWise() {
75-
if (this.state.degrees + 45 === 360) {
76-
this.setState({ degrees: 0 });
75+
if (this.state.angle + 45 === 360) {
76+
this.setState({ angle: 0 });
7777
} else {
78-
this.setState({ degrees: this.state.degrees + 45 });
78+
this.setState({ angle: this.state.angle + 45 });
7979
}
8080
}
8181

8282
render() {
8383
return (
84-
<div className="generator-wrapper" style={{ background: `linear-gradient(${this.state.degrees}deg, ${this.state.color1}, ${this.state.color2})` }}>
84+
<div className="generator-wrapper" style={{ background: `linear-gradient(${this.state.angle}deg, ${this.state.color1}, ${this.state.color2})` }}>
8585
<div className="button-group-root">
8686
<ButtonToolbar aria-label="Toolbar with button groups">
8787
<ButtonGroup size="md" className="button-group-child" aria-label="Basic Operations">
@@ -92,7 +92,7 @@ export default class CodeGenerator extends React.Component {
9292

9393
<ButtonGroup size="md" className="button-group-child" aria-label="Advanced Operations">
9494
<Button variant="dark" onClick={() => this.setState({ modalShowCode: true })}>Show/Copy Code</Button>
95-
<ShowCopyCode show={this.state.modalShowCode} onHide={() => this.setState({ modalShowCode: false })} color1={this.state.color1} color2={this.state.color2} angle={this.state.degrees} />
95+
<ShowCopyCode show={this.state.modalShowCode} onHide={() => this.setState({ modalShowCode: false })} color1={this.state.color1} color2={this.state.color2} angle={this.state.angle} />
9696

9797
<Button variant="secondary" onClick={() => this.setState({ modalShowView: true })}>View (Briefly)</Button>
9898
<ViewGradients show={this.state.modalShowView} onHide={() => this.setState({ modalShowView: false })} color1={this.state.color1} color2={this.state.color2} />
@@ -104,7 +104,7 @@ export default class CodeGenerator extends React.Component {
104104
</Button>
105105

106106
<Button variant="secondary" onClick={() => this.setState({ modalShowDownload: true })}>Download<span className="download-button-icon">&#10143;</span></Button>
107-
<DownloadFile show={this.state.modalShowDownload} onHide={() => this.setState({ modalShowDownload: false})} color1={this.state.color1} color2={this.state.color2} angle={this.state.degrees} />
107+
<DownloadFile show={this.state.modalShowDownload} onHide={() => this.setState({ modalShowDownload: false})} color1={this.state.color1} color2={this.state.color2} angle={this.state.angle} />
108108
{/* <DropdownButton size="md" as={ButtonGroup} variant="success" title="Download" id="bg-nested-dropdown">
109109
<Dropdown.Item size="md" eventKey="1">Link1</Dropdown.Item>
110110
<Dropdown.Item size="md" eventKey="2">Link2</Dropdown.Item>
@@ -115,9 +115,9 @@ export default class CodeGenerator extends React.Component {
115115
<div className="info-class" style={{ borderImageSource: `linear-gradient(135deg, ${this.state.color1}, ${this.state.color2})` }}>
116116
<div><span>Color-1: {this.state.color1} <span className="color-box" style={{ background: this.state.color1 }}></span></span></div>
117117
<div><span>Color-2: {this.state.color2} <span className="color-box" style={{ background: this.state.color2 }}></span></span></div>
118-
<div><span>Angle: {this.state.degrees} degrees</span></div>
118+
<div><span>Angle: {this.state.angle} degrees</span></div>
119119
</div>
120-
<div id="generator-root"></div>
120+
{/* <div id="generator-root"></div> */}
121121
</div>
122122
);
123123
}

‎src/components/color-code-generator/code-generator.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ const hsvGenerator = (color_array) => {
3232
}
3333
}
3434

35+
const rgbGenerator = (hexCode) => {
36+
return `rgb(${parseInt(hexCode.substring(0,2), 16)}, ${parseInt(hexCode.substring(2,4), 16)}, ${parseInt(hexCode.substring(4), 16)})`;
37+
}
38+
3539
const hslGenerator = (color_array) => {
3640
var H = 0;
3741
var S = 0;
@@ -72,5 +76,6 @@ const hslGenerator = (color_array) => {
7276
export {
7377
hexGenerator,
7478
hslGenerator,
75-
hsvGenerator
79+
hsvGenerator,
80+
rgbGenerator
7681
}

‎src/components/modify/modify.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.modify-wrapper {
2+
min-height: 100vh;
3+
}
4+
5+
.modify-controls {
6+
display: flex;
7+
justify-content: center;
8+
flex-wrap: wrap;
9+
}
10+
11+
.input-controls {
12+
margin-bottom: 10px;
13+
margin-right: 10px;
14+
background: #6c757d;
15+
border-radius: 5px;
16+
box-shadow: 0 5px 10px #333;
17+
}

‎src/components/modify/modify.jsx

Lines changed: 106 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,26 @@
11
import React from 'react';
22
import './modify.css';
3+
import { hexGenerator, rgbGenerator } from './../color-code-generator/code-generator';
4+
import { Button, ButtonGroup, ButtonToolbar, FormControl, InputGroup } from 'react-bootstrap';
5+
import { ShowCopyCode, ViewGradients, DownloadFile } from './../modals/modals.jsx';
36

47
export default class Modify extends React.Component {
58
constructor(props) {
69
super(props);
7-
this.state = {};
10+
this.state = {
11+
HEX_1: "#75B8DA",
12+
HEX_2: "#E965AA",
13+
color1: "rgb(117, 184, 218)",
14+
color2: "rgb(233, 101, 170)",
15+
angle: 135,
16+
modalShowCode: false,
17+
modalShowView: false,
18+
modalShowDownload: false
19+
};
820
this.initState = this.initState.bind(this);
21+
this.changeColor1 = this.changeColor1.bind(this);
22+
this.changeColor2 = this.changeColor2.bind(this);
23+
this.changeAngle = this.changeAngle.bind(this);
924
}
1025

1126
componentDidMount() {
@@ -14,17 +29,100 @@ export default class Modify extends React.Component {
1429

1530
initState() {
1631
var passedState = this.props.location.state;
17-
if(passedState) {
18-
this.setState({ ...passedState });
19-
} else {
20-
this.setState({ color1: "#75B8DA", color2: "#E965AA" });
32+
if (passedState) {
33+
var color1_obj = hexGenerator(passedState.color1);
34+
var color2_obj = hexGenerator(passedState.color2);
35+
this.setState({
36+
HEX_1: `#${color1_obj.HEX}`,
37+
HEX_2: `#${color2_obj.HEX}`,
38+
color1: passedState.color1,
39+
color2: passedState.color2
40+
});
2141
}
2242
}
2343

44+
changeColor1(e) {
45+
var value = e.target.value;
46+
this.setState({
47+
HEX_1: value,
48+
color1: rgbGenerator(value.substring(1))
49+
});
50+
}
51+
52+
changeColor2(e) {
53+
var value = e.target.value;
54+
this.setState({
55+
HEX_2: value,
56+
color2: rgbGenerator(value.substring(1))
57+
});
58+
}
59+
60+
changeAngle(e) {
61+
var value = e.target.value;
62+
this.setState({
63+
angle: value
64+
});
65+
}
66+
2467
render() {
25-
return(
26-
<div className="modify-wrapper">
27-
{console.log(this.state.color1, this.state.color2)}
68+
return (
69+
<div className="modify-wrapper" style={{ background: `linear-gradient(${this.state.angle}deg, ${this.state.color1}, ${this.state.color2})` }}>
70+
<div className="button-group-root modify-controls">
71+
<div className="input-controls">
72+
<InputGroup>
73+
<InputGroup.Prepend>
74+
<InputGroup.Text id="basic-addon1">Color-1</InputGroup.Text>
75+
</InputGroup.Prepend>
76+
<FormControl
77+
type="color"
78+
defaultValue={this.state.HEX_1}
79+
value={this.state.HEX_1}
80+
onChange={(e) => {this.changeColor1(e)}}
81+
/>
82+
<InputGroup.Prepend>
83+
<InputGroup.Text id="basic-addon1">Color-2</InputGroup.Text>
84+
</InputGroup.Prepend>
85+
<FormControl
86+
type="color"
87+
defaultValue={this.state.HEX_2}
88+
value={this.state.HEX_2}
89+
onChange={(e) => {this.changeColor2(e)}}
90+
/>
91+
<InputGroup.Prepend>
92+
<InputGroup.Text id="basic-addon1">Angle</InputGroup.Text>
93+
</InputGroup.Prepend>
94+
<FormControl
95+
type="range"
96+
min="0"
97+
max="360"
98+
value={this.state.angle}
99+
onChange={(e) => {this.changeAngle(e)}}
100+
/>
101+
</InputGroup>
102+
</div>
103+
104+
<ButtonToolbar aria-label="Toolbar with button groups">
105+
<ButtonGroup size="md" className="button-group-child" aria-label="Advanced Operations">
106+
<Button variant="dark" onClick={() => this.setState({ modalShowCode: true })}>Show/Copy Code</Button>
107+
<ShowCopyCode show={this.state.modalShowCode} onHide={() => this.setState({ modalShowCode: false })} color1={this.state.color1} color2={this.state.color2} angle={this.state.angle} />
108+
109+
<Button variant="secondary" onClick={() => this.setState({ modalShowView: true })}>View (Briefly)</Button>
110+
<ViewGradients show={this.state.modalShowView} onHide={() => this.setState({ modalShowView: false })} color1={this.state.color1} color2={this.state.color2} />
111+
112+
<Button variant="secondary" onClick={() => this.setState({ modalShowDownload: true })}>Download<span className="download-button-icon">&#10143;</span></Button>
113+
<DownloadFile show={this.state.modalShowDownload} onHide={() => this.setState({ modalShowDownload: false })} color1={this.state.color1} color2={this.state.color2} angle={this.state.degrees} />
114+
{/* <DropdownButton size="md" as={ButtonGroup} variant="success" title="Download" id="bg-nested-dropdown">
115+
<Dropdown.Item size="md" eventKey="1">Link1</Dropdown.Item>
116+
<Dropdown.Item size="md" eventKey="2">Link2</Dropdown.Item>
117+
</DropdownButton> */}
118+
</ButtonGroup>
119+
</ButtonToolbar>
120+
</div>
121+
<div className="info-class text-center" style={{ borderImageSource: `linear-gradient(135deg, ${this.state.color1}, ${this.state.color2})` }}>
122+
<div><span>Color-1: {this.state.color1} <span className="color-box" style={{ background: this.state.color1 }}></span></span></div>
123+
<div><span>Color-2: {this.state.color2} <span className="color-box" style={{ background: this.state.color2 }}></span></span></div>
124+
<div><span>Angle: {this.state.angle} degrees</span></div>
125+
</div>
28126
</div>
29127
);
30128
}

0 commit comments

Comments
 (0)