2753: Replace Workbench file tree backgrounds with hover effect.
[arvados.git] / apps / workbench / app / views / collections / _show_files.html.erb
1 <% content_for :css do %>
2 ul#collection_files {
3   padding-left: 0;
4 }
5
6 ul.collection_files {
7   line-height: 2.5em;
8   list-style-type: none;
9   padding-left: 2.3em;
10 }
11
12 ul.collection_files li {
13   clear: both;
14 }
15
16 .collection_files_row {
17   padding: 1px;  /* Replaced by border for :hover */
18 }
19
20 .collection_files_row:hover {
21   background-color: #D9EDF7;
22   padding: 0px;
23   border: 1px solid #BCE8F1;
24   border-radius: 3px;
25 }
26
27 .collection_files_inline {
28   clear: both;
29   width: 80%;
30   height: auto;
31   max-height: 6em;
32   margin: 0 1em;
33 }
34
35 .collection_files_name {
36   padding-left: .5em;
37   white-space: nowrap;
38   overflow: hidden;
39   text-overflow: ellipsis;
40 }
41
42 .collection_files_name i.fa {
43   display: block-inline;
44   width: 1.75em;
45   text-align: center;
46 }
47
48 .collection_files_buttons {
49   float: right;
50 }
51 <% end %>
52
53 <% content_for :tab_line_buttons do %>
54 <div class="row">
55   <div class="col-md-6"></div>
56   <div class="col-md-6">
57     <div class="pull-right">
58       Collection storage status:
59       <%= render partial: 'toggle_persist', locals: { uuid: @object.uuid, current_state: (@is_persistent ? 'persistent' : 'cache') } %>
60     </div>
61   </div>
62 </div>
63 <% end %>
64
65 <% file_tree = @object.andand.files_tree %>
66 <% if file_tree.nil? or file_tree.empty? %>
67   <p>This collection is empty.</p>
68 <% else %>
69   <ul id="collection_files" class="collection_files">
70   <% dirstack = [file_tree.first.first] %>
71   <% file_tree.each_with_index do |(dirname, filename, size), index| %>
72     <% file_path = CollectionsHelper::file_path([dirname, filename]) %>
73     <% while dirstack.any? and (dirstack.last != dirname) %>
74       <% dirstack.pop %></ul></li>
75     <% end %>
76     <li>
77     <% if size.nil?  # This is a subdirectory. %>
78       <% dirstack.push(File.join(dirname, filename)) %>
79       <div class="collection_files_row">
80        <div class="collection_files_name"><i class="fa fa-folder-open"></i> <%= filename %></div>
81       </div>
82       <ul class="collection_files">
83     <% else %>
84       <% link_params = {controller: 'collections', action: 'show_file',
85                         uuid: @object.uuid, file: file_path, size: size} %>
86        <div class="collection_files_row">
87         <div class="collection_files_buttons">
88           <%= raw(human_readable_bytes_html(size)) %>
89           <%= check_box_tag 'uuids[]', "#{@object.uuid}/#{file_path}", false, {
90                 :class => 'persistent-selection',
91                 :friendly_type => "File",
92                 :friendly_name => "#{@object.uuid}/#{file_path}",
93                 :href => url_for(controller: 'collections', action: 'show_file',
94                                  uuid: @object.uuid, file: file_path),
95                 :title => "Include #{file_path} in your selections",
96               } %>
97           <%= link_to(raw('<i class="fa fa-search"></i>'),
98                       link_params.merge(disposition: 'inline'),
99                       {title: "View #{file_path}", class: "btn btn-info btn-sm"}) %>
100           <%= link_to(raw('<i class="fa fa-download"></i>'),
101                       link_params.merge(disposition: 'attachment'),
102                       {title: "Download #{file_path}", class: "btn btn-info btn-sm"}) %>
103         </div>
104       <% if CollectionsHelper::is_image(filename) %>
105         <div class="collection_files_name"><i class="fa fa-bar-chart-o"></i> <%= filename %></div>
106        </div>
107         <div class="collection_files_inline">
108           <%= link_to(image_tag("#{url_for @object}/#{file_path}"),
109                       link_params.merge(disposition: 'inline'),
110                       {title: file_path}) %>
111         </div>
112       <% else %>
113         <div class="collection_files_name"><i class="fa fa-file"></i> <%= filename %></div>
114        </div>
115       <% end %>
116       </li>
117     <% end  # if file or directory %>
118   <% end  # file_tree.each %>
119   </ul>
120 <% end  # if file_tree %>