diff --git a/client/components/App.js b/client/components/App.js index f237058..372c373 100644 --- a/client/components/App.js +++ b/client/components/App.js @@ -14,13 +14,13 @@ export default class App extends React.Component { + } diff --git a/client/components/Centered.js b/client/components/Centered.js new file mode 100644 index 0000000..ee88844 --- /dev/null +++ b/client/components/Centered.js @@ -0,0 +1,63 @@ +import React from 'react' + +export default class Centered extends React.Component { + + render() { + const h = this.props.hor + const v = this.props.ver + + if (h && v) { + + return
+
+
+ {this.props.children} +
+
+
+ + } else if (h && !v) { + + return
+
+ {this.props.children} +
+
+ + } else if (!h && v) { + + return
+
+ {this.props.children} +
+
+ + } else { + + return this.props.children + + } + } + +} + +Centered.propTypes = { + hor: React.PropTypes.bool, + ver: React.PropTypes.bool +} + +Centered.defaultProps = { + hor: false, + ver: false +} diff --git a/client/components/DownloadPage.js b/client/components/DownloadPage.js index 335fa92..274c0ff 100644 --- a/client/components/DownloadPage.js +++ b/client/components/DownloadPage.js @@ -1,7 +1,8 @@ +import Centered from './Centered' import DownloadActions from '../actions/DownloadActions' import DownloadButton from './DownloadButton' -import ProgressBar from './ProgressBar' import DownloadStore from '../stores/DownloadStore' +import ProgressBar from './ProgressBar' import React from 'react' import Spinner from './Spinner' import peer from '../peer' @@ -37,7 +38,8 @@ export default class DownloadPage extends React.Component { render() { switch (this.state.status) { case 'ready': - return
+ return +

FilePizza

-
+ case 'requesting': case 'downloading': - return
+ return +

FilePizza

-
+ case 'cancelled': - return
+ return +

FilePizza

-
+ case 'done': - return
+ return +

FilePizza

-
+ } } diff --git a/client/components/DropZone.js b/client/components/DropZone.js index aac42f5..b5a3bf6 100644 --- a/client/components/DropZone.js +++ b/client/components/DropZone.js @@ -1,43 +1,52 @@ -import React from 'react'; -import classnames from 'classnames'; +import React from 'react' +import Centered from './Centered' export default class DropZone extends React.Component { constructor() { - this.state = { focus: false }; + this.state = { focus: false } } onDragEnter() { - this.setState({ focus: true }); + this.setState({ focus: true }) } - onDragLeave() { - this.setState({ focus: false }); + onDragLeave(e) { + if (e.target !== this.refs.overlay.getDOMNode()) return + this.setState({ focus: false }) } onDragOver(e) { - e.preventDefault(); - e.dataTransfer.dropEffect = 'copy'; + e.preventDefault() + e.dataTransfer.dropEffect = 'copy' } onDrop(e) { - e.preventDefault(); - this.setState({ focus: false }); + e.preventDefault() + this.setState({ focus: false }) - let file = e.dataTransfer.files[0]; - if (this.props.onDrop && file) this.props.onDrop(file); + let file = e.dataTransfer.files[0] + if (this.props.onDrop && file) this.props.onDrop(file) } render() { - let classes = classnames('drop-zone', { - 'drop-zone-focus': this.state.focus - }); - - return
; + onDrop={this.onDrop.bind(this)}> + + } } + +DropZone.propTypes = { + onDrop: React.PropTypes.func.isRequired +} diff --git a/client/components/UploadPage.js b/client/components/UploadPage.js index 1f5b5fd..d20dbb7 100644 --- a/client/components/UploadPage.js +++ b/client/components/UploadPage.js @@ -1,7 +1,8 @@ -import Spinner from './Spinner' +import Centered from './Centered' import DropZone from './DropZone' import ProgressBar from './ProgressBar' import React from 'react' +import Spinner from './Spinner' import Tempalink from './Tempalink' import UploadActions from '../actions/UploadActions' import UploadStore from '../stores/UploadStore' @@ -38,31 +39,34 @@ export default class UploadPage extends React.Component { render() { switch (this.state.status) { case 'ready': - return
- - + return + -

FilePizza

-

The easiest way to send someone a file.

-

Drag the file into this window to get started.

+ -
+

FilePizza

+

The easiest way to send someone a file.

+

Drag the file into this window to get started.

+ + + case 'processing': - return
+ return

FilePizza

Processing...

-
+ case 'uploading': var keys = Object.keys(this.state.peerProgress) keys.reverse() - return
+ return +

FilePizza

@@ -70,14 +74,14 @@ export default class UploadPage extends React.Component {

This link will work as long as this page is open.

- {keys.length > 0 ?

People Downloading Your File

:

} + {keys.length > 0 ?

Download Progress

: null}
- { keys.map((key) => { - return + {keys.map((key) => { + return })}
-
+ } } diff --git a/client/index.js b/client/index.js index 17dcd4e..1980c27 100644 --- a/client/index.js +++ b/client/index.js @@ -6,6 +6,8 @@ import alt from './alt' let bootstrap = document.documentElement.getAttribute('data-bootstrap') alt.bootstrap(bootstrap) -ReactRouter.run(routes, ReactRouter.HistoryLocation, function (Handler) { - React.render(, document) -}) +window.FilePizza = () => { + ReactRouter.run(routes, ReactRouter.HistoryLocation, function (Handler) { + React.render(, document) + }) +} diff --git a/css/index.styl b/css/index.styl index 865885f..98f97ec 100644 --- a/css/index.styl +++ b/css/index.styl @@ -33,38 +33,28 @@ p { margin: 0 0 } -.container { - display: table - width: 100% - height: 100% -} - -.page { - display: table-cell - vertical-align: middle -} - .drop-zone { - position: absolute - top: 0 - left: 0 width: 100% height: 100% - display: table - background: rgba(0, 0, 0, 0) - &.drop-zone-focus { - z-index: 1 + .drop-zone-overlay { + position: fixed + top: 0 + left: 0 + width: 100% + height: 100% background: rgba(0, 0, 0, 0.5) + text-align: center &:after { color: white content: 'DROP TO UPLOAD' - display: table-cell + display: block font: 24px/40px "Quicksand", sans-serif - text-align: center + margin-top: -20px + position: relative text-shadow: 0 1px dark-gray - vertical-align: middle + top: 50% } } }