fancy upload button. does work with firefox (at least 4) and chromium, but not with Konqueror, Rekonq, Opera.
This commit is contained in:
Arthur Schiwon
parent
3113176ea0
commit
4a9fdd2918
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -20,6 +20,10 @@
|
|||
}
|
||||
|
||||
#file_upload_form {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#fileSelector, #file_upload_cancel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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" /> <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"];?>)" /> <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" /> <input class="prettybutton" type="button" id="file_new_dir_submit" name="file_new_dir_submit" value="OK" /></form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue