cobular
/
filepizza
mirror of https://github.com/kern/filepizza
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Extract a Centered component.

Browse Source
nb/hide-http
Alex Kern 11 years ago
parent 1e1648410e
commit 5344bbda28
7 changed files with 143 additions and 70 deletions
Show Stats Download Patch File Download Diff File

6
client/components/App.js
Unescape Escape View File

@ -14,13 +14,13 @@ export default class App extends React.Component {
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Quicksand:300,400,700" />
<link rel="stylesheet" href="/css" />
<script src="/js" />
</FrozenHead>
<body>
<div className="container">
<RouteHandler />
<script src="/js" />
</div>
<script>FilePizza()</script>
</body>
</html>
}

63
client/components/Centered.js
Unescape Escape View File

@ -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 <div style={{
display: 'table',
width: '100%',
height: '100%'}}>
<div style={{
display: 'table-cell',
verticalAlign: 'middle',
textAlign: 'center'}}>
<div style={{display: 'inline-block'}}>
{this.props.children}
</div>
</div>
</div>
} else if (h && !v) {
return <div style={{textAlign: 'center'}}>
<div style={{display: 'inline-block'}}>
{this.props.children}
</div>
</div>
} else if (!h && v) {
return <div style={{
display: 'table',
width: '100%',
height: '100%'}}>
<div style={{
display: 'table-cell',
verticalAlign: 'middle'}}>
{this.props.children}
</div>
</div>
} else {
return this.props.children
}
}
}
Centered.propTypes = {
hor: React.PropTypes.bool,
ver: React.PropTypes.bool
}
Centered.defaultProps = {
hor: false,
ver: false
}

23
client/components/DownloadPage.js
Unescape Escape View File

@ -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 <div className="page">
return <Centered ver>
<h1>FilePizza</h1>
<Spinner dir="down"
name={this.state.file.name}
@ -45,11 +47,12 @@ export default class DownloadPage extends React.Component {
<DownloadButton onClick={this.downloadFile.bind(this)} />
</div>
</Centered>
case 'requesting':
case 'downloading':
return <div className="page">
return <Centered ver>
<h1>FilePizza</h1>
<Spinner dir="down" animated
name={this.state.file.name}
@ -57,10 +60,11 @@ export default class DownloadPage extends React.Component {
<ProgressBar value={this.state.progress} />
</div>
</Centered>
case 'cancelled':
return <div className="page">
return <Centered ver>
<h1>FilePizza</h1>
<Spinner dir="down"
name={this.state.file.name}
@ -68,10 +72,11 @@ export default class DownloadPage extends React.Component {
<ProgressBar value={-1} />
</div>
</Centered>
case 'done':
return <div className="page">
return <Centered ver>
<h1>FilePizza</h1>
<Spinner dir="down"
name={this.state.file.name}
@ -79,7 +84,7 @@ export default class DownloadPage extends React.Component {
<ProgressBar value={1} />
</div>
</Centered>
}
}

45
client/components/DropZone.js
Unescape Escape View File

@ -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 <div className={classes}
return <div className="drop-zone" ref="root"
onDragEnter={this.onDragEnter.bind(this)}
onDragLeave={this.onDragLeave.bind(this)}
onDragOver={this.onDragOver.bind(this)}
onDrop={this.onDrop.bind(this)} />;
onDrop={this.onDrop.bind(this)}>
<div className="drop-zone-overlay"
hidden={!this.state.focus}
ref="overlay" />
{this.props.children}
</div>
}
}
DropZone.propTypes = {
onDrop: React.PropTypes.func.isRequired
}

26
client/components/UploadPage.js
Unescape Escape View File

@ -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 <div className="page">
<DropZone onDrop={this.uploadFile.bind(this)} />
return <DropZone onDrop={this.uploadFile.bind(this)}>
<Centered ver>
<Spinner dir="up" />
<h1>FilePizza</h1>
<p>The easiest way to send someone a file.</p>
<p>Drag the file into this window to get started.</p>
</div>
</Centered>
</DropZone>
case 'processing':
return <div className="page">
return <Centered ver>
<Spinner dir="up" animated />
<h1>FilePizza</h1>
<p>Processing...</p>
</div>
</Centered>
case 'uploading':
var keys = Object.keys(this.state.peerProgress)
keys.reverse()
return <div className="page">
return <Centered ver>
<h1>FilePizza</h1>
<Spinner dir="up" animated {...this.state.file} />
@ -70,14 +74,14 @@ export default class UploadPage extends React.Component {
<p>This link will work as long as this page is open.</p>
<Tempalink token={this.state.token} />
{keys.length > 0 ? <p>People Downloading Your File</p> : <p></p>}
{keys.length > 0 ? <p>Download Progress</p> : null}
<div className="data">
{ keys.map((key) => {
return <ProgressBar value={this.state.peerProgress[key]} small />
{keys.map((key) => {
return <ProgressBar small value={this.state.peerProgress[key]} />
})}
</div>
</div>
</Centered>
}
}

6
client/index.js
Unescape Escape View File

@ -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) {
window.FilePizza = () => {
ReactRouter.run(routes, ReactRouter.HistoryLocation, function (Handler) {
React.render(<Handler data={bootstrap} />, document)
})
})
}

26
css/index.styl
Unescape Escape View File

@ -33,38 +33,28 @@ p {
margin: 0 0
}
.container {
display: table
.drop-zone {
width: 100%
height: 100%
}
.page {
display: table-cell
vertical-align: middle
}
.drop-zone {
position: absolute
.drop-zone-overlay {
position: fixed
top: 0
left: 0
width: 100%
height: 100%
display: table
background: rgba(0, 0, 0, 0)
&.drop-zone-focus {
z-index: 1
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%
}
}
}

Write Preview
Loading…
Cancel
Save