Skip to content

Add a landing page #10 #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
atapas merged 10 commits into from
Jun 25, 2021
Merged

Add a landing page #10 #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2860bac
landing icons
nirmalkc Jun 22, 2021
8429df6
Merge remote-tracking branch 'origin/main' into Add-a-Landing-Page-#10
nirmalkc Jun 23, 2021
c3e2c08
Merge remote-tracking branch 'origin/main' into Add-a-Landing-Page-#10
nirmalkc Jun 23, 2021
997bb8d
Merge remote-tracking branch 'origin/main' into Add-a-Landing-Page-#10
nirmalkc Jun 23, 2021
ff33967
Merge remote-tracking branch 'origin/main' into Add-a-Landing-Page-#10
nirmalkc Jun 25, 2021
20c5175
create form changes
nirmalkc Jun 25, 2021
bde09aa
copy modal styling
nirmalkc Jun 25, 2021
6f954c4
fixing merge conflict
nirmalkc Jun 25, 2021
13a2afe
bug fixed and header button added
nirmalkc Jun 25, 2021
da5d8ef
feat: Reverted the canvas to 300px and implemneted tweet
atapas Jun 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 74 additions & 23 deletions components/core/CopyShapeSource.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,43 @@ import { FiCopy } from 'react-icons/fi';
// misc utilities
import { getShapeId } from "../../utils/misc";

const CSSDisplay = styled.span`
const CSSDisplayContainer = styled.div`
position: relative;
background-color: var(--color-neutral-80);
padding: 0 0 2rem 0;
height: 240px;
overflow: hidden;
`;

const CSSDisplay = styled.pre`
white-space: pre-line;
color: #f5d67b;
max-height: 180px;
overflow: auto;
margin: 1rem 0.4rem 1rem 1rem;
padding-right: 0.4rem;
`;

const CopyButton = styled(Button)`
position: absolute;
display: flex !important;
align-items: center;
justify-content: center;
grid-gap: 0.4rem;
color: var(--color-neutral-10) !important;
left: 0.4rem;
bottom: 0.4rem;
width: calc(100% - 0.8rem);
padding: 0.3rem 0.6rem !important;
font-size: var(--fs-sm) !important;
background-color: var(--color-brand) !important;
cursor: pointer;

&:hover,
&:focus {
background-color: var(--color-brand-light) !important;
text-decoration: none !important;
}
`;

const CopyIcon = styled(FiCopy)`
Expand Down Expand Up @@ -97,17 +132,29 @@ const CopyShapeSource = ({ show, setShow, shape }) => {
<Modal.Body>
<Container fluid>
<Row>
<Col>
<ShapeContainer>
<Shape
name={shape.name}
formula={shape.formula}
width="300px"
height="300px"
backgroundColor={shape.backgroundColor}
id={getShapeId(shape.name, true)}
/>
</ShapeContainer>
</Col>
<Col>
<Form>
<div>
<Form.Group>
<Form.Label>Export As</Form.Label>
<div>
<ToggleButtonGroup type="radio" name="options" defaultValue={1} variant="outline-dark" size="sm" defaultValue={type}>
<ToggleButton id="tbg-radio-1" value={'css'} variant="outline-dark" onClick={() => setType('css')}>
<ToggleButtonGroup type="radio" name="options" defaultValue={1} variant="outline-info" size="sm" defaultValue={type}>
<ToggleButton id="tbg-radio-1" value={'css'} variant="outline-info" onClick={() => setType('css')}>
Show CSS
</ToggleButton>
<ToggleButton id="tbg-radio-2" value={'clip-path'} variant="outline-dark" onClick={() => setType('clip-path')}>
<ToggleButton id="tbg-radio-2" value={'clip-path'} variant="outline-info" onClick={() => setType('clip-path')}>
Show Clip-Path
</ToggleButton>
</ToggleButtonGroup>
Expand All @@ -125,44 +172,48 @@ const CopyShapeSource = ({ show, setShow, shape }) => {
<div>
{type === 'css' &&
<>
<hr/>
<h3>CSS Snippet</h3>
<CSSDisplay>
<code>{getCSS(shape.formula)}</code>
</CSSDisplay>
<CopyIcon size={20} onClick={() => copy(shape.formula, true)}/>
<CSSDisplayContainer >
<CSSDisplay rel='css'>
<code>{getCSS(shape.formula)}</code>
</CSSDisplay>
<CopyButton onClick={() => copy(shape.formula, true)} variant="link" className="btn-icon">
<CopyIcon color='var(--color-neutral-10' size="16px"/>
<div>Copy to Clipboard</div>
</CopyButton>
</CSSDisplayContainer>
</>
}
{type === 'clip-path' &&
<div>
<hr/>
<h3>Clip-Path Value</h3>
<code>{shape.formula}</code>
<CopyIcon size={20} onClick={() => copy(shape.formula, false)}/>
<CSSDisplayContainer >
<CSSDisplay rel='css'>
<code>{shape.formula}</code>
</CSSDisplay>
<CopyButton onClick={() => copy(shape.formula, false)} variant="link" className="btn-icon">
<CopyIcon color='var(--color-neutral-10' size="16px"/>
<div>Copy to Clipboard</div>
</CopyButton>
</CSSDisplayContainer>
</div>

}
</div>
)
}
</Form>
</Col>
<Col>
<ShapeContainer>
<Shape
name={shape.name}
formula={shape.formula}
width="300px"
height="300px"
backgroundColor={shape.backgroundColor}
id={getShapeId(shape.name, true)}
/>
</ShapeContainer>
</Col>

