1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-10 11:21:29 +00:00

[fileupload] redesigned it.

This commit is contained in:
llj
2014-11-14 11:23:58 +08:00
parent 249a2addb5
commit c754f19f34
11 changed files with 391 additions and 297 deletions

View File

@@ -337,8 +337,7 @@ input.btn-disabled:hover {/*for input*/
.side-tabnav-tabs .tab a, .side-tabnav-tabs .tab a,
.checkbox, .checkbox,
.checkbox-checked, .checkbox-checked,
.modalCloseImg, .modalCloseImg {
#discuss {
background:transparent url('../img/bg.png') no-repeat scroll 0 0; background:transparent url('../img/bg.png') no-repeat scroll 0 0;
} }
.op-list li { .op-list li {
@@ -1187,7 +1186,7 @@ textarea:-moz-placeholder {/* for FF */
} }
#right-panel .hd button, #right-panel .hd button,
.tabnav button, .tabnav button,
.repo-file-list-topbar button, .repo-file-list-topbar .op-btn,
.wiki-top .op-btn { .wiki-top .op-btn {
height:29px; height:29px;
background:#fff; background:#fff;
@@ -1716,6 +1715,9 @@ textarea:-moz-placeholder {/* for FF */
.repo-op .op-btn [class^="sf-icon-"] { .repo-op .op-btn [class^="sf-icon-"] {
margin-right:3px; margin-right:3px;
} }
.repo-op .op-btn {
vertical-align:middle;
}
#featured-filetype { #featured-filetype {
margin:5px 0; margin:5px 0;
} }
@@ -1929,10 +1931,46 @@ textarea:-moz-placeholder {/* for FF */
margin-top:8px; margin-top:8px;
} }
/* file upload */ /* file upload */
.fileupload-buttonbar .start, .repo-op .upload-file-btn {
display: inline-block;
height: auto;
padding: 5px 6px;
border: 1px solid #c5c5c5;
border-radius: 2px;
position:relative;
overflow:hidden;
}
.fixed-upload-file-dialog {
width: 540px;
position: fixed;
bottom: 0;
right: 10px;
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 0 6px #ddd;
}
.fixed-upload-file-dialog .hd {
padding: 6px 10px;
background: #f0f0f0;
margin:0;
}
.fixed-upload-file-dialog .con {
height:114px;
overflow-y:auto;
}
.fixed-upload-file-dialog .ops {
position:absolute;
top:10px;
right:10px;
}
.fixed-upload-file-dialog .close,
.fileupload-buttonbar .cancel { .fileupload-buttonbar .cancel {
*margin-left:5px; *margin-left:5px;
} }
.fileupload-progress {
margin-top:5px;
}
.fileinput-button { .fileinput-button {
display:inline-block; display:inline-block;
line-height:19px; line-height:19px;
@@ -1943,7 +1981,8 @@ textarea:-moz-placeholder {/* for FF */
font-size:13px; font-size:13px;
color:#333; color:#333;
} }
.fileinput-button input { .fileinput-button input,
#upload-file input {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@@ -1958,6 +1997,7 @@ textarea:-moz-placeholder {/* for FF */
} }
.table .name { .table .name {
width:60%; width:60%;
padding-left:10px;
} }
.table .size { .table .size {
width:14%; width:14%;
@@ -1965,16 +2005,19 @@ textarea:-moz-placeholder {/* for FF */
.template-upload .start { .template-upload .start {
text-align:right; text-align:right;
} }
.template-upload .start { .fixed-upload-file-dialog .fileupload-buttonbar .cancel,
text-align:right; .template-upload .btn {
background: transparent;
border: none;
color: #e83;
}
.fixed-upload-file-dialog .fileupload-buttonbar .cancel {
color:#909090;
} }
.template-upload .start, .template-upload .start,
.template-upload .cancel { .template-upload .cancel {
width:13%; width:13%;
} }
.fileupload-progress {
margin-top:10px;
}
.ui-progressbar, .ui-progressbar,
.progress { .progress {
background-color: #F7F7F7; background-color: #F7F7F7;
@@ -2009,6 +2052,7 @@ textarea:-moz-placeholder {/* for FF */
*padding-left:1.9em; *padding-left:1.9em;
margin-top:5px; margin-top:5px;
} }
/* repo-history */ /* repo-history */
#back { #back {
margin-top:3px; margin-top:3px;
@@ -2431,9 +2475,6 @@ textarea:-moz-placeholder {/* for FF */
margin-left:64px; margin-left:64px;
} }
/*file upload*/ /*file upload*/
#upload-file-form {
margin-top:10px;
}
.files-add { .files-add {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@@ -2680,11 +2721,12 @@ textarea:-moz-placeholder {/* for FF */
#md-edit-help { #md-edit-help {
width:550px; width:550px;
} }
#fileview-toolbar { /* for repo, file_view page. */
#side-toolbar {
position:fixed; position:fixed;
right:0; right:0;
} }
.fileview-toolbar .item { .side-toolbar .item {
width:59px; width:59px;
height:40px; height:40px;
padding-top:18px; padding-top:18px;
@@ -2695,11 +2737,11 @@ textarea:-moz-placeholder {/* for FF */
border-right:0; border-right:0;
border-top:0; border-top:0;
} }
.fileview-toolbar .item:first-child { .side-toolbar .item:first-child {
border-top:1px solid #c0c0c0; border-top:1px solid #c0c0c0;
border-top-left-radius:3px; border-top-left-radius:3px;
} }
.fileview-toolbar .item:last-child { .side-toolbar .item:last-child {
border-bottom-left-radius:3px; border-bottom-left-radius:3px;
} }
/* shareadmin & useradmin */ /* shareadmin & useradmin */
@@ -2715,43 +2757,13 @@ textarea:-moz-placeholder {/* for FF */
border:1px solid #ddd; border:1px solid #ddd;
border-radius:2px; border-radius:2px;
} }
/*bottom bar*/
#bottom-bar {
position:fixed;
bottom:0;
right:10px;
background:#fff;
border-style:solid;
border-width:1px;
border-color:#f2f2f2 #cacaca #919191;
border-top-left-radius:4px;
border-top-right-radius:4px;
}
#discuss, #click-into-group {
color:#424242;
font-size:15px;
line-height:21px;
padding:3px 16px;
border:none;
}
#discuss {
padding-left: 42px;
background-color:#fff;
background-position: 16px -162px;
}
#click-into-group {
background:#fff;
border-left:1px solid #ebebeb;
}
#bottom-bar button:focus {
outline:none;
}
#to-group, #to-group,
#discuss-to-group { #discuss-to-group {
width:400px; width:400px;
padding:0 15px; padding:0 15px;
position:fixed; position:fixed;
right:10px; right:0;
border-radius:5px 0 0 5px;
background:#fff; background:#fff;
border:1px solid #cbcbcb; border:1px solid #cbcbcb;
box-shadow: 0 2px 4px rgba(0,0,0,.2); box-shadow: 0 2px 4px rgba(0,0,0,.2);
@@ -2775,22 +2787,38 @@ textarea:-moz-placeholder {/* for FF */
#discussions-to-grp .reply-input { #discussions-to-grp .reply-input {
width:270px; width:270px;
} }
#to-group-caret,
#discuss-to-group-caret {
width:28px;
position:fixed;
}
#to-group, #to-group,
#discuss-to-group, #discuss-to-group {
#to-group-caret,
#discuss-to-group-caret {
z-index:12; /* to be on top of 'fixed-hd' in repo.html*/ z-index:12; /* to be on top of 'fixed-hd' in repo.html*/
} }
/*to-group*/ /*to-group*/
#to-group { #to-group {
min-width:100px;
width:auto; width:auto;
padding:6px 0; min-width:250px;
padding:0 12px 10px;
right:78px;
}
#to-group .outer-caret {
position:absolute;
top: 15px;
right: -15px;
}
#to-group .outer-caret,
#to-group .inner-caret {
border-color:transparent #cbcbcb;
border-right-width:0;
}
#to-group .inner-caret {
border-left-color:#fff;
top:-15px;
left:-16px;
}
#to-group ul {
padding-left: 20px;
list-style-type: disc;
}
#to-group a {
padding:1px 3px;
} }
/*discuss to group*/ /*discuss to group*/
#discuss-to-group-form .checkbox-label { #discuss-to-group-form .checkbox-label {

