From d420f41b1c2e63141988323d037586837934ee8d Mon Sep 17 00:00:00 2001 From: Roberto Dip Date: Fri, 23 Jun 2017 11:10:35 -0300 Subject: [PATCH] Initial commit --- .gitignore | 21 + .netlify | 1 + README.md | 58 + package.json | 20 + public/favicon.ico | Bin 0 -> 6518 bytes public/index.html | 40 + public/manifest.json | 15 + src/components/Container/Container.css | 11 + src/components/Container/Container.js | 12 + src/components/CopyOnClick/CopyOnClick.css | 4 + src/components/CopyOnClick/CopyOnClick.js | 48 + src/components/Forms/Button/Button.css | 13 + src/components/Forms/Button/Button.js | 10 + src/components/Forms/Input/Input.css | 31 + src/components/Forms/Input/Input.js | 15 + src/components/Header/Header.css | 13 + src/components/Header/Header.js | 12 + .../SignatureCreator/SignatureCreator.css | 23 + .../SignatureCreator/SignatureCreator.js | 40 + .../SignatureForm/SignatureForm.js | 18 + .../SignaturePreview/SignaturePreview.css | 28 + .../SignaturePreview/SignaturePreview.js | 22 + src/index.css | 29 + src/index.js | 9 + src/logo.jpg | Bin 0 -> 7289 bytes src/registerServiceWorker.js | 51 + src/scenes/Home/Home.css | 4 + src/scenes/Home/Home.js | 28 + yarn.lock | 6236 ++++++++++++++++++++ 29 files changed, 6812 insertions(+) create mode 100644 .gitignore create mode 100644 .netlify create mode 100644 README.md create mode 100644 package.json create mode 100644 public/favicon.ico create mode 100644 public/index.html create mode 100644 public/manifest.json create mode 100644 src/components/Container/Container.css create mode 100644 src/components/Container/Container.js create mode 100644 src/components/CopyOnClick/CopyOnClick.css create mode 100644 src/components/CopyOnClick/CopyOnClick.js create mode 100644 src/components/Forms/Button/Button.css create mode 100644 src/components/Forms/Button/Button.js create mode 100644 src/components/Forms/Input/Input.css create mode 100644 src/components/Forms/Input/Input.js create mode 100644 src/components/Header/Header.css create mode 100644 src/components/Header/Header.js create mode 100644 src/components/SignatureCreator/SignatureCreator.css create mode 100644 src/components/SignatureCreator/SignatureCreator.js create mode 100644 src/components/SignatureCreator/SignatureForm/SignatureForm.js create mode 100644 src/components/SignatureCreator/SignaturePreview/SignaturePreview.css create mode 100644 src/components/SignatureCreator/SignaturePreview/SignaturePreview.js create mode 100644 src/index.css create mode 100644 src/index.js create mode 100644 src/logo.jpg create mode 100644 src/registerServiceWorker.js create mode 100644 src/scenes/Home/Home.css create mode 100644 src/scenes/Home/Home.js create mode 100644 yarn.lock diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d30f40e --- /dev/null +++ b/.gitignore @@ -0,0 +1,21 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +/node_modules + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/.netlify b/.netlify new file mode 100644 index 0000000..1080bbb --- /dev/null +++ b/.netlify @@ -0,0 +1 @@ +{"site_id":"09c57646-573c-4ec8-bbf1-dfb91278d97b","path":"build"} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..02aa1d2 --- /dev/null +++ b/README.md @@ -0,0 +1,58 @@ +# Elation signature composer + +This is a signature composer built for Elation. This project was bootstrapped +with [Create React App](https://github.com/facebookincubator/create-react-app). +An online version is available [here](https://elation-signature-composer.netlify.com/). + +## Requisites + +- Node.js v5 or superior + +## Getting started + +First, in order to clone the project you can run: + +```shell +$ git clone http://repo.or.cz/elation-signature-composer.git +``` + +Then enter into the project directory and install all dependencies. + +```shell +$ cd elation-signature-composer +$ npm install +``` + +That's it! now you can start playing with any of the available scripts + +## Available Scripts + +In the project directory, you can run: + +### `npm start` + +Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will also see any lint errors in the console. + +### `npm test` + +Launches the test runner in the interactive watch mode.
+See the section about [running tests](#running-tests) for more information. + +### `npm run build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +See the section about [deployment](#deployment) for more information. + +## Deployment + +I'm using [Netlify](https://www.netlify.com/) to deploy the app, however the deployment +just consists of uploading the files under `build/` to a server. diff --git a/package.json b/package.json new file mode 100644 index 0000000..d646a2b --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "name": "elation-mail-signature", + "version": "1.0.0", + "private": true, + "dependencies": { + "clipboard": "^1.7.1", + "normalize.css": "^7.0.0", + "react": "^15.6.1", + "react-dom": "^15.6.1" + }, + "devDependencies": { + "react-scripts": "1.0.7" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..57b99893089e0e585e8a8b7d7d4b39e204c18f43 GIT binary patch literal 6518 zcwX(7J!lj`6vsy)g541U0gG^zgwryOoun0FWo@U0l_G+IjbNh^MK6AU|)-ptMlu|aGU znT&wHS<&4l#8x3hHfw%&2+;?9-O!i8eo^n&txZIl%x|&T2Al)tfuFze zcs6>Jl2=uEo{Cd6+IX&|Ia>n#+Sf1oe;1{}J}QnU8)qtI>(s|a*%J8YIc4Y6Pn!Ru zD?7+IvhgmV?40^Z4Q;46GWs5K^7O_bH9vVNl|JqfDlSJGDUY4eG2fI55q-+HSyU%3 zXg$nBll56SKq}+?>iMl>tomc@KVLhx{z`+p)ce`n0pIC z!pu$Bj|cTyyu5ot&(+@-DbeSzV!VH_=1}`%<)NCqnA7Wk>w(YweewG7RZ7oBzkd|t z{fl#5oEy{H_&cnx#{jkVZhC~$vsrczk}2*Vw*Eg*2y3g9_phm;y- + + + + + + + + + + Signature composer + + + +
+ + + diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..22a534e --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "Elation signature composer", + "name": "Elation signature composer", + "icons": [ + { + "src": "favicon.ico", + "sizes": "192x192", + "type": "image/png" + } + ], + "start_url": "./index.html", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/src/components/Container/Container.css b/src/components/Container/Container.css new file mode 100644 index 0000000..c4813e8 --- /dev/null +++ b/src/components/Container/Container.css @@ -0,0 +1,11 @@ +.Container { + max-width: 50rem; + margin: 0 auto; + padding: 0 2rem; +} + +@media(min-width: 60rem) { + .Container { + padding: 0; + } +} diff --git a/src/components/Container/Container.js b/src/components/Container/Container.js new file mode 100644 index 0000000..e9aaa5a --- /dev/null +++ b/src/components/Container/Container.js @@ -0,0 +1,12 @@ +import React from 'react'; +import './Container.css'; + +const Container = function({ children, className }) { + return ( +
+ {children} +
+ ); +} + +export default Container; diff --git a/src/components/CopyOnClick/CopyOnClick.css b/src/components/CopyOnClick/CopyOnClick.css new file mode 100644 index 0000000..f7caf54 --- /dev/null +++ b/src/components/CopyOnClick/CopyOnClick.css @@ -0,0 +1,4 @@ +.CopyOnClick-notification { + display: inline-block; + margin-left: 1rem; +} diff --git a/src/components/CopyOnClick/CopyOnClick.js b/src/components/CopyOnClick/CopyOnClick.js new file mode 100644 index 0000000..66464ad --- /dev/null +++ b/src/components/CopyOnClick/CopyOnClick.js @@ -0,0 +1,48 @@ +import React, { Component } from 'react'; +import Clipboard from 'clipboard'; +import './CopyOnClick.css'; + +class CopyOnClick extends Component { + state = { + active: false + } + + componentDidMount() { + const { target } = this.props; + + this.clipboard = new Clipboard(this.button, { + target: () => document.querySelector(target) + }); + } + + componentWillUnmount() { + this.clipboard.destroy(); + } + + showTooltip = () => { + this.setState({ active: true }); + setTimeout(this.hideTooltip, 1000); + } + + hideTooltip = () => { + this.setState({ active: false }); + } + + render() { + const { children } = this.props; + let notification = ''; + + if (this.state.active) { + notification = Copied!; + } + + return ( +
this.button = element} onClick={this.showTooltip}> + {children} + {notification} +
+ ); + } +} + +export default CopyOnClick; diff --git a/src/components/Forms/Button/Button.css b/src/components/Forms/Button/Button.css new file mode 100644 index 0000000..5356e68 --- /dev/null +++ b/src/components/Forms/Button/Button.css @@ -0,0 +1,13 @@ +.Button { + border-color: #ff7900; + border-radius: 3px; + background: #ff7900; + color: white; + padding: 0.7rem 1.5rem; + transition: 0.33s; + cursor: pointer; +} + +.Button:hover { + background-color: #cc6100; +} diff --git a/src/components/Forms/Button/Button.js b/src/components/Forms/Button/Button.js new file mode 100644 index 0000000..f628184 --- /dev/null +++ b/src/components/Forms/Button/Button.js @@ -0,0 +1,10 @@ +import React from 'react'; +import './Button.css'; + +const Button = function({ text }) { + return ( + + ); +} + +export default Button; diff --git a/src/components/Forms/Input/Input.css b/src/components/Forms/Input/Input.css new file mode 100644 index 0000000..cb95adc --- /dev/null +++ b/src/components/Forms/Input/Input.css @@ -0,0 +1,31 @@ +.Input-wrapper { + position: relative; + margin-bottom: 40px; +} + +.Input-label { + color: #9e9e9e; + position: absolute; + top: 0; + left: 0; + cursor: text; + pointer-events: none; + font-size: .8rem; +} + +.Input-input { + background-color: transparent; + border: none; + border-bottom: 1px solid #9e9e9e; + border-radius: 0; + outline: none; + height: 2.5rem; + width: 100%; + font-size: 1rem; + padding-top: 0.8rem; +} + +.Input-input:focus { + border-color: #1c94bc; + box-shadow: 0 1px 0 0 #1c94bc; +} diff --git a/src/components/Forms/Input/Input.js b/src/components/Forms/Input/Input.js new file mode 100644 index 0000000..d217d6e --- /dev/null +++ b/src/components/Forms/Input/Input.js @@ -0,0 +1,15 @@ +import React from 'react'; +import './Input.css'; + +const Input = function({ label, type, name, autoFocus, onChange }) { + let parsedName = name || label.toLowerCase(); + + return ( +
+ + +
+ ); +} + +export default Input; diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css new file mode 100644 index 0000000..dcfe1ca --- /dev/null +++ b/src/components/Header/Header.css @@ -0,0 +1,13 @@ +.Header-content { + height: 4rem; + line-height: 4rem; + margin: 2rem 0 2.5rem; + + border-bottom: 1px solid #d1d1d1; +} + +.Header-title { + margin: 0; + color: #2e2e2e; + text-transform: uppercase; +} diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js new file mode 100644 index 0000000..2f41d7a --- /dev/null +++ b/src/components/Header/Header.js @@ -0,0 +1,12 @@ +import React from 'react'; +import './Header.css' + +const Header = function() { + return ( +
+

Signature composer

+
+ ); +} + +export default Header; diff --git a/src/components/SignatureCreator/SignatureCreator.css b/src/components/SignatureCreator/SignatureCreator.css new file mode 100644 index 0000000..f91504c --- /dev/null +++ b/src/components/SignatureCreator/SignatureCreator.css @@ -0,0 +1,23 @@ +.SignatureCreator { + display: flex; + flex-wrap: wrap; + margin-top: 3.5rem; +} + +.SignatureCreator-form { + width: 100%; + margin-top: 3rem; +} + +@media(min-width: 60rem) { + .SignatureCreator { + flex-wrap: nowrap; + justify-content: space-between; + align-items: flex-start; + } + + .SignatureCreator-form { + width: 50%; + margin-top: 0; + } +} diff --git a/src/components/SignatureCreator/SignatureCreator.js b/src/components/SignatureCreator/SignatureCreator.js new file mode 100644 index 0000000..bd07f02 --- /dev/null +++ b/src/components/SignatureCreator/SignatureCreator.js @@ -0,0 +1,40 @@ +import React, { Component } from 'react'; +import SignaturePreview from './SignaturePreview/SignaturePreview'; +import SignatureForm from './SignatureForm/SignatureForm'; +import './SignatureCreator.css'; + +class SignatureCreator extends Component { + constructor(props) { + super(props); + + // Hard-coded initial state, hopefully some day... + this.state = { + name: 'Roberto Dip', + position: 'Front End Developer' + }; + } + + handleFormChange = (e) => { + const { name, value } = e.target; + + this.setState({...this.state, [name]: value }); + } + + handleFormSubmit = (e) => { + e.preventDefault(); + } + + render() { + return ( +
+ + +
+ ); + } +} + +export default SignatureCreator; diff --git a/src/components/SignatureCreator/SignatureForm/SignatureForm.js b/src/components/SignatureCreator/SignatureForm/SignatureForm.js new file mode 100644 index 0000000..42ec620 --- /dev/null +++ b/src/components/SignatureCreator/SignatureForm/SignatureForm.js @@ -0,0 +1,18 @@ +import React from 'react'; +import Input from '../../Forms/Input/Input'; +import Button from '../../Forms/Button/Button'; +import CopyOnClick from '../../CopyOnClick/CopyOnClick'; + +const SignatureForm = function({ onChange, onSubmit, className }) { + return ( +
+ + + +