Skip to content
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

✨ Add option to upload background image #15

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

✨ Add option to upload background image #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12,971 changes: 12,971 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

102 changes: 79 additions & 23 deletions src/components/BannerWrapper/__snapshots__/BannerWrapper.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,60 @@

exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
<div>
<a
aria-label="View source on GitHub"
class="github-corner"
href="https://github.com/christopherkade/banner-generator"
>
<svg
aria-hidden="true"
height="80"
style="fill: #151513; color: rgb(255, 255, 255); position: absolute; top: 0px; border: 0px; right: 0px;"
viewBox="0 0 250 250"
width="80"
>
<path
d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"
/>
<path
class="octo-arm"
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor"
style="transform-origin: 130px 106px;"
/>
<path
class="octo-body"
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor"
/>
</svg>
</a>
<div
class="sc-fjdhpX iJuInZ"
class="sc-jzJRlG kKEMns"
>
<div
class="sc-gZMcBi hpgAcJ"
class="sc-gqjmRU bdKHZi"
id="capture"
>
<h1
class="sc-gqjmRU ctLfvQ"
size="5"
class="sc-VigVT gEAXRM"
size="4"
>
Hello DEV 🎉
DEV banner generator 🎉
</h1>
</div>
<div
class="sc-jzJRlG kFlBgG"
class="sc-cSHVUG dtvCtR"
>
<div
class="sc-htoDjs kKtqja"
class="sc-dnqmqq jBNPgH"
>
<details
class="sc-dnqmqq iGdcAj"
class="sc-iwsKbI jrDyKB"
open=""
>
<summary
class="sc-iwsKbI hPLzFK"
class="sc-gZMcBi WtlHs"
>
Content
</summary>
Expand All @@ -41,15 +69,15 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
</label>
<input
class="sc-bdVaJa eQjeEW"
value="Hello DEV 🎉"
value="DEV banner generator 🎉"
/>
</div>
</details>
<details
class="sc-dnqmqq iGdcAj"
class="sc-iwsKbI jrDyKB"
>
<summary
class="sc-iwsKbI hPLzFK"
class="sc-gZMcBi WtlHs"
>
Colors
</summary>
Expand Down Expand Up @@ -349,7 +377,7 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
title="#000000"
>
<div
style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 1;"
style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
/>
</div>
</span>
Expand Down Expand Up @@ -483,15 +511,15 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
style="display: flex; padding-bottom: 6px; padding-right: 5px; position: relative;"
>
<div
style="position: absolute; top: 6px; left: 5px; height: 9px; width: 9px; background: rgb(0, 0, 0);"
style="position: absolute; top: 6px; left: 5px; height: 9px; width: 9px; background: rgb(21, 21, 19);"
/>
<div
style="position: relative; flex: 6;"
>
<input
spellcheck="false"
style="width: 80%; padding: 0px 0px 0px 20%; outline: none; background: none; font-size: 12px; color: rgb(51, 51, 51); height: 16px;"
value="#000000"
value="#151513"
/>
<span
style="display: none;"
Expand All @@ -505,7 +533,7 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
<input
spellcheck="false"
style="width: 70%; padding: 0px 0px 0px 30%; outline: none; background: none; font-size: 12px; color: rgb(51, 51, 51); height: 16px;"
value="0"
value="21"
/>
<span
style="position: absolute; top: 3px; left: 0px; line-height: 16px; text-transform: uppercase; font-size: 12px; color: rgb(153, 153, 153);"
Expand All @@ -519,7 +547,7 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
<input
spellcheck="false"
style="width: 70%; padding: 0px 0px 0px 30%; outline: none; background: none; font-size: 12px; color: rgb(51, 51, 51); height: 16px;"
value="0"
value="21"
/>
<span
style="position: absolute; top: 3px; left: 0px; line-height: 16px; text-transform: uppercase; font-size: 12px; color: rgb(153, 153, 153);"
Expand All @@ -533,7 +561,7 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
<input
spellcheck="false"
style="width: 70%; padding: 0px 0px 0px 30%; outline: none; background: none; font-size: 12px; color: rgb(51, 51, 51); height: 16px;"
value="0"
value="19"
/>
<span
style="position: absolute; top: 3px; left: 0px; line-height: 16px; text-transform: uppercase; font-size: 12px; color: rgb(153, 153, 153);"
Expand Down Expand Up @@ -1529,10 +1557,10 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
</div>
</details>
<details
class="sc-dnqmqq iGdcAj"
class="sc-iwsKbI jrDyKB"
>
<summary
class="sc-iwsKbI hPLzFK"
class="sc-gZMcBi WtlHs"
>
Sizes
</summary>
Expand All @@ -1552,7 +1580,7 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
class="sc-bdVaJa eQjeEW"
min="1"
type="number"
value="5"
value="4"
/>
</div>
<div
Expand All @@ -1575,14 +1603,42 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
/>
</div>
</details>
<details
class="sc-iwsKbI jrDyKB"
>
<summary
class="sc-gZMcBi WtlHs"
>
Background Image
</summary>
<div
class="sc-htoDjs eLmeJr"
>
<div
class="dropzone"
tabindex="0"
>
<input
autocomplete="off"
multiple=""
style="display: none;"
tabindex="-1"
type="file"
/>
<p>
Drag 'n' drop some files here, or click to select files
</p>
</div>
</div>
</details>
</div>
<button
class="sc-VigVT clWEVx"
class="sc-jTzLTM eFvtnT"
>
RANDOMISE
</button>
<a
class="sc-jTzLTM GVzYn"
class="sc-fjdhpX blBloQ"
download="banner.png"
href="#"
id="download-button"
Expand Down
44 changes: 44 additions & 0 deletions src/components/InputWrapper/ImageInput/ImageInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React, {useCallback} from 'react';
import styled from "styled-components"
import {useDropzone} from 'react-dropzone';