BIN
media/img/close.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 285 B

BIN
media/img/minus.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 177 B

File diff suppressed because one or more lines are too long

View File

@@ -10,29 +10,27 @@ def upload_js():
{% for (var i=0, file; file=o.files[i]; i++) { %} {% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade"> <tr class="template-upload fade">
{% if (file.error) { %} {% if (file.error) { %}
<td class="name">{%=file.name%}</td> <td class="name ellipsis" title="{%=file.name%}">{%=file.name%}</td>
<td class="size">{%=o.formatFileSize(file.size)%}</td> <td class="size">{%=o.formatFileSize(file.size)%}</td>
<td class="error"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td> <td class="error"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
{% } else if (o.files.valid && !i) { %} {% } else if (o.files.valid && !i) { %}
<td class="name"> <td class="name ellipsis" title="{%=file.name%}">
{%=file.name%} {%=file.name%}
<div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div> <div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
</td> </td>
<td class="size">{%=o.formatFileSize(file.size)%}</td> <td class="size">{%=o.formatFileSize(file.size)%}</td>
<td class="start">{% if (!o.options.autoUpload) { %} <td class="start">{% if (!o.options.autoUpload) { %}
<button class="btn btn-success"> <button class="btn btn-success">
<span class="icon-upload"></span>
<span>{%=locale.fileupload.start%}</span> <span>{%=locale.fileupload.start%}</span>
</button> </button>
{% } %}</td> {% } %}</td>
{% } else { %} {% } else { %}
<td class="name">{%=file.name%}</td> <td class="name ellipsis" title="{%=file.name%}">{%=file.name%}</td>
<td class="size">{%=o.formatFileSize(file.size)%}</td> <td class="size">{%=o.formatFileSize(file.size)%}</td>
<td></td> <td></td>
{% } %} {% } %}
<td class="cancel">{% if (!i) { %} <td class="cancel">{% if (!i) { %}
<button class="btn btn-warning"> <button class="btn btn-warning">
<span class="icon-ban-circle"></span>
<span>{%=locale.fileupload.cancel%}</span> <span>{%=locale.fileupload.cancel%}</span>
</button> </button>
{% } %}</td> {% } %}</td>
@@ -43,14 +41,14 @@ def upload_js():
<script id="template-download" type="text/x-tmpl"> <script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %} {% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade"> <tr class="template-download fade">
<td class="name ellipsis" title="{%=file.name%}">{%=file.name%}</td>
<td class="size">{%=o.formatFileSize(file.size)%}</td>
{% if (file.error) { %} {% if (file.error) { %}
<td class="name">{%=file.name%}</td>
<td class="size">{%=o.formatFileSize(file.size)%}</td>
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}:</span> {%=locale.fileupload.errors[file.error] || file.error%}</td> <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}:</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
{% } else if (file.canceled) { %}
<td colspan="2" class="tip">{%=locale.fileupload.canceled%}</td>
{% } else { %} {% } else { %}
<td class="name">{%=file.name%}</td> <td colspan="2" class="tip">{%=locale.fileupload.uploaded%}</td>
<td class="size">{%=o.formatFileSize(file.size)%}</td>
<td colspan="2"></td>
{% } %} {% } %}
</tr> </tr>
{% } %} {% } %}

