haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-12 21:30:39 +00:00
Code Issues Releases Wiki Activity

Improve file upload menu

Browse Source
This commit is contained in:
Daniel Pan
2016-04-20 18:00:38 +08:00
parent 0a725c7e8f
commit bc0fe0e93b
3 changed files with 54 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
media/css/seahub.css
View File

@@ -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,
#upload-file input,
#upload-menu input {
.fileinput-button input {
position: absolute;
top: 0;
right: 0;

20
seahub/templates/js/templates.html
View File

@@ -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">
<span>{% trans "Upload" %}</span>
<input type="file" name="file" multiple />
<div id="basic-upload" class="inline-block">
<button class="op-btn basic-upload-btn" >{% trans "Upload" %}</button>
<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">
<span>{% trans "Upload Files" %}</span>
<input type="file" name="file" multiple />
<li>
<a class="op advanced-upload-file" href="#">{% trans "Upload Files" %}</a>
<input id="advanced-upload-file-input" class="hide" type="file" name="file" multiple />
</li>
<li class="item">
<span>{% trans "Upload Folder" %}</span>
<input type="file" name="file" multiple directory webkitdirectory />
<li>
<a class="op advanced-upload-folder" href="#">{% trans "Upload Folder" %}</a>
<input id="advanced-upload-folder-input" class="hide" type="file" name="file" multiple directory webkitdirectory />
</li>
</ul>
</div>

68
static/scripts/app/views/dir.js
View File

@@ -213,43 +213,36 @@ define([
// for fileupload
setFileInput: function () {
var dir = this.dir;
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) {
if (!dir.user_perm || dir.user_perm != 'rw') {
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' &&
'webkitdirectory' in $('input[type="file"]', $upload_btn)[0]) {
$upload_btn.remove();
$advanced_upload.removeAttr('style'); // show it
var $popup = this.fileUploadView.$el;
if (app.pageOptions.enable_upload_folder) {
if ('webkitdirectory' in $('#basic-upload-input')[0]) {
// if enable_upload_folder and is chrome
this.$("#basic-upload").remove();
this.$("#advanced-upload").show();
this.upload_dropdown = new DropdownView({
el: $advanced_upload
el: this.$("#advanced-upload")
});
$('.item', $upload_menu).click(function() {
$popup.fileupload(
'option',
'fileInput',
$('input[type="file"]', $(this))
);
})
.hover(
function() {
$(this).css({'background':'#f3f3f3'});
},
function() {
$(this).css({'background':'transparent'});
this.$('#advanced-upload input[type="file"]'));
} else {
this.$("#advanced-upload").remove();
$popup.fileupload(
'option',
'fileInput',
this.$('#basic-upload-input'));
}
);
} 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() {