Merge pull request #11 from dawnlabs/dnd-overlay

File drop overlay

README.md

@@ -17,7 +17,7 @@ Visit [dawnlabs.io/carbon](http://dawnlabs.io/carbon) or read [our post](TODO) t
 #### Import
 
 There are a few different ways to import code into Carbon:
-- Drag a file onto the editor
+- Drop a file onto the editor
 - Append a GitHub gist id to the url  (e.g. `www.dawnlabs.io/carbon/GIST_ID_HERE`)
 - Paste your code directly
 

components/Button.js

@@ -2,23 +2,26 @@ import React from 'react'
 import { COLORS } from '../lib/constants'
 
 export default (props) => (
-  <div onClick={props.onClick} className="toolbar-btn" style={Object.assign({
+  <button onClick={props.onClick} style={Object.assign({
     background: COLORS.BLACK,
     color: props.color,
     border: `0.5px solid ${props.color}`
   }, props.style)}>
     <span>{props.title}</span>
     <style jsx>{`
-      div {
+      button {
         cursor: pointer;
+        outline: none;
         height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
         padding: 0 16px;
         border-radius: 3px;
         user-select: none;
       }
+
+      button > span {
+        font-size: 14px;
+        line-height: 1;
+      }
     `}</style>
-  </div>
+  </button>
 )

components/Header.js

@@ -5,7 +5,7 @@ const Header = ({ enableHeroText }) => (
   <div className="header mb4">
     <div className="header-content">
       <a href="/"><Logo /></a>
-      { enableHeroText ? (<h2 className="mt3">Create and share beautiful images of your source code.<br/> Start typing, or drag a file into the text area to get started.</h2>) : null }
+      { enableHeroText ? (<h2 className="mt3">Create and share beautiful images of your source code.<br/> Start typing, or drop a file into the text area to get started.</h2>) : null }
     </div>
     <style jsx>{`
       .header {

components/Overlay.js

@@ -0,0 +1,27 @@
+const Overlay = props => (
+  <div className="dnd-container">
+    { props.isOver ? <div className="dnd-overlay">{props.title}</div> : null }
+    { props.children }
+    <style jsx>{`
+      .dnd-container {
+        position: relative;
+      }
+
+      .dnd-overlay {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        width: 100%;
+        height: 100%;
+        z-index: 999;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: rgba(0, 0, 0, 0.85);
+      }
+    `}</style>
+  </div>
+)
+
+export default Overlay

components/ReadFileDropContainer.js

@@ -12,8 +12,17 @@ const spec = {
   }
 }
 
-const collect = connect => ({ connectDropTarget: connect.dropTarget() })
+const collect = (connect, monitor) => ({ connectDropTarget: connect.dropTarget(), isOver: monitor.isOver() })
 
-const ReadFileDropContainer = props => props.connectDropTarget(props.children)
+const ReadFileDropContainer = props => props.connectDropTarget(
+  <div>
+    {
+      React.Children.only(React.Children.map(
+        props.children,
+        child => React.cloneElement(child, { isOver: props.isOver }),
+      )[0])
+    }
+  </div>
+)
 
 export default DropTarget(NativeTypes.FILE, spec, collect)(ReadFileDropContainer)

components/style/Reset.js

@@ -92,7 +92,7 @@ export default () =>
     .link {
       color: #fff;
       text-decoration: none;
-      padding-bottom: 2px;
+      padding-bottom: 3px;
       background: linear-gradient(to right, rgba(255,255,255, 0.7) 0%, rgba(255,255,255, 0.7) 100%);
       background-size: 1px 1px;
       background-position: 0 100%;

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "node server.js",
     "build": "next build",
-    "start": "NODE_ENV=production node server.js"
+    "start": "NODE_ENV=production node server.js",
+    "deploy": "now --public"
   },
   "dependencies": {
     "axios": "^0.16.2",

pages/about.js

@@ -16,7 +16,7 @@ export default () => (
         <h4 className="mb0">Import</h4>
         <p className="mb1 mt2">There are a few different ways to import code into Carbon:</p>
         <ul className="mt0 mb3">
-          <li>Drag a file into the editor</li>
+          <li>Drop a file into the editor</li>
           <li>Append a GitHub gist id to the url (<a className="link" href="/0db00e81d5416c339181e59481c74b59">example</a>)</li>
           <li>Paste your code directly</li>
         </ul>
@@ -43,6 +43,7 @@ export default () => (
 
       ul {
         list-style-position: inside;
+        list-style-type: circle;
       }
 
       .about {

pages/editor.js

@@ -6,6 +6,7 @@ import domtoimage from 'dom-to-image'
 import Page from '../components/Page'
 import ReadFileDropContainer from '../components/ReadFileDropContainer'
 import Toolbar from '../components/Toolbar'
+import Overlay from '../components/Overlay'
 import Carbon from '../components/Carbon'
 import api from '../lib/api'
 import { THEMES, DEFAULT_LANGUAGE, COLORS, DEFAULT_CODE } from '../lib/constants'
@@ -86,26 +87,28 @@ class Editor extends React.Component {
   render () {
     return (
         <Page enableHeroText>
-          <ReadFileDropContainer
+          <div id="editor">
-            onDrop={droppedContent => this.setState({ code: droppedContent })}
+            <Toolbar
-          >
+              save={this.save}
-            <div id="editor">
+              upload={this.upload}
-              <Toolbar
+              uploading={this.state.uploading}
-                save={this.save}
+              onBGChange={color => this.setState({ background: color })}
-                upload={this.upload}
+              onThemeChange={theme => this.setState({ theme: theme.id })}
-                uploading={this.state.uploading}
+              onLanguageChange={language => this.setState({ language: language.module })}
-                onBGChange={color => this.setState({ background: color })}
+              onSettingsChange={(key, value) => this.setState({ [key]: value })}
-                onThemeChange={theme => this.setState({ theme: theme.id })}
+              bg={this.state.background}
-                onLanguageChange={language => this.setState({ language: language.module })}
+              enabled={this.state}
-                onSettingsChange={(key, value) => this.setState({ [key]: value })}
+            />
-                bg={this.state.background}
+            <ReadFileDropContainer
-                enabled={this.state}
+              onDrop={droppedContent => this.setState({ code: droppedContent })}
-              />
+            >
-              <Carbon config={this.state} updateCode={this.updateCode}>
+              <Overlay title="Drop your file here to import">
-                {this.state.code}
+                <Carbon config={this.state} updateCode={this.updateCode}>
-              </Carbon>
+                  {this.state.code}
-            </div>
+                </Carbon>
-          </ReadFileDropContainer>
+              </Overlay>
+            </ReadFileDropContainer>
+          </div>
           <style jsx>{`
             #editor {
               background: ${COLORS.BLACK};