const InputBlock = styled.div`
position: relative;
height: 100%;
display: flex;
flex-direction: column;
border: 2px dashed;
border-radius: 20px;
width: 480px;
font-family: sans-serif;
margin: 40px auto;
padding: 20px;
`

const ImageInput = ({ image, setImage }) => {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The image prop is unused

const onDrop = useCallback(acceptedFiles => {
const file = acceptedFiles[0]
let reader = new FileReader();
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indentation + declare reader as a constant

reader.readAsDataURL(file)
reader.onloadend = () => {
setImage(reader.result)
}
}, [])

const {acceptedFiles, getRootProps, getInputProps} = useDropzone({onDrop});

return (

<>
<InputBlock>
<div {...getRootProps({className: 'dropzone'})}>
<input {...getInputProps()} />
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indentation (you can activate automatic formatting in VS Code in your settings, that will normally apply our eslint formatting to your whole file on each save)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the tip :) I havent been using VS Code but am trying it now - I added the Eslint plugin and checked 'Turns auto fix on save on or off' in settings, but it doesnt seem to fix the formatting on save - have I missed something?

<p>Drag 'n' drop some files here, or click to select files</p>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think of Chose a file or drag it here ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes sounds better

</div>
</InputBlock>
</>
)
}

export default ImageInput
1 change: 1 addition & 0 deletions src/components/InputWrapper/ImageInput/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as ImageInput } from "./ImageInput"
10 changes: 8 additions & 2 deletions src/components/InputWrapper/InputWrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import styled from "styled-components"
import { ContentInput } from "components/InputWrapper/ContentInput"
import { ColorInput } from "components/InputWrapper/ColorInput"
import { SizeInput } from "components/InputWrapper/SizeInput"
import { ImageInput } from "components/InputWrapper/ImageInput"


