Code Cleanup + Added filelist header

4 files changed, 122 insertions, 78 deletions

diff --git a/www/static/browser.css b/www/static/browser.css
index ed532d1..e9efd93 100644
--- a/www/static/browser.css
+++ b/www/static/browser.css
@@ -1,36 +1,26 @@
 /************************************************
 File list
 *************************************************/
-table tr td {
-	padding: 0;
-	height: 30px;
+table.main-file-list{
 	width: 100%;
-	margin: 0;
+	border-collapse: collapse;
 }
 
-td{
-	width: 100%;
-}
 
-tr{
+tr.file-browser{
+	height: 30px;
 	width: 100%;
 }
 
-tr:hover{
+tr.file-browser:hover{
 	background: #CCCCCC;
 }
 
-table{
-	width: 100%;
-}
-
-
-#icon{
+td.file-icon{
 	width: 35px;
 	border: none;
 }
 
-
 a.file{
 	display: block;
 	text-decoration: none;
@@ -87,20 +77,6 @@ Menu
 Tools
 *************************************************/
 
-
-#new-folder-bg{
-	width: 100%;
-	height: 100%;
-	background: white;
-	position: fixed;
-	z-index: 99;
-	top: 0px;
-	opacity: 0.75;
-	visibility: hidden;
-}
-
-
-
 #new-folder-area{
 	height: 190px;
 	width: 400px;
@@ -145,7 +121,7 @@ input.new-folder-input:focus{
 }
 
 
-#upload-bg{
+#dialog-bg{
 	width: 100%;
 	height: 100%;
 	background: white;
@@ -206,7 +182,7 @@ label{
 	display: inline;
 }
 
-#close{
+.close-icon{
 		font-size: 25px;
 		position: absolute;
 		top: 0;
@@ -215,7 +191,9 @@ label{
 		cursor: pointer;
 }
 
-/*Context Menu*/
+/************************************************
+Context Menu
+*************************************************/
 #context-menu{
 	box-shadow: 1px 1px 1px 1px #1F3D4C;
 	background-color: white;
diff --git a/www/static/dropzone.css b/www/static/dropzone.css
index 7055e6c..01649de 100644
--- a/www/static/dropzone.css
+++ b/www/static/dropzone.css
@@ -1,29 +1,21 @@
+	/*Dropzone field*/
 	#dropzone{
 		width: 400px;
 		height: 150px;
 		border: 1px solid black;
 		text-align: center;
 		display: table;
-		
-
 	}
+	
+	/*Dropzone description text*/
 	#dropzone p{
 		display: table-cell;
-		color: red;		
 		vertical-align:middle;
 		font-size: 16pt;
 		color: grey;
 	}
 	
-	#filelist tr{
-		background: white;
-		width: 400px;
-	}
-	
-	#filelist tr:nth-child(odd){
-		background: #E6E6FF;
-	}
-	
+	/* wraps the upload queue table*/
 	#filelist-wrapper{
 		height: 120px;
 		overflow-y: auto;
@@ -33,14 +25,55 @@
 	
 	#filelist {
 		width: 400px;
-		
+		border-collapse: collapse;
+	}
+	
+	#filelist th{
+		background: green;
+	}
+	
+	#filelist tr{
+		background: white;
+		width: 400px;
+	}
+	
+	/*Set upload queue header alignment*/
+	#filename-head{
+		text-align: left;
+	}
+	
+	#filesize-head{
+		text-align:right;
+	}
+	
+	#public-head{
+		text-align: center;
+	}
+	
+	
+	
+	td.publicCol{
+		width: 80px;
+		text-align: center;
+		vertical-align: middle;
+	}
+	
+	td.filenameCol{
+		width: 130px;
+		overflow: hidden;
 	}
 	
 	.progressBar{
 		width: 100px;
 		height: 20px;
+		background-color: #f3f3f3;
+		border: 0;
+		height: 18px;
+		border-radius: 9px;
+		vertical-align: middle;
 	}
 	
