From 29bc936148d5309f7fd031327e1759d196dd58b8 Mon Sep 17 00:00:00 2001 From: cdujeu Date: Tue, 22 Mar 2016 12:01:08 +0100 Subject: [PATCH] Re-enable Folders upload for Chrome / Mac (utf8 issues are now fixed). Rework UI when folders upload is enabled. --- .../orbit/css/components/uploaders.less | 57 +++++++++++--- .../gui.ajax/res/themes/orbit/css/pydio.css | 55 ++++++++++---- .../class.SimpleUploadProcessor.php | 2 +- .../uploader.html/class.XHRUploader.js | 75 ++++++++++++++----- 4 files changed, 144 insertions(+), 45 deletions(-) diff --git a/core/src/plugins/gui.ajax/res/themes/orbit/css/components/uploaders.less b/core/src/plugins/gui.ajax/res/themes/orbit/css/components/uploaders.less index 7e0c04483a..d86b5c1290 100644 --- a/core/src/plugins/gui.ajax/res/themes/orbit/css/components/uploaders.less +++ b/core/src/plugins/gui.ajax/res/themes/orbit/css/components/uploaders.less @@ -75,16 +75,20 @@ div#upload_files_list, div#multiple_download_container } div#uploader_options_pane { + position: absolute; + right: 10px; + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 6px rgba(0, 0, 0, 0.23); background-color: white; font-size: 11px; height: 59px; overflow: hidden; - padding: 0 10px 7px; + padding: 12px 20px 20px; text-align: right; display: none; margin-bottom: 11px; + margin-top: -2px; margin-right: 2px; - border-right: 2px solid @uploaders_react_like_tab_tint; + z-index: 2; } div#total_files_list{ display:none !important; @@ -122,7 +126,7 @@ div#upload_files_list{ } span.item_relative_path{ - color: #ccc; + color: #5f5f5f; margin-left: 15px; font-size: 0.8em; } @@ -151,7 +155,21 @@ div#upload_files_list{ display:none; } - span.icon-remove-sign { + span.icon-folder-close{ + margin-right: 2px; + } + + span.icon-file-alt{ + display: inline-block; + margin:0 6px 0 2px; + } + + span.item-indent{ + display: inline-block; + margin-right:3px; + } + + span.icon-remove-sign, span.icon-ok { color: rgba(0,0,0,0.53); display: block; position: absolute; @@ -178,18 +196,27 @@ div#multiple_download_container div{ } #fileInputContainer { - @upload_button_width:270px; + @upload_button_width:250px; + @upload_button_outer_height:30px; position: relative; #fileInputContainerDiv { /* to fit 1px border */ margin: 0; padding: 0; position: relative; + display: inline-block; overflow: hidden; vertical-align: top; height: 47px; width: @upload_button_width + 22px; cursor: pointer; + &.folder_upload_button{ + .fakeUploadButton{ + background-color: #fefefe; + width: 130px; + color: rgba(0,0,0,0.76); + } + } } input { opacity: 0; @@ -199,14 +226,15 @@ div#multiple_download_container div{ top: 0; left: 0; z-index: 10000; - height: 56px; + height: @upload_button_outer_height; cursor: pointer !important; filter:alpha(opacity=0); + width: @upload_button_width; } #fileInputPos { text-align: left; - height: 60px; - width: 180px; + height: @upload_button_outer_height; + width: @upload_button_width; position: absolute; top: 0; overflow: hidden; @@ -222,10 +250,10 @@ div#multiple_download_container div{ vertical-align: middle; font-size: 14px; cursor: pointer; - font-weight: normal; + font-weight: 500; background-color: lighten(@applicationPrimaryColor, 60); - color:@applicationPrimaryColor; - box-shadow: @reactBoxShadowDepthHalf; + color:darken(@applicationPrimaryColor, 6); + box-shadow: @reactBoxShadowDepthMini; position: absolute; text-transform: uppercase; white-space: nowrap; @@ -234,12 +262,16 @@ div#multiple_download_container div{ top: 0; left: 0; margin:0; - span.icon-desktop { + span.icon-desktop, span.icon-folder-open-alt{ font-size: 20px; display: block; float: left; padding: 2px 10px 0 6px; } + span.icon-folder-open-alt{ + font-size: 18px; + padding: 3px 10px 0 6px; + } .disabled{ -moz-opacity: 0.5; @@ -261,6 +293,7 @@ div#multiple_download_container div{ bottom: 6px; right: 8px; color: rgb(203, 204, 206); + font-size: 12px; } #uploaderTextActions span{ diff --git a/core/src/plugins/gui.ajax/res/themes/orbit/css/pydio.css b/core/src/plugins/gui.ajax/res/themes/orbit/css/pydio.css index f1e084e2d7..7fce89ed8a 100644 --- a/core/src/plugins/gui.ajax/res/themes/orbit/css/pydio.css +++ b/core/src/plugins/gui.ajax/res/themes/orbit/css/pydio.css @@ -1843,16 +1843,20 @@ div#multiple_download_container { border-bottom: 3px solid #ff5722; } div#uploader_options_pane { + position: absolute; + right: 10px; + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 6px rgba(0, 0, 0, 0.23); background-color: white; font-size: 11px; height: 59px; overflow: hidden; - padding: 0 10px 7px; + padding: 12px 20px 20px; text-align: right; display: none; margin-bottom: 11px; + margin-top: -2px; margin-right: 2px; - border-right: 2px solid #ff5722; + z-index: 2; } div#total_files_list { display: none !important; @@ -1898,7 +1902,7 @@ div#upload_files_list div rect { fill: #ffffff; } div#upload_files_list span.item_relative_path { - color: #ccc; + color: #5f5f5f; margin-left: 15px; font-size: 0.8em; } @@ -1923,7 +1927,19 @@ div#upload_files_list span.statusText.new, div#upload_files_list #upload_files_list span.statusText.loaded { display: none; } -div#upload_files_list span.icon-remove-sign { +div#upload_files_list span.icon-folder-close { + margin-right: 2px; +} +div#upload_files_list span.icon-file-alt { + display: inline-block; + margin: 0 6px 0 2px; +} +div#upload_files_list span.item-indent { + display: inline-block; + margin-right: 3px; +} +div#upload_files_list span.icon-remove-sign, +div#upload_files_list span.icon-ok { color: rgba(0, 0, 0, 0.53); display: block; position: absolute; @@ -1967,12 +1983,18 @@ div#multiple_download_container div div a:hover { margin: 0; padding: 0; position: relative; + display: inline-block; overflow: hidden; vertical-align: top; height: 47px; - width: 292px; + width: 272px; cursor: pointer; } +#fileInputContainer #fileInputContainerDiv.folder_upload_button .fakeUploadButton { + background-color: #fefefe; + width: 130px; + color: rgba(0, 0, 0, 0.76); +} #fileInputContainer input { opacity: 0; -moz-opacity: 0; @@ -1982,14 +2004,15 @@ div#multiple_download_container div div a:hover { top: 0; left: 0; z-index: 10000; - height: 56px; + height: 30px; cursor: pointer !important; filter: alpha(opacity=0); + width: 250px; } #fileInputContainer #fileInputPos { text-align: left; - height: 60px; - width: 180px; + height: 30px; + width: 250px; position: absolute; top: 0; overflow: hidden; @@ -1998,16 +2021,16 @@ div#multiple_download_container div div a:hover { cursor: pointer; } #fileInputContainer .fakeUploadButton { - width: 270px; + width: 250px; padding: 6px; text-align: left; vertical-align: middle; font-size: 14px; cursor: pointer; - font-weight: normal; + font-weight: 500; background-color: #c9fffa; - color: #009688; - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16), 0 2px 3px rgba(0, 0, 0, 0.43); + color: #00776c; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.33); position: absolute; text-transform: uppercase; white-space: nowrap; @@ -2017,12 +2040,17 @@ div#multiple_download_container div div a:hover { left: 0; margin: 0; } -#fileInputContainer .fakeUploadButton span.icon-desktop { +#fileInputContainer .fakeUploadButton span.icon-desktop, +#fileInputContainer .fakeUploadButton span.icon-folder-open-alt { font-size: 20px; display: block; float: left; padding: 2px 10px 0 6px; } +#fileInputContainer .fakeUploadButton span.icon-folder-open-alt { + font-size: 18px; + padding: 3px 10px 0 6px; +} #fileInputContainer .fakeUploadButton .disabled { -moz-opacity: 0.5; opacity: 0.5; @@ -2037,6 +2065,7 @@ div#multiple_download_container div div a:hover { bottom: 6px; right: 8px; color: #cbccce; + font-size: 12px; } #uploaderTextActions span { cursor: pointer; diff --git a/core/src/plugins/uploader.html/class.SimpleUploadProcessor.php b/core/src/plugins/uploader.html/class.SimpleUploadProcessor.php index 17a39ba75b..a8884ecaf0 100644 --- a/core/src/plugins/uploader.html/class.SimpleUploadProcessor.php +++ b/core/src/plugins/uploader.html/class.SimpleUploadProcessor.php @@ -93,7 +93,7 @@ public function postProcess($action, $httpVars, $postProcessData) $s = ''; $s .= AJXP_XMLWriter::writeNodesDiff(array((isSet($result["UPDATED_NODE"])?"UPDATE":"ADD")=> array($result[(isSet($result["UPDATED_NODE"])?"UPDATED":"CREATED")."_NODE"])), false); $s.= ''; - print("\n var resultString = '".$s."'; var resultXML = parent.parseXml(resultString);"); + print("\n var resultString = '".str_replace("'", "\'", $s)."'; var resultXML = parent.parseXml(resultString);"); print("\n parent.PydioApi.getClient().parseXmlMessage(resultXML);"); } } diff --git a/core/src/plugins/uploader.html/class.XHRUploader.js b/core/src/plugins/uploader.html/class.XHRUploader.js index b3e9508819..79a188a75a 100644 --- a/core/src/plugins/uploader.html/class.XHRUploader.js +++ b/core/src/plugins/uploader.html/class.XHRUploader.js @@ -68,7 +68,6 @@ Class.create("XHRUploader", { this.contextNode = this.dataModel.getContextNode(); if(window.UploaderDroppedTarget && window.UploaderDroppedTarget.ajxpNode){ - //console.log(this.contextNode); this.contextNode = window.UploaderDroppedTarget.ajxpNode; } @@ -124,8 +123,7 @@ Class.create("XHRUploader", { handleDropEventResults: function(items, files){ - var isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0; - if ( !isMac && items && items.length && (items[0].getAsEntry || items[0].webkitGetAsEntry)) { + if (items && items.length && (items[0].getAsEntry || items[0].webkitGetAsEntry)) { var callback = this.addListRow.bind(this); var error = (console ? console.log : function(err){window.alert(err); }) ; var length = items.length; @@ -143,6 +141,7 @@ Class.create("XHRUploader", { callback(File); }, error ); } else if (entry.isDirectory) { + this.addFolderRow(entry.fullPath); this.recurseDirectory(entry, function(fileEntry){ var relativePath = fileEntry.fullPath; fileEntry.file(function(File) { @@ -168,6 +167,7 @@ Class.create("XHRUploader", { var recurseDir = this.recurseDirectory.bind(this); var dirReader = item.createReader(); var entries = []; + var oThis = this; var toArray = function(list){ return Array.prototype.slice.call(list || [], 0); @@ -180,6 +180,7 @@ Class.create("XHRUploader", { $A(entries).each(function(e){ if(e.isDirectory){ + oThis.addFolderRow(e.fullPath); recurseDir(e, completeHandler, errorHandler); }else{ completeHandler(e); @@ -224,7 +225,16 @@ Class.create("XHRUploader", { }.bind(this)); } - this.initElement(); + var element = this.mainForm.down('.dialogFocus'); + this.initElement(element, false); + if('webkitdirectory' in element){ + var div = this.mainForm.down('#fileInputContainerDiv'); + var div2 = div.cloneNode(true); + div2.addClassName('folder_upload_button'); + div.insert({after:div2}); + div2.down('#uploadBrowseButton').update(' ' + pydio.MessageHash['502']); + this.initElement(div2.down('input'), true); + } var dropzone = this.listTarget; dropzone.addClassName('droparea'); @@ -392,14 +402,27 @@ Class.create("XHRUploader", { /** * Add a new file input element */ - initElement : function( ){ - var element = this.mainForm.down('.dialogFocus'); - element.setAttribute("multiple", "true"); - if(Prototype.Browser.Gecko) element.setStyle({left:'-100px'}); + initElement : function(element, uploadFolder ){ + + if(uploadFolder){ + element.setAttribute("webkitdirectory", "true"); + }else{ + element.setAttribute("multiple", "true"); + } element.observe("change", function(event){ var files = element.files; + var folders = {}; for(var i=0;i '}); } @@ -437,11 +459,11 @@ Class.create("XHRUploader", { var row = new Element('div').update(' ' + getBaseName(folderPath)); this.pathToIndent(row, folderPath); - row.FOLDER = true; + row.status = 'folder'; + row.folderPath = folderPath; this.listTarget.insert(row); }, - */ /** * Add a new row to the list of files @@ -492,7 +514,7 @@ Class.create("XHRUploader", { label = label.substr(0,20) + '[...]' + label.substr(label.length-(maxLength-20), label.length); } - var item = new Element( 'div' ); + var item = new Element( 'div' ).update(''); // Delete button var delButton = new Element( 'img', { src:ajxpResourcesFolder+'/images/actions/16/editdelete.png', @@ -517,12 +539,19 @@ Class.create("XHRUploader", { item.insert( label.stripTags() ); if(relativePath){ item.relativePath = relativePath; + this.pathToIndent(item, item.relativePath); item.insert( ''+getRepName(relativePath)+'' ); + var folderItem = $A(this.listTarget.childNodes).find(function(c){ + return c.folderPath == PathUtils.getDirname(relativePath); + }); + } + if(folderItem){ + folderItem.insert({after: item}); + }else{ + // Add it to the list + this.listTarget.insert( item ); } - // Add it to the list - this.listTarget.insert( item ); - var id = 'pgBar_' + (this.listTarget.childNodes.length + 1); if(this.rowAsProgressBar){ this.createInnerProgressBar(item, id); @@ -765,15 +794,18 @@ Class.create("XHRUploader", { if(!this.createdDirs) this.createdDirs = $A(); // Create the folder directly! var createConn = new Connexion(); + createConn.onComplete = function(){ + pydio.fireContextRefresh(); + }; var dirPath = getRepName(item.relativePath); var parts = dirPath.split("/"); var localDir = ""; for(var i=0;i'}); + } this.createdDirs.push(localDir); } }