1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-10-22 11:43:33 +00:00

[discuss, msg] modified ui of discussion/msg, improved 'add file'

This commit is contained in:
llj
2014-03-31 18:57:48 +08:00
parent de580f515d
commit bf101ec8d6
9 changed files with 107 additions and 171 deletions

View File

@@ -2007,6 +2007,10 @@ textarea:-moz-placeholder {/* for FF */
width:640px;
margin-top:10px;
}
.msg-form .avatar,
.msg .avatar {
border-radius:1000px;
}
#personal-msg-panel {
margin-top:22px;
}
@@ -2015,11 +2019,10 @@ textarea:-moz-placeholder {/* for FF */
color:#333;
}
.msg-form {
padding:6px;
background:#f9f9f9;
border:1px solid #c4c4c4;
border-radius:5px;
margin-left:64px;
padding:10px;
background:#f2f2f2;
border-radius:3px;
margin:0 0 22px 64px;
position:relative;
}
.msg-form .avatar {
@@ -2027,8 +2030,26 @@ textarea:-moz-placeholder {/* for FF */
left:-64px;
top:-1px;
}
.msg-form .ops {
text-align:right;
margin-top:6px;
}
.msg-form .add-file {
margin:9px 10px 0 3px;
}
#selected-files .item {
text-align:left;
padding:2px 3px;
}
#selected-files .rm {
margin-right:3px;
}
#selected-files .rm,
.msg-form .add-file {
cursor:pointer;
}
.msg-input {
width:550px;
width:544px;
padding:3px 5px;
height:25px;
vertical-align:top;
@@ -2179,7 +2200,10 @@ textarea:-moz-placeholder {/* for FF */
.reply-submit,
.reply-cancel {
margin-top:6px;
margin-right:2px;
background:#fff;
}
.msg-form .cancel {
margin-left:6px;
}
#msg-upward {
position:fixed;

BIN
media/img/clip.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 482 B

BIN
media/img/del.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 290 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 476 B

After

Width:  |  Height:  |  Size: 96 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 416 B

After

Width:  |  Height:  |  Size: 101 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 406 B

After

Width:  |  Height:  |  Size: 147 B

View File

@@ -2,21 +2,6 @@
{% load seahub_tags avatar_tags i18n %}
{% block extra_style %}
<style type="text/css">
#selected-files .item {
padding:2px 3px;
}
#selected-files .item.hl {
background:#e8e8e8;
}
#selected-files .icon-remove,
.add-file {
cursor:pointer;
}
</style>
{% endblock %}
{% block cur_discuss %}tab-cur{% endblock%}
{% block right_panel %}
@@ -24,14 +9,16 @@
{% if request.user.is_authenticated %}
<form id="group-message-form" action="" method="post" class="msg-form">{% csrf_token %}
{% avatar request.user.username 48 %}
<textarea name="message" id="message" placeholder="{% trans "Add a discussion..." %}" class="msg-input">{{ form.data.message }}</textarea><br />
<ul class="hide" id="selected-files"></ul>
<textarea name="message" id="message" placeholder="{% trans "Add a discussion..." %}" class="msg-input">{{ form.data.message }}</textarea>
{% for error in form.message.errors %}
<p class="error">{{ error|escape }}</p>
{% endfor %}
<button type="submit" class="submit hide">{% trans "Submit" %}</button>
<button type="button" class="cancel hide">{% trans "Cancel" %}</button>
<img src="{{ MEDIA_URL }}img/file/file.png" alt="" title="{% trans "Add files" %}" class="add-file vam hide" />
<div class="ops hide">
<button type="submit" class="submit">{% trans "Submit" %}</button>
<button type="button" class="cancel">{% trans "Cancel" %}</button>
<img src="{{ MEDIA_URL }}img/clip.png" alt="" title="{% trans "Add files" %}" class="add-file fleft" />
<ul class="hide" id="selected-files"></ul>
</div>
<span class="say"></span>
</form>
<div id="add-file-popup" class="file-choose-form hide">
@@ -215,70 +202,9 @@ $(window).scroll(function() {
{% endif %}
{% if request.user.is_authenticated %}
$('#message').focus(function() {
$(this).height(75);
$('.submit, .cancel, .add-file', $('#group-message-form')).removeClass('hide');
});
$('#group-message-form .cancel').click(function() {
$('.submit, .cancel, .add-file', $('#group-message-form')).addClass('hide');
$('#selected-files').data('files', '').html('').addClass('hide');
$('#message').val('').height(25);
});
$('.add-file').click(function() {
$('#add-file-popup').modal();
$.ajax({
'url': '{% url 'get_group_repos' group.id %}',
'cache': false,
'dataType': 'json',
'success': function(data) {
var file_tree = new FileTree();
var repos = file_tree.format_repo_data(data);
if (repos.length > 0) {
file_tree.renderFileTree($('#file-tree').data('site_root', '{{SITE_ROOT}}'), repos);
} else {
$('#file-tree').html('<p class="error">' + "{% trans "You don't have any library at present" %}" + '</p>');
}
},
'error': function(jqXHR, textStatus, errorThrown) {
if (!jqXHR.responseText) {
$('#file-tree').html('<p class="error">' + "{% trans "Failed. Please check the network." %}" + '</p>');
}
}
});
});
$('#add-file-popup .submit').click(function() {
var files_ct = $('#selected-files');
var selected = files_ct.data('files') || [];
$('[name="selected"][checked="checked"]', $('#file-tree')).each(function() {
var val = $(this).val();
if (val.charAt(val.length - 1) != '/') { // only submit file
selected.push($(this).val());
}
});
$.modal.close();
var files = '';
for (var i = 0, len = selected.length; i < len; i++) {
files += '<li class="item">' + selected[i].substr(selected[i].lastIndexOf('/') + 1) + '<span class="icon-remove vh fright" data-index="' + i + '"></span></li>';
}
files_ct.data('files', selected).html(files).removeClass('hide');
$('.item', files_ct).hover(
function() {
$(this).addClass('hl').children('.icon-remove').removeClass('vh');
},
function() {
$(this).removeClass('hl').children('.icon-remove').addClass('vh');
}
);
$('.icon-remove', files_ct).click(function() {
var selected_f = files_ct.data('files');
selected_f.splice($(this).data('index'), 1);
$(this).parent().remove();
files_ct.data('files', selected_f);
});
});
var msg_form = $('#group-message-form');
var repos_get_url = '{% url 'get_group_repos' group.id %}';
{% include 'snippets/msg_form_js.html' %}
$('#group-message-form').submit(function() {
var form = $(this);

View File

@@ -4,18 +4,6 @@
{% block sub_title %}{% trans "Messages" %} - {% endblock %}
{% block extra_style %}
<style type="text/css">
#selected-files .item {
padding:2px 3px;
}
#selected-files .item.hl {
background:#e8e8e8;
}
#selected-files .icon-remove,
.add-file {
cursor:pointer;
}
</style>
{% endblock %}
{% block cur_messages %}tab-cur{% endblock %}
@@ -32,10 +20,12 @@
{% for error in form.message.errors %}
<p class="error">{{ error|escape }}</p>
{% endfor %}
<ul class="hide" id="selected-files"></ul>
<button type="submit" class="submit hide">{% trans "Submit" %}</button>
<button type="button" class="cancel hide">{% trans "Cancel" %}</button>
<img src="{{ MEDIA_URL }}img/file/file.png" alt="" title="{% trans "Add files" %}" class="add-file vam hide" />
<div class="ops hide">
<button type="submit" class="submit">{% trans "Submit" %}</button>
<button type="button" class="cancel">{% trans "Cancel" %}</button>
<img src="{{ MEDIA_URL }}img/clip.png" alt="" title="{% trans "Add files" %}" class="add-file fleft" />
<ul class="hide" id="selected-files"></ul>
</div>
<span class="say"></span>
</form>
<div id="add-file-popup" class="file-choose-form hide">
@@ -113,7 +103,6 @@
{% include 'snippets/add_to_contacts_form.html' %}
{% endblock %}
{% block extra_script %}{{block.super}}
<script type="text/javascript">
{% if person_msgs.object_list|length > 5 %}
@@ -139,69 +128,9 @@ $(window).scroll(function() {
});
{% endif %}
$('#message').focus(function() {
$(this).height(75);
$('#personal-message-form').find('.submit, .cancel, .add-file').removeClass('hide');
});
$('#personal-message-form .cancel').click(function() {
$(this).addClass('hide');
$('.submit, .add-file', $('#personal-message-form')).addClass('hide');
$('#selected-files').data('files', '').html('').addClass('hide');
$('#message').val('').height(25);
});
$('#personal-message-form .add-file').click(function(){
$('#add-file-popup').modal();
$.ajax({
'url': '{% url 'get_my_unenc_repos' %}',
'cache': false,
'dataType': 'json',
'success': function(data) {
var file_tree = new FileTree();
var repos = file_tree.format_repo_data(data);
if (repos.length > 0) {
file_tree.renderFileTree($('#file-tree').data('site_root', '{{SITE_ROOT}}'), repos, {'two_state': true});
} else {
$('#file-tree').html('<p class="error">' + "{% trans "You don't have any library at present" %}" + '</p>');
}
},
'error': function(jqXHR, textStatus, errorThrown) {
if (!jqXHR.responseText) {
$('#file-tree').html('<p class="error">' + "{% trans "Failed. Please check the network." %}" + '</p>');
}
}
});
});
$('#add-file-popup .submit').click(function() {
var files_ct = $('#selected-files');
var selected = files_ct.data('files') || [];
$('[name="selected"][checked="checked"]', $('#file-tree')).each(function() {
var val = $(this).val();
if (val.charAt(val.length - 1) != '/') { // only submit file
selected.push($(this).val());
}
});
$.modal.close();
var files = '';
for (var i = 0, len = selected.length; i < len; i++) {
files += '<li class="item">' + selected[i].substr(selected[i].lastIndexOf('/') + 1) + '<span class="icon-remove vh fright" data-index="' + i + '"></span></li>';
}
files_ct.data('files', selected).html(files).removeClass('hide');
$('.item', files_ct).hover(
function() {
$(this).addClass('hl').children('.icon-remove').removeClass('vh');
},
function() {
$(this).removeClass('hl').children('.icon-remove').addClass('vh');
}
);
$('.icon-remove', files_ct).click(function() {
var selected_f = files_ct.data('files');
selected_f.splice($(this).data('index'), 1);
$(this).parent().remove();
files_ct.data('files', selected_f);
});
});
var msg_form = $('#personal-message-form');
var repos_get_url = '{% url 'get_my_unenc_repos' %}';
{% include 'snippets/msg_form_js.html' %}
$('#personal-message-form').submit(function() {
var form = $(this),

View File

@@ -0,0 +1,57 @@
{# for group_discuss & personal_msg #}
{% load i18n %}
$('#message').focus(function() {
$(this).height(75);
$('.ops', msg_form).removeClass('hide');
});
$('.cancel', msg_form).click(function() {
$('.ops', msg_form).addClass('hide');
$('#selected-files').data('files', '').html('');
$('#message').val('').height(25);
});
$('.add-file').click(function(){
$('#add-file-popup').modal();
$.ajax({
'url': repos_get_url,
'cache': false,
'dataType': 'json',
'success': function(data) {
var file_tree = new FileTree();
var repos = file_tree.format_repo_data(data);
if (repos.length > 0) {
file_tree.renderFileTree($('#file-tree').data('site_root', '{{SITE_ROOT}}'), repos, {'two_state': true});
} else {
$('#file-tree').html('<p class="error">' + "{% trans "You don't have any library at present" %}" + '</p>');
}
},
'error': function(jqXHR, textStatus, errorThrown) {
if (!jqXHR.responseText) {
$('#file-tree').html('<p class="error">' + "{% trans "Failed. Please check the network." %}" + '</p>');
}
}
});
});
$('#add-file-popup .submit').click(function() {
var files_ct = $('#selected-files');
var selected = files_ct.data('files') || [];
$('[name="selected"][checked="checked"]', $('#file-tree')).each(function() {
var val = $(this).val();
if (val.charAt(val.length - 1) != '/') { // only submit file
selected.push($(this).val());
}
});
$.modal.close();
var files = '';
for (var i = 0, len = selected.length; i < len; i++) {
files += '<li class="item">' + '<img src="{{MEDIA_URL}}img/del.png" class="rm vam" data-index="' + i + '" /><span class="vam">' + selected[i].substr(selected[i].lastIndexOf('/') + 1) + '</span></li>';
}
files_ct.data('files', selected).html(files).removeClass('hide');
$('.rm', files_ct).click(function() {
var selected_f = files_ct.data('files');
selected_f.splice($(this).data('index'), 1);
$(this).parent().remove();
files_ct.data('files', selected_f);
});
});