const Wrapper = styled.div`
display: flex;
Expand Down Expand Up @@ -35,8 +37,8 @@ const Summary = styled.summary`
`

const InputWrapper = ({ values, setters }) => {
const { bgColor, title, titleSize, titleColor, borderColor, borderSize } = values
const { setBgColor, setTitle, setTitleSize, setTitleColor, setBorderColor, setBorderSize } = setters
const { bgColor, title, titleSize, titleColor, borderColor, borderSize, image } = values
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused image variable

const { setBgColor, setTitle, setTitleSize, setTitleColor, setBorderColor, setBorderSize, setImage } = setters

return (
<Wrapper>
Expand All @@ -56,6 +58,10 @@ const InputWrapper = ({ values, setters }) => {
<Summary>Sizes</Summary>
<SizeInput titleSize={titleSize} borderSize={borderSize} setTitleSize={setTitleSize} setBorderSize={setBorderSize} />
</Detail>
<Detail>
<Summary>Background Image</Summary>
<ImageInput image={image} setImage={setImage}/>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since image is not used in this component, remove it as a prop

</Detail>
</Wrapper>
)
}
Expand Down
42 changes: 35 additions & 7 deletions src/components/InputWrapper/__snapshots__/InputWrapper.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
exports[`<InputWrappr /> Snapshots should match snapshot 1`] = `
<div>
<div
class="sc-htoDjs kKtqja"
class="sc-dnqmqq jBNPgH"
>
<details
class="sc-dnqmqq iGdcAj"
class="sc-iwsKbI jrDyKB"
open=""
>
<summary
class="sc-iwsKbI hPLzFK"
class="sc-gZMcBi WtlHs"
>
Content
</summary>
Expand All @@ -29,10 +29,10 @@ exports[`<InputWrappr /> Snapshots should match snapshot 1`] = `
</div>
</details>
<details
class="sc-dnqmqq iGdcAj"
class="sc-iwsKbI jrDyKB"
>
<summary
class="sc-iwsKbI hPLzFK"
class="sc-gZMcBi WtlHs"
>
Colors
</summary>
Expand Down Expand Up @@ -1512,10 +1512,10 @@ exports[`<InputWrappr /> Snapshots should match snapshot 1`] = `
</div>
</details>
<details
class="sc-dnqmqq iGdcAj"
class="sc-iwsKbI jrDyKB"
>
<summary
class="sc-iwsKbI hPLzFK"
class="sc-gZMcBi WtlHs"
>
Sizes
</summary>
Expand Down Expand Up @@ -1558,6 +1558,34 @@ exports[`<InputWrappr /> Snapshots should match snapshot 1`] = `
/>
</div>
</details>
<details
class="sc-iwsKbI jrDyKB"
>
<summary
class="sc-gZMcBi WtlHs"
>
Background Image
</summary>
<div
class="sc-htoDjs eLmeJr"
>
<div
class="dropzone"
tabindex="0"
>
<input
autocomplete="off"
multiple=""
style="display: none;"
tabindex="-1"
type="file"
/>
<p>
Drag 'n' drop some files here, or click to select files
</p>
</div>
</div>
</details>
</div>
</div>
`;
8 changes: 5 additions & 3 deletions src/components/Output/Output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const Wrapper = styled.div`
border: 1px solid #dbdbdb;
border: ${(props) => `${props.borderSize}px solid ${props.borderColor}`};
box-sizing: border-box;
background-image: url(${(props) => props.image});
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think of adding:

background-repeat: no-repeat;
background-size: cover;

?


@media (max-width: 1279px) {
width: auto;
Expand All @@ -26,10 +27,10 @@ const Title = styled.h1`
`

const Output = ({ values }) => {
const { bgColor, title, titleSize, titleColor, borderColor, borderSize } = values
const { bgColor, title, titleSize, titleColor, borderColor, borderSize, image } = values

return (
<Wrapper bgColor={bgColor} titleColor={titleColor} borderColor={borderColor} borderSize={borderSize} id="capture">
<Wrapper bgColor={bgColor} titleColor={titleColor} borderColor={borderColor} borderSize={borderSize} image={image} id="capture">
<Title size={titleSize}>{title}</Title>
</Wrapper>
)
Expand All @@ -42,7 +43,8 @@ Output.propTypes = {
titleSize: PropTypes.string,
titleColor: PropTypes.string,
borderColor: PropTypes.string,
hasBorder: PropTypes.bool
hasBorder: PropTypes.bool,
image: PropTypes.string
}).isRequired
}

Expand Down
Loading