Improve file upload menu

media/css/seahub.css

@@ -347,6 +347,7 @@ p { margin:0.5em 0; }
 .label { color:#333; font-size:12px; font-style:normal; }
 .italic { font-style:italic; }
 .alc { text-align: center;}
+.inline-block { display: inline-block; }
 .cspt { cursor:pointer; }
 .pos-rel { position:relative; }
 .top-tip {
@@ -2071,36 +2072,6 @@ button.dropdown-toggle:focus {
     margin-top:8px;
 }
 /* file upload */
-.repo-op .upload-file-btn {
-    display: inline-block;
-    height: auto;
-    padding: 5px 6px;
-    border: 1px solid #c5c5c5;
-    border-radius: 2px;
-    position:relative;
-    overflow:hidden;
-}
-#upload-menu,
-#add-pub-lib-menu {
-    position:absolute;
-    z-index:12; /* make it on top of a checkbox */
-    border:1px solid #c5c5c5;
-    border-radius:2px;
-    box-shadow: 0 0 2px #c5c5c5;
-    background:#fff;
-}
-#upload-menu .item,
-#add-pub-lib-menu .item {
-    padding:0 10px;
-    height:27px;
-    line-height:27px;
-    cursor:pointer;
-}
-#upload-menu .item {
-    position:relative;
-    white-space:nowrap;
-    overflow:hidden; /* for 'hover', as long 'input' in it. */
-}
 .fixed-upload-file-dialog {
     width: 540px;
     position: fixed;
@@ -2147,9 +2118,7 @@ button.dropdown-toggle:focus {
     font-size:13px;
     color:#333;
 }
-.fileinput-button input,
+.fileinput-button input {
-#upload-file input,
-#upload-menu input {
     position: absolute;
     top: 0;
     right: 0;

seahub/templates/js/templates.html

@@ -100,21 +100,21 @@
         <button id="cp-dirents" title="{% trans 'Copy' %}" class="op-btn sf2-icon-copy op-icon"></button>
         <button id="del-dirents" title="{% trans 'Delete' %}" class="op-btn sf2-icon-delete op-icon"></button>
     </div>
-    <div id="upload-file" class="op-btn upload-file-btn">
+    <div id="basic-upload" class="inline-block">
-        <span>{% trans "Upload" %}</span>
+        <button class="op-btn basic-upload-btn" >{% trans "Upload" %}</button>
-        <input type="file" name="file" multiple />
+        <input id="basic-upload-input" class="hide" type="file" name="file" multiple />
     </div>
     <% if (enable_upload_folder) { %>
-    <div id="advanced-upload" class="dropdown dropdown-inline" style="display:none;">
+    <div id="advanced-upload" class="dropdown dropdown-inline">
         <button class="dropdown-toggle op-btn">{% trans "Upload" %}</button>
         <ul id="upload-menu" class="dropdown-menu hide">
-            <li class="item">
+            <li>
-            <span>{% trans "Upload Files" %}</span>
+                <a class="op advanced-upload-file" href="#">{% trans "Upload Files" %}</a>
-            <input type="file" name="file" multiple />
+                <input id="advanced-upload-file-input" class="hide" type="file" name="file" multiple />
             </li>
-            <li class="item">
+            <li>
-            <span>{% trans "Upload Folder" %}</span>
+                <a class="op advanced-upload-folder" href="#">{% trans "Upload Folder" %}</a>
-            <input type="file" name="file" multiple directory webkitdirectory />
+                <input id="advanced-upload-folder-input" class="hide" type="file" name="file" multiple directory webkitdirectory />
             </li>
         </ul>
     </div>

static/scripts/app/views/dir.js

@@ -213,43 +213,36 @@ define([
             // for fileupload
             setFileInput: function () {
                 var dir = this.dir;
-
+                if (!dir.user_perm || dir.user_perm != 'rw') {
-                var $popup = this.fileUploadView.$el;
-                if (dir.user_perm && dir.user_perm == 'rw') {
-                    $popup.fileupload(
-                        'option',
-                        'fileInput',
-                        this.$('#upload-file input'));
-                }
-                if (!app.pageOptions.enable_upload_folder) {
                     return;
                 }
-                var $upload_btn = this.$('#upload-file'),
-                    $advanced_upload = this.$('#advanced-upload'),
-                    $upload_menu = this.$('#upload-menu');
 
-                if (dir.user_perm && dir.user_perm == 'rw' &&
+                var $popup = this.fileUploadView.$el;
-                    'webkitdirectory' in $('input[type="file"]', $upload_btn)[0]) {
+
-                    $upload_btn.remove();
+                if (app.pageOptions.enable_upload_folder) {
-                    $advanced_upload.removeAttr('style'); // show it
+                    if ('webkitdirectory' in $('#basic-upload-input')[0]) {
-                    this.upload_dropdown = new DropdownView({
+                        // if enable_upload_folder and is chrome
-                        el: $advanced_upload
+                        this.$("#basic-upload").remove();
-                    });
+                        this.$("#advanced-upload").show();
-                    $('.item', $upload_menu).click(function() {
+                        this.upload_dropdown = new DropdownView({
+                            el: this.$("#advanced-upload")
+                        });
                         $popup.fileupload(
                             'option',
                             'fileInput',
-                            $('input[type="file"]', $(this))
+                            this.$('#advanced-upload input[type="file"]'));
-                        );
+                    } else {
-                    })
+                        this.$("#advanced-upload").remove();
-                    .hover(
+                        $popup.fileupload(
-                        function() {
+                            'option',
-                            $(this).css({'background':'#f3f3f3'});
+                            'fileInput',
-                        },
+                            this.$('#basic-upload-input'));
-                        function() {
+                    }
-                            $(this).css({'background':'transparent'});
+                } else {
-                        }
+                    $popup.fileupload(
-                    );
+                        'option',
+                        'fileInput',
+                        this.$('#basic-upload-input'));
                 }
             },
 
@@ -474,7 +467,24 @@ define([
                 'click #cp-dirents': 'cp',
                 'click #del-dirents': 'del',
                 'click .by-name': 'sortByName',
-                'click .by-time': 'sortByTime'
+                'click .by-time': 'sortByTime',
+                'click .basic-upload-btn': 'uploadFile',
+                'click .advanced-upload-file': 'advancedUploadFile',
+                'click .advanced-upload-folder': 'advancedUploadFolder'
+            },
+
+            uploadFile: function() {
+                this.$('#basic-upload-input').trigger('click');
+            },
+
+            advancedUploadFile: function() {
+                this.$('#advanced-upload-file-input').trigger('click');
+                return false;
+            },
+
+            advancedUploadFolder: function() {
+                this.$('#advanced-upload-folder-input').trigger('click');
+                return false;
             },
 
             newDir: function() {