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

modified file upload/update and user/group avatar change

Browse Source
This commit is contained in:
llj
2012-12-06 17:44:50 +08:00
parent 2000f95f9d
commit 1489ae1a86
6 changed files with 167 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
group/templates/group/group_manage.html
View File

@@ -13,11 +13,9 @@
<div class="info-item-top"><h3>Group Avatar</h3></div>
<div class="info-item-bottom ovhd">
<img src="{% grp_avatar_url group.props.id 48 %}" alt="{{ group.props.group_name }}{% trans "'s icon" %}" title="{{ group.props.group_name }}" class="avatar fleft" />
<form id="id_avatar_form" enctype="multipart/form-data" method="POST" action="{% url 'avatar_group_add' group.id %}" style="padding-left: 5px; display:inline-block;">
<span class="fileinput-button" style="margin-right: 0px; padding-top: 0px; ">
<a href="#">{% trans "Change picture" %}</a>
<input type="file" name="avatar" id="id_avatar" />
</span>
<form id="grp-avatar-form" enctype="multipart/form-data" method="post" action="{% url 'avatar_group_add' group.id %}" class="fleft">
<button type="button" id="grp-avatar-chg-btn">{% trans "Change" %}</button>
<input type="file" name="avatar" id="grp-avatar-input" />
</form>
</div>
</div>
@@ -84,7 +82,9 @@
{% endblock %}
{% block extra_script %}
{% include "snippets/avatar_upload_js.html" %}
<script type="text/javascript">
changeAvatar($('#grp-avatar-chg-btn'), $('#grp-avatar-input'), $('#grp-avatar-form'));
addConfirmTo($("#group-dismiss"), '{% trans "Dismiss Group" %}', '{% trans "Really want to dismiss this group" %}');
addConfirmTo($(".member-remove-btn"), '{% trans "Delete Member" %}', '{% trans "Really want to delete Member" %}');
var contact_list = [], contact_email;
@@ -103,5 +103,4 @@ contact_list.push({value:contact_email, label:contact_email});
{% include 'group/grpadmin_add_js.html' %}
{% endwith %}
</script>
{% include "snippets/avatar_upload_js.html" %}
{% endblock %}

107
media/css/seahub.css
View File