+	
 	.progressCol{
 		width: 100px;
 		height: 20px;
diff --git a/www/static/js/browser.js b/www/static/js/browser.js
index 4d201b3..355683c 100644
--- a/www/static/js/browser.js
+++ b/www/static/js/browser.js
@@ -1,22 +1,22 @@
 
 function showNewFolder(){
-	document.getElementById("new-folder-bg").style.visibility = "visible";
+		document.getElementById("dialog-bg").style.visibility = "visible";
 	document.getElementById("new-folder-area").style.visibility = "visible";
 	return;
 }
 function hideNewFolder(){
-	document.getElementById("new-folder-bg").style.visibility = "hidden";
+		document.getElementById("dialog-bg").style.visibility = "hidden";
 	document.getElementById("new-folder-area").style.visibility = "hidden";
 	return;
 }
 
 function showUpload(){
-		document.getElementById("upload-bg").style.visibility = "visible";
-		document.getElementById("upload-area").style.visibility = "visible";
-		return;
+	document.getElementById("dialog-bg").style.visibility = "visible";
+	document.getElementById("upload-area").style.visibility = "visible";
+	return;
 }
 function hideUpload(){
-	document.getElementById("upload-bg").style.visibility = "hidden";
+	document.getElementById("dialog-bg").style.visibility = "hidden";
 	document.getElementById("upload-area").style.visibility = "hidden";
 	
 	//clean up
@@ -67,5 +67,4 @@ function hideMenu() {
 
 function copyToClipboard(text){
 	window.clip.setText(text);
-	alert("done");
 }
diff --git a/www/static/js/dropzone.js b/www/static/js/dropzone.js
index ba9b429..7accdc2 100644
--- a/www/static/js/dropzone.js
+++ b/www/static/js/dropzone.js
@@ -29,37 +29,71 @@ var	vfs_upload_queue = [];
 				break;
 				
 			}
+			
 			var filelist = document.getElementById("filelist");
-			var entry = document.createElement("tr");
 			
-			var filename = document.createElement("td");
-			filename.appendChild(document.createTextNode(file.name));
+			if(filelist.children.length==0){
+				var entry = document.createElement("tr");
+				var filenameCol = document.createElement("th");
+				filenameCol.id="filename-head";
+				filenameCol.appendChild(document.createTextNode("Name"));
+			
+				var filesizeCol = document.createElement("th");
+				filesizeCol.id = "filesize-head";
+				filesizeCol.appendChild(document.createTextNode("Size"));
+							
+				var publicCol = document.createElement("th");
+				publicCol.id="public-head";
+				var globeIcon = document.createElement("i");
+				globeIcon.className="fa fa-globe";
+				globeIcon.title="public";
+				publicCol.appendChild(globeIcon);
+				
+				
+				var progressCol = document.createElement("th");
+				progressCol.id="progress-head";
+				progressCol.appendChild(document.createTextNode("Progress"));
+				
+				
+				entry.appendChild(filenameCol);
+				entry.appendChild(filesizeCol);
+				entry.appendChild(publicCol);
+				entry.appendChild(progressCol);
+			
+				filelist.appendChild(entry);
+			}
+				var entry = document.createElement("tr");
+				var filename = document.createElement("td");
+				filename.className="filenameCol";
+				filename.appendChild(document.createTextNode(file.name));
 			
-			var filesize = document.createElement("td");
-			filesize.appendChild(document.createTextNode(Math.floor(file.size/1024*100)/100+"KB"));
-			filesize.className = "filesize";
+				var filesize = document.createElement("td");
+				filesize.appendChild(document.createTextNode(Math.floor(file.size/1024*100)/100+"KB"));
+				filesize.className = "filesize";
 			
-			var progressBar = document.createElement("progress");
-			progressBar.id="progressBar-"+file.name;
-			progressBar.className="progressBar";
-			var progressCol = document.createElement("td");
-			progressCol.className="progressCol";
-			progressCol.appendChild(progressBar);
+				var progressBar = document.createElement("progress");
+				progressBar.id="progressBar-"+file.name;
+				progressBar.className="progressBar";
+				var progressCol = document.createElement("td");
+				progressCol.className="progressCol";
+				progressCol.appendChild(progressBar);
 			
-			var publicCol = document.createElement("td");
-			var public_at = document.createElement("input");
-			public_at.type = "checkbox";
-			public_at.id = "public-"+file.name; 
-			publicCol.appendChild(public_at);
+				var publicCol = document.createElement("td");
+				publicCol.className="publicCol";
+				var public_at = document.createElement("input");
+				public_at.type = "checkbox";
+				public_at.id = "public-"+file.name; 
+				public_at.title="public";
+				publicCol.appendChild(public_at);
 			
-			entry.appendChild(filename);
-			entry.appendChild(filesize);
-			entry.appendChild(publicCol);
-			entry.appendChild(progressCol);
+				entry.appendChild(filename);
+				entry.appendChild(filesize);
+				entry.appendChild(publicCol);
+				entry.appendChild(progressCol);
 			
-			filelist.appendChild(entry);
-			vfs_upload_queue.push(file);
-		}
+				filelist.appendChild(entry);
+				vfs_upload_queue.push(file);
+			}
 	}
 	
 	function upload(){
@@ -91,7 +125,7 @@ var	vfs_upload_queue = [];
 			xhr.upload.onprogress= function(e){
 				if(e.lengthComputable){
 					document.getElementById("progressBar-"+this.filename).value = Math.floor(e.loaded/e.total*100);
-					console.log(Math.floor(done/total*100)+"%");
+					console.log(Math.floor(e.loaded/e.total*100)+"%");
 				}else{
 					alert("cant compute progress");
 				}