[folder perm] modified 'user perm'

media/css/seahub.css

@@ -3516,7 +3516,7 @@ textarea:-moz-placeholder {/* for FF */
 
 /* user & group folder perm */
 #folder-perm-tabs .tabs-panel {
-    width:400px;
+    width:550px;
 }
 #folder-perm-tabs .perm-select {
     height:30px;
@@ -3531,3 +3531,13 @@ textarea:-moz-placeholder {/* for FF */
 #folder-perm-tabs table {
     margin-top:0;
 }
+.select2-result-label .text {
+    display:inline-block;
+}
+.select2-results .select2-result-label .avatar {
+    margin-right:10px;
+}
+.select2-result-label .avatar,
+.select2-result-label .text {
+    vertical-align:middle;
+}

seahub/templates/js/templates.html

@@ -573,7 +573,7 @@
 <script type="text/template" id="folder-perm-item-tmpl">
     <% if (is_user_perm) { %>
     <td>
-        <a href="{{ SITE_ROOT }}profile/<% print(encodeURIComponent(user)); %>/" target="_blank"><%- user %></a>
+        <a href="{{ SITE_ROOT }}profile/<% print(encodeURIComponent(user)); %>/" target="_blank" title="<%- user %>"><%- user_name %></a>
     </td>
     <% } else { %>
     <td>
@@ -616,8 +616,8 @@
             <div id="user-folder-perm" class="tabs-panel">
                 <table>
                     <tr>
-                        <th width="50%">{% trans "User" %}</th>
-                        <th width="30%">{% trans "Permission" %}</th>
+                        <th width="55%">{% trans "User" %}</th>
+                        <th width="25%">{% trans "Permission" %}</th>
                         <th width="20%"></th>
                     </tr>
                     <tr id="add-user-folder-perm">
@@ -638,8 +638,8 @@
             <div id="group-folder-perm" class="tabs-panel">
                 <table>
                     <tr>
-                        <th width="50%">{% trans "Group" %}</th>
-                        <th width="30%">{% trans "Permission" %}</th>
+                        <th width="55%">{% trans "Group" %}</th>
+                        <th width="25%">{% trans "Permission" %}</th>
                         <th width="20%"></th>
                     </tr>
                     <tr id="add-group-folder-perm">

seahub/views/ajax.py

@@ -62,7 +62,8 @@ from seahub.base.accounts import User
 from seahub.thumbnail.utils import get_thumbnail_src, allow_generate_thumbnail
 from seahub.utils.file_types import IMAGE
 from seahub.thumbnail.utils import get_thumbnail_src
-from seahub.base.templatetags.seahub_tags import translate_seahub_time, file_icon_filter
+from seahub.base.templatetags.seahub_tags import translate_seahub_time, \
+        file_icon_filter, email2nickname
 from seahub.avatar.templatetags.group_avatar_tags import grp_avatar
 
 # Get an instance of a logger
@@ -1202,7 +1203,11 @@ def get_contacts(request):
         try:
             user = User.objects.get(email=c.contact_email)
             if user.is_active:
-                contact_list.append({"email": c.contact_email, "avatar": avatar(c.contact_email, 16)})
+                contact_list.append({
+                    "email": c.contact_email,
+                    "avatar": avatar(c.contact_email, 32),
+                    "name": email2nickname(c.contact_email),
+                    })
         except User.DoesNotExist:
             continue
 
@@ -2252,6 +2257,7 @@ def get_folder_perm_by_path(request, repo_id):
             user_result_perm = {
                 "perm": user_perm.permission,
                 "user": user_perm.user,
+                "user_name": email2nickname(user_perm.user),
             }
             user_result_perms.append(user_result_perm)
 
@@ -2307,6 +2313,10 @@ def set_user_folder_perm(request, repo_id):
                 seafile_api.add_folder_user_perm(repo_id, path, perm, user)
                 send_perm_audit_msg('add-repo-perm', request.user.username,
                                     user, repo_id, path, perm)
+                return HttpResponse(json.dumps({
+                    'user': user,
+                    'user_name': email2nickname(user)
+                    }),content_type=content_type)
             except SearpcError as e:
                 logger.error(e)
                 return HttpResponse(json.dumps({"error": _('Operation failed')}),

static/scripts/app/views/folder-perm.js

@@ -99,11 +99,26 @@ define([
                     var contacts = app.pageOptions.contacts || [];
                     var contact_list = [];
                     for (var i = 0, len = contacts.length; i < len; i++) {
-                        contact_list.push(contacts[i].email);
+                        contact_list.push({ // 'id' & 'text' are required by the plugin
+                            "id": contacts[i].email,
+                            "text": contacts[i].email,
+                            "avatar": contacts[i].avatar,
+                            "name": contacts[i].name
+                        });
                     }
                     return contact_list;
                 },
                 tokenSeparators: [',', ' '],
+                formatResult: function(item) { // format items shown in the drop-down menu
+                    if (item.avatar) {
+                        return item.avatar + '<span class="text">' + item.name + '<br />' + item.text + '</span>';
+                    } else {
+                        return; // if no match, show nothing
+                    }
+                },
+                formatSelection: function(item) { // format selected item shown in the input
+                    return item.name || item.text; // if no name, show the email, i.e., when directly input, show the email
+                },
                 escapeMarkup: function(m) { return m; }
             });
 
@@ -152,6 +167,7 @@ define([
                         'path': _this.path,
                         'item_data': {
                             'user': email,
+                            'user_name': data.user_name,
                             'perm': perm,
                             'is_user_perm': true
                         }