refurbished new folder button

files/css/files.css

@@ -19,31 +19,36 @@
     text-decoration: none;
 }
 
-#file_upload_form {
+#file_upload_form, #file_newfolder_form {
 	display: inline;
 }
 
-#fileSelector, #file_upload_cancel {
+#fileSelector, #file_upload_cancel, #file_newfolder_submit {
 	display: none;
 }
 
-#file_upload_start {
-	background-image:url(/owncloud-dev/img/mimetypes/file.png);
+#file_upload_start, #file_newfolder_name {
 	background-repeat: no-repeat;
 	background-position: 0.5em 0;
 	padding-left: 2em;
-	
 }
 
-#file_upload_form input[type="button"]{
+#file_upload_start {background-image:url(/owncloud-dev/img/mimetypes/file.png);}
+
+#file_newfolder_name {
+	background-image:url(/owncloud-dev/img/places/folder.png); font-weight: bold; 
+	width: 14em;
+}
+
+#file_newfolder_submit {
+	width: 3em;
+}
+
+form input[type="button"], form input[type="text"]{
 	/* this is a dirty wurgaround, Jan needs to fix it in global css*/
 	font-size: 0.9em;
 }
 
-#file_newfolder_form {
-	display: none;
-}
-
 #file_upload_target {
 	display: none;
 }

files/js/files.js

@@ -2,6 +2,8 @@ $(document).ready(function() {
 	$('#file_action_panel').attr('activeAction', false);
 	$('#file_upload_start').attr('mode', 'menu');
 	$('#file_upload_form').attr('uploading', false);
+	$('#file_newfolder_name').css('width', '14em');
+	$('#file_newfolder_submit').css('width', '3em');
 	
     // Sets browser table behaviour :
     $('.browser tr').hover(
@@ -115,6 +117,40 @@ $(document).ready(function() {
 		});
 	});
 	
+	$('#file_newfolder_name').click(function(){
+		if($('#file_newfolder_name').val() == 'New Folder'){
+			$('#file_newfolder_name').val('');
+		}
+	});
+	
+	$('#file_newfolder_name').bind('keyup', adjustNewFolderSize);
+	
+	$('#file_newfolder_submit').bind('vanish', function() {
+		$('#file_newfolder_name').bind('keyup', adjustNewFolderSize);
+		unsplitSize($('#file_newfolder_name'),$('#file_newfolder_submit'));
+	});
+	
+	$('#file_newfolder_name').focusout(function(){
+		if($('#file_newfolder_name').val() == '') {
+			$('#file_newfolder_form')[0].reset();
+			$('#file_newfolder_submit').fadeOut(250).trigger('vanish');
+		}
+	});
+	
+	$('#file_newfolder_submit').click(function() {
+		if($('#file_newfolder_name').val() != '') {
+			$.ajax({
+				url: 'ajax/newfolder.php',
+				data: "dir="+$('#dir').val()+"&foldername="+$('#file_newfolder_name').val(),
+				complete: function(data){
+					boolOperationFinished(data, false);
+					$('#file_newfolder_form')[0].reset();
+				}
+			});
+		}
+		$('#file_newfolder_submit').fadeOut(250).trigger('vanish');
+	});
+	
 // 	$('.upload').click(function(){
 // 		if($('#file_action_panel').attr('activeAction') != 'upload') {
 // 			$('#file_action_panel').attr('activeAction', 'upload');
@@ -138,18 +174,18 @@ $(document).ready(function() {
 	
 	
 	
-	$('.new-dir').click(function(){
-		if($('#file_action_panel').attr('activeAction') != 'new-dir') {
-			$('#file_action_panel').attr('activeAction', 'new-dir');
-			$('#file_new_dir_name').val('');
-			$('#file_action_panel form').slideUp(250);
-			$('#file_newfolder_form').slideDown(250);
-		} else {
-			$('#file_newfolder_form').slideUp(250);
-			$('#file_action_panel').attr('activeAction', false);
-		}
-		return false;
-	});
+// 	$('.new-dir').click(function(){
+// 		if($('#file_action_panel').attr('activeAction') != 'new-dir') {
+// 			$('#file_action_panel').attr('activeAction', 'new-dir');
+// 			$('#file_new_dir_name').val('');
+// 			$('#file_action_panel form').slideUp(250);
+// 			$('#file_newfolder_form').slideDown(250);
+// 		} else {
+// 			$('#file_newfolder_form').slideUp(250);
+// 			$('#file_action_panel').attr('activeAction', false);
+// 		}
+// 		return false;
+// 	});
 	
 	$('.download').click(function(event) {
 		var files='';
@@ -184,6 +220,25 @@ $(document).ready(function() {
 	});
 });
 
+var adjustNewFolderSize = function() {
+	if($('#file_newfolder_name').val() != '') {
+		splitSize($('#file_newfolder_name'),$('#file_newfolder_submit'));
+		$('#file_newfolder_name').unbind('keyup', adjustNewFolderSize);
+	};
+}
+
+function splitSize(existingEl, appearingEl) {
+	nw = parseInt($(existingEl).css('width')) - parseInt($(appearingEl).css('width'));
+	$(existingEl).css('width', nw + 'px');
+	$(appearingEl).fadeIn(250);
+}
+
+function unsplitSize(stayingEl, vanishingEl) {
+	nw = parseInt($(stayingEl).css('width')) + parseInt($(vanishingEl).css('width'));
+	$(stayingEl).css('width', nw + 'px');
+	$(vanishingEl).fadeOut(250);
+}
+
 function uploadFinished() {
 	result = $('#file_upload_target').contents().text();
 	result = eval("(" + result + ");");

files/templates/index.php

@@ -3,10 +3,9 @@
 		<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" 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>
+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><form id="file_newfolder_form"><input type="text" class="prettybutton" name="file_newfolder_name" id="file_newfolder_name" value="New Folder" />&nbsp;<input class="prettybutton" type="button" id="file_newfolder_submit" name="file_newfolder_submit" value="OK" /></form><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>