socialforge/app/views/files/index.html.erb

<!-- <h3> --><!-- %=l(:label_attachment_plural)%></h3 -->
<style>
#ver-zebra, .file_table_des
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 5px 10px;
	width: 98%;
	text-align: left;
	border-collapse: collapse;
  line-height: 20px;
  font-size: 14px;
}
#ver-zebra th
{
	font-size: 14px;
	font-weight: normal;
	padding: 12px 15px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	color: #039;
	text-align: left;
}
#ver-zebra td
{
	padding: 8px 15px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	color: #669;
}
#ver-zebra td.description {
  background-color: white;
  padding: 0px;
  margin: 0px auto;
}
div.tags_area {
  padding: 2px 10px 10px 10px;
  margin: 0px;
  margin-bottom: 10px;
  /*border-bottom: 1px dashed #CCCCCC;*/
  overflow: hidden;
  position: relative;
}
.tags_gradint {
}
.read-more{
  padding: 5px;
  border-top: 4px double #ddd;
  background: #fff;
  color: #333;
}
.read-more a{
  padding-right: 22px;
  background: url() no-repeat 100% 50%;
  font-weight: bold;
  text-decoration: none;
}
.read-more a:hover{
  color: #000;
}
.vzebra-odd
{
	background: #eff2ff;
}
.vzebra-even
{
	background: #e8edff;
}
#ver-zebra #vzebra-adventure, #ver-zebra #vzebra-children
{
	background: #ffffff;
	border-bottom: 1px solid #c8d4fd;
}
#ver-zebra #vzebra-comedy, #ver-zebra #vzebra-action
{
	background: #ffffff;
	border-bottom: 1px solid #d6dfff;
}
.filename{
	overflow: hidden; 
	white-space: nowrap; 
	text-overflow: ellipsis;
}
div.pagination{
  margin: 10px 0px;
  height: 1.5em;
  text-align: left;
  font-size: 13px;
}
.m5p5{
  display: inline-block;
  height: auto;
  color: white !important; 
  margin: 8px;
  padding: 3px 7px;
}
.m5p5:hover {
  text-decoration: none;
  /*padding-bottom: 3px;*/
  /*border-bottom: 1px solid #666666;*/
  border-radius: 4px;
  border: 1px solid #15bccf;
  box-shadow: 3px 3px 3px #666666;
}
.relation_file_div{
  margin: 0px 25px;
}
.relation_file_div fieldset{
  margin: 0px 0px;
  padding: 10px;
  border-radius: 5px;
  transition: all 2s linear 1s;
}
.relation_file_div input#attach_search:focus{
  border: 1px solid #1B95C6;
  box-shadow: 0px 0px 4px #1B95C6;
  width: 200px;
}
.relation_file_div input#attach_search{
  width: 150px;
  outline: none;
  border-radius: 5px;
  -webkit-transition: 1s width;
  -moz-transition   : 1s width;
  -o-transition     : 1s width;
  transition        : 1s width;
}
</style>

 
<span class="borad-title"><%=(@project.project_type == 1) ? t(:label_user_course) : t(:label_project) %>文件共享专区</span>

<div class="content-title-top">
  <%#= link_to(l(:label_attachment_new), 'javascript:void(0);', :onclick=>"$('#file_buttons').slideToggle();", :class => 'icon icon-add') if User.current.allowed_to?(:manage_files, @project) %>
  <div class="clearfix"></div>
  <div id="file_buttons" class="nhidden">
    <%#= link_to('上传文件', new_project_file_path(@project), :class => 'icon m5p5 button_submit') if User.current.allowed_to?(:manage_files, @project) %>
    <%= link_to('上传文件', 'javascript:void(0);', :class => 'icon m5p5 button_submit', :onclick => "$('#relation_file_div').slideUp();$('#upload_file_div').slideToggle('slow');") if User.current.allowed_to?(:manage_files, @project) %>
    <%= link_to('关联已有文件', 'javascript:void(0);', :onclick => "$('#upload_file_div').slideUp();$('#relation_file_div').slideToggle();", :class => 'icon m5p5 button_submit') if User.current.allowed_to?(:manage_files, @project) %>
    <div id="upload_file_div" class="relation_file_div hidden" >
      <%= render :partial => 'new', locals: {project: @project}%>
    </div> 
    <div id="relation_file_div" class="relation_file_div hidden" >
      <fieldset>
        <legend>搜索</legend>
      <%= form_tag(
          attachments_autocomplete_path(:format => 'js'), 
          :remote => true,
          :method => :post) do %>
        <%= label_tag(:attach_search, "按关键字搜索:") %>
        <%= text_field_tag(:attach_search) %>
        <%#= submit_tag("Search") %>
      <% end -%>
      <%= form_tag attach_relation_path(:format => 'js'), 
          method: :post, 
          remote: true, 
          id:"relation_file_form",
          :class => 'hidden' do %>
        <%= hidden_field_tag(:class_name, 'Project') %>
        <%= hidden_field_tag(:class_id, params[:project_id]) %>
        <div id="relation_file" >
        </div>
        <div class="kclearfix" style='margin-top: 10px;' >
          <%= submit_tag(l(:button_add)) -%>
        </div>
      <% end -%>  
      </fieldset>
      <div class="line_under" style="margin:20px 0px;"></div>
  </div>
  </div>

