Browse Source

HUE-782 [core] jHueFileChooser allowed to select a folder

Added parameter selectFolder (true/false)
Added callback function folderChoose for selectFolder action
Style update for action buttons and fileuploader button
Updated css that created a regression on displaying upload progress
Fixed bug with multiple file upload within the file chooser
Enrico Berti 13 years ago
parent
commit
306199fd87

+ 1 - 1
apps/filebrowser/src/filebrowser/templates/listdir_components.mako

@@ -371,7 +371,7 @@ from django.utils.translation import ugettext as _
             onSubmit:function(id, fileName, responseJSON){
                 num_of_pending_uploads++;
             },
-            debug: true
+            debug: false
         });
     }
 

+ 1 - 1
apps/jobsub/src/jobsub/templates/edit_design.mako

@@ -188,7 +188,7 @@ ${layout.menubar(section='designs')}
         height:270px;
     }
     #fileChooserModal > ul.unstyled {
-        height:230px;
+        height:180px;
         overflow-y:auto;
     }
     .designTable {

+ 12 - 0
desktop/core/static/css/hue2.css

@@ -830,6 +830,18 @@ div.box {
     background-color: #E5E5FF;
 }
 
+
+/*
+ * jHueFileChooser
+ */
+
+.jHueFilechooserActions {
+    margin-top: 14px;
+    padding-top: 10px;
+    border-top: 1px dashed #EEEEEE;
+}
+
+
 /*
  * jHueSelector
  */

+ 105 - 49
desktop/core/static/ext/css/fileuploader.css

@@ -1,70 +1,126 @@
-.qq-uploader { position:relative; width: 100%;}
+.qq-uploader {
+    position: relative;
+}
 
 .qq-upload-button {
-    display:block; /* or inline-block */
-    width: 105px; padding: 7px 0; text-align:center;    
-    /* -moz-border-bottom-colors: none;
-    -moz-border-image: none;
-    -moz-border-left-colors: none;
-    -moz-border-right-colors: none;
-    -moz-border-top-colors: none; */
-    cursor:pointer;
-    background-color:#e6e6e6;
-    background-repeat:no-repeat;
-    background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
-    background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-    background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
-    background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-    background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-    background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
-    padding:5px 14px 6px;
-    text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);
-    color:#333;
-    font-size:13px;
-    line-height:normal;
-    border:1px solid #ccc;
-    border-bottom-color:#bbb;
-    -webkit-border-radius:4px;
-    -moz-border-radius:4px;
-    border-radius:4px;
-    -webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
-    -moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
-    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
-    -webkit-transition:0.1s linear all;
-    -moz-transition:0.1s linear all;
-    -ms-transition:0.1s linear all;
-    -o-transition:0.1s linear all;
-    transition:0.1s linear all;
-
+    display: inline-block;
+    *display: inline;
+    padding: 4px 10px 4px;
+    margin-bottom: 0;
+    *margin-left: .3em;
+    font-size: 13px;
+    line-height: 18px;
+    *line-height: 20px;
+    color: #333333;
+    text-align: center;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    vertical-align: middle;
+    cursor: pointer;
+    background-color: #f5f5f5;
+    *background-color: #e6e6e6;
+    background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+    background-image: linear-gradient(top, #ffffff, #e6e6e6);
+    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+    background-repeat: repeat-x;
+    border: 1px solid #cccccc;
+    *border: 0;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+    border-bottom-color: #b3b3b3;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#e6e6e6', GradientType = 0);
+    filter: progid:dximagetransform.microsoft.gradient(enabled = false);
+    *zoom: 1;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
 }
+
 .qq-upload-button-hover {
-    background-position: 0 -15px;
     color: #333333;
     text-decoration: none;
-    cursor: pointer;
+    background-color: #e6e6e6;
+    *background-color: #d9d9d9;
+    /* Buttons in IE7 don't get borders, so darken on hover */
+
+    background-position: 0 -15px;
+    -webkit-transition: background-position 0.1s linear;
+    -moz-transition: background-position 0.1s linear;
+    -ms-transition: background-position 0.1s linear;
+    -o-transition: background-position 0.1s linear;
+    transition: background-position 0.1s linear;
 }
+
 .qq-upload-button-focus {
     outline: 1px dotted #666666;
 }
 
 .qq-upload-drop-area {
-    position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2;
-    background:#FF9797; text-align:center; 
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    min-height: 70px;
+    z-index: 2;
+    background: #FF9797;
+    text-align: center;
 }
+
 .qq-upload-drop-area span {
-    display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px;
+    display: block;
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    margin-top: -8px;
+    font-size: 16px;
+}
+
+.qq-upload-drop-area-active {
+    background: #FF7171;
+}
+
+.qq-upload-list {
+    margin: 15px 35px;
+    padding: 0;
+    list-style: disc;
+}
+
+.qq-upload-list li {
+    margin: 0;
+    padding: 0;
+    line-height: 15px;
+    font-size: 12px;
 }
-.qq-upload-drop-area-active {background:#FF7171;}
 
-.qq-upload-list {margin:15px 35px; padding:0; list-style:disc;}
-.qq-upload-list li { margin:0; padding:0; line-height:15px; font-size:12px;}
 .qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
     margin-right: 7px;
 }
 
-.qq-upload-file {}
-.qq-upload-spinner {display:inline-block; background: url("/static/ext/js/loading.gif"); width:15px; height:15px; vertical-align:text-bottom;}
-.qq-upload-size,.qq-upload-cancel {font-size:11px;}
+.qq-upload-file {
+}
+
+.qq-upload-spinner {
+    display: inline-block;
+    background: url("/static/ext/js/loading.gif");
+    width: 15px;
+    height: 15px;
+    vertical-align: text-bottom;
+}
+
+.qq-upload-size, .qq-upload-cancel {
+    font-size: 11px;
+}
+
+.qq-upload-failed-text {
+    display: none;
+}
 
-.qq-upload-failed-text {display:none;}
-.qq-upload-fail .qq-upload-failed-text {display:inline;}
+.qq-upload-fail .qq-upload-failed-text {
+    display: inline;
+}

+ 48 - 12
desktop/core/static/js/Source/jHue/jquery.filechooser.js

@@ -9,8 +9,18 @@
             initialPath:"",
             createFolder:true,
             uploadFile:true,
+            selectFolder:false,
+            labels: {
+                BACK: "Back",
+                SELECT_FOLDER: "Select this folder",
+                CREATE_FOLDER: "Create folder",
+                FOLDER_NAME: "Folder name",
+                CANCEL: "Cancel"
+            },
             onFileChoose:function () {
             },
+            onFolderChoose:function () {
+            },
             onFolderChange:function () {
             }
         };