@@ -816,7 +816,30 @@ textarea:-moz-placeholder {/* for FF */
#user-basic-info .submit {
margin-left:6.5em;
}
#user-avatar-change {
position:relative;
}
#user-avatar-form {
position:absolute;
left:150px;
top:5px;
}
#grp-avatar-form {
position:relative;
margin-left:10px;
}
#user-avatar-form,
#grp-avatar-form {
overflow:hidden;
}
/*
#user-avatar-form .change-btn,
#grp-avatar-form .change-btn {
color:#e83;
padding:2px;
background:#fff;
}
*/
/*repo page*/
#repo-basic-info {
color:#333;
@@ -1271,13 +1294,52 @@ textarea:-moz-placeholder {/* for FF */
margin-right:8px;
}
/*file upload*/
.upload-file-panel {
width:400px;
margin:70px auto 0;
}
#upload-file-form {
margin-top:10px;
}
#upload-file-form .files-add {
position: relative;
overflow: hidden;
margin-bottom:7px;
}
#upload-file-form .files-add .op {
font-size:1.15em;
font-weight:bold;
display:inline-block;
padding-left:18px;
background:#fff url('../img/add.png') scroll no-repeat left 35%;
}
#user-avatar-input,
#grp-avatar-input,
#upload-file-form .files-add input {
position: absolute;
top: 0;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
transform: translate(-300px, 0) scale(4);
}
#user-avatar-input,
#grp-avatar-input {
cursor:pointer;
right:0;
}
#upload-file-form .MultiFile-label {
padding:4px 0;
border-bottom:1px solid #ebebeb;
}
#upload-file-form .MultiFile-remove {
padding:0 4px;
color:#000;
font-weight:bold;
border:1px solid #eee;
}
#upload-file-form .MultiFile-remove:hover {
text-decoration:none;
}
#upload-progress {
margin-top:.8em;
}
#task-progress-bar {/*for progress container*/
width:95%;
height:1em;
@@ -1286,9 +1348,11 @@ textarea:-moz-placeholder {/* for FF */
background:#e83;
margin:0;
}
#task-progress-bar,
#task-progress-bar {
margin-top:-3px;
}
#upload-cancel {
margin-top:8px;
margin-top:.8em;
}
/* file view online, file edit */
@@ -1574,32 +1638,3 @@ textarea:-moz-placeholder {/* for FF */
.diff-chg {
color: #c3f;
}
.fileinput-button {
position: relative;
overflow: hidden;
margin-right: 200px;
padding-top: 10px;
vertical-align: middle;
display:inline-block;/*for ie*/
/* background: #efefef; */
/* border: 1px solid #ddd; */
/* border-radius: 3px; */
cursor: pointer;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
transform: translate(-300px, 0) scale(4);
font-size: 23px;
direction: ltr;
cursor: pointer;
}
.icon-plus {
padding-left:21px;
background:#f5f5f5 url('../img/add.png') scroll no-repeat 3px 48%;
}

18
media/js/utils.js
View File

@@ -285,18 +285,24 @@ function apply_form_error(formid, error_msg) {
}
// handle messages
if ($('.messages')) {
if ($('.messages')[0]) {
$('#main').append($('.messages')).css('position','relative');
$('.messages').css({'left':($('#main').width() - $('.messages').width())/2 + 'px', 'top':'-20px'}).removeClass('hide');
setTimeout(function() { $('.messages').addClass('hide'); }, 10000);
}
// show 'messages' for ajax request
function feedback(con, type) {
var html = '<ul class="messages"><li class="' + type + '">' + con + '</li></ul>';
$('#main').append(html).css('position','relative');
// show feedback
function feedback(con, type, time) {
var time = time || 5000;
if ($('.messages')[0]) {
$('.messages').html('<li class="' + type + '">' + con + '</li>');
} else {
var html = '<ul class="messages"><li class="' + type + '">' + con + '</li></ul>';
$('#main').append(html);
}
$('#main').css('position','relative');
$('.messages').css({'left':($('#main').width() - $('.messages').width())/2 + 'px', 'top':'-20px'}).removeClass('hide');
setTimeout(function() { $('.messages').addClass('hide'); }, 2000);
setTimeout(function() { $('.messages').addClass('hide'); }, time);
}
function disable(btn) {

20
profile/templates/profile/set_profile.html
View File

@@ -5,14 +5,13 @@
{% block right_panel %}
<div id="user-basic-info">
<h2>{% trans "Profile Setting" %}</h2>
<label>{% trans "Avatar:" %}</label>{% avatar request.user.username 60 %}
<form id="id_avatar_form" enctype="multipart/form-data" method="POST" action="{% url 'avatar_add' %}" style="display:inline-block;">
<span class="fileinput-button">
<a href="#">{% trans "Change picture" %}</a>
<input type="file" name="avatar" id="id_avatar" />
</span>
</form>
<div id="user-avatar-change">
<label>{% trans "Avatar:" %}</label>{% avatar request.user.username 60 %}
<form id="user-avatar-form" enctype="multipart/form-data" method="post" action="{% url 'avatar_add' %}">
<button type="button" id="user-avatar-chg-btn">{% trans "Change" %}</button>
<input type="file" name="avatar" id="user-avatar-input" />
</form>
</div>
<form action="" method="post">
<label>{% trans "Password:" %}</label><a href="{{ SITE_ROOT }}accounts/password/change/">{% trans "Update" %}</a><br/>
@@ -32,5 +31,8 @@
{% endblock %}
{% block extra_script %}
{% include "snippets/avatar_upload_js.html" %}
{% include 'snippets/avatar_upload_js.html' %}
<script type="text/javascript">
changeAvatar($('#user-avatar-chg-btn'), $('#user-avatar-input'), $('#user-avatar-form'));
</script>
{% endblock %}

28
templates/repo.html
View File

@@ -166,19 +166,16 @@
<div id="upload-file-dialog" class="hide">
<h3>{% trans "Upload Files" %}</h3>
{% if no_quota %}
<p class="error">{% trans "The owner of this library has ran out of space. Upload failed." %}</p>
<p class="error">{% trans "The owner of this library has ran out of space." %}</p>
{% else %}
<form id="upload-file-form" enctype="multipart/form-data" method="post" action="{{ upload_url }}">
<input type="hidden" name="parent_dir" id="parent_dir" value="{{ parent_dir }}" />
<span class="fileinput-button">
<i class="icon-plus"></i>
<span class="op">{% trans "Add files..." %}</span>
<input type="file" name="file" id="file" />
</span>
<div id="upload-file-list" style="border:#999 solid 3px; padding:10px;">
<p>{% trans "Selected files will be populated here..." %}</p>
<p>({% trans "Smaller than" %} {{ max_upload_file_size|filesizeformat }})</p>
<div class="files-add">
<span class="op">{% trans "Add files" %}</span>
<span>({% trans "smaller than" %} {{ max_upload_file_size|filesizeformat }})</span>
<input type="file" name="file" id="file-upload-input" />
</div>
<div id="upload-file-list"></div>
<p class="error">{{ error_msg }}</p>
<input type="submit" value="{% trans "Upload" %}" class="submit" />
</form>
@@ -607,15 +604,14 @@ $('#mv-form .submit').click(function() {
});
$('#upload-file').click(function () {
$('#upload-file-dialog').modal({minWidth: 400});
$('#file').MultiFile({
$('#upload-file-dialog').modal({focus:false});
$('#file-upload-input').MultiFile({
list: '#upload-file-list',
STRING: {
file: '<em title="{% trans "Click to remove" %}" onclick="$(this).parent().prev().click()">$file</em>',
file: '<span title="{% trans "Click to remove" %}" onclick="$(this).parent().prev().click()">$file</span>',
duplicate: '{% trans "This file has already been selected:\n$file!" %}'
}}); // init MultiFile
$('#simplemodal-container').css('height', 'auto');
return false;
$('#simplemodal-container').css({'height':'auto', 'width':'auto'});
});
$('a.update-file').click(function() {
@@ -623,8 +619,8 @@ $('a.update-file').click(function() {
var target_file = $(this).data("target");
$('#update-file-form input[name="target_file"]').val(target_file);
$('#update-file-dialog').modal({minWidth: 400});
$('#simplemodal-container').css('height', 'auto');
$('#update-file-dialog').modal({focus:false});
$('#simplemodal-container').css({'width':'auto', 'height':'auto'});
return false;
});

79
templates/snippets/avatar_upload_js.html
View File

@@ -1,29 +1,60 @@
{% load i18n %}
<script type="text/javascript">
$('#id_avatar').change(function() {
// check file extension
var file = $(this).val();
var extension = file.substr((file.lastIndexOf('.') +1));
var allowed_ext = ['jpg', 'png', 'jpeg', 'gif'];
var allow = false;
for (e in allowed_ext) {
if (extension == allowed_ext[e]) {
allow = true;
break;
function changeAvatar(chg_btn, input, form) {
var chg_btn_orig_bg = chg_btn.css('background');
form.css({'width': chg_btn.outerWidth()});
input
.css({'height': chg_btn.outerHeight()})
.hover(
function() {
chg_btn.css({'background': '#fff'});
},
function() {
chg_btn.css({'background': chg_btn_orig_bg});
}
}
if (!allow) {
var err_msg = extension + ' is an invalid file extension. Authorized extensions are : ' + allowed_ext;
feedback(err_msg, 'error');
return false;
}
);
// check file size is less than 1MB
if (this.files && this.files[0].size > 1024*1024) {
feedback('Your file is too big, the maximum allowed size is 1MB', 'error');
return false;
}
input.change(function() {
chg_btn.css({'background': chg_btn_orig_bg});
// check file extension
var file, filename, ext;
var allow = false;
var allowed_ext = ['jpg','jpeg', 'png', 'gif'];
if (this.files) { // IE: version lower than 10 doesn't have 'files'
file = this.files[0];
filename = file.name || file.fileName;
} else {
filename = this.value;
}
if (filename.lastIndexOf('.') != -1) { // ext exists
ext = filename.substr((filename.lastIndexOf('.') + 1));
}
if (ext) {
for (var i = 0, len = allowed_ext.length; i < len; i++) {
if (ext == allowed_ext[i]) {
allow = true;
break;
}
}
} else {
feedback(filename + '{% trans " is not supported. Please choose an image file." %}', 'error');
return false;
}
$('#id_avatar_form').submit();
return false;
})
if (!allow) {
var err_msg = filename + '{% trans " is not supported. File extensions can only be " %}' + allowed_ext.join(', ');
feedback(err_msg, 'error');
return false;
}
// check if file size is less than 1MB
if (file && file.size > 1024*1024) {
feedback(filename + '{% trans " is too large. Allowed maximum size is 1MB." %}', 'error');
return false;
}
form.submit();
return false;
});
}
</script>