Merge remote-tracking branch 'origin/experimental' into experimental

Author: daniel.gomez

src/components/common/FileInfo.js

@@ -1,31 +1,49 @@
 import React, { Component, PropTypes } from 'react';
+import { Col } from 'react-bootstrap';
 import filesize from 'filesize';
 
-const FileUploadItem = ({ file, height, width }) => {
-	let image = null;
+export default class FileUploadItem extends Component {
+	static propTypes = {
+		onClick: PropTypes.func,
+		file: PropTypes.object.isRequired,
+		height: PropTypes.string,
+		width: PropTypes.string
+	};
 
-	if (file.type.match(/image/)) {
-		image = <img height={height} width={width} src={file.preview}/>;
-	}
+	static defaultProps = {
+		height: "150px",
+		width: "150px"
+	};
+
+	render() {
+		let { file, height, width } = this.props;
 
-	return (
-		<li>
-			{image}
-			<p>{file.name}</p>
-			<p>{filesize(file.size)}</p>
-		</li>
-	);
-};
+		const imgStyle = {
+			display: 'block',
+			marginLeft: 'auto',
+			marginRight: 'auto'
+		};
 
-FileUploadItem.propTypes = {
-	file: PropTypes.object.isRequired,
-	height: PropTypes.string,
-	width: PropTypes.string
-};
+		let image = null;
 
-FileUploadItem.defaultProps = {
-	height: "50px",
-	width: "50px"
-};
+		if (file.type.match(/image/)) {
+			image = <img height={height} width={width} src={file.preview} style={imgStyle}/>;
+		}
 
-export default FileUploadItem;
+		return (
+			<Col xs={4} md={4}>
+				<div style={{backgroundColor: "#e0e0e0"}}>
+					<div>
+						{image}
+					</div>
+					<div>
+						<p style={{textAlign: 'center'}}>
+							<a>{file.name}</a>
+						</p>
+						<p style={{textAlign: 'right'}}>{filesize(file.size)}</p>
+					</div>
+				</div>
+			</Col>
+		);
+	}
+};

src/components/field/FileUpload.js

@@ -43,42 +43,51 @@ export default class FileUpload extends Component {
 		let { files } = this.state;
 
 		//TODO Think how to manage styles correctly
-		const styles = {
-			titleDiv: {
-				marginTop: "6px",
-				color: "#616161"
-			},
-			div: {
-				marginTop: "6px"
-			},
-			p: {
-				textAlign: "center",
-				color: "#616161"
-			}
+		const attachmentStyle = {
+			marginTop: "6px",
+			color: "#616161"
+		};
+
+		const messageContainerStyle = {
+			marginTop: "6px"
+		};
+
+		const messageStyle = {
+			textAlign: "center",
+			color: "#616161"
 		};
 
+		let rowStyle = {};
+
+		//TODO check row 
+		if (files) {
+			rowStyle = {
+				padding: "10px"
+			}
+		}
+
 		return (
 			<div>
 				<Row>
 					<Col xs={2} md={2}>
-						<div style={styles.titleDiv}>
+						<div style={attachmentStyle}>
 							<b>Attachment</b>
 						</div>
 					</Col>
 					<Col xs={10} md={10}>
 						<DropZone onDrop={this.onDrop}>
-							<div style={styles.div}>
-								<p style={styles.p}>
+							<div style={messageContainerStyle}>
+								<p style={messageStyle}>
 									<Glyphicon glyph="cloud-upload"/> Drop files to attach, or <a>browse</a>
 								</p>
 							</div>
-							<div>
-								<ul>{
+							<div style={rowStyle}>
+								<Row>{
 									files.map((file, index) => (
 										<FileInfo key={index} file={file}/>
 									))
 								}
-								</ul>
+								</Row>
 							</div>
 						</DropZone>
 					</Col>