Skip to content

Commit 182eeb7

Browse files
nirmalkcnirmalkc
committed
export modal
1 parent 81fcd1a commit 182eeb7

2 files changed

Lines changed: 213 additions & 74 deletions

File tree

‎components/core/ExportShape.js‎

Lines changed: 154 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,27 @@ import React, { useState, useEffect } from "react";
33
// dynamic from Next.js
44
import dynamic from "next/dynamic";
55

6-
// modal
6+
// Bootstrap
77
import Modal from "react-bootstrap/Modal";
8-
9-
// button
8+
import Container from 'react-bootstrap/Container'
9+
import Row from 'react-bootstrap/Row'
10+
import Col from 'react-bootstrap/Col'
1011
import Button from "react-bootstrap/Button";
12+
import Form from 'react-bootstrap/Form';
13+
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup'
14+
import ToggleButton from 'react-bootstrap/ToggleButton'
15+
16+
// Styled Component
17+
import styled from "styled-components";
1118

1219
// Clip-Path
1320
const Shape = dynamic(import("react-clip-path"), { ssr: false });
1421

22+
const ShapeContainer = styled.section`
23+
border: solid 1px var(--color-neutral-30);
24+
padding: 1rem;
25+
`;
26+
1527
// Toast
1628
import toast from "react-hot-toast";
1729

@@ -39,8 +51,8 @@ const ExportShape = ({ show, setShow, shape }) => {
3951
setExportData({
4052
'name': shape.name,
4153
'type': 'png',
42-
'width': '300',
43-
'height': '300',
54+
'width': '240',
55+
'height': '240',
4456
'backgroundColor': shape.backgroundColor
4557
});
4658
setLoaded(true);
@@ -130,81 +142,150 @@ const ExportShape = ({ show, setShow, shape }) => {
130142
<Modal.Title>Export {exportData.name} </Modal.Title>
131143
</Modal.Header>
132144
<Modal.Body>
133-
<div>
134-
<Shape
135-
name={exportData.name}
136-
formula={shape.formula}
137-
width={`${exportData.width}px`}
138-
height={`${exportData.height}px`}
139-
backgroundColor={exportData.backgroundColor}
140-
id={getShapeId(exportData.name, true)}
141-
/>
142-
</div>
143-
<form>
144-
<div>
145-
<label htmlFor="export-name">Name</label>
146-
<input
147-
type="text"
148-
name="name"
149-
id="export-name"
150-
value={exportData.name}
151-
onChange={handleChange} />
152-
</div>
153-
154-
<div>
155-
<label htmlFor="export-color">Color</label>
156-
<input
157-
type="color"
158-
name="backgroundColor"
159-
id="export-color"
160-
value={exportData.backgroundColor}
161-
onChange={handleChange} />
162-
</div>
163-
164-
<div>
165-
<label htmlFor="export-width">Set a width(in px)</label>
166-
<input
167-
type="range"
168-
min="100"
169-
max="700"
170-
value={exportData.width}
171-
id="export-width"
172-
name="width"
173-
onChange={handleChange} />
174-
175-
<label htmlFor="export-height">Set a height(in px)</label>
176-
<input
177-
type="range"
178-
min="100"
179-
max="700"
180-
value={exportData.height}
181-
id="export-height"
182-
name="height"
183-
onChange={handleChange} />
184-
</div>
185-
186-
<div>
187-
<Radios
188-
groupName="type"
189-
heading="Export as:"
190-
options={[
191-
{ value: "png", displayValue: "png" },
192-
{ value: "jpeg", displayValue: "jpeg" },
193-
{ value: "svg", displayValue: "svg" },
194-
]}
195-
selectedOption={exportData.type}
196-
onValueChange={handleChange}
197-
/>
198-
</div>
199-
</form>
145+
<Container fluid>
146+
<Row>
147+
<Col>
148+
<Form>
149+
<Form.Group className="mb-3" controlId="export-name">
150+
<Form.Label>Name</Form.Label>
151+
<Form.Control type="text" name="name" value={exportData.name} onChange={handleChange}/>
152+
</Form.Group>
153+
<Form.Group>
154+
<Form.Label htmlFor="exampleColorInput">Color picker</Form.Label>
155+
<Form.Control
156+
type="color"
157+
name="backgroundColor"
158+
id="export-color"
159+
value={exportData.backgroundColor}
160+
onChange={handleChange}
161+
className="form-control-color"
162+
/>
163+
</Form.Group>
164+
<Row>
165+
<Form.Group as={Col} controlId="export-width">
166+
<Form.Label>Set a width(in px)</Form.Label>
167+
<Form.Control
168+
type="range"
169+
min="100"
170+
max="700"
171+
value={exportData.width}
172+
id="export-width"
173+
name="width"
174+
onChange={handleChange}/>
175+
</Form.Group>
176+
<Form.Group as={Col} controlId="export-height">
177+
<Form.Label>Set a height(in px)</Form.Label>
178+
<Form.Control
179+
type="range"
180+
min="100"
181+
max="700"
182+
value={exportData.height}
183+
id="export-height"
184+
name="height"
185+
onChange={handleChange}/>
186+
</Form.Group>
187+
</Row>
188+
189+
{/* <div>
190+
<label htmlFor="export-name">Name</label>
191+
<input
192+
type="text"
193+
name="name"
194+
id="export-name"
195+
value={exportData.name}
196+
onChange={handleChange} />
197+
</div> */}
198+
199+
{/* <div>
200+
<label htmlFor="export-color">Color</label>
201+
<input
202+
type="color"
203+
name="backgroundColor"
204+
id="export-color"
205+
value={exportData.backgroundColor}
206+
onChange={handleChange} />
207+
</div> */}
208+
209+
{/* <div>
210+
<label htmlFor="export-width">Set a width(in px)</label>
211+
<input
212+
type="range"
213+
min="100"
214+
max="700"
215+
value={exportData.width}
216+
id="export-width"
217+
name="width"
218+
onChange={handleChange} />
219+
220+
<label htmlFor="export-height">Set a height(in px)</label>
221+
<input
222+
type="range"
223+
min="100"
224+
max="700"
225+
value={exportData.height}
226+
id="export-height"
227+
name="height"
228+
onChange={handleChange} />
229+
</div> */}
230+
231+
<div>
232+
<Form.Group>
233+
<Form.Label>File Format</Form.Label>
234+
<div>
235+
<ToggleButtonGroup type="radio" name="options" defaultValue={1} variant="outline-dark" size="sm" defaultValue={'png'}>
236+
<ToggleButton id="tbg-radio-1" value={'png'} variant="outline-dark">
237+
PNG
238+
</ToggleButton>
239+
<ToggleButton id="tbg-radio-2" value={'jpeg'} variant="outline-dark">
240+
JPEG
241+
</ToggleButton>
242+
<ToggleButton id="tbg-radio-3" value={'svg'} variant="outline-dark">
243+
SVG
244+
</ToggleButton>
245+
</ToggleButtonGroup>
246+
</div>
247+
</Form.Group>
248+
<Radios
249+
groupName="type"
250+
heading="Export as:"
251+
options={[
252+
{ value: "png", displayValue: "PNG" },
253+
{ value: "jpeg", displayValue: "JPEG" },
254+
{ value: "svg", displayValue: "SVG" },
255+
]}
256+
selectedOption={exportData.type}
257+
onValueChange={handleChange}
258+
/>
259+
</div>
260+
261+
</Form>
262+
</Col>
263+
<Col>
264+
<ShapeContainer>
265+
<Shape
266+
name={exportData.name}
267+
formula={shape.formula}
268+
width={`${exportData.width}px`}
269+
height={`${exportData.height}px`}
270+
backgroundColor={exportData.backgroundColor}
271+
id={getShapeId(exportData.name, true)}
272+
/>
273+
</ShapeContainer>
274+
</Col>
275+
</Row>
276+
</Container>
200277
</Modal.Body>
201278

202279
<Modal.Footer>
203-
<Button
280+
<Button variant="outline-info">
281+
Cancel
282+
</Button>
283+
<Button variant="secondary"
204284
onClick={() => doExport(getShapeId(exportData.name, true), exportData.name)}
205285
>
206286
Export
207287
</Button>
288+
208289
</Modal.Footer>
209290
</Modal>
210291
)}

