Add an 'upload...' button to the piggy menu.

Bug: https://code.google.com/p/camlistore/issues/detail?id=504
Change-Id: I736499ee10e9d07e15432eff2224a64abb1569ce

server/camlistored/ui/dialog.css

@@ -39,3 +39,11 @@ limitations under the License.
 	font-size: 24px;
 	text-align: center;
 }
+
+.cam-dialog .cam-dialog-close {
+	position: absolute;
+	right: 14px;
+	top: 14px;
+	color: #555;
+	cursor: pointer;
+}

server/camlistored/ui/dialog.js

@@ -23,6 +23,7 @@ cam.Dialog = React.createClass({
 		width: React.PropTypes.number.isRequired,
 		height: React.PropTypes.number.isRequired,
 		borderWidth: React.PropTypes.number.isRequired,
+		onClose: React.PropTypes.func,
 	},
 
 	render: function() {
@@ -41,8 +42,20 @@ cam.Dialog = React.createClass({
 						'border-width': this.props.borderWidth,
 					},
 				},
+				this.getClose_(),
 				this.props.children
 			)
 		);
 	},
+
+	getClose_: function() {
+		if (!this.props.onClose) {
+			return null;
+		}
+
+		return React.DOM.i({
+			className: 'fa fa-times fa-lg fa-border cam-dialog-close',
+			onClick: this.props.onClose,
+		});
+	},
 });

server/camlistored/ui/header.js

@@ -220,6 +220,7 @@ cam.Header = React.createClass({
 				}),
 			},
 			this.getMenuItem_('Home', this.props.homeURL),
+			this.getMenuItem_('Upload...', null, this.props.onUpload),
 
 			// TODO(aa): Create a new permanode UI that delays creating the permanode until the user confirms, then change this to a link to that UI.
 			// TODO(aa): Also I keep going back and forth about whether we should call this 'permanode' or 'set' in the UI. Hrm.

server/camlistored/ui/index.js

@@ -117,10 +117,12 @@ cam.IndexPage = React.createClass({
 	getInitialState: function() {
 		return {
 			currentURL: null,
-			dropActive: false,
 			selection: {},
 			serverStatus: null,
 			tagsControlVisible: false,
+
+			uploadDialogVisible: false,
+			dropActive: false,
 			numUploadsTotal: 0,
 			numUploadsComplete: 0,
 		};
@@ -226,7 +228,10 @@ cam.IndexPage = React.createClass({
 		this.clearDragTimer_();
 		e.preventDefault();
 		this.dragEndTimer_ = window.setTimeout(this.handleDragStop_, 2000);
-		this.setState({dropActive: true});
+		this.setState({
+			dropActive: true,
+			uploadDialogVisible: false,
+		});
 	},
 
 	handleDragStop_: function() {
@@ -417,6 +422,7 @@ cam.IndexPage = React.createClass({
 						val.title
 					);
 				}, this),
+				onUpload: this.handleUpload_,
 				onNewPermanode: this.handleCreateSetWithSelection_,
 				onSearch: this.setSearch_,
 				searchRootsURL: this.getSearchRootsURL_(),
@@ -463,6 +469,12 @@ cam.IndexPage = React.createClass({
 		this.addMembersToSet_(this.currentSet_, goog.object.getKeys(this.state.selection));
 	},
 
+	handleUpload_: function() {
+		this.setState({
+			uploadDialogVisible: true,
+		});
+	},
+
 	handleCreateSetWithSelection_: function() {
 		var selection = goog.object.getKeys(this.state.selection);
 		this.props.serverConnection.createPermanode(function(permanode) {
@@ -646,7 +658,7 @@ cam.IndexPage = React.createClass({
 	},
 
 	getUploadDialog_: function() {
-		if (!this.state.dropActive && !this.state.numUploadsTotal) {
+		if (!this.state.uploadDialogVisible && !this.state.dropActive && !this.state.numUploadsTotal) {
 			return null;
 		}
 
@@ -655,14 +667,13 @@ cam.IndexPage = React.createClass({
 		var borderWidth = 18;
 		var w = this.props.availWidth * 0.8;
 		var h = this.props.availHeight * 0.8;
-		var marginRight = this.isUploading_() ? 5 : 0;
 		var iconProps = {
 			key: 'icon',
 			sheetWidth: 10,
 			spriteWidth: piggyWidth,
 			spriteHeight: piggyHeight,
 			style: {
-				'margin-right': marginRight,
+				'margin-right': 3,
 				position: 'relative',
 				display: 'inline-block',
 			}
@@ -674,9 +685,16 @@ cam.IndexPage = React.createClass({
 					numFrames: 48,
 					src: 'glitch/npc_piggy__x1_chew_png_1354829433.png',
 				}));
+			} else if (this.state.dropActive) {
+				return cam.SpritedAnimation(cam.object.extend(iconProps, {
+					loopDelay: 4000,
+					numFrames: 48,
+					src: 'glitch/npc_piggy__x1_look_screen_png_1354829434.png',
+					startFrame: 6,
+				}));
 			} else {
 				return cam.SpritedImage(cam.object.extend(iconProps, {
-					index: 20,
+					index: 0,
 					src: 'glitch/npc_piggy__x1_look_screen_png_1354829434.png',
 				}));
 			}
@@ -686,7 +704,7 @@ cam.IndexPage = React.createClass({
 			if (this.isUploading_()) {
 				return goog.string.subs('Uploading (%s of %s)...', this.state.numUploadsComplete, this.state.numUploadsTotal);
 			} else {
-				return 'Drop files anywhere to upload...';
+				return 'Drop files here to upload...';
 			}
 		}
 
@@ -697,6 +715,7 @@ cam.IndexPage = React.createClass({
 				width: w,
 				height: h,
 				borderWidth: borderWidth,
+				onClose: this.state.uploadDialogVisible ? this.handleCloseUploadDialog_ : null,
 			},
 			React.DOM.div(
 				{
@@ -714,6 +733,12 @@ cam.IndexPage = React.createClass({
 		);
 	},
 
+	handleCloseUploadDialog_: function() {
+		this.setState({
+			uploadDialogVisible: false,
+		});
+	},
+
 	handleTagSelection_: function() {
 		this.setState({tagsControlVisible: !this.state.tagsControlVisible});
 	},

server/camlistored/ui/sprited_animation.js

@@ -29,12 +29,13 @@ cam.SpritedAnimation = React.createClass({
 		spriteHeight: React.PropTypes.number.isRequired,
 		spriteWidth: React.PropTypes.number.isRequired,
 		src: React.PropTypes.string.isRequired,
+		startFrame: React.PropTypes.number,
 		style: React.PropTypes.object,
 	},
 
 	getInitialState: function() {
 		return {
-			index: 0
+			index: this.props.startFrame || 0,
 		}
 	},