Code Cleanup + Added filelist header

5 files changed, 147 insertions, 104 deletions

diff --git a/www/browse.php b/www/browse.php
index 5741b45..bb7051d 100644
--- a/www/browse.php
+++ b/www/browse.php
@@ -34,19 +34,21 @@ function browse($content){
 	
 
 		if($content != EMPTY_FOLDER){
-			$file_list = "<tr><td colspan='2'><a class='file' id='up' href='/".$_GET["name"]."/".$_GET["folder"]."../'>&nbsp;..</a></td></tr>";
+			$file_list = "<tr class='file-browser file'><td colspan='2'><a class='file' id='up' href='/".$_GET["name"]."/".$_GET["folder"]."../'>&nbsp;..</a></td></tr>";
 			foreach($content as $file){
 				$file_list .= get_item($file);
 			} 
 		}else{
-			$file_list = "<tr><td><a class='file' id='up' href='/".$_GET["name"]."/".$_GET["folder"]."../'>&nbsp;..</a></td></tr>";
+			$file_list = "<tr class='file-browser file'><td><a class='file' id='up' href='/".$_GET["name"]."/".$_GET["folder"]."../'>&nbsp;..</a></td></tr>";
 		}
 		
 	
 		echo '<link rel="stylesheet" type="text/css" href="/static/browser.css">
 		<link rel="stylesheet" type="text/css" href="/static/dropzone.css">
 		<script src="/static/js/browser.js"></script>
-		<script src=/static/js/dropzone.js></script>';
+		<script src=/static/js/dropzone.js></script>
+		
+		<div id="dialog-bg"></div>';
 		
 		echo get_upload();
 		
@@ -79,7 +81,7 @@ function get_zero_clipboard(){
 }
 
 function get_file_list($file_list){
-	return '<table oncontextmenu="return false" onmousedown="hideMenu()" cellspacing="0" >'.$file_list.'</table>';
+	return '<table oncontextmenu="return false" class="file-browser main-file-list" onmousedown="hideMenu()">'.$file_list.'</table>';
 }
 
 function get_context_menu(){
@@ -105,12 +107,11 @@ function get_context_menu(){
 }
 
 function get_upload(){
-	return 	'<div id="upload-bg"></div>
-					<div id="upload-area">
+	return 	'<div id="upload-area" class="upload">
 						<h1 class="upload"> Upload </h1>
-						<a onclick="hideUpload()" class="new-folder" id="close">x</a>
-						<script>var folder=\''.$_GET["folder"].'\'</script>
+						<a onclick="hideUpload()" class="browser-dialog upload close-icon">x</a>
 						<input type="file" id="legacy-file" multiple onchange="legacyUpload()">
+						<script>var folder=\''.$_GET["folder"].'\'</script>
 						<div id="dropzone"  onclick="legacyUploadTrigger()" ondragover="dragover(event)" ondragleave="dragout(event)" ondrop="drop(event)"><p>Drop files here or click to upload</p></div>
 						
 						<div id="filelist-wrapper">
@@ -118,42 +119,40 @@ function get_upload(){
 						</table>
 						</div>
 						<button onclick="upload()" id="button-input" class="upload-input">upload</button>
-						<p id="progress-text"></p>
 					</div>';
 }
 
 function get_new_folder(){
-	return '<div id="new-folder-bg"></div>
-					<div id="new-folder-area">
-						<h1 class="new-folder"> New Folder </h1>
-						<a onclick="hideNewFolder()" class="new-folder" id="close">x</a>
-						<form id="new-folder-form" method="post" action="/'.$_GET["name"]."/".$_GET["folder"].'">
-							<input class="new-folder-input" id="new-folder-name" type="text" placeholder="name" name="foldername" required>
-							<input type="hidden" value="'.$_GET["folder"].'" name="path">
-							<input type="hidden" value="new-folder" name="task">
-							<label>Public</label><input  style="display:inline; margin-left: 5px;" class="new-folder-input" type="checkbox" name="share">
-							<p id="upload-message"></p>
-							<input onclick="hide-new-folder()" type="submit" id="button-input" class="new-folder-input" value="create">
-						</form>
-					</div>';
+	return '<div id="new-folder-area">
+				<h1 class="new-folder"> New Folder </h1>
+				<a onclick="hideNewFolder()" class="browser-dialog new-folder close-icon" >x</a>
+				<form id="new-folder-form" method="post" action="/'.$_GET["name"]."/".$_GET["folder"].'">
+					<input class="new-folder-input" id="new-folder-name" type="text" placeholder="name" name="foldername" required>
+					<input type="hidden" value="'.$_GET["folder"].'" name="path">
+					<input type="hidden" value="new-folder" name="task">
+					<label>Public</label><input  style="display:inline; margin-left: 5px;" class="new-folder-input" type="checkbox" name="share">
+					<p id="upload-message"></p>
+					<input onclick="hide-new-folder()" type="submit" id="button-input" class="new-folder-input" value="create">
+				</form>
+			</div>';
 }
 
 
 function get_icon($file){
 	if($file[4]=="DIRECTORY"){
-		return '<td id="icon">'.get_link($file).'<img src="/static/img/icon_folder.svg" width="30px"></a></td>';
+		return '<td class="file-browser file-icon" >'.get_link($file).'<img src="/static/img/icon_folder.svg" width="30px"></a></td>';
 	}else{
-		return '<td id="icon">'.get_link($file).'<img src="/static/img/icon_file.svg" width="30px"></a></td>';
+		return '<td class="file-browser file-icon">'.get_link($file).'<img src="/static/img/icon_file.svg" width="30px"></a></td>';
 	}
 }
 
 function get_link($file){
 	$slash = (($_GET["folder"]!="" && substr($_GET["folder"], -1) != "/"))? "/" : "";
-	return '<a oncontextmenu="showMenu(event)" id="" class="file" href="/'.$_GET["name"]."/".$_GET["folder"].$slash.$file[3].'/">';
+	return '<a oncontextmenu="showMenu(event)" class="file" href="/'.$_GET["name"]."/".$_GET["folder"].$slash.$file[3].'/">';
 }
 
 function get_item($file){
-	return '<tr>'.get_icon($file).'<td>'.get_link($file).$file[3].'</a></td></tr>';
+	return '<tr class="file-browser file">'.get_icon($file).'<td>'.get_link($file).$file[3].'</a></td></tr>';
 }
 
 function print_menu(){
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");
 				}