File Manager rework WIP

cykod · Sep 3, 2010 · cd7e657 · cd7e657
1 parent b53f4fd
commit cd7e657
Show file tree

Hide file tree

Showing 24 changed files with 559 additions and 213 deletions.
diff --git a/app/controllers/paragraph_feature.rb b/app/controllers/paragraph_feature.rb
@@ -692,7 +692,7 @@ def image_tag_helper(tag,img,tag_opts) #:nodoc:
             preload = "<script>WebivaMenu.preloadImage('#{jvh rollover.url(size)}');</script>"
           end
           img_tag =  tag('img',tag_opts) + preload.to_s
-          img_tag = "<div style='float:#{shadow_align}; margin:#{border}; #{attr['style']}'><div style='width:#{img_size[0] + 12}px; float:#{shadow_align};' class='cms_gallery_shadow'><div><p>" + img_tag + "</p></div></div></div>" if shadow
+          img_tag = "<div style='float:#{shadow_align}; margin:#{border}; #{attr['style']}'><div style='width:#{img_size[0] + 12}px; float:#{shadow_align};' class='cms_gallery_shadow'><div><p>" + img_tag + "</p></div></div></div>" if img_size[0] && shadow
         end
         if tag.single?
           img_tag

diff --git a/app/models/domain_file.rb b/app/models/domain_file.rb
@@ -694,6 +694,10 @@ def self.file_upload(file,parent_id=nil,user_id=nil)
      df
    end
 
+
+   def mini_icon_class
+    "folder#{!self.special.blank? ? "_#{self.special}" : ''}_sprite"
+   end
 
    def mini_icon #:nodoc:
     "/images/icons/filemanager/mini_folder#{!self.special.blank? ? "_#{self.special}" : ''}.gif"

diff --git a/app/views/file/_file_item.rhtml b/app/views/file/_file_item.rhtml
@@ -14,7 +14,7 @@
       </div>
   </div>
 
-  <div class='fm_lock' id='item_lock_<%= file.id %>' <%= "style='display:none;'" unless file.private? %>><img src='<%= theme_src("icons/lock.gif") %>' /></div>
+  <div class='fm_lock' id='item_lock_<%= file.id %>' <%= "style='display:none;'" unless file.private? %>><span class='sprite_icon lock_sprite'></span></div>
   <div class='fm_extension' ><%= file.extension %></div>
   <div class='fm_processing'><%= "Processing" if file.processor_status == 'processing' %></div>
   <div style='display:none;' class='fm_item_count'></div>

diff --git a/app/views/file/_file_javascript.rhtml b/app/views/file/_file_javascript.rhtml
@@ -33,14 +33,14 @@ FileEditor = {
         $('view_icon').className = 'image_icon';
         $('view_list').className = 'image_icon_selected';
         FileEditor.display = 'list';
-        $('file_manager').className = 'file_manager_list';
+        $('file_manager').className = 'file_manager_list clearfix';
         FileEditor.updateIconSizes();
     }
     else if(view_type == 'icon') {
         $('view_icon').className = 'image_icon_selected';
         $('view_list').className = 'image_icon';
         FileEditor.display = 'icon';
-        $('file_manager').className = 'file_manager_icon';
+        $('file_manager').className = 'file_manager_icon clearfix';
         FileEditor.updateIconSizes();
     }
   },
@@ -243,22 +243,30 @@ FileEditor = {
 
 
 	},