</div>  
<%= javascript_tag "observeSearchfield('attach_search', null, '#{ escape_javascript attachments_autocomplete_path(:project_id => @project.id, :format => 'js') }')" %>


<% delete_allowed = User.current.allowed_to?(:manage_files, @project) %>
<table class="list files" id="ver-zebra" >
	<colgroup>
    	<col class="vzebra-odd" />
    	<col class="vzebra-even" />
    	<col class="vzebra-odd" />
      <col class="vzebra-even" />
      <col class="vzebra-odd" />
  </colgroup>
  <thead><tr>
    <%= sort_header_tag('filename', :caption => l(:field_filename), :scope =>"col" , :id => "vzebra-adventure")%>
    <%= sort_header_tag('created_on', :caption => l(:label_date), :default_order => 'desc', :scope =>"col" , :id => "vzebra-comedy")%>
    <%= sort_header_tag('size', :caption => l(:field_filesize), :default_order => 'desc', :scope =>"col", :id=> "vzebra-children")%>
    <%= sort_header_tag('downloads', :caption => l(:field_downloads), :default_order => 'desc', :scope =>"col", :id => "vzebra-action") %>
    <%= sort_header_tag('operation', :caption => "", :scope =>"col", :id => "vzebra-children") %>
    <!-- <%= sort_header_tag('description', :caption => l(:field_description)) %> -->
  </tr></thead>
  <tbody>
    <% @containers.each do |container| %>
    <% next if container.attachments.empty? -%>
    <% if container.is_a?(Version) -%>
    <tr>
      <th colspan="5" align="left" style="line-height: 30px; font-size: 14px; ">
        <%= link_to(h(container), {:controller => 'versions', :action => 'show', :id => container}, :class => "icon icon-package", :style => "color: #666666;") %>
      </th>
    </tr>
    <% end -%>
    <% container.attachments.each do |file| %>
    <tr class="file <%= cycle("odd", "odd") %>">
      <td class="filename" style="font-size: 13px; width: 240px; "><%= link_to_attachment file, :download => true, :title => file.filename+"\n"+file.description.to_s, :style => "width: 230px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis;" %></td>
      <td class="created_on"><%= format_time(file.created_on) %></td>
      <td class="filesize"><%= number_to_human_size(file.filesize) %></td>
      <td class="downloads"><%= file.downloads %></td>
      <!-- <td class="digest" width="300px"><%= file.description %></td> -->
      <td align="center">
        <%= link_to(image_tag('delete.png'), attachment_path(file),
        :data => {:confirm => l(:text_are_you_sure)}, :method => :delete) if delete_allowed %>
      </td>
    </tr>
    <tr>
      <td class='description' colspan="5">
      <div class="tags_area">
        <%= render :partial => 'tags/tag', :locals => {:obj => file, :object_flag => "6"}%>
        <div class="tags_gradint"></div>
      </div>
      <div class="read-more hidden"><a href="javascript:void(0);" onclick="readmore(this);"> 更多 </a></div>
      </td>
    </tr>
    <% end -%>
    <% reset_cycle %>
    <% end -%>
    <!-- %= h downloadAll(@containers) % -->
    <!-- %= link_to "download all file", (downloadAll(@containers)) % -->

  </tbody>
</table>

<% html_title(l(:label_attachment_plural)) -%>

<script type='text/javascript';>
var slideHeight = 29;
function readmore (aNode) {
  // console.log(aNode)
  // var $td_tags_area = $(aNode).parent().parent();
  var $td_tags_area = $(aNode).parent().parent().parent().parent();
  var $tags_area = $td_tags_area.find('.tags_area')
  var $tags_gradint = $td_tags_area.find('.tags_gradint')
  var $read_more = $td_tags_area.find('.read-more')
  var $read_more_a = $td_tags_area.find('.read-more a')
  var $tags = $td_tags_area.find('#tags')
  var $icona = $td_tags_area.find('.tags_icona')

  var slideHeight = 20; //px
  var defHeight = $tags.height();

  var curHeight = $tags_area.height();
  if (curHeight == slideHeight) {
    $tags_area.animate({
      height: defHeight 
    }, 'normal');
    $read_more_a.html('隐藏');
    $icona.html('<%=image_tag "/images/sidebar/minus.png"%>')
    $tags_gradint.fadeOut();
  }else{
    $tags_area.animate({
      height: slideHeight 
    }, 'normal');
    $read_more_a.html('更多');
    $icona.html('<%=image_tag "/images/sidebar/add.png"%>')
    $tags_gradint.fadeIn();
  };

}
$(function () {
  var slideHeight = 20; //px
  var defHeight = $('.tags_area').height();
  if (defHeight >= slideHeight) {
    $('.tags_area').css('height', slideHeight +'px');
  };
});

</script>