some work on the updated interface

6 files changed, 121 insertions, 35 deletions

diff --git a/files/css/files.css b/files/css/files.css
index f4da6fae98c..f119fe90a74 100644
--- a/files/css/files.css
+++ b/files/css/files.css
@@ -73,7 +73,9 @@
 /* FILE TABLE */
 
 table {
-	width: 90%;
+	position:relative;
+	top:37px;
+	width: 100%;
 }
 
 tbody tr:hover, tbody tr:active, tbody tr.selected { background-color:#eee; }
@@ -118,4 +120,46 @@ span.extention{
 
 div.crumb{
 	float:left;
+	background-repeat:no-repeat;
+	background-position:right 0px;
+	font-size:20px;
+	padding:8px;
+}
+
+table tr.mouseOver td { background-color:#eee; }
+table th, table td { padding:0; border-bottom:1px solid #ddd; text-align:left; font-style:italic; }
+table th { padding:0.5em; }
+table td { border-bottom:1px solid #eee; font-style:normal; }
+table td.filesize, table td.date { width:5em; padding:0.5em 1em; text-align:right; }
+table td.date { width:11em; }
+table td.selection, table th.selection, table td.fileaction { width:2em; text-align:center; }
+table td.filename a { display:block; background-image:url('../img/file.png'); text-decoration:none; }
+table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:0.5em 0.5em 0.5em 3em; background-position:1em center; background-repeat:no-repeat; }
+table td.filename a:hover, table td.filename a:focus { outline:0; }
+table td.filename a:active { outline:0; }
+table em { font-weight:bold; }
+table td.filename a.folder-up { background-image:url('../img/back.png'); font-style:italic; }
+table td.filename a.folder { background-image:url('../img/folder.png'); }
+table td.filename a.folder-home { background-image:url('../img/home.png'); }
+table td.filename a.folder-music { background-image:url('../img/folder-music.png'); }
+table td.filename a.folder-videos { background-image:url('../img/folder-video.png'); }
+table td.filename a.folder-shared { background-image:url('../img/folder-shared.png'); }
+table td.filename a.folder-images { background-image:url('../img/folder-image.png'); }
+table td.filename a.file-txt { background-image:url('../img/file-txt.png'); }
+table td.filename a.file-python { background-image:url('../img/file-python.png'); }
+table td.filename a.file-php { background-image:url('../img/file.png'); }
+table td.login { background-image:url('../img/login.png'); }
+table td.logout { background-image:url('../img/logout.png'); }
+table td.download { background-image:url('../img/download.png'); }
+table td.upload { background-image:url('../img/upload.png'); }
+table td.create { background-image:url('../img/folder-new.png'); }
+table td.delete { background-image:url('../img/delete.png'); }
+#fileList tr input[type=checkbox] { display:none; float:left; margin:0.7em; margin-left:1em; }
+#fileList tr input[type=checkbox]:checked { display:inline; }
+#fileList tr:hover input[type=checkbox] { display:inline; }
+#fileList tr:hover td.filename a{background-image:none !important}
+#fileList tr.selected td.filename a{background-image:none !important}
+#select_all{float:left; margin:0.2em; margin-left:0.6em; }
+#selectedActions{
+	float:right;
 }
\ No newline at end of file
diff --git a/files/js/filelist.js b/files/js/filelist.js
index 2c662087ab2..9300e311076 100644
--- a/files/js/filelist.js
+++ b/files/js/filelist.js
@@ -5,11 +5,9 @@ FileList={
 	addFile:function(name,size,lastModified,loading){
 		var img=(loading)?'img/loading.gif':'img/file.png';
 		var html='<tr data-file="'+name+'" data-type="file">';
-		html+='<td class="selection"><input type="checkbox" /></td>';
-		html+='<td class="filename"><a style="background-image:url('+img+')" href="download.php?file='+$('#dir').val()+'/'+name+'">'+name+'</a></td>';
+		html+='<td class="filename"><input type="checkbox" /><a style="background-image:url('+img+')" href="download.php?file='+$('#dir').val()+'/'+name+'">'+name+'</a></td>';
 		html+='<td class="filesize">'+size+'</td>';
 		html+='<td class="date">'+lastModified+'</td>';
-		html+='<td class="fileaction"><a href="" title="+" class="dropArrow"></a></td>';
 		html+='</tr>';
 		FileList.insertElement(name,'file',$(html));
 		if(loading){
@@ -20,11 +18,9 @@ FileList={
 	},
 	addDir:function(name,size,lastModified){
 		var html='<tr data-file="'+name+'" data-type="dir">';
-		html+='<td class="selection"><input type="checkbox" /></td>';
-		html+='<td class="filename"><a style="background-image:url(img/folder.png)" href="index.php?dir='+$('#dir').val()+'/'+name+'"><strong>'+name+'</strong></a></td>';
+		html+='<td class="filename"><input type="checkbox" /><a style="background-image:url(img/folder.png)" href="index.php?dir='+$('#dir').val()+'/'+name+'"><strong>'+name+'</strong></a></td>';
 		html+='<td class="filesize">'+size+'</td>';
 		html+='<td class="date">'+lastModified+'</td>';
-		html+='<td class="fileaction"><a href="" title="+" class="dropArrow"></a></td>';
 		html+='</tr>';
 		
 		FileList.insertElement(name,'dir',$(html));
diff --git a/files/js/files.js b/files/js/files.js
index d4191215972..4a3de095509 100644
--- a/files/js/files.js
+++ b/files/js/files.js
@@ -54,24 +54,27 @@ $(document).ready(function() {
 	$('#select_all').click(function() {
 		if($(this).attr('checked')){
 			// Check all
-			$('td.selection input:checkbox').attr('checked', true);
-			$('td.selection input:checkbox').parent().parent().addClass('selected');
+			$('td.filename input:checkbox').attr('checked', true);
+			$('td.filename input:checkbox').parent().parent().addClass('selected');
 		}else{
 			// Uncheck all
-			$('td.selection input:checkbox').attr('checked', false);
-			$('td.selection input:checkbox').parent().parent().removeClass('selected');
+			$('td.filename input:checkbox').attr('checked', false);
+			$('td.filename input:checkbox').parent().parent().removeClass('selected');
 		}
+		procesSelection();
 	});
 	
-	$('td.selection input:checkbox').live('click',function() {
+	$('td.filename input:checkbox').live('click',function() {
+		var selectedCount=$('td.filename input:checkbox:checked').length;
 		$(this).parent().parent().toggleClass('selected');
 		if(!$(this).attr('checked')){
 			$('#select_all').attr('checked',false);
 		}else{
-			if($('td.selection input:checkbox:checked').length==$('td.selection input:checkbox').length){
+			if(selectedCount==$('td.filename input:checkbox').length){
 				$('#select_all').attr('checked',true);
 			}
 		}
+		procesSelection();
 	});
 	
 	$('#file_newfolder_form').submit(function(event) {
@@ -109,7 +112,7 @@ $(document).ready(function() {
 	
 	$('.download').live('click',function(event) {
 		var files='';
-		$('td.selection input:checkbox:checked').parent().parent().each(function(i,element){
+		$('td.filename input:checkbox:checked').parent().parent().each(function(i,element){
 			files+=';'+$(element).attr('data-file');
 		});
 		files=files.substr(1);//remove leading ;
@@ -121,9 +124,9 @@ $(document).ready(function() {
 		return false;
 	});
 	
-	$('.delete').live('click',function(event) {
+	$('.delete').click(function(event) {
 		var files='';
-		$('td.selection input:checkbox:checked').parent().parent().each(function(i,element){
+		$('td.filename input:checkbox:checked').parent().parent().each(function(i,element){
 			files+=';'+$(element).attr('data-file');
 		});
 		files=files.substr(1);//remove leading ;
@@ -133,7 +136,7 @@ $(document).ready(function() {
 			data: "dir="+$('#dir').val()+"&files="+encodeURIComponent(files),
 			complete: function(data){
 				boolOperationFinished(data, function(){
-					$('td.selection input:checkbox:checked').parent().parent().each(function(i,element){
+					$('td.filename input:checkbox:checked').parent().parent().each(function(i,element){
 						FileList.remove($(element).attr('data-file'));
 					});
 				});
@@ -282,4 +285,49 @@ var folderDropOptions={
 		});}
 		});
 	}
+}
+
+function procesSelection(){
+	var selectedFiles=$('tr[data-type="file"]>td.filename>input:checkbox:checked').parent().parent();
+	var selectedFolders=$('tr[data-type="dir"]>td.filename>input:checkbox:checked').parent().parent();
+	if(selectedFiles.length==0 && selectedFolders.length==0){
+		$('#headerName>span.name').text('Name');
+		$('#headerSize').text('Size (MB)');
+	}else{
+		var totalSize=0;
+		selectedFiles.each(function(){
+			totalSize+=parseInt($(this).attr('data-size'));
+		});
+		selectedFolders.each(function(){
+			totalSize+=parseInt($(this).attr('data-size'));
+		});
+		if(totalSize>0){
+			totalSize = Math.round(totalSize/(1024*102.4))/10;
+			if(totalSize < 0.1) {
+				totalSize='<0.1'; 
+			}else if(totalSize > 1000) {
+				totalSize= '>1000'; 
+			}
+		}
+		$('#headerSize').text(totalSize+' (MB)');
+		var selection='';
+		if(selectedFiles.length>0){
+			if(selectedFiles.length==1){
+				selection+='1 File';
+			}else{
+				selection+=selectedFiles.length+' Files';
+			}
+			if(selectedFolders.length>0){
+				selection+=' ,';
+			}
+		}
+		if(selectedFolders.length>0){
+			if(selectedFolders.length==1){
+				selection+='1 Folder';
+			}else{
+				selection+=selectedFolders.length+' Folders';
+			}
+		}
+		$('#headerName>span.name').text(selection+' Selected');
+	}
 }
\ No newline at end of file
diff --git a/files/templates/index.php b/files/templates/index.php
index efc92900637..7cdb81b2d66 100644
--- a/files/templates/index.php
+++ b/files/templates/index.php
@@ -1,4 +1,7 @@
 <div class="controls">
+	<span class="nav">
+		<?php echo($_['breadcrumb']); ?>
+	</span>
 	<div class="actions">
 		<form data-upload-id='1' class="file_upload_form" action="ajax/upload.php" method="post" enctype="multipart/form-data" target="file_upload_target_1">
 			<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $_["uploadMaxFilesize"] ?>" id="max_upload">
@@ -14,26 +17,25 @@
 			<input type="text" class="prettybutton" name="file_newfolder_name" id="file_newfolder_name" value="New Folder" />&nbsp;
 			<input class="prettybutton" type="submit" id="file_newfolder_submit" name="file_newfolder_submit" value="OK" />
 		</form>
-		<a href="" title="" class="download"><?php echo $l->t( 'Download' ); ?></a>
-		<!--<a href="" title="" class="share"><?php echo $l->t( 'Share' ); ?></a>-->
-		<a href="" title="" class="delete"><?php echo $l->t( 'Delete' ); ?></a>
 	</div>
 	<div id="file_action_panel">
 	</div>
 </div>
 
-<span class="nav">
-	<?php echo($_['breadcrumb']); ?>
-</span>
-
 <table cellspacing="0">
 	<thead>
 		<tr>
-			<th><input type="checkbox" id="select_all" /></th>
-			<th><?php echo $l->t( 'Name' ); ?></th>
-			<th><?php echo $l->t( 'Size (MB)' ); ?></th>
+			<th id='headerName'>
+				<input type="checkbox" id="select_all" />
+				<span class='name'><?php echo $l->t( 'Name' ); ?></span>
+				<span id='selectedActions'>
+					<a href="" title="" class="download">Download</a> 
+					<!--<a href="" title="" class="share">Share</a>--> 
+					<a href="" title="" class="delete">Delete</a> 
+				</span>
+			</th>
+			<th id='headerSize'><?php echo $l->t( 'Size (MB)' ); ?></th>
 			<th><?php echo $l->t( 'Modified' ); ?></th>
-			<th></th>
 		</tr>
 	</thead>
 	<tbody id="fileList">
diff --git a/files/templates/part.breadcrumb.php b/files/templates/part.breadcrumb.php
index 64e0a474728..20c436926c6 100644
--- a/files/templates/part.breadcrumb.php
+++ b/files/templates/part.breadcrumb.php
@@ -1,8 +1,5 @@
-	<div class='crumb' data-dir='/'>
-		<a href="<?php echo link_to("files", "index.php"); ?>"><img src="<?php echo image_path("", "actions/go-home.png"); ?>" alt="Root"/></a>
-	</div>
 	<?php foreach($_["breadcrumb"] as $crumb): ?>
-		<div class='crumb' data-dir='<?php echo $crumb["dir"];?>'>
+		<div class='crumb' data-dir='<?php echo $crumb["dir"];?>' style='background-image:url("<?php echo image_path('core','breadcrumb-divider.png');?>")'>
 			<a href="<?php echo link_to("files", "index.php?dir=".$crumb["dir"]); ?>"><?php echo htmlspecialchars($crumb["name"]); ?></a>
 		</div>
 	<?php endforeach; ?>
\ No newline at end of file
diff --git a/files/templates/part.list.php b/files/templates/part.list.php
index d717f288851..1468f485c23 100644
--- a/files/templates/part.list.php
+++ b/files/templates/part.list.php
@@ -1,9 +1,9 @@
 		<?php foreach($_['files'] as $file):
 			$simple_file_size = simple_file_size($file['size']);
 			$simple_size_color = 200-intval(pow(($file['size']/(1024*1024)),2)); ?>
-			<tr data-file="<?php echo $file['name'];?>" data-type="<?php echo ($file['type'] == 'dir')?'dir':'file'?>" data-mime="<?php echo $file['mime']?>">
-				<td class="selection"><input type="checkbox" /></td>
+			<tr data-file="<?php echo $file['name'];?>" data-type="<?php echo ($file['type'] == 'dir')?'dir':'file'?>" data-mime="<?php echo $file['mime']?>" data-size='<?php echo $file['size'];?>'>
 				<td class="filename">
+					<input type="checkbox" />
 					<a style="background-image:url(<?php if($file['type'] == 'dir') echo mimetype_icon('dir'); else echo mimetype_icon($file['mime']); ?>)" href="<?php if($file['type'] == 'dir') echo link_to('files', 'index.php?dir='.$file['directory'].'/'.$file['name']); else echo link_to('files', 'download.php?file='.$file['directory'].'/'.$file['name']); ?>" title="">
 						<?php if($file['type'] == 'dir'):?>
 							<strong><?php echo htmlspecialchars($file['name']);?></strong>
@@ -14,6 +14,5 @@
 				</td>
 				<td class="filesize" title="<?php echo human_file_size($file['size']); ?>" style="color:rgb(<?php echo $simple_size_color.','.$simple_size_color.','.$simple_size_color ?>)"><?php echo $simple_file_size; ?></td>
 				<td class="date"><?php echo $file['date']; ?></td>
-				<td class="fileaction"><a href="" title="+" class="dropArrow"></a></td>
 			</tr>
 		<?php endforeach; ?>