@@ -36,7 +46,7 @@
             if (data.title != null && data.title == "Error") {
                 var _errorMsg = $("<div>").addClass("alert").addClass("alert-error").text(data.message);
                 _errorMsg.appendTo($(_parent.element));
-                var _previousLink = $("<button>").addClass("btn").addClass("bnt-small").text("Back").click(function () {
+                var _previousLink = $("<button>").addClass("btn").addClass("bnt-small").text(_parent.options.labels.BACK).click(function () {
                     _parent.options.onFolderChange(_parent.previousPath);
                     _parent.navigateTo(_parent.previousPath);
                 });
@@ -99,26 +109,43 @@
                     _f.appendTo(_flist);
                 });
                 _flist.appendTo($(_parent.element));
-                var _actions = $("<div>").addClass("clearfix").attr('id', 'actionsDiv');
+                var _actions = $("<div>").addClass("jHueFilechooserActions");
+                var _showActions = false;
                 var _uploadFileBtn;
                 var _createFolderBtn;
+                var _selectFolderBtn;
                 if (_parent.options.uploadFile) {
-                    _uploadFileBtn = $("<div>").attr('id', 'file-uploader');
+                    _uploadFileBtn = $("<div>").attr("id", "file-uploader");
                     _uploadFileBtn.appendTo(_actions);
+                    _showActions = true;
                     initUploader(path, _parent, _uploadFileBtn);
                 }
+                if (_parent.options.selectFolder) {
+                    _selectFolderBtn = $("<button>").addClass("btn").addClass("small").text(_parent.options.labels.SELECT_FOLDER);
+                    if (_parent.options.uploadFile){
+                        _selectFolderBtn.css("margin-top", "10px");
+                    }
+                    _selectFolderBtn.appendTo(_actions);
+                    _showActions = true;
+                    _selectFolderBtn.click(function () {
+                        _parent.options.onFolderChoose(path);
+                    });
+                }
                 $("<span> </span>").appendTo(_actions);
                 if (_parent.options.createFolder) {
-                    _createFolderBtn = $("<button>").addClass("btn").addClass("small").text("Create folder");
+                    _createFolderBtn = $("<button>").addClass("btn").addClass("small").text(_parent.options.labels.CREATE_FOLDER);
+                    if (_parent.options.uploadFile){
+                        _createFolderBtn.css("margin-top", "10px");
+                    }
                     _createFolderBtn.appendTo(_actions);
-                    var _createFolderDetails = $("<div>").css("padding-top", "10px");
+                    _showActions = true;
+                    var _createFolderDetails = $("<form>").css("margin-top", "10px").addClass("well form-inline");
                     _createFolderDetails.hide();
-
-                    var _folderName = $("<input>").attr("type", "text").attr("placeholder", "Folder name").appendTo(_createFolderDetails);
+                    var _folderName = $("<input>").attr("type", "text").attr("placeholder", _parent.options.labels.FOLDER_NAME).appendTo(_createFolderDetails);
+                    $("<span> </span>").appendTo(_createFolderDetails);
+                    var _folderBtn = $("<input>").attr("type", "button").attr("value", _parent.options.labels.CREATE_FOLDER).addClass("btn primary").appendTo(_createFolderDetails);
                     $("<span> </span>").appendTo(_createFolderDetails);
-                    var _folderBtn = $("<input>").attr("type", "button").attr("value", "Create").addClass("btn primary").appendTo(_createFolderDetails);
-                    $("<span> or </span>").appendTo(_createFolderDetails);
-                    var _folderCancel = $("<a>").attr("href", "#").text("cancel").appendTo(_createFolderDetails);
+                    var _folderCancel = $("<input>").attr("type", "button").attr("value", _parent.options.labels.CANCEL).addClass("btn").appendTo(_createFolderDetails);
                     _folderCancel.click(function () {
                         if (_uploadFileBtn) {
                             _uploadFileBtn.removeClass("disabled");
@@ -160,14 +187,17 @@
                         _createFolderBtn.addClass("disabled");
                         _createFolderDetails.slideDown();
                     });
+                }
+                if (_showActions){
                     _actions.appendTo($(_parent.element));
                 }
             }
         });
 
     };
+
+    var num_of_pending_uploads = 0;
     function initUploader(path, _parent, el) {
-        completeRefreshPath = path;
         var uploader = new qq.FileUploader({
             element:el[0],
             action:'/filebrowser/upload',
@@ -176,7 +206,13 @@
                 fileFieldLabel:'hdfs_file'
             },
             onComplete:function (id, fileName, responseJSON) {
-                _parent.navigateTo(path);
+                num_of_pending_uploads--;
+                if(num_of_pending_uploads == 0){
+                    _parent.navigateTo(path);
+                }
+            },
+            onSubmit: function(id, fileName){
+                num_of_pending_uploads++;
             },
             debug:false
         });