</Row>
</Container>
</Modal.Body>

<Modal.Footer>
<Button variant="outline-info" onClick={() => setShow(false)}>
Cancel
Close
</Button>
</Modal.Footer>
</Modal>
Expand Down
9 changes: 5 additions & 4 deletions components/core/CreateShape.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,19 +334,20 @@ const CreateShape = (props) => {
<Container fluid>
<Row lg={2} md={1} sm={1} xs={1}>
<Col>
<ShapeForm
<ShapePreview
shapeInformation={shapeInformation}
handleChange={handleChange}
handleSubmit={handleSubmit}
validated={validated}
/>
</Col>
<Col>
<ShapePreview
<ShapeForm
shapeInformation={shapeInformation}
handleChange={handleChange}
handleSubmit={handleSubmit}
validated={validated}
/>
</Col>

</Row>
</Container>
</Modal.Body>
Expand Down
27 changes: 15 additions & 12 deletions components/core/ExportShape.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,18 @@ const ExportShape = ({ show, setShow, shape }) => {
<Modal.Body>
<Container fluid>
<Row>
<Col>
<ShapeContainer>
<Shape
name={exportData.name}
formula={shape.formula}
width={`${exportData.width}px`}
height={`${exportData.height}px`}
backgroundColor={exportData.backgroundColor}
id={getShapeId(exportData.name, true)}
/>
</ShapeContainer>
</Col>
<Col>
<Form>
<Form.Group className="mb-3" id="export-name">
Expand All @@ -170,6 +182,7 @@ const ExportShape = ({ show, setShow, shape }) => {
<Form.Label>Set a width({exportData.width}px)</Form.Label>
<Form.Control
type="range"
className="range-slider"
min="100"
max="700"
value={exportData.width}
Expand All @@ -181,6 +194,7 @@ const ExportShape = ({ show, setShow, shape }) => {
<Form.Label>Set a height({exportData.height}px)</Form.Label>
<Form.Control
type="range"
className="range-slider"
min="100"
max="700"
value={exportData.height}
Expand Down Expand Up @@ -210,18 +224,7 @@ const ExportShape = ({ show, setShow, shape }) => {
</div>
</Form>
</Col>
<Col>
<ShapeContainer>
<Shape
name={exportData.name}
formula={shape.formula}
width={`${exportData.width}px`}
height={`${exportData.height}px`}
backgroundColor={exportData.backgroundColor}
id={getShapeId(exportData.name, true)}
/>
</ShapeContainer>
</Col>

</Row>
</Container>
</Modal.Body>
Expand Down
Loading