From d46288b0abea28a4e0184f6720e990a05d5f19a9 Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Sun, 23 Oct 2011 11:40:40 +0200 Subject: [PATCH] 'New' button, needs some css work --- core/css/styles.css | 4 +- core/js/js.js | 2 +- files/ajax/newfile.php | 27 ++++++++++++ files/css/files.css | 13 ++++-- files/js/files.js | 93 +++++++++++++++++++++++++++++---------- files/templates/index.php | 33 ++++++++------ 6 files changed, 129 insertions(+), 43 deletions(-) create mode 100644 files/ajax/newfile.php diff --git a/core/css/styles.css b/core/css/styles.css index ea09a1f363..7d5ff185d4 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -32,12 +32,12 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35537a', end /* INPUTS */ input[type="text"], input[type="password"] { cursor:text; } -input, select, .button, #quota, div.jp-progress, .pager li a { font-size:1em; width:10em; margin:.3em; padding:.6em .5em .4em; background:#fff; color:#333; border:1px solid #ddd; -moz-box-shadow:0 1px 1px #fff, 0 2px 0 #bbb inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; outline:none; } +input, select, button, .button, #quota, div.jp-progress, .pager li a { font-size:1em; width:10em; margin:.3em; padding:.6em .5em .4em; background:#fff; color:#333; border:1px solid #ddd; -moz-box-shadow:0 1px 1px #fff, 0 2px 0 #bbb inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; outline:none; } input[type="text"], input[type="password"], input[type="search"] { background:#f8f8f8; color:#555; cursor:text; } input[type="text"], input[type="password"], input[type="search"] { -webkit-appearance:textfield; -webkit-box-sizing:content-box; } input[type="text"]:hover, input[type="text"]:focus, input[type="password"]:hover, input[type="password"]:focus, input[type="search"]:hover, input[type="search"]:focus { background:#fff; color:#333; } -input[type="submit"], input[type="button"], .button, #quota, div.jp-progress, .pager li a { width:auto; padding:.4em; border:1px solid #ddd; font-weight:bold; cursor:pointer; background:#f8f8f8; color:#555; text-shadow:#fff 0 1px 0; -moz-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; } +input[type="submit"], input[type="button"], button, .button, #quota, div.jp-progress, .pager li a { width:auto; padding:.4em; border:1px solid #ddd; font-weight:bold; cursor:pointer; background:#f8f8f8; color:#555; text-shadow:#fff 0 1px 0; -moz-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; } input[type="submit"]:hover, input[type="submit"]:focus, input[type="button"]:hover, input[type="button"]:focus, .button:hover { background:#fff; color:#333; } input[type="checkbox"] { width:auto; } #quota { cursor:default; } diff --git a/core/js/js.js b/core/js/js.js index 9e814ca072..8cfb58982a 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -365,7 +365,7 @@ $(document).ready(function(){ $('.jp-controls .jp-previous').tipsy({gravity:'nw', fade:true, live:true}); $('.jp-controls .jp-next').tipsy({gravity:'n', fade:true, live:true}); $('.password .action').tipsy({gravity:'se', fade:true, live:true}); - $('.file_upload_button_wrapper').tipsy({gravity:'e', fade:true}); + $('.file_upload_button_wrapper').tipsy({gravity:'w', fade:true}); $('.selectedActions a.delete').tipsy({gravity: 'se', fade:true, live:true}); $('.selectedActions a').tipsy({gravity:'s', fade:true, live:true}); $('#headerSize').tipsy({gravity:'s', fade:true, live:true}); diff --git a/files/ajax/newfile.php b/files/ajax/newfile.php new file mode 100644 index 0000000000..5c4f49a367 --- /dev/null +++ b/files/ajax/newfile.php @@ -0,0 +1,27 @@ + array( "message" => "Empty Filename" ))); + exit(); +} + +if(OC_Files::newFile($dir, $filename, 'file')) { + if($content){ + OC_Filesystem::file_put_contents($dir.'/'.$filename,$content); + } + OC_JSON::success(array("data" => array('content'=>$content))); + exit(); +} + + +OC_JSON::error(array("data" => array( "message" => "Error when creating the file" ))); \ No newline at end of file diff --git a/files/css/files.css b/files/css/files.css index ac1f523f86..c6f7621515 100644 --- a/files/css/files.css +++ b/files/css/files.css @@ -7,11 +7,17 @@ .actions input { margin:0; } #file_menu { right:0; position:absolute; top:0; } #file_menu a { display:block; float:left; background-image:none; text-decoration:none; } -.file_upload_form, #file_newfolder_form { display:inline; float: left; margin-left:.5em; } +.file_upload_form, #file_newfolder_form { display:inline; float: left; margin-left:0; } #fileSelector, #file_upload_submit, #file_newfolder_submit { display:none; } .file_upload_wrapper, #file_newfolder_name { background-repeat:no-repeat; background-position:.5em .5em; padding-left:2em; } -.file_upload_wrapper { font-weight:bold; display:-moz-inline-box; /* fallback for older firefox versions*/ display:inline-block; padding-left:0; overflow:hidden; position:relative; margin:.1em .1em .1em 0em;} +.file_upload_wrapper { font-weight:bold; display:-moz-inline-box; /* fallback for older firefox versions*/ display:inline-block; padding-left:0; overflow:hidden; position:relative; margin:0;} .file_upload_wrapper .file_upload_button_wrapper { position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer; z-index:1000; } +#new { float:left; border-top-right-radius:0; border-bottom-right-radius:0; margin-top:-0.075em; margin-right:0; border-right:none } +#new.active { border-bottom-left-radius:0; border-bottom:none; } +#new>a{ padding-left:1em; padding-right:1em; } +#new>ul { display:none; position:fixed; text-align:left; padding:0.5em; background:#f8f8f8; margin-top:0.4em; border:1px solid #ddd; min-width:7em; margin-left:-0.5em; } +#new>ul>li { margin:0.3em; padding-left:1.3em; background-repeat:no-repeat; cursor:pointer; } +#new>ul>li>p { cursor:pointer; } #file_newfolder_name { background-image:url('../../core/img/places/folder.svg'); font-weight:normal; width:7em; } .file_upload_start, .file_upload_filename { font-size:1em; } @@ -19,7 +25,8 @@ .file_upload_target { display:none; } .file_upload_start { opacity:0; filter:alpha(opacity=0); z-index:1; position:absolute; left:0; top:0; width:100%; cursor:pointer;} -.file_upload_filename { z-index:100; cursor:pointer;} +input.file_upload_filename.active { border-bottom-right-radius:0 } +input.file_upload_filename { z-index:100; cursor:pointer; border-top-left-radius:0; border-bottom-left-radius:0; } .file_upload_form, .file_upload_wrapper, .file_upload_start, .file_upload_filename, #file_upload_submit { cursor:pointer; } diff --git a/files/js/files.js b/files/js/files.js index 902c5e5493..db3f3135b9 100644 --- a/files/js/files.js +++ b/files/js/files.js @@ -255,32 +255,77 @@ $(document).ready(function() { text=text.substr(0,text.length-6)+'...'; crumb.text(text); } + + $(window).click(function(){ + $('#new>ul').hide(); + $('#new').removeClass('active'); + $('input.file_upload_filename').removeClass('active'); + $('#new li').each(function(i,element){ + if($(element).children('p').length==0){ + $(element).children('input').remove(); + $(element).append('