-
-	createSizeSlider:function() {
 
-		                         var slider = new Control.Slider('size_slider', 'size_slider_container', 
+  showSizeSlider:function() {
+    $j('#slider_wrapper').show();
+           var slider = new Control.Slider('size_slider', 'size_slider_container', 
 					 { 
 					 increment:16,
 					 range:$R(FileEditor.minIconSize,FileEditor.maxIconSize),
 					 alignX: 0, 
 					 alignY: 0,
+           minimum: 0,
+           increment: 1,
+           maximum: 84,
 					 sliderValue: FileEditor.iconSize,
 					 values: FileEditor.iconSizes,
 					 onChange: function(v) {  FileEditor.adjustIconSize(v.toFixed(),true); } ,
 					 onSlide:  function(v) {  FileEditor.adjustIconSize(v.toFixed(),false); } 
 					 });	
-
+
+
+          },
 
+	createSizeSlider:function() {
+       $j('#slider_wrapper').hover(function() {}, function() { $j(this).hide(); });
+       $j('#view_slider').click(function() { FileEditor.showSizeSlider(); });
 	},
 
 	// Draggable & Droppable Functions 
@@ -293,42 +301,44 @@ FileEditor = {
   },	
 
   iconStartDrag: function(elem) {
+    $(elem).addClassName('fm_dragging');
     var elem_id = SCMS.getElemNum(elem);
 
     if(FileEditor.selectedItems.indexOf(elem_id)==-1) {
       FileEditor.clearHighlight();
-  		new Effect.Opacity('handle_item_' + elem_id,{duration:0.25,from:1.0,to:0.50});
+      $j('#handle_item_' + elem_id).stop().fadeTo(250,0.5);
     } else if(FileEditor.selectedItems.length > 1)  {
       FileEditor.selectedItems.each(function(elm) {
-        new Effect.Opacity('handle_item_' + elm,{duration:0.25,from:1.0,to:0.20});
+        $j('#handle_item_' + elm).stop().fadeTo(250,0.5);
         Droppables.remove('item_' + elm);
       });
       var cnt = elem.select('.fm_item_count')[0];
       cnt.innerHTML = FileEditor.selectedItems.length + " Items";
       cnt.show();
     } else {
-        new Effect.Opacity('handle_item_' + elem_id,{duration:0.25,from:1.0,to:0.50});
+      $j('#handle_item_' + elem_id).stop().fadeTo(250,0.5);
     }
-    
+
 	},
 
 	iconStopDrag: function(elem) {
-	 var elem_id = SCMS.getElemNum(elem);
-   FileEditor.cancelSelect = true; 
+   $(elem).removeClassName('fm_dragging');
+   clearTimeout(FileEditor.cancelSelectTimer);
 
+	 var elem_id = SCMS.getElemNum(elem);
+
     if(FileEditor.selectedItems.indexOf(elem_id)==-1) {
       if($('handle_item_' + elem_id))
-    		new Effect.Opacity('handle_item_' + elem_id,{duration:0.25,from:0.50,to:1.0});
+        $j('#handle_item_' + elem_id).stop().fadeTo(25,1.0);
     } else if(FileEditor.selectedItems.length > 1)  {
+      FileEditor.cancelSelect = true; 
       FileEditor.selectedItems.each(function(elm) {
-        if($('handle_item_' + elm))
-      		new Effect.Opacity('handle_item_' + elm,{duration:0.25,from:0.20,to:1.0});
+        $j('#handle_item_' + elm).stop().fadeTo(25,1.0);
       });
       FileEditor.recreateFolderDroppables();
     } 
     else {
-      if($('handle_item_' + elem_id))
-    		new Effect.Opacity('handle_item_' + elem_id,{duration:0.25,from:0.50,to:1.0});
+      $j('#handle_item_' + elem_id).stop().fadeTo(25,1.0);
     }
     var cnt = elem.select('.fm_item_count')[0];
     if(cnt) cnt.hide();
@@ -610,6 +620,8 @@ FileEditor = {
 									$('file_manager').style.visibility='visible';
 									setTimeout("FileEditor.recreateElementDraggables();",50);
 									setTimeout("FileEditor.recreateFolderDroppables();",50);
+                  FileEditor.adjustDetailHeight();
+
 								}
 							}
 						});
@@ -1070,16 +1082,20 @@ FileEditor = {
 	      var params = $H({ file_id: file_id });
 
       	new Ajax.Request("<%= url_for :action => 'load_details' %>",
-					    { parameters: params.toQueryString() + FileEditor.sizeParameters() }
+            { parameters: params.toQueryString() + FileEditor.sizeParameters(),
+onComplete: function(req) {  FileEditor.adjustDetailHeight();} }
 				    );
 
 				FileEditor.selecting = null;
 	    },
 
 
-    showDetails: function() { $('file_manager_details').style.visibility='visible'; },
+    showDetails: function() { 
+                   $('file_manager_details').style.visibility='visible'; 
+
+                 },
     showDetailsLoading: function() {
-      $('file_manager_body').innerHTML = 'Loading Details...';
+      $('file_manager_body').innerHTML = '<div class="tree_detail_body">Loading Details...</div>';
       FileEditor.showDetails();
     },
     hideDetails: function() { $('file_manager_details').style.visibility='hidden'; },
@@ -1112,20 +1128,28 @@ FileEditor = {
         FileEditor.callbackFile(elem_id);
       }
     },
-
+
+    adjustDetailHeight: function() {
+                          $j('#element_info').css('min-height',$j('#file_manager_body').height() - 28); 
+
+    },
+
 
     showSelection:function(elements,finalized) {
       if(elements.length > 0) {
         FileEditor.showDetails();
-        $('file_manager_body').innerHTML = "<b>" + elements.length + " <%= jh 'Files & Folders Selected'.t %>:</b><br/>";
-        $('file_manager_body').innerHTML += elements.map(function(elm) { 
+        html = "<div class='tree_detail_body'>" 
+        html += "<b>" + elements.length + " <%= jh 'Files & Folders Selected'.t %>:</b><br/>";
+        html += elements.map(function(elm) { 
           var txt =  $('item_' + elm).file_info.short_name;
           if($('item_' + elm).file_info.file_type == 'fld')
             txt = "<i>" + txt + " (Folder)</i>"
           return txt;
           }).join(",<br/>");
         if(finalized) {
-          $('file_manager_body').innerHTML += "<br/><br/><button onclick='FileEditor.deleteSelected(); return false;'>Delete Selected Files</button>";
+          html += "<br/><br/><button class='button_link' onclick='FileEditor.deleteSelected(); return false;'>Delete Selected Files</button>";
+          $('file_manager_body').innerHTML = html;
+          FileEditor.adjustDetailHeight();
         }
       }
       else {
@@ -1364,8 +1388,6 @@ FileEditor = {
      // Search Functions
 
      selectSearch: function() {
-        $('folder_action_area').hide();
-        $('search_action_area').show();
         $('search_search').focus();                                                                     
         if(this.searchRun) {
          $('filemanager_files').hide();
@@ -1375,10 +1397,9 @@ FileEditor = {
      },
 
      selectUpload: function() {
-        $('folder_action_area').show();
-        $('search_action_area').hide();
         $('filemanager_files').show();
         $('filemanager_search').hide();
+        $j('#search_search').select().focus();
      },
 
      searchRun: false,
@@ -1417,6 +1438,7 @@ window.onresize = FileEditor.onResize;
 window.onmousemove = FileEditor.dragBox;
 window.onmouseup =  FileEditor.endDrag;
 window.onmousedown = FileEditor.startDrag;
-</script>
+
+$j(document).ready(function() { $j('#search_search').select().focus(); });
 
 </script>
diff --git a/app/views/file/_file_search_bar.rhtml b/app/views/file/_file_search_bar.rhtml
@@ -0,0 +1,10 @@
+<div class='action_area_content'  style='float:right'>
+  <%= form_tag '',  :onsubmit => "FileEditor.runSearch(this); return false;"  %>
+    <h2>
+       <%= theme_image_tag('framework/filemanager_search.gif') -%>    
+       Search For <input class="text_field_input" id="search_search" name="search[search]" size="20" type="text" />
+       <input class="button_link" id="search_submit" name="commit" type="submit" value="Search" />
+    </h2>
+  </form>
+</div>
+
diff --git a/app/views/file/_file_tree.rhtml b/app/views/file/_file_tree.rhtml
@@ -22,11 +22,14 @@
 
 <% if fld.parent_id.nil? %>
 <span class="mod_node" >
-	<%= theme_image_tag 'icons/domain.gif', :class => "node_handle_icon", :id => "node_handle_#{fld.id}" , :onclick => "FileEditor.selectTreeNode(#{fld.id});" %>
+  <%= tag('span',
+          {
+           :class => 'node_handle_icon sprite_icon domain_sprite',
+           :id => "node_handle_#{fld.id}", :onclick => "FileEditor.selectTreeNode(#{fld.id});" }, true) %></span>
   <a href='javascript:void(0);' class='node_title'  id='node_title_<%= fld.id %>' onclick="FileEditor.selectTreeNode(<%= fld.id %>);"><%= "Domain Root".t %></a>
 </span>
 <% else -%>
-	<%= image_tag theme_src(fld.mini_icon), :class => "node_handle_icon", :id => "node_handle_#{fld.id}" , :onclick => "FileEditor.selectTreeNode(#{fld.id});" %>
+  <%= content_tag :span, "", :class => "node_handle_icon sprite_icon #{fld.mini_icon_class}", :id => "node_handle_#{fld.id}" , :onclick => "FileEditor.selectTreeNode(#{fld.id});" %>
   <a href='javascript:void(0);' class='node_title'  id='node_title_<%= fld.id %>' onclick="FileEditor.selectTreeNode(<%= fld.id %>);"><%= fld.name %></a>
 <% end -%>
 

diff --git a/app/views/file/_file_upload_area.rhtml b/app/views/file/_file_upload_area.rhtml
@@ -0,0 +1,40 @@
+
+<div class='action_area_content' id='files_upload_area'  style='float:left;' >
+  <div id='upload_progress' style='display:none;' ></div>
+  <div id='upload_action'>
+    <%= form_tag({:action => 'upload'}, :onsubmit => "this.target = 'UploadTarget'; FileEditor.startUpload(this); FileEditor.hideDetails(); return true;", :enctype => 'multipart/form-data') %>
+    <div style='float:left;'>
+      <h2>
+        <%= theme_image_tag('framework/filemanager_upload_file.gif') -%>    
+        <%= "Upload New File:".t %>
+      </h2>
+    </div>
+    <div style='float:left; position:relative;'>
+      <input type='hidden' name='X-Progress-ID' id='upload_identifier' value=''/>
+      <input type='hidden' id='upload_file_parent_id' name='upload_file[parent_id]' value='<%= @folder.id %>'/>
+
+      <input type='text' id='file_upload_name' readonly='readonly' class='file_input_textbox'/>
+      <div class='filemanager_file_input'> 
+        <input type='button' value='Browse' class="button_link" />
+        <%= file_field 'upload_file','filename', :id => 'file_column', :class=>'file_input_hidden', :onchange => "FileEditor.selectedChange(); $j('#file_upload_name').val(this.value);" %>
+      </div>
+
+      <%= submit_tag "Upload".t, :id => 'upload_button', :class => 'button_link' %>
+
+      <div class='clear'></div>
+
+      <label for='replace_same'><input type='checkbox' name='replace_same' id='replace_same' checked='checked'/><%= "Replace matching files".t %></label>
+
+      <span id='upload_extra' style='display:none;'>
+        <label for='extract_archive'><input type='checkbox' name='extract_archive' id='extract_archive'/><%= "Extract Archived Files".t %></label>
+      </span>
+    </div>
+
+    <div id='upload_status_area'></div>
+    <script>$('file_column').value = '';$('upload_button').disabled = true;</script>
+
+  </form>
+  </div>
+
+  <iframe id="UploadTarget" name="UploadTarget" src="" style="width:0px;height:0px;border:0"></iframe>
+</div>
diff --git a/app/views/file/_folder_order.rhtml b/app/views/file/_folder_order.rhtml
@@ -1,5 +1,3 @@
-
-Sort By: 
 <select name='order' onchange='FileEditor.reorder(this.value);' >
   <%= options_for_select @order_options, @order %>
 </select>
diff --git a/app/views/file/_search_results.rhtml b/app/views/file/_search_results.rhtml
@@ -1,3 +1,10 @@
+<a href='javascript:void(0);' onclick='FileEditor.selectUpload();'>&lt; Back to File Manager</a>
+<div align='right'>
+<% cms_unstyled_form_for :search  do |f| %>
+  <%= f.select :order, @order_options %>
+<% end -%>
+</div>
+
 <% @results.each do |file| -%>
   <%= render :partial => 'search_item', :locals => { :file => file } %>
 <% end -%>
diff --git a/app/views/file/details/_file_details.rhtml b/app/views/file/details/_file_details.rhtml
@@ -1,4 +1,6 @@
 <div id='details_<%= file.id %>'>
+
+<div  class='tree_detail_body'>
 <%= render :partial => '/file/details/file_name', :locals => {:file => file } %>
 
 <%= render :partial => file.details_partial, :locals => {:file => file } %>
@@ -16,21 +18,21 @@
 
 <div id='fm_file_actions'>
   <% if @popup && file.file_type_match(@select) && !(@mce && !file.private? && file.image?) -%>
-    <button onclick='FileEditor.callbackFile(<%= file.id %>);'>Select</button>
+    <button  class='button_link' onclick='FileEditor.callbackFile(<%= file.id %>);'>Select</button>
   <% end -%>
-  <button  onclick='FileEditor.copyFile(<%= file.id %>)'>Copy File</button>
+  <button  class='button_link'  onclick='FileEditor.copyFile(<%= file.id %>)'>Copy File</button>
   <% if file.private? -%>
-    <button onclick='FileEditor.makeFilePublic(<%= file.id %>)'>Make Public</button>
+    <button class='button_link'  onclick='FileEditor.makeFilePublic(<%= file.id %>)'>Make Public</button>
   <% else -%>
-    <button onclick='FileEditor.makeFilePrivate(<%= file.id %>)'>Make Private</button>
+    <button  class='button_link' onclick='FileEditor.makeFilePrivate(<%= file.id %>)'>Make Private</button>
   <% end -%>
 
   <% if(file.processor_status == 'ok')  -%>
   <% if Configuration.file_types.processors.length > 1 -%>
         <% Configuration.file_types.processors.each do |processor| -%>
           <% handler = (processor == 'local') ? { :name => 'Local Storage' } : get_handler_info(:website,:file,processor)  %>
           <%  if(file.processor != processor) %>
-          <button onclick='FileEditor.switchFileProcessor(<%= file.id %>,"<%= processor -%>")'><%= jh ('Switch to ' + handler[:name]).t %></button>
+          <button class='button_link' onclick='FileEditor.switchFileProcessor(<%= file.id %>,"<%= processor -%>")'><%= jh ('Switch to ' + handler[:name]).t %></button>
           <% end -%>
         <% end -%>
       <% end -%>
@@ -39,13 +41,14 @@
   <% if !@popup && file.editable? -%>
     <button onclick='FileEditor.editFile(<%= file.id %>);'>Edit File</button>
   <% end -%>
-  <button class='last' onclick='FileEditor.deleteSelected([<%= file.id  %>]);'>Delete</button>
+  <button class='button_link last' onclick='FileEditor.deleteSelected([<%= file.id  %>]);'>Delete</button>
   <div style='clear:both;'></div>
 </div>
 
-
+</div> 
 <% ajax_tabs ['File Details','Revisions'], @selected_tab || 'File Details' do |t| %>
 <% t.tab do -%>
+  <div style='overflow:hidden'>
 
   <% stat_view :class => 'stat_viewer_open' do |v| -%>
     <%= v.raw 'File', link_to(file.name, file.url,:target => 'blank') %>
@@ -55,6 +58,7 @@
     <%= v.raw 'Uploaded By', file.creator ? link_to(file.creator.name, :controller => '/members',:action=>'view',:path => [ file.creator_id ]) : h('<Unknown>') %>
   <% end -%>
 
+</div>
 <% end -%>
 
 <% t.tab do -%>

diff --git a/app/views/file/details/_revisions.rhtml b/app/views/file/details/_revisions.rhtml
@@ -2,6 +2,7 @@
 <% if file.versions.length == 0 -%>
  <b>No Previous Revisions</b>
 <% else -%>
+<div style='position:absolute; right:0px; z-index:1000; background-color:white;'>
 <% table_for file.versions, ['','Name','Size','Date','By',''], :class => 'active_table' do |t| -%>
 <tr>
   <td nowrap='1'><a href='javascript:void(0);' title='Extract to own file' onclick='FileEditor.extractRevision(<%= t.id %>);'><%= theme_image_tag('icons/actions/upload.gif') %></a></td>
@@ -12,4 +13,5 @@
   <td nowrap='1'><a href='javascript:void(0);' onclick='FileEditor.deleteRevision(<%= t.id %>);'><%= theme_image_tag('icons/actions/delete.gif') %></a></td>
 </tr>
 <% end -%>
+</div>
 <% end -%>