‎styles/global.css‎

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
:root {
22
--color-brand: #5d21d2;
3+
--color-brand-light: #9553ff;
4+
--color-brand-dark: #491aa8;
35
--color-brand-rgb: 93, 33, 210;
46
--color-brand-secondary: #af21d2;
57
--color-brand-secondary-rgb: 175, 33, 210;
@@ -132,6 +134,46 @@ code {
132134
color: var(--color-neutral-90);
133135
}
134136

137+
.btn-secondary {
138+
padding: 0.8rem 1.4rem;
139+
border: solid 1px var(--color-brand);
140+
background-color: var(--color-brand);
141+
font-weight: var(--fw-bold);
142+
color: var(--color-neutral-10);
143+
}
144+
145+
.btn-secondary:hover,
146+
.btn-secondary:focus {
147+
border-color: var(--color-brand-light);
148+
background-color: var(--color-brand-light);
149+
}
150+
151+
.btn-secondary:active {
152+
border-color: var(--color-brand-dark) !important;
153+
background-color: var(--color-brand-dark) !important;
154+
}
155+
156+
.btn-outline-info {
157+
padding: 0.8rem 1.4rem;
158+
border: solid 1px var(--color-brand);
159+
background-color: var(--color-neutral-10);
160+
font-weight: var(--fw-bold);
161+
color: var(--color-brand);
162+
}
163+
164+
.btn-outline-info:hover,
165+
.btn-outline-info:focus {
166+
border-color: var(--color-brand);
167+
background-color: rgba(var(--color-brand-rgb), 0.1) !important;
168+
color: var(--color-brand);
169+
}
170+
171+
.btn-outline-info:active {
172+
border-color: var(--color-brand-dark) !important;
173+
background-color: rgba(var(--color-brand-rgb), 0.16) !important;
174+
color: var(--color-brand) !important;
175+
}
176+
135177
.btn-danger {
136178
padding: 0.8rem 1.4rem;
137179
border: solid 1px var(--color-primary-pink);
@@ -201,7 +243,7 @@ code {
201243

202244
/* Button Sizes */
203245
.btn {
204-
padding: 0.8rem 1.4rem;
246+
padding: 0.64rem 1.4rem;
205247
}
206248

207249
.btn-sm {
@@ -259,4 +301,20 @@ code {
259301

260302
.border-0 .dropdown-toggle {
261303
border-color: transparent;
304+
}
305+
306+
/* Color Input */
307+
.form-group {
308+
margin-bottom: 1.4rem !important;
309+
}
310+
.form-label {
311+
font-size: var(--fs-rg);
312+
font-weight: var(--fw-semibold);
313+
color: var(--color-neutral-90);
314+
margin-bottom: 0.26rem;
315+
}
316+
.form-control-color {
317+
width: 5rem;
318+
height: 3rem;
319+
padding: 0.1rem 0.2rem;
262320
}

0 commit comments

Comments
 (0)