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

media/css/seahub.css

@@ -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;
+    padding:10px;
-    background:#f9f9f9;
+    background:#f2f2f2;
-    border:1px solid #c4c4c4;
+    border-radius:3px;
-    border-radius:5px;
+    margin:0 0 22px 64px;
-    margin-left: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;

seahub/group/templates/group/group_discuss.html

@@ -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 />
+        <textarea name="message" id="message" placeholder="{% trans "Add a discussion..." %}" class="msg-input">{{ form.data.message }}</textarea>
-        <ul class="hide" id="selected-files"></ul>
         {% for error in form.message.errors %}
         <p class="error">{{ error|escape }}</p>
         {% endfor %}
-        <button type="submit" class="submit hide">{% trans "Submit" %}</button>
+        <div class="ops hide">
-        <button type="button" class="cancel hide">{% trans "Cancel" %}</button>
+            <button type="submit" class="submit">{% trans "Submit" %}</button>
-        <img src="{{ MEDIA_URL }}img/file/file.png" alt="" title="{% trans "Add files" %}" class="add-file vam hide" />
+            <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() {
+var msg_form = $('#group-message-form');
-    $(this).height(75);
+var repos_get_url = '{% url 'get_group_repos' group.id %}';
-    $('.submit, .cancel, .add-file', $('#group-message-form')).removeClass('hide');
+{% include 'snippets/msg_form_js.html' %}
-});
-$('#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);
-    });
-});
 
 $('#group-message-form').submit(function() {
     var form = $(this);

seahub/message/templates/message/user_msg_list.html

@@ -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>
+        <div class="ops hide">
-        <button type="submit" class="submit hide">{% trans "Submit" %}</button>
+            <button type="submit" class="submit">{% trans "Submit" %}</button>
-        <button type="button" class="cancel hide">{% trans "Cancel" %}</button>
+            <button type="button" class="cancel">{% trans "Cancel" %}</button>
-        <img src="{{ MEDIA_URL }}img/file/file.png" alt="" title="{% trans "Add files" %}" class="add-file vam hide" />
+            <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() {
+var msg_form = $('#personal-message-form');
-    $(this).height(75);
+var repos_get_url = '{% url 'get_my_unenc_repos' %}';
-    $('#personal-message-form').find('.submit, .cancel, .add-file').removeClass('hide');
+{% include 'snippets/msg_form_js.html' %} 
-});
-$('#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);
-    });
-});
 
 $('#personal-message-form').submit(function() {
     var form = $(this),

seahub/templates/snippets/msg_form_js.html

@@ -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);
+    });
+});
+