'+$(element).data('text')+'

'); + } + }); + }); + $('#new').click(function(event){ + event.stopPropagation(); + }); + $('#new>a').click(function(){ + $('#new>ul').toggle(); + $('#new').toggleClass('active'); + $('input.file_upload_filename').toggleClass('active'); + }); + $('#new li').click(function(){ + if($(this).children('p').length==0){ + return; + } + + $('#new li').each(function(i,element){ + if($(element).children('p').length==0){ + $(element).children('input').remove(); + $(element).append('

'+$(element).data('text')+'

'); + } + }); + + var type=$(this).data('type'); + var text=$(this).children('p').text(); + $(this).data('text',text); + $(this).children('p').remove(); + var input=$(''); + $(this).append(input); + input.focus(); + input.change(function(){ + var name=$(this).val(); + switch(type){ + case 'file': + $.ajax({ + url: OC.filePath('files','ajax','newfile.php'), + data: "dir="+encodeURIComponent($('#dir').val())+"&filename="+encodeURIComponent(name)+'&content=%20%0A', + complete: function(data){boolOperationFinished(data, function(){ + var date=new Date(); + FileList.addFile(name,0,date); + });} + }); + break; + case 'folder': + $.ajax({ + url: OC.filePath('files','ajax','newfolder.php'), + data: "dir="+encodeURIComponent($('#dir').val())+"&foldername="+encodeURIComponent(name), + complete: function(data){boolOperationFinished(data, function(){ + var date=new Date(); + FileList.addDir(name,0,date); + });} + }); + break; + } + var li=$(this).parent(); + $(this).remove(); + li.append('

'+li.data('text')+'

'); + $('#new>a').click(); + }); + }); }); -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 resetFileActionPanel() { - $('#file_action_panel form').css({"display":"none"}); - $('#file_action_panel').attr('activeAction', false); -} - function boolOperationFinished(data, callback) { result = jQuery.parseJSON(data.responseText); if(result.status == 'success'){ diff --git a/files/templates/index.php b/files/templates/index.php index a63f6e62b6..902c5cfa14 100644 --- a/files/templates/index.php +++ b/files/templates/index.php @@ -2,20 +2,27 @@
-
- - - -
- + +
+ + + + + - -
- - -
- -
+ + + +