* file list reworked to jQuery DataTables

* finished Issue 39: Add jstoolbar to file list

git-svn-id: http://redmine-dmsf.googlecode.com/svn/trunk/redmine_dmsf@167 5e329b0b-a2ee-ea63-e329-299493fc886d

app/views/dmsf/_multi_upload.html.erb

@@ -65,7 +65,6 @@
 </script>
 
 <% content_for :header_tags do %>
-	<%= javascript_include_tag "jquery-ui-1.8.13.min.js", :plugin => "redmine_dmsf" %>
 	<%= javascript_include_tag "plupload/plupload.js", :plugin => "redmine_dmsf" %>
 	<%= javascript_include_tag "plupload/plupload.flash.js", :plugin => "redmine_dmsf" %>
 	<%= javascript_include_tag "plupload/plupload.gears.js", :plugin => "redmine_dmsf" %>

app/views/dmsf/show.html.erb

@@ -28,18 +28,20 @@ form_tag({:action => "entries_operation", :id => @project, :folder_id => @folder
 	:class => "dmfs_entries", :id => "entries_form") do
 %>
 	<%= hidden_field_tag("action") %> 
-	<table class="list entries" id="browser">
+	<table class="display entries list" id="browser">
 		<thead>
 			<tr id="root">
 				<th class="check">
 					<input id="check_all_entries" title="<%= l(:title_check_uncheck_all_for_zip_download_or_email) %>" type="checkbox" />
 				</th>
-				<%= sort_header_tag("title", :caption => l(:link_title)) %>
+				<th><%= l(:link_title) %></th>
-				<%= sort_header_tag("size", :caption => l(:link_size)) %>
+				<th><%= l(:link_size) %></th>
-				<%= sort_header_tag("modified", :caption => l(:link_modified)) %>
+				<th><%= l(:link_modified) %></th>
-				<%= sort_header_tag("version", :caption => l(:link_ver)) %>
+				<th><%= l(:link_ver) %></th>
-				<%= sort_header_tag("author", :caption => l(:link_author)) %>
+				<th><%= l(:link_author) %></th>
 				<th></th>
+				<th class="hidden"></th>
+				<th class="hidden"></th>
 			</tr>
 		</thead>
 	<tbody>
@@ -87,6 +89,8 @@ form_tag({:action => "entries_operation", :id => @project, :folder_id => @folder
 				</div>
 				<br class="clear" />
 			</td>
+			<td class="hidden">0</td>
+			<td class="hidden"><%= subfolder.deep_file_count %></td>
 		</tr>
 	<% end %>
 	<% @files.each do |file| %>
@@ -164,19 +168,18 @@ form_tag({:action => "entries_operation", :id => @project, :folder_id => @folder
 				</div>
 				<br class="clear" />
 			</td>
+			<td class="hidden">1</td>
+			<td class="hidden"><%=file.last_revision.size%></td>
 		</tr>
 	<% end %>
 	</tbody>
 	</table>
-	<div class="controls">
+	<div class="controls" style="float: left">
 		<%= submit_tag(l(:submit_download), :title => l(:title_download_checked), :name => "download_entries") %>
 		<%= submit_tag(l(:submit_email), :title => l(:title_send_checked_by_email), :name => "email_entries") %>
 		<% if User.current.allowed_to?(:file_manipulation, @project) %>
 			<button type="button" id="entries_delete_button" title="<%=l(:title_delete_checked)%>"><%=l(:button_delete)%></button>
 		<% end %>
-		<div style="float: right;">
-			<%= l(:label_number_of_folders)%>: <%= @subfolders.length %>, <%= l(:label_number_of_documents)%>: <%= @files.length %>
-		</div>
 	</div>
 	<br />
 <% end %>
@@ -203,14 +206,45 @@ form_tag({:action => "entries_operation", :id => @project, :folder_id => @folder
 	})			
 </script>
 
+<%
+sUrl = "jquery.dataTables/en.json"
+sUrl = "jquery.dataTables/#{I18n.locale.to_s.downcase}.json" if I18n.locale && !I18n.locale.to_s.match(/^en.*/)
+%>
+
 <% content_for :header_tags do %>
 	<%= stylesheet_link_tag "jquery-ui/jquery-ui-1.8.13.css", :plugin => "redmine_dmsf" %>
 	<%= stylesheet_link_tag "plupload/jquery.ui.plupload.css", :plugin => "redmine_dmsf" %>
+	<%= stylesheet_link_tag "jquery.dataTables/jquery-ui.dataTables.css", :plugin => "redmine_dmsf" %>
 	<%= stylesheet_link_tag "dmsf", :plugin => "redmine_dmsf" %>
 	
 	<%= javascript_include_tag "jquery-1.6.1.min.js", :plugin => "redmine_dmsf" %>
+	<%= javascript_include_tag "jquery-ui-1.8.13.min.js", :plugin => "redmine_dmsf" %>
+	<%= javascript_include_tag "jquery.dataTables/jquery.dataTables.min.js", :plugin => "redmine_dmsf" %>
 	<script type="text/javascript">
 		jQuery.noConflict();
+		jQuery(document).ready(function() {
+			jQuery("#browser").dataTable({
+				"bJQueryUI": true,
+				"oLanguage": {
+					'sUrl': '<%= Engines::RailsExtensions::AssetHelpers.plugin_asset_path("redmine_dmsf", "javascripts", sUrl) %>'	
+				},
+				"bAutoWidth": false,
+				"bPaginate": false,
+				"aaSorting": [[1,'asc']],
+				"aaSortingFixed": [[7,'asc']],
+				"aoColumnDefs": [
+					{ "bSearchable": false, "aTargets": [0, 6, 7, 8] },
+					{ "bSortable": false, "aTargets": [0, 6, 7] },
+					{ "iDataSort": 8, "aTargets": [ 2 ] }
+				],
+				"fnInitComplete": function() {
+					jQuery("div.controls").prependTo(jQuery("#browser_wrapper div.fg-toolbar")[0]);
+				},
+				"fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
+					return "<%= l(:label_number_of_folders)%>: <%= @subfolders.length %>, <%= l(:label_number_of_documents)%>: <%= @files.length %>";
+				}
+			});
+		});
 	</script>
 <% end %>
 

app/views/dmsf_files/_revision_access.html.erb

@@ -1,5 +1,5 @@
 <p>
-	<table id="table_id" style="width: 100%" class="display access-table">
+	<table class="display access-table list">
 		<thead>
 			<tr>
 				<th><%=l(:field_user)%></th>

app/views/dmsf_files/show.html.erb

@@ -151,7 +151,6 @@ sUrl = "jquery.dataTables/#{I18n.locale.to_s.downcase}.json" if I18n.locale && !
 	
 	jQuery(".access-table").dataTable({
 		"bJQueryUI": true,
-		"sPaginationType": "full_numbers",
 		"oLanguage": {
 			'sUrl': '<%= Engines::RailsExtensions::AssetHelpers.plugin_asset_path("redmine_dmsf", "javascripts", sUrl) %>'	
 		}

assets/stylesheets/dmsf.css

@@ -10,7 +10,6 @@ table.entries tbody td, table.entries tbody tr:hover td {
 }
 
 table.entries  {
-	margin-bottom: 10px;
 }
 
 table.entries td.modified {
@@ -25,12 +24,16 @@ table.entries td.title {
 	width: 50%;
 }
 
-table.entries th.check {
+table.entries th.check, table.entries td.check {
 	width: 17px; 
 	padding: 2px; 
 	text-align: left;
 }
 
+table.entries th.check div.DataTables_sort_wrapper {
+	padding: 0;
+}
+
 .icon-file.filetype-doc, .icon-file.filetype-docx {
 	background-image: url(../images/filetypes/doc.png);
 }
@@ -192,3 +195,7 @@ p.no-ident {
 	margin-bottom: 0;
 	margin-top: 0;
 }
+
+table.access-table tbody td, table.access-table tbody tr:hover td {
+	border: solid 1px #D7D7D7;
+}

assets/stylesheets/jquery.dataTables/jquery-ui.dataTables.css

@@ -1,32 +1,3 @@
-/*
- *  File:         demo_table_jui.css
- *  CVS:          $Id$
- *  Description:  CSS descriptions for DataTables demo pages
- *  Author:       Allan Jardine
- *  Created:      Tue May 12 06:47:22 BST 2009
- *  Modified:     $Date$ by $Author$
- *  Language:     CSS
- *  Project:      DataTables
- *
- *  Copyright 2009 Allan Jardine. All Rights Reserved.
- *
- * ***************************************************************************
- * DESCRIPTION
- *
- * The styles given here are suitable for the demos that are used with the standard DataTables
- * distribution (see www.datatables.net). You will most likely wish to modify these styles to
- * meet the layout requirements of your site.
- *
- * Common issues:
- *   'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is
- *     no conflict between the two pagination types. If you want to use full_numbers pagination
- *     ensure that you either have "example_alt_pagination" as a body class name, or better yet,
- *     modify that selector.
- *   Note that the path used for Images is relative. All images are by default located in
- *     ../images/ - relative to this CSS file.
- */
-
-
 /*
  * jQuery UI specific styling
  */
@@ -276,17 +247,6 @@ table.display tr.even.gradeU {
 }
 
 
-tr.odd {
-	background-color: #E2E4FF;
-}
-
-tr.even {
-	background-color: white;
-}
-
-
-
-
 
 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  * Misc
@@ -372,144 +332,25 @@ table.display tr.odd.row_selected td {
  */
 /* For the standard odd/even */
 tr.odd td.sorting_1 {
-	background-color: #D3D6FF;
+	background: url('images/highlight.png?2') repeat;
 }
 
 tr.odd td.sorting_2 {
-	background-color: #DADCFF;
+	background: url('images/highlight.png?5') repeat;
 }
 
 tr.odd td.sorting_3 {
-	background-color: #E0E2FF;
+	background: url('images/highlight.png?5') repeat;
 }
 
 tr.even td.sorting_1 {
-	background-color: #EAEBFF;
+	background: url('images/highlight.png?5') repeat;
 }
 
 tr.even td.sorting_2 {
-	background-color: #F2F3FF;
+	background: url('images/highlight.png?5') repeat;
 }
 
 tr.even td.sorting_3 {
-	background-color: #F9F9FF;
+	background: url('images/highlight.png?5') repeat;
-}
-
-
-/* For the Conditional-CSS grading rows */
-/*
- 	Colour calculations (based off the main row colours)
-  Level 1:
-		dd > c4
-		ee > d5
-	Level 2:
-	  dd > d1
-	  ee > e2
- */
-tr.odd.gradeA td.sorting_1 {
-	background-color: #c4ffc4;
-}
-
-tr.odd.gradeA td.sorting_2 {
-	background-color: #d1ffd1;
-}
-
-tr.odd.gradeA td.sorting_3 {
-	background-color: #d1ffd1;
-}
-
-tr.even.gradeA td.sorting_1 {
-	background-color: #d5ffd5;
-}
-
-tr.even.gradeA td.sorting_2 {
-	background-color: #e2ffe2;
-}
-
-tr.even.gradeA td.sorting_3 {
-	background-color: #e2ffe2;
-}
-
-tr.odd.gradeC td.sorting_1 {
-	background-color: #c4c4ff;
-}
-
-tr.odd.gradeC td.sorting_2 {
-	background-color: #d1d1ff;
-}
-
-tr.odd.gradeC td.sorting_3 {
-	background-color: #d1d1ff;
-}
-
-tr.even.gradeC td.sorting_1 {
-	background-color: #d5d5ff;
-}
-
-tr.even.gradeC td.sorting_2 {
-	background-color: #e2e2ff;
-}
-
-tr.even.gradeC td.sorting_3 {
-	background-color: #e2e2ff;
-}
-
-tr.odd.gradeX td.sorting_1 {
-	background-color: #ffc4c4;
-}
-
-tr.odd.gradeX td.sorting_2 {
-	background-color: #ffd1d1;
-}
-
-tr.odd.gradeX td.sorting_3 {
-	background-color: #ffd1d1;
-}
-
-tr.even.gradeX td.sorting_1 {
-	background-color: #ffd5d5;
-}
-
-tr.even.gradeX td.sorting_2 {
-	background-color: #ffe2e2;
-}
-
-tr.even.gradeX td.sorting_3 {
-	background-color: #ffe2e2;
-}
-
-tr.odd.gradeU td.sorting_1 {
-	background-color: #c4c4c4;
-}
-
-tr.odd.gradeU td.sorting_2 {
-	background-color: #d1d1d1;
-}
-
-tr.odd.gradeU td.sorting_3 {
-	background-color: #d1d1d1;
-}
-
-tr.even.gradeU td.sorting_1 {
-	background-color: #d5d5d5;
-}
-
-tr.even.gradeU td.sorting_2 {
-	background-color: #e2e2e2;
-}
-
-tr.even.gradeU td.sorting_3 {
-	background-color: #e2e2e2;
-}
-
-
-/*
- * Row highlighting example
- */
-.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
-	background-color: #ECFFB3;
-}
-
-.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
-	background-color: #E6FF99;
 }