View File

@@ -53,47 +53,36 @@
<button id="cp-dirents" title="{% trans "Copy"%}" class="op-icon-btn"><span class="icon-copy"></span></button> <button id="cp-dirents" title="{% trans "Copy"%}" class="op-icon-btn"><span class="icon-copy"></span></button>
</div> </div>
{% endif %} {% endif %}
<div id="upload-file-dialog" class="hide"> <div id="upload-file-dialog" class="hide">
<h3>{% trans "Upload Files" %}</h3>
{% if no_quota %} {% if no_quota %}
<h3>{% trans "Upload Files" %}</h3>
<p class="error">{% trans "The owner of this library has run out of space." %}</p> <p class="error">{% trans "The owner of this library has run out of space." %}</p>
{% else %} {% else %}
<form id="upload-file-form" enctype="multipart/form-data" method="post" action="">{% csrf_token %}
{% if repo.enc_version == 2 and not server_crypto and repo.encrypted %} {% if repo.enc_version == 2 and not server_crypto and repo.encrypted %}
<input type="file" name="file" /><br /> <form id="upload-file-form" enctype="multipart/form-data" method="post" action="">{% csrf_token %}
<p class="error hide">{% trans "Please select a file at first." %}</p> <h3>{% trans "Upload Files" %}</h3>
<input type="button" value="{% trans "Submit" %}" /> <input type="file" name="file" /><br />
<p class="error hide">{% trans "Please select a file at first." %}</p>
<input type="button" value="{% trans "Submit" %}" />
</form>
{% else %} {% else %}
<input type="hidden" name="parent_dir" value="{{ path }}" /> <h3 class="hd"><span class="status"></span> <span class="total-progress hide"></span></h3>
<div class="row fileupload-buttonbar"> <div class="ops">
<div> <img src="{{MEDIA_URL}}img/minus.png" alt="" class="fold-switch cspt" />
<span class="fileinput-button vam"> <img src="{{MEDIA_URL}}img/close.png" alt="close" title="{% trans "close" %}" class="close cspt hide" />
<span class="icon-plus"></span> </div>
<span>{% trans "Add Files" %}</span> <div class="con">
<input type="file" name="file" multiple /> <div class="row fileupload-buttonbar">
</span> <button type="button" class="cancel cspt fright">{% trans "Cancel All" %}</button>
<button type="reset" class="cancel vam"> </div>
<span class="icon-ban-circle"></span> <p class="saving-tip alc clear hide"><img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" style="margin-right:5px;" class="vam" />{% trans "Saving..." %}</p>
<span>{% trans "Cancel All" %}</span> <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</button>
</div>
<ol class="tip">
<li>{% trans "Drag & Drop is supported for Chrome, Safari 5.0+, Firefox 4.0+, IE 10.0+" %}</li>
{% if max_upload_file_size %}
<li>{% blocktrans with max_file_size=max_upload_file_size|filesizeformat %}File size should be smaller than {{ max_file_size }}{% endblocktrans %}</li>
{% endif %}
</ol>
<div class="fileupload-progress fade">
<div class="progress progress-success progres-striped active">
<div class="bar" style="width:0%"></div>
</div>
<div class="progress-extended"></div>
</div>
<p class="saving-tip alc hide"><img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" style="margin-right:5px;" class="vam" />{% trans "Saving..." %}</p>
</div> </div>
<table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
{% endif %} {% endif %}
</form>
{% endif %} {% endif %}
</div> </div>
@@ -219,19 +208,155 @@
{% url 'edit_profile' as profile_edit_url %} {% url 'edit_profile' as profile_edit_url %}
<p class="tip" style="margin-top:3em;">{% blocktrans %}You can change how to view encrypted libraries online <a class="normal" href="{{ profile_edit_url }}#enc-lib-setting">here</a>.{% endblocktrans %}</p> <p class="tip" style="margin-top:3em;">{% blocktrans %}You can change how to view encrypted libraries online <a class="normal" href="{{ profile_edit_url }}#enc-lib-setting">here</a>.{% endblocktrans %}</p>
</form> </form>
{% endif %} {% endif %}
<div id="side-toolbar">
<ul class="side-toolbar">
{% if groups %}
<li class="item" id="discuss" title="{% trans "Discussion" %}"><img src="{{MEDIA_URL}}img/discuss.png" alt="{% trans "discuss" %}" /></li>
<li id="click-into-group" class="item" title="{% trans "Go to a group" %}"><img src="{{MEDIA_URL}}img/groups.png" alt="{% trans "group" %}" /></li>
{% endif %}
</ul>
<div>
{% if groups|length > 1 %}
<div id="to-group" class="hide">
<h3>{% trans "Groups" %}</h3>
{{ repo_group_str }}
<div class="outer-caret"><div class="inner-caret"></div></div>
</div>
{% endif %}
{% endblock %} {% endblock %}
{% block extra_script %} {% block extra_script %}
{% if not no_quota %}
{% if repo.enc_version == 2 and not server_crypto and repo.encrypted %} {% if repo.enc_version == 2 and not server_crypto and repo.encrypted %}
<script type="text/javascript" src="{{MEDIA_URL}}js/repo_crypto.js"></script> <script type="text/javascript" src="{{MEDIA_URL}}js/repo_crypto.js"></script>
{% else %} {% else %}
{% upload_js %} {% upload_js %}
<script type="text/javascript"> <script type="text/javascript">
function addFile(file_data) {
var now = parseInt(new Date().getTime()/1000);
var cur_files = $('.file-item');
if (cur_files.length == 0) { // there is no file before this upload
reqDirData('{% url 'repo_dir_data' repo.id %}?p=' + e(cur_path));
} else {
var file_tpl = $(cur_files[0]);
var path = cur_path;
var new_name = file_data.name;
var new_file = file_tpl.clone(true);
new_file.attr({
'data-name': new_name,
'data-time': now
});
$('.file-star', new_file).attr({
'title': "{% trans "unstarred" %}",
'class': 'icon-star-empty file-star',
'data-status': 'unstarred'
});
$('.dirent-icon img', new_file).attr('src', '{{MEDIA_URL}}img/file/file.png');
$('.dirent-name a', new_file).html(new_name).attr('href', '{% url 'repo_view_file' repo.id %}?p=' + e(path+new_name));
$('.dirent-size', new_file).html(filesizeformat(file_data.size, 1));
$('.dirent-update', new_file).html("{% trans "Just now" %}");
$('.file-download', new_file).attr('href', '{{SITE_ROOT}}repo/{{repo.id}}/' + file_data.id + '/download/?p=' + e(path+new_name));
$('.file-share', new_file).attr({
'data-link': '',
'data-token': ''
});
$('.file-history', new_file).attr('href', '{% url 'file_revisions' repo.id %}?p=' + e(path+new_name));
file_tpl.before(new_file);
updateCmt();
}
}
$(function() { $(function() {
$.getScript('{{ MEDIA_URL }}js/jquery.fileupload.min.js'); $.getScript('{{ MEDIA_URL }}js/jquery.fileupload.min.js', function () {
var popup = $('#upload-file-dialog').addClass('fixed-upload-file-dialog');;
var popup_height = '150px';
popup.css({'height': popup_height}).data('height', popup_height);
var fu_status = $('.status', popup),
total_progress = $('.total-progress', popup),
cancel_all_btn = $('.fileupload-buttonbar .cancel', popup),
close_icon = $('.close', popup);
fu_status.data({
'complete_status':"{% trans "File Upload complete" %}",
'cancel_status':"{% trans "File Upload canceled" %}"
});
popup.fileupload({
formData: {'parent_dir': cur_path},
fileInput: $('#upload-file input'),
autoUpload:true,
sequentialUploads: true
})
.bind('fileuploadadd', function() {
popup.removeClass('hide');
fu_status.html("{% trans "File Uploading..." %}");
cancel_all_btn.removeClass('hide');
close_icon.addClass('hide');
})
.bind('fileuploadsubmit', function(e, data) {
var _this = $(this);
var file = data.files[0];
// get url(token) for every file
if (!file.error) {
$.ajax({
url: '{% url 'get_file_op_url' repo.id %}?op_type=upload',
cache: false,
dataType: 'json',
success: function(ret) {
data.url = ret['url'];
data.jqXHR = _this.fileupload('send', data);
},
error: function() {
file.error = "{% trans "Failed to get upload url" %}";
}
});
return false;
}
})
.bind('fileuploadprogressall', function (e, data) {
total_progress.html(parseInt(data.loaded / data.total * 100, 10) + '% ' + '<span style="font-size:14px;color:#555;">(' + $(this).data('fileupload')._formatBitrate(data.bitrate) + ')</span>').removeClass('hide');
})
.bind('fileuploaddone', function(e, data) {
if (data.textStatus == 'success') {
if (data.formData.parent_dir == cur_path) {
addFile(data.result[0]);
}
}
});
// Enable iframe cross-domain access via redirect option:
popup.fileupload(
'option',
'redirect',
window.location.href.replace(/\/repo\/[-a-z0-9]{36}\/.*/, '/media/cors/result.html?%s')
);
});
}); });
// fold/unfold the dialog
$('#upload-file-dialog .fold-switch').click(function() {
var popup = $('#upload-file-dialog');
var full_ht = parseInt(popup.data('height'));
var main_con = $('.fileupload-buttonbar, .table', popup);
if (popup.height() == full_ht) {
popup.height($('.hd', popup).outerHeight(true));
main_con.addClass('hide');
} else {
popup.height(full_ht);
main_con.removeClass('hide');
}
});
$('#upload-file-dialog .close').click(function() {
$('#upload-file-dialog').addClass('hide');
$('#upload-file-dialog .files').empty();
});
window.locale = { window.locale = {
"fileupload": { "fileupload": {
"errors": { "errors": {
@@ -243,6 +368,8 @@ window.locale = {
"emptyResult": "{% trans "Empty file upload result" %}" "emptyResult": "{% trans "Empty file upload result" %}"
}, },
"error": "{% trans "Error" %}", "error": "{% trans "Error" %}",
"uploaded": "{% trans "uploaded" %}",
"canceled": "{% trans "canceled" %}",
"start": "{% trans "Start" %}", "start": "{% trans "Start" %}",
"cancel": "{% trans "Cancel" %}", "cancel": "{% trans "Cancel" %}",
"destroy": "{% trans "Delete" %}" "destroy": "{% trans "Delete" %}"
@@ -250,6 +377,7 @@ window.locale = {
}; };
</script> </script>
{% endif %} {% endif %}
{% endif %}
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
// for file private share // for file private share
@@ -274,6 +402,20 @@ function reqDirData(url, func) {
cur_path = data['path']; // update cur_path cur_path = data['path']; // update cur_path
last_start = 0; // for current dir's 'list_dir_more' last_start = 0; // for current dir's 'list_dir_more'
{% if repo.enc_version == 2 and not server_crypto and repo.encrypted %}
{% else %}
{% if not no_quota %}
$('#upload-file-dialog').fileupload(
'option',
{
formData: {'parent_dir': cur_path},
fileInput: $('#upload-file input')
}
);
{% endif %}
{% endif %}
if (func) { if (func) {
func(data); func(data);
} }
@@ -932,101 +1074,11 @@ $('#upload-file').click(function () {
}); });
}); });
{% else %} {% else %}
{% if no_quota %}
$('#upload-file').click(function () { $('#upload-file').click(function () {
var uploaded_files = []; $('#upload-file-dialog').modal();
$('#upload-file-dialog').modal({
focus:false,
containerCss: {width:600, height:$(window).height()/1.5},
onClose: function() {
$.modal.close();
var now = parseInt(new Date().getTime()/1000);
if (uploaded_files.length > 0) {
var cur_files = $('.file-item');
if (cur_files.length == 0) { // there is no file before this upload
reqDirData('{% url 'repo_dir_data' repo.id %}?p=' + e(cur_path));
} else {
var file_tpl = $(cur_files[0]);
var path = cur_path;
$(uploaded_files).each(function(index, file_data) {
var new_name = file_data.name;
var new_file = file_tpl.clone(true);
new_file.attr({
'data-name': new_name,
'data-time': now
});
$('.file-star', new_file).attr({
'title': "{% trans "unstarred" %}",
'class': 'icon-star-empty file-star',
'data-status': 'unstarred'
});
$('.dirent-icon img', new_file).attr('src', '{{MEDIA_URL}}img/file/file.png');
$('.dirent-name a', new_file).html(new_name).attr('href', '{% url 'repo_view_file' repo.id %}?p=' + e(path+new_name));
$('.dirent-size', new_file).html(filesizeformat(file_data.size, 1));
$('.dirent-update', new_file).html("{% trans "Just now" %}");
$('.file-download', new_file).attr('href', '{{SITE_ROOT}}repo/{{repo.id}}/' + file_data.id + '/download/?p=' + e(path+new_name));
$('.file-share', new_file).attr({
'data-link': '',
'data-token': ''
});
$('.file-history', new_file).attr('href', '{% url 'file_revisions' repo.id %}?p=' + e(path+new_name));
file_tpl.before(new_file);
});
updateCmt();
}
}
}
});
$('.simplemodal-wrap').css({'overflow':'auto'}); // for ie
var form = $('#upload-file-form'),
parent_dir = $('input[name="parent_dir"]', form);
parent_dir.val(cur_path);
try {
// Initialize the jQuery File Upload widget, which needs to use form action
form.fileupload({
//singleFileUploads: false // using 1 request to upload all files of a selection
autoUpload: true,
sequentialUploads: true
})
.bind('fileuploadsubmit', function(e, data) {
var file = data.files[0];
// get url(token) for every file
if (!file.error) {
$.ajax({
url: '{% url 'get_file_op_url' repo.id %}?op_type=upload',
cache: false,
dataType: 'json',
success: function(ret) {
form.attr('action', ret['url']);
data.jqXHR = form.fileupload('send', data);
},
error: function() {
file.error = "{% trans "Failed to get upload url" %}";
}
});
return false;
}
})
.bind('fileuploaddone', function(e, data) {
if (data.textStatus == 'success') {
uploaded_files.push(data.result[0]);
}
});
// Enable iframe cross-domain access via redirect option:
form.fileupload(
'option',
'redirect',
window.location.href.replace(/\/repo\/[-a-z0-9]{36}\/.*/, '/media/cors/result.html?%s')
);
} catch(e) { // in case the fileupload js file has not been loaded
form.append('<p class="error">' + "{% trans "Error. Please try later." %}" + '</p>');
setTimeout(function() { $.modal.close(); }, 1600);
}
}); });
{% endif %}
{% endif %} {% endif %}
$('#add-new-dir').click(function () { $('#add-new-dir').click(function () {
@@ -2070,7 +2122,8 @@ function updateCmt() {
return false; return false;
}); });
{% endif %} {% endif %}
{% include "snippets/shared_link_js.html" %} {% include "snippets/shared_link_js.html" %}
{% include "snippets/bottom_bar.html" %} {% include "snippets/bottom_bar.html" %} {# moved to the right side. Tue Nov 11 15:47:08 CST 2014 #}
</script> </script>
{% endblock %} {% endblock %}

View File

@@ -1,17 +1,41 @@
{% load i18n %} {% load i18n %}
{% load url from future %} {% load url from future %}
var Bottom_bar = '<div id="bottom-bar">{% if groups %}<button id="discuss">{% trans "Discuss" %}</button><button id="click-into-group">{% trans "Group" %} &gt;&gt;</button>{% endif %}</div>';
$('#wrapper').append(Bottom_bar); // set 'side toolbar' & 'groups' popup position
$('#main-panel').css('margin-bottom', $('#bottom-bar').outerHeight() + 2); function setToolbarPos() {
var toolbar = $('#side-toolbar');
// set toolbar pos
toolbar.css({'top': ($(window).height() - toolbar.outerHeight())/2});
// set 'groups' popup position
$('#to-group').css({'top': parseInt(toolbar.css('top')) + 59});
}
$(window).load(function() {
var to_top = $('<ul class="side-toolbar hide" style="margin-top:3px;"><li class="item" title="{% trans "Back to top" %}"><img src="{{MEDIA_URL}}img/top.png" alt="{% trans "top" %}" /></li></ul>');
to_top.click(function() {
$(window).scrollTop(0);
}).appendTo($('#side-toolbar'));
$(window).scroll(function() {
if ($(window).scrollTop() > 0) {
to_top.show();
} else {
to_top.hide();
}
});
setToolbarPos();
}).resize(setToolbarPos);
{% if groups %} {% if groups %}
function getAndHandleDiscussions(data_html) { function getAndHandleDiscussions(data_html) {
$('#discussions-to-grp').html(data_html).css({'max-height': parseInt($(window).height() * 0.9 - $('#bottom-bar').height() - $('#discuss-to-group-caret').height() - $('#discuss-to-group-form').outerHeight())}).removeClass('hide'); // 'parseInt' to fix '.msg-main top border missing when the ul's max-height is xxx.5px' $('#discussions-to-grp').html(data_html).css({'max-height': parseInt($(window).height() * 0.8 - $('#discuss-to-group-form').outerHeight())}).removeClass('hide'); // 'parseInt' to fix '.msg-main top border missing when the ul's max-height is xxx.5px'
var popup = $('#discuss-to-group');
popup.css({'top':($(window).height() - popup.outerHeight())/2});
{% include 'group/msg_js.html' %} {% include 'group/msg_js.html' %}
} }
$('#discuss').click(function() { $('#discuss').click(function() {
var popup = $('#discuss-to-group'), var popup = $('#discuss-to-group'),
caret = $('#discuss-to-group-caret'),
form = $('#discuss-to-group-form'), form = $('#discuss-to-group-form'),
path = '{{ path }}'; path = '{{ path }}';
@@ -20,13 +44,10 @@ $('#discuss').click(function() {
path = cur_path; path = cur_path;
$('[name="path"]', form).val(path); $('[name="path"]', form).val(path);
// modify attachment dir name // modify attachment dir name
$('#discuss-to-group-form .att-name').html($('#cur-dir-name').html()); $('.att-name', form).html($('#cur-dir-name').html());
} }
if (popup.hasClass('hide')) { if (popup.hasClass('hide')) {
popup.removeClass('hide');
caret.removeClass('hide');
caret.css({'left': $(this).offset().left});
$.ajax({ $.ajax({
url: form.attr('action'), url: form.attr('action'),
dataType: 'json', dataType: 'json',
@@ -36,6 +57,7 @@ $('#discuss').click(function() {
}, },
success: function(data) { success: function(data) {
getAndHandleDiscussions(data['html']); getAndHandleDiscussions(data['html']);
popup.removeClass('hide');
}, },
error: function(jqXHR, textStatus, errorThrown) { error: function(jqXHR, textStatus, errorThrown) {
var err_str = ''; var err_str = '';
@@ -47,14 +69,18 @@ $('#discuss').click(function() {
}); });
} else { } else {
popup.addClass('hide'); popup.addClass('hide');
caret.addClass('hide');
} }
}); });
// click 'close' to close discuss popup
$('#discuss-to-group .close').click(function () {
$('#discuss-to-group').addClass('hide');
});
$(document).click(function(e) { $(document).click(function(e) {
var target = e.target || event.srcElement; var target = e.target || event.srcElement;
if (!$('#discuss, #discuss-to-group, #discuss-to-group-caret').is(target) && !($('#discuss, #discuss-to-group, #discuss-to-group-caret').find('*').is(target))) { if (!$('#discuss, #discuss-to-group').is(target) && !($('#discuss, #discuss-to-group').find('*').is(target))) {
$('#discuss-to-group, #discuss-to-group-caret').addClass('hide'); $('#discuss-to-group').addClass('hide');
} }
}); });
@@ -114,7 +140,6 @@ $('#discuss-submit').click(function() {
return false; return false;
}); });
$('#main').append('<div id="to-group" class="hide">{{ repo_group_str|escapejs }}</div><div id="to-group-caret" class="hide"><div class="outer-caret"><div class="inner-caret"></div></div></div>');
$('#click-into-group').click(function() { $('#click-into-group').click(function() {
{% if groups|length == 1 %} {% if groups|length == 1 %}
// only one group, just turn to group page // only one group, just turn to group page
@@ -124,28 +149,13 @@ $('#click-into-group').click(function() {
{% else %} {% else %}
// more than one group, then let user choose // more than one group, then let user choose
if ($('#to-group').hasClass('hide')) { $('#to-group').toggleClass('hide');
$('#to-group, #to-group-caret').removeClass('hide');
$('#to-group-caret').css('left', $('#click-into-group').offset().left + $('#click-into-group').width()/3);
if ($('#to-group').offset().left > $('#click-into-group').offset().left) {
$('#to-group').css('left', $('#click-into-group').offset().left);
}
} else {
$('#to-group, #to-group-caret').addClass('hide');
}
{% endif %} {% endif %}
}); });
$(document).click(function(e) { $(document).click(function(e) {
var target = e.target || event.srcElement; var target = e.target || event.srcElement;
if (!$('#click-into-group, #to-group, #to-group-caret').is(target) && !($('#to-group, #to-group-caret').find('*').is(target))) { if (!$('#click-into-group, #to-group').is(target) && !($('#click-into-group, #to-group').find('*').is(target))) {
$('#to-group, #to-group-caret').addClass('hide'); $('#to-group').addClass('hide');
} }
}); });
{% endif %} {% endif %}
$(function() {
var btn_height = $('#bottom-bar').outerHeight();
$('#discuss-to-group-caret, #to-group-caret').css({'bottom': btn_height});
$('#to-group').css({'bottom': btn_height + $('#to-group-caret').outerHeight()});
$('#discuss-to-group').css({'bottom': btn_height + $('#discuss-to-group-caret').outerHeight()});
});

View File

@@ -33,9 +33,5 @@
</span> </span>
</form> </form>
<ul id="discussions-to-grp" class="hide"></ul> <ul id="discussions-to-grp" class="hide"></ul>
<img src="{{MEDIA_URL}}img/del.png" alt="{% trans "close" %}" class="close" />
</div> </div>
<div id="discuss-to-group-caret" class="hide">
<div class="outer-caret">
<div class="inner-caret"></div>
</div>
</div>

View File

@@ -11,7 +11,19 @@
</p> </p>
<div class="repo-op fright"> <div class="repo-op fright">
{% if user_perm == 'rw' %} {% if user_perm == 'rw' %}
{% if repo.encrypted and repo.enc_version == 2 and not server_crypto %}
<button id="upload-file" class="op-btn"><span class="icon-upload-alt"></span>{% trans "Upload"%}</button> <button id="upload-file" class="op-btn"><span class="icon-upload-alt"></span>{% trans "Upload"%}</button>
{% else %}
{% if no_quota %}
<button id="upload-file" class="op-btn"><span class="icon-upload-alt"></span>{% trans "Upload"%}</button>
{% else %}
<div id="upload-file" class="op-btn upload-file-btn">
<span class="icon-upload-alt"></span><span>{% trans "Upload"%}</span>
<input type="file" name="file" multiple />
</div>
{% endif %}
{% endif %}
<button id="add-new-dir" class="op-btn"><span class="icon-plus-sign-alt"></span>{% trans "New Directory"%}</button> <button id="add-new-dir" class="op-btn"><span class="icon-plus-sign-alt"></span>{% trans "New Directory"%}</button>
{% if repo.encrypted and repo.enc_version == 2 and not server_crypto %} {% if repo.encrypted and repo.enc_version == 2 and not server_crypto %}
{% else %} {% else %}

View File

@@ -19,38 +19,6 @@
#file-op .avatar { #file-op .avatar {
border-radius:1000px; border-radius:1000px;
} }
#discuss-to-group,
#to-group {
right:0;
border-radius:5px 0 0 5px;
}
#to-group {
min-width:250px;
padding:0 12px 10px;
right:78px;
}
#to-group .outer-caret {
position:absolute;
top: 15px;
right: -15px;
}
#to-group .outer-caret,
#to-group .inner-caret {
border-color:transparent #cbcbcb;
border-right-width:0;
}
#to-group .inner-caret {
border-left-color:#fff;
top:-15px;
left:-16px;
}
#to-group ul {
padding-left: 20px;
list-style-type: disc;
}
#to-group a {
padding:1px 3px;
}
</style> </style>
{% endblock %} {% endblock %}
@@ -117,8 +85,8 @@
{% include "snippets/file_share_popup.html" %} {% include "snippets/file_share_popup.html" %}
<div id="fileview-toolbar"> <div id="side-toolbar">
<ul class="fileview-toolbar"> <ul class="side-toolbar">
{% if groups %} {% if groups %}
<li class="item" id="file-discuss-icon" title="{% trans "Discussion" %}"><img src="{{MEDIA_URL}}img/discuss.png" alt="{% trans "discuss" %}" /></li> <li class="item" id="file-discuss-icon" title="{% trans "Discussion" %}"><img src="{{MEDIA_URL}}img/discuss.png" alt="{% trans "discuss" %}" /></li>
<li id="file-group-icon" class="item" title="{% trans "Go to a group" %}"><img src="{{MEDIA_URL}}img/groups.png" alt="{% trans "group" %}" /></li> <li id="file-group-icon" class="item" title="{% trans "Go to a group" %}"><img src="{{MEDIA_URL}}img/groups.png" alt="{% trans "group" %}" /></li>
@@ -230,7 +198,7 @@ $('#star').click(function() {
// set 'side toolbar' & 'groups' popup position // set 'side toolbar' & 'groups' popup position
function setToolbarPos() { function setToolbarPos() {
var toolbar = $('#fileview-toolbar'); var toolbar = $('#side-toolbar');
// set toolbar pos // set toolbar pos
toolbar.css({'top': ($(window).height() - toolbar.outerHeight())/2}); toolbar.css({'top': ($(window).height() - toolbar.outerHeight())/2});
@@ -239,10 +207,10 @@ function setToolbarPos() {
$('#to-group').css({'top': parseInt(toolbar.css('top')) + 59}); $('#to-group').css({'top': parseInt(toolbar.css('top')) + 59});
} }
$(window).load(function() { $(window).load(function() {
var to_top = $('<ul class="fileview-toolbar hide" style="margin-top:3px;"><li class="item" title="{% trans "Back to top" %}"><img src="{{MEDIA_URL}}img/top.png" alt="{% trans "top" %}" /></li></ul>'); var to_top = $('<ul class="side-toolbar hide" style="margin-top:3px;"><li class="item" title="{% trans "Back to top" %}"><img src="{{MEDIA_URL}}img/top.png" alt="{% trans "top" %}" /></li></ul>');
to_top.click(function() { to_top.click(function() {
$(window).scrollTop(0); $(window).scrollTop(0);
}).appendTo($('#fileview-toolbar')); }).appendTo($('#side-toolbar'));
$(window).scroll(function() { $(window).scroll(function() {
if ($(window).scrollTop() > 0) { if ($(window).scrollTop() > 0) {
to_top.show(); to_top.show();
@@ -265,10 +233,9 @@ function handleDiscussions(html) {
// show discuss popup // show discuss popup
$('#file-discuss-icon').click(function() { $('#file-discuss-icon').click(function() {
var popup = $('#discuss-to-group'); var popup = $('#discuss-to-group');
popup.toggleClass('hide');
// get discussions // get discussions
if (!popup.hasClass('hide')) { if (popup.hasClass('hide')) {
$.ajax({ $.ajax({
url: $('#discuss-to-group-form').attr('action'), url: $('#discuss-to-group-form').attr('action'),
dataType: 'json', dataType: 'json',
@@ -278,9 +245,12 @@ $('#file-discuss-icon').click(function() {
}, },
success: function(data) { success: function(data) {
handleDiscussions(data['html']); handleDiscussions(data['html']);
popup.removeClass('hide');
}, },
error: ajaxErrorHandler error: ajaxErrorHandler
}); });
} else {
popup.addClass('hide');
} }
}); });
// click 'close' to close discuss popup // click 'close' to close discuss popup

View File

@@ -32,10 +32,6 @@
<span>{% trans "Add Files" %}</span> <span>{% trans "Add Files" %}</span>
<input type="file" name="file" multiple /> <input type="file" name="file" multiple />
</span> </span>
<button type="submit" class="start vam">
<span class="icon-upload"></span>
<span>{% trans "Start All" %}</span>
</button>
<button type="reset" class="cancel vam"> <button type="reset" class="cancel vam">
<span class="icon-ban-circle"></span> <span class="icon-ban-circle"></span>
<span>{% trans "Cancel All" %}</span> <span>{% trans "Cancel All" %}</span>
@@ -77,6 +73,8 @@ window.locale = {
"emptyResult": "{% trans "Empty file upload result" %}" "emptyResult": "{% trans "Empty file upload result" %}"
}, },
"error": "{% trans "Error" %}", "error": "{% trans "Error" %}",
"uploaded": "{% trans "uploaded" %}",
"canceled": "{% trans "canceled" %}",
"start": "{% trans "Start" %}", "start": "{% trans "Start" %}",
"cancel": "{% trans "Cancel" %}", "cancel": "{% trans "Cancel" %}",
"destroy": "{% trans "Delete" %}" "destroy": "{% trans "Delete" %}"
@@ -88,29 +86,32 @@ var form = $('#upload-file-form');
// Initialize the jQuery File Upload widget: // Initialize the jQuery File Upload widget:
form.fileupload({ form.fileupload({
//singleFileUploads: false // using 1 request to upload all files of a selection //singleFileUploads: false // using 1 request to upload all files of a selection
autoUpload: true,
sequentialUploads: true sequentialUploads: true
}) })
.bind('fileuploadadd', function(e, data) { .bind('fileuploadsubmit', function(e, data) {
var _this = $(this);
var file = data.files[0];
// get url(token) for every file // get url(token) for every file
$.ajax({ if (!file.error) {
url: '{% url 'get_file_upload_url_ul' uploadlink.token %}?&r={{uploadlink.repo_id }}', $.ajax({
cache: false, url: '{% url 'get_file_upload_url_ul' uploadlink.token %}?&r={{uploadlink.repo_id }}',
dataType: 'json', cache: false,
success: function(ret) { dataType: 'json',
data.url = ret['url']; success: function(ret) {
} data.url = ret['url'];
}); data.jqXHR = _this.fileupload('send', data);
}) },
.bind('fileuploaddone', function(e, data) { error: function() {
if (data.textStatus == 'success') { file.error = "{% trans "Failed to get upload url" %}";
var filename = ""; }
$.each(data.files, function(index, file) {
filename = file.name;
$('#uploaded-files-list').append(
'<tr><td></td><td>' + filename +'</td><td>' + filesizeformat(file.size) + '</td></tr>');
}); });
return false;
var uploaded_done_link = "{% url "upload_file_done" %}" + "?fn=" + encodeURIComponent(filename) + "&repo_id={{repo.id}}" + "&p={{path}}"; }
})
.bind('fileuploaddone', function(evt, data) {
if (data.textStatus == 'success') {
var uploaded_done_link = "{% url "upload_file_done" %}" + "?fn=" + e(data.files[0].name) + "&repo_id={{repo.id}}" + "&p={{path}}";
$.get(uploaded_done_link); $.get(uploaded_done_link);
} }
}); });