Added copy paste and drop functionality

renanlecaro · Jul 25, 2017 · 1ec61d2 · 1ec61d2
1 parent 3ef1e95
commit 1ec61d2
Show file tree

Hide file tree

Showing 8 changed files with 238 additions and 81 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015"]
+  "presets": ["es2017"]
 }
diff --git a/build/app.js b/build/app.js
diff --git a/build/styles.less.css b/build/styles.less.css
@@ -3,8 +3,34 @@ body {
   margin: 0;
   padding: 0;
 }
+.button {
+  position: relative;
+  color: white;
+  background: #0078ff;
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  text-decoration: none;
+  cursor: pointer;
+  transform: translate(0, -2px);
+  box-shadow: 0 3px 0 #004899;
+  transition: transform 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+  text-shadow: 0 0 5px rgba(0, 0, 0, 0.28);
+  margin: 5px 0;
+}
+.button:focus,
+.button:hover {
+  background: #0060cc;
+}
+.button:active {
+  transform: none;
+  box-shadow: 0 0 0 #004899;
+  background: #004899;
+}
 #readme {
-  pointer-events: none;
   max-width: 400px;
   padding: 1rem;
   color: #666;
@@ -19,6 +45,34 @@ body {
 #readme img {
   width: 100%;
 }
+#readme .fileInputWrapper {
+  position: relative;
+  color: white;
+  background: #0078ff;
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  text-decoration: none;
+  cursor: pointer;
+  transform: translate(0, -2px);
+  box-shadow: 0 3px 0 #004899;
+  transition: transform 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+  text-shadow: 0 0 5px rgba(0, 0, 0, 0.28);
+  margin: 5px 0;
+  padding: 20px;
+}
+#readme .fileInputWrapper:focus,
+#readme .fileInputWrapper:hover {
+  background: #0060cc;
+}
+#readme .fileInputWrapper:active {
+  transform: none;
+  box-shadow: 0 0 0 #004899;
+  background: #004899;
+}
 #inputForAFile,
 #fileinput,
 canvas#drawzone {
@@ -61,17 +115,19 @@ h1 {
   border-radius: 20px;
   padding: 20px;
 }
-.tip {
+ul.tip {
   color: #666;
   font-style: italic;
 }
+ul.tip li {
+  margin: 5px 0 ;
+}
 #topbar {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   height: 40px;
-  background: #ffffff;
   padding: 2px 5px;
   display: flex;
   justify-content: center;
@@ -95,20 +151,35 @@ h1 {
 }
 #topbar #download {
   width: 100px;
-  color: #242424;
   text-transform: uppercase;
-  font-weight: bold;
   font-size: 80%;
 }
-#topbar #pensizePreview,
 #topbar #download {
+  position: relative;
+  color: white;
+  background: #0078ff;
+  font-weight: bold;
   display: flex;
   justify-content: center;
   align-items: center;
   align-self: stretch;
   text-decoration: none;
   cursor: pointer;
-  /* line-height: 0; */
+  transform: translate(0, -2px);
+  box-shadow: 0 3px 0 #004899;
+  transition: transform 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+  text-shadow: 0 0 5px rgba(0, 0, 0, 0.28);
+  margin: 5px 0;
+}
+#topbar #download:focus,
+#topbar #download:hover {
+  background: #0060cc;
+}
+#topbar #download:active {
+  transform: none;
+  box-shadow: 0 0 0 #004899;
+  background: #004899;
 }
 #topbar #pensizePreviewDot {
   border-radius: 50%;
@@ -121,17 +192,6 @@ h1 {
   bottom: 0;
   margin: auto;
 }
-#topbar #download:focus,
-#topbar #download:hover,
-#topbar #pensizePreview:focus,
-#topbar #pensizePreview:hover {
-  background: rgba(0, 0, 0, 0.15);
-}
-#topbar #download:active,
-#topbar #pensizePreview:active {
-  color: white;
-  background: #333;
-}
 div#background {
   background: white;
   position: fixed;

diff --git a/index.html b/index.html
@@ -9,12 +9,17 @@
     </head>
     <body>
         <div id="inputForAFile">
-            <div id="readme">
-                <img src="./images/logo-min.svg" width="642.487" height="128.368"/>
-                <h1>Tap to select an image</h1>
-                <p class="tip">Downloading fails if you are within facebook. Try opening the page in chrome instead.</p>
-            </div>
-            <input type="file" id="fileinput" accept="image/*"/>
+          <div id="readme">
+            <img src="./images/logo-min.svg" width="642.487" height="128.368"/>
+            <label class="fileInputWrapper">
+                <span class="text-label">Tap to select an image</span>
+                <input type="file" id="fileinput" accept="image/*"/>
+            </label>
+            <ul class="tip">
+              <li>Downloading fails if you are within facebook. Try opening the page in chrome instead.</li>
+              <li>Click the background around your image to change its color</li>
+            </ul>
+          </div>
         </div>
         <div id="drawAndDownload" style="display:none;">
             <div id="background"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,13 +7,14 @@
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-preset-env": "^1.5.2",
+    "babel-preset-es2017": "^6.24.1",
     "babili": "^0.1.4",
     "watch-less": "0.0.4"
   },
   "scripts": {
     "transpile-js": "babel --watch src -d build",
     "transpile-css": "watch-less -d src -r build",
-    "transpile-js-compress":"babili src -d build"
+    "transpile-js-compress": "babili src -d build"
   },
   "repository": {
     "type": "git",