fancy upload button. does work with firefox (at least 4) and chromium, but not with...

diff --git a/css/styles.css b/css/styles.css
index 6a4e7d8f897ef5728947633dda7ef6b6b5357a65..6b86684354103b0d395bfc1896c789d5d26c0652 100644 (file)
--- a/css/styles.css
+++ b/css/styles.css
@@ -106,13 +106,13 @@ p.nav a { padding:0.5em 1.5em 0.5em 0.5em; background-position:right center; bac
 p.nav a img { height:16px; vertical-align:text-top; }
 
 /* ACTIONS BAR */
-p.actions { padding:0; }
-p.actions a { padding:0.5em 0.5em 0.5em 3em; background-position:1em center; background-repeat:no-repeat; background-image:url('../img/action.png'); border-right:1px solid #eee; text-decoration:none; color:#333; }
-p.actions a:hover, p.actions a:focus { background-color:#eee; color:#000; outline:0; }
-p.actions a:active { outline:0; }
-p.actions a.new-dir { background-image:url('../img/folder-new.png'); }
-p.actions a.download { background-image:url('../img/download.png'); }
-p.actions a.delete { background-image:url('../img/delete.png'); }
+p.actions, div.actions { padding:0; }
+p.actions a, div.actions a { padding:0.5em 0.5em 0.5em 3em; background-position:1em center; background-repeat:no-repeat; background-image:url('../img/action.png'); border-right:1px solid #eee; text-decoration:none; color:#333; }
+p.actions a:hover, p.actions a:focus, div.actions a:hover, div.actions a:focus { background-color:#eee; color:#000; outline:0; }
+p.actions a:active, div.actions a:active { outline:0; }
+p.actions a.new-dir, div.actions a.new-dir { background-image:url('../img/folder-new.png'); }
+p.actions a.download, div.actions a.download { background-image:url('../img/download.png'); }
+p.actions a.delete, div.actions a.delete { background-image:url('../img/delete.png'); }
 
 /* USER SETTINGS ------------------------------------------------------------ */
 #quota_indicator { margin:0 4em 1em 0; padding:0; border:1px solid #ddd; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }

diff --git a/files/css/files.css b/files/css/files.css
index 806582da2134277a7b084506c95e9d9baf51fd1a..6313e6d1ca68e3fb81454c412a495261cb6ef9a7 100644 (file)
--- a/files/css/files.css
+++ b/files/css/files.css
@@ -20,6 +20,10 @@
 }
 
 #file_upload_form {
+       display: inline;
+}
+
+#fileSelector, #file_upload_cancel {
        display: none;
 }
 

diff --git a/files/js/files.js b/files/js/files.js
index edb57fc2c0e63414004dd8d473016bc4f8a04230..c0905f4af9df524e1d7063ef375c667870676cf4 100644 (file)
--- a/files/js/files.js
+++ b/files/js/files.js
@@ -1,5 +1,6 @@
 $(document).ready(function() {
        $('#file_action_panel').attr('activeAction', false);
+       $('#file_upload_start').attr('mode', 'menu');
        
     // Sets browser table behaviour :
     $('.browser tr').hover(
@@ -70,14 +71,35 @@ $(document).ready(function() {
                return false;
        });
        
-       $('#file_upload_start').click(function() {              
-               $('#file_upload_target').load(uploadFinished);
+       $('#file_upload_start').click(function() {
+               if($('#file_upload_start').attr('mode') == 'menu') {
+                       $('#fileSelector').change(function() {
+//                             alert("foo");
+                               
+                               //Chromium prepends C:\fakepath....
+                               bspos = $('#fileSelector').val().lastIndexOf('\\')+1;
+                               filename = $('#fileSelector').val().substr(bspos);
+                               
+                               $('#file_upload_start').val('Upload ' + filename);
+                               $('#fileSelector').hide();
+                               $('#file_upload_cancel').slideDown(250);
+                               $('#file_upload_start').attr('mode', 'action');
+                       });
+                       $('#fileSelector').show();      //needed for Chromium compatibility
+                       $('#fileSelector').click();
+               } else if($('#file_upload_start').attr('mode') == 'action') {
+                       $('#file_upload_cancel').slideUp(250);
+                       $('#file_upload_target').load(uploadFinished);
+               }
        });
        
        $('#file_upload_cancel').click(function() {
-               $('#file_action_panel').attr('activeAction', 'false');
-               $('#file_upload_form').hide();
-               $('p.actions a.upload:first').show();
+               $('#file_upload_start').val('Upload ' + $('.max_human_file_size:first').val());
+               $('#file_upload_start').attr('mode', 'menu');
+               $('#file_upload_cancel').hide;
+//             $('#file_action_panel').attr('activeAction', 'false');
+//             $('#file_upload_form').hide();
+//             $('p.actions a.upload:first').show();
        });
        
        $('#file_new_dir_submit').click(function() {
@@ -88,26 +110,26 @@ $(document).ready(function() {
                });
        });
        
-       $('.upload').click(function(){
-               if($('#file_action_panel').attr('activeAction') != 'upload') {
-                       $('#file_action_panel').attr('activeAction', 'upload');
-                       $('#fileSelector').replaceWith('<input type="file" name="file" id="fileSelector">');
-                       $('#fileSelector').change(function() {
-                               $('#file_upload_start').val('Upload ' + $('#fileSelector').val());
-                               $('p.actions a.upload:first').after($('#file_upload_form'));
-                               $('#file_upload_form').css('display', 'inline');
-                               $('p.actions a.upload:first').hide();
-                               $('#fileSelector').hide();
-                       });
-                       $('#file_action_panel form').slideUp(250);
-//                     $('#file_upload_form').slideDown(250);
-                       $('#fileSelector').click();
-               } else {
-                       $('#file_action_panel').attr('activeAction', 'false');
-                       $('#file_upload_form').slideUp(250);
-               }
-               return false;
-       });
+//     $('.upload').click(function(){
+//             if($('#file_action_panel').attr('activeAction') != 'upload') {
+//                     $('#file_action_panel').attr('activeAction', 'upload');
+//                     $('#fileSelector').replaceWith('<input type="file" name="file" id="fileSelector">');
+//                     $('#fileSelector').change(function() {
+//                             $('#file_upload_start').val('Upload ' + $('#fileSelector').val());
+//                             $('p.actions a.upload:first').after($('#file_upload_form'));
+//                             $('#file_upload_form').css('display', 'inline');
+//                             $('p.actions a.upload:first').hide();
+//                             $('#fileSelector').hide();
+//                     });
+//                     $('#file_action_panel form').slideUp(250);
+// //                  $('#file_upload_form').slideDown(250);
+//                     $('#fileSelector').click();
+//             } else {
+//                     $('#file_action_panel').attr('activeAction', 'false');
+//                     $('#file_upload_form').slideUp(250);
+//             }
+//             return false;
+//     });
        
        
        
@@ -169,9 +191,12 @@ function uploadFinished() {
                        data: "dir="+dir,
                        complete: function(data) {
                                refreshContents(data);
-                               $('#file_action_panel').prepend($('#file_upload_form'));
-                               $('#file_upload_form').css('display', 'block').hide();
-                               $('p.actions a.upload:first').show();
+//                             $('#file_action_panel').prepend($('#file_upload_form'));
+//                             $('#file_upload_form').css('display', 'block').hide();
+//                             $('p.actions a.upload:first').show();
+                               $('#file_upload_start').val('Upload ' + $('.max_human_file_size:first').val());
+                               $('#file_upload_start').attr('mode', 'menu');
+//                             $('#fileSelector').replaceWith('<input type="file" name="file" id="fileSelector">');
                        }
                });
        }

diff --git a/files/templates/index.php b/files/templates/index.php
index 54de41c594adfe9f8cce72570413eb22309a92ec..e794bad300c1763fa8fdc17ab30b84a626f4e815 100644 (file)
--- a/files/templates/index.php
+++ b/files/templates/index.php
@@ -1,19 +1,11 @@
 <div class="controls">
-       <p class="actions">
-               <a href="" title="" class="upload" id="file_upload_button" style="background-image:url(<?php  echo mimetype_icon('file'); ?>)">Upload (max <?php echo $_["uploadMaxHumanFilesize"];?>)</a><a
-href="" title="" class="new-dir">New folder</a><a href="" title=""
-class="download">Download</a><a href="" title="" class="share">Share</a><a
-href="" title="" class="delete">Delete</a>
-       </p>
-       <div id="file_action_panel">
+       <div class="actions">
                <form id="file_upload_form" action="ajax/upload.php"
 method="post" enctype="multipart/form-data" target="file_upload_target"><input
 type="hidden" name="MAX_FILE_SIZE" value="<?php echo $_["uploadMaxFilesize"] ?>" id="max_upload"><input
-type="hidden" name="dir" value="<?php echo $_["dir"] ?>" id="dir"><input class="prettybutton" type="submit"
-id="file_upload_start" value="Upload" />&nbsp;<input class="prettybutton" type="button"
-id="file_upload_cancel" value="X" /><input
-type="file" name="file" id="fileSelector"><iframe id="file_upload_target"
-name="file_upload_target" src=""></iframe></form>
+type="hidden" class="max_human_file_size" value="(max <?php echo $_["uploadMaxHumanFilesize"]; ?>)"><input type="hidden" name="dir" value="<?php echo $_["dir"] ?>" id="dir"><input class="prettybutton" type="submit" id="file_upload_start" value="Upload (max <?php echo $_["uploadMaxHumanFilesize"];?>)" />&nbsp;<input class="prettybutton" type="button" id="file_upload_cancel" value="X" /><input type="file" name="file" id="fileSelector"><iframe id="file_upload_target" name="file_upload_target" src=""></iframe></form><a href="" title="" class="new-dir">New folder</a><a href="" title="" class="download">Download</a><a href="" title="" class="share">Share</a><a href="" title="" class="delete">Delete</a>
+       </div>
+       <div id="file_action_panel">
                <form id="file_newfolder_form"><input type="text" name="file_new_dir_name" id="file_new_dir_name" />&nbsp;<input class="prettybutton" type="button" id="file_new_dir_submit" name="file_new_dir_submit" value="OK" /></form>
        </div>
 </div>