* 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
This commit is contained in:
vit.jonas@gmail.com 2011-06-17 11:55:11 +00:00
parent 40f773d386
commit 6c5119d0cf
7 changed files with 60 additions and 180 deletions

View File

@ -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" %>

View File

@ -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)) %>
<%= sort_header_tag("size", :caption => l(:link_size)) %>
<%= sort_header_tag("modified", :caption => l(:link_modified)) %>
<%= sort_header_tag("version", :caption => l(:link_ver)) %>
<%= sort_header_tag("author", :caption => l(:link_author)) %>
<th><%= l(:link_title) %></th>
<th><%= l(:link_size) %></th>
<th><%= l(:link_modified) %></th>
<th><%= l(:link_ver) %></th>
<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 %>

View File

@ -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>

View File

@ -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) %>'
}

View File

@ -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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 B

View File

@ -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;
}
/* 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;
background: url('images/highlight.png?5') repeat;
}