From c89bd0fc5efb765166e6e7630c9c62cf917c6bda Mon Sep 17 00:00:00 2001 From: oweissbarth Date: Wed, 23 Jul 2014 09:46:07 +0200 Subject: Code Cleanup + Added filelist header --- www/browse.php | 51 ++++++++++++++-------------- www/static/browser.css | 44 +++++++------------------ www/static/dropzone.css | 59 +++++++++++++++++++++++++-------- www/static/js/browser.js | 13 ++++---- www/static/js/dropzone.js | 84 +++++++++++++++++++++++++++++++++-------------- 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 = " .."; + $file_list = " .."; foreach($content as $file){ $file_list .= get_item($file); } }else{ - $file_list = " .."; + $file_list = " .."; } echo ' - '; + + +
'; echo get_upload(); @@ -79,7 +81,7 @@ function get_zero_clipboard(){ } function get_file_list($file_list){ - return ''.$file_list.'
'; + return ''.$file_list.'
'; } function get_context_menu(){ @@ -105,12 +107,11 @@ function get_context_menu(){ } function get_upload(){ - return '
-
+ return '

Upload

- x - + x +

Drop files here or click to upload

@@ -118,42 +119,40 @@ function get_upload(){
-

'; } function get_new_folder(){ - return '
-
-

New Folder

- x -
- - - - -

- -
-
'; + return '
+

New Folder

+ x +
+ + + + +

+ +
+
'; } function get_icon($file){ if($file[4]=="DIRECTORY"){ - return ''.get_link($file).''; + return ''.get_link($file).''; }else{ - return ''.get_link($file).''; + return ''.get_link($file).''; } } function get_link($file){ $slash = (($_GET["folder"]!="" && substr($_GET["folder"], -1) != "/"))? "/" : ""; - return ''; + return ''; } function get_item($file){ - return ''.get_icon($file).''.get_link($file).$file[3].''; + return ''.get_icon($file).''.get_link($file).$file[3].''; } 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"); } -- cgit v1.2.3