[file lock] 'dir view' & 'file view': improvement & bugfix

media/css/seahub.css

@@ -3655,10 +3655,6 @@ textarea:-moz-placeholder {/* for FF */
 }
 #user-profile .info-detail {
     padding-left: 6px;
-
-/* file lock  */
-#view-hd .file-locked-icon {
-    vertical-align: middle;
 }
 /* shared file view */
 #shared-file-view-logo {

seahub/templates/js/templates.html

@@ -258,6 +258,10 @@
         <% } else { %>
         <img src="{{ MEDIA_URL }}img/file/<%= dirent.file_icon %>" alt="" />
         <% } %>
+
+        <% if (is_pro && dirent.is_locked) { %>
+        <img class="file-locked-icon" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="{% trans "locked" %}" />
+        <% } %>
     </td>
     <td>
         <span class="dirent-name">
@@ -266,13 +270,6 @@
             <% } else { %>
             <a class="normal" href="{{ SITE_ROOT }}lib/<%= repo_id %>/file<%- encoded_path %>" target="_blank"><%- dirent.obj_name %></a>
             <% } %>
-            <% if (is_pro) { %>
-                <% if (dirent.is_locked) { %>
-                <img class="file-locked-icon cspt" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="locked" title="{% trans 'Locked by' %} <%- dirent.lock_owner %>"/>
-                <% } else { %>
-                <img class="file-locked-icon hide" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="locked" />
-                <% } %>
-            <% } %>
         </span>
     </td>
     <td class="dirent-op">
@@ -283,32 +280,28 @@
                 <a class="op share" href="#" title="{% trans "Share" %}"><img src="{{ MEDIA_URL }}img/share-orange.png" alt="" /></a>
                 <% } %>
                 <% if (dirent.perm == 'rw') { %>
-                    <% if (!dirent.is_locked) { %>
+                    <% if (enable_some_op) { %>
                     <a class="op delete" href="#" title="{% trans "Delete" %}"><img src="{{ MEDIA_URL }}img/delete-orange.png" alt="" /></a>
-                    <% } else { %>
-                        <% if (dirent.locked_by_me) { %>
-                        <a class="op delete" href="#" title="{% trans "Delete" %}"><img src="{{ MEDIA_URL }}img/delete-orange.png" alt="" /></a>
-                        <% } %>
                     <% } %>
                 <% } %>
             </div>
             <% if (dirent.perm == 'rw') { %>
             <img src="{{ MEDIA_URL }}img/more_op.png" title="{% trans "More Operations"%}" alt="{% trans "More Operations"%}" class="more-op-icon cspt" />
             <ul class="hidden-op hide">
-                <% if (!dirent.is_locked) { %>
+                <% if (enable_some_op) { %>
                 <li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
                 <li><a class="op mv" href="#">{% trans "Move" %}</a></li>
-                <% } else { %>
-                    <% if (dirent.locked_by_me) { %>
-                    <li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
-                    <li><a class="op mv" href="#">{% trans "Move" %}</a></li>
-                    <% } %>
                 <% } %>
                 <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
                 <li><a class="op file-history" href="{{ SITE_ROOT }}repo/file_revisions/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>" target="_blank">{% trans "History" %}</a></li>
                 <% if (is_pro) { %>
-                <li><a class="op file-lock" href="#">{% trans "Lock" %}</a></li>
+                    <% if (dirent.is_locked) { %>
-                <li><a class="op file-unlock" href="#">{% trans "Unlock" %}</a></li>
+                        <% if (dirent.locked_by_me) { %>
+                        <li><a class="op unlock-file" href="#">{% trans "Unlock" %}</a></li>
+                        <% } %>
+                    <% } else { %>
+                    <li><a class="op lock-file" href="#">{% trans "Lock" %}</a></li>
+                    <% } %>
                 <% } %>
             </ul>
             <% } %>

seahub/templates/view_file_base.html

@@ -13,7 +13,7 @@
         <h2>{{ filename }}
             <span id="file-star" class="{% if is_starred %}icon-star{% else %}icon-star-empty{% endif %} cspt"></span>
             {% if is_pro %}
-            <img class="file-locked-icon cspt {% if not file_locked %}hide{% endif %}" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="{% trans "Locked" %}" title="{% trans "Locked" %}"/>
+            <img class="file-locked-icon cspt vam {% if not file_locked %}hide{% endif %}" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="{% trans "locked" %}" title="{% trans "locked" %}" />
             {% endif %}
         </h2>
     </div>
@@ -151,44 +151,27 @@ $('#file-star').click(function() {
 });
 
 {% if can_lock_unlock_file %}
-// lock file
+// lock/unlock file
-$('#lock-file').click(function() {
+$('#lock-file, #unlock-file').click(function() {
+    var op = $(this).attr('id') == 'lock-file' ? 'lock' : 'unlock';
     $.ajax({
         url: '{% url 'FileView' repo.id %}',
         type: 'PUT',
         dataType: 'json',
         cache: 'false',
         beforeSend: prepareCSRFToken,
-        data: {'operation': 'lock', 'p': '{{path}}'},
+        data: {'operation': op, 'p': '{{path|escapejs}}'},
         success: function() {
-            $('#lock-file').hide();
+            $('#lock-file, #unlock-file, .file-locked-icon').toggleClass('hide');
-            $('#unlock-file').show();
-            $('.file-locked-icon').show();
         },
-        error: ajaxErrorHandler
+        error: function () {
-    });
+            feedback("{% trans "Failed" %}", 'error');
-});
+        }
-
-$('#unlock-file').click(function() {
-    $.ajax({
-        url: '{% url 'FileView' repo.id %}',
-        type: 'PUT',
-        dataType: 'json',
-        cache: 'false',
-        beforeSend: prepareCSRFToken,
-        data: {'operation': 'unlock', 'p': '{{path}}'},
-        success: function() {
-            $('#lock-file').show();
-            $('#unlock-file').hide();
-            $('.file-locked-icon').hide();
-        },
-        error: ajaxErrorHandler
     });
 });
 {% endif %}
 
 // set 'side toolbar' position
-
 function setToolbarPos() {
     var toolbar = $('#side-toolbar');
 

static/css/backbone.css

@@ -1,4 +1,12 @@
 /* lib view */
+.repo-file-list .dirent-icon {
+    position:relative;
+}
+.repo-file-list .file-locked-icon {
+   position:absolute;
+   right:0;
+   bottom:0;
+}
 .repo-file-list .dirent-name {
     width:220px;
 }

static/scripts/app/views/dirent.js

@@ -31,6 +31,18 @@ define([
         render: function() {
             var dir = this.dir;
             var dirent_path = Common.pathJoin([dir.path, this.model.get('obj_name')]);
+            var is_pro = app.pageOptions.is_pro;
+
+            // for 'file lock'
+            var enable_some_op = false; // op: 'del', 'rename', 'mv'
+            if (!is_pro) {
+                enable_some_op = true;
+            } else {
+                if (!this.model.get('is_locked') || this.model.get('locked_by_me')) {
+                    enable_some_op = true;
+                }
+            }
+
             this.$el.html(this.template({
                 dirent: this.model.attributes,
                 dirent_path: dirent_path,
@@ -39,20 +51,11 @@ define([
                 repo_id: dir.repo_id,
                 is_repo_owner: dir.is_repo_owner,
                 can_generate_shared_link: app.pageOptions.can_generate_shared_link,
-                is_pro: app.pageOptions.is_pro,
+                is_pro: is_pro,
+                enable_some_op: enable_some_op,
                 repo_encrypted: dir.encrypted
             }));
-
+            this.$('.file-locked-icon').attr('title', gettext("locked by {placeholder}").replace('{placeholder}', Common.HTMLescape(this.model.get('lock_owner'))));
-            if (this.model.get('is_locked')) {
-                if (this.model.get('locked_by_me')) {
-                    this.$('.file-lock').hide();
-                } else {
-                    this.$('.file-lock').hide();
-                    this.$('.file-unlock').hide();
-                }
-            } else {
-                this.$('.file-unlock').hide();
-            }
 
             return this;
         },
@@ -69,59 +72,9 @@ define([
             'click .rename': 'rename',
             'click .mv': 'mvcp',
             'click .cp': 'mvcp',
-            'click .file-lock': 'fileLock',
+            'click .set-folder-permission': 'setFolderPerm',
-            'click .file-unlock': 'fileUnlock',
+            'click .lock-file': 'lockFile',
-            'click .set-folder-permission': 'setFolderPerm'
+            'click .unlock-file': 'unlockFile'
-        },
-
-        fileLock: function() {
-            var dir = this.dirView.dir,
-                _this = this,
-                filepath = Common.pathJoin([dir.path, this.model.get('obj_name')]);
-
-            $.ajax({
-                url: Common.getUrl({name: 'file_lock', repo_id: dir.repo_id}),
-                type: 'PUT',
-                dataType: 'json',
-                data: {'operation': 'lock', 'p': filepath},
-                cache: 'false',
-                beforeSend: Common.prepareCSRFToken,
-                success: function(data) {
-                    _this.$('.file-locked-icon').show();
-                    _this.$('.file-unlock').show();
-                    _this.$('.file-lock').hide();
-                },
-                error: function (xhr) {
-                    Common.ajaxErrorHandler(xhr);
-                }
-            });
-
-            return false;
-        },
-
-        fileUnlock: function() {
-            var dir = this.dirView.dir,
-                _this = this,
-                filepath = Common.pathJoin([dir.path, this.model.get('obj_name')]);
-
-            $.ajax({
-                url: Common.getUrl({name: 'file_lock', repo_id: dir.repo_id}),
-                type: 'PUT',
-                dataType: 'json',
-                data: {'operation': 'unlock', 'p': filepath},
-                cache: 'false',
-                beforeSend: Common.prepareCSRFToken,
-                success: function(data) {
-                    _this.$('.file-locked-icon').hide();
-                    _this.$('.file-lock').show();
-                    _this.$('.file-unlock').hide();
-                },
-                error: function (xhr) {
-                    Common.ajaxErrorHandler(xhr);
-                }
-            });
-
-            return false;
         },
 
         highlight: function() {
@@ -516,8 +469,63 @@ define([
             };
             new FolderPermView(options);
             return false;
-        }
+        },
 
+        lockOrUnlockFile: function(params) {
+            var dir = this.dir,
+                filepath = Common.pathJoin([dir.path, this.model.get('obj_name')]),
+                callback = params.after_success;
+
+            $.ajax({
+                url: Common.getUrl({name: 'lock_or_unlock_file', repo_id: dir.repo_id}),
+                type: 'PUT',
+                dataType: 'json',
+                data: {
+                    'operation': params.op,
+                    'p': filepath
+                },
+                cache: false,
+                beforeSend: Common.prepareCSRFToken,
+                success: function() {
+                    callback();
+                },
+                error: function (xhr) {
+                    Common.ajaxErrorHandler(xhr);
+                }
+            });
+        },
+
+        lockFile: function() {
+            var _this = this;
+            this.lockOrUnlockFile({
+                'op': 'lock',
+                'after_success': function() {
+                    _this.model.set({
+                        'is_locked': true,
+                        'locked_by_me': true,
+                        'lock_owner': app.pageOptions.username
+                    });
+                    app.globalState.noFileOpPopup = true;
+                    _this.$el.removeClass('hl');
+                }
+            });
+            return false;
+        },
+
+        unlockFile: function() {
+            var _this = this;
+            this.lockOrUnlockFile({
+                'op': 'unlock',
+                'after_success': function() {
+                    _this.model.set({
+                        'is_locked': false
+                    });
+                    app.globalState.noFileOpPopup = true;
+                    _this.$el.removeClass('hl');
+                }
+            });
+            return false;
+        }
     });
 
     return DirentView;

static/scripts/common.js

@@ -67,13 +67,13 @@ define([
               case 'unstar_file': return siteRoot + 'ajax/repo/' + options.repo_id + '/file/unstar/';
               case 'del_dir': return siteRoot + 'ajax/repo/' + options.repo_id + '/dir/delete/';
               case 'del_file': return siteRoot + 'ajax/repo/' + options.repo_id + '/file/delete/';
-              case 'file_lock': return siteRoot + 'api2/repos/' + options.repo_id + '/file/';
               case 'rename_dir': return siteRoot + 'ajax/repo/' + options.repo_id + '/dir/rename/';
               case 'rename_file': return siteRoot + 'ajax/repo/' + options.repo_id + '/file/rename/';
               case 'mv_dir': return siteRoot + 'ajax/repo/' + options.repo_id + '/dir/mv/';
               case 'cp_dir': return siteRoot + 'ajax/repo/' + options.repo_id + '/dir/cp/';
               case 'mv_file': return siteRoot + 'ajax/repo/' + options.repo_id + '/file/mv/';
               case 'cp_file': return siteRoot + 'ajax/repo/' + options.repo_id + '/file/cp/';
+              case 'lock_or_unlock_file': return siteRoot + 'api2/repos/' + options.repo_id + '/file/';
               case 'new_dir': return siteRoot + 'ajax/repo/' + options.repo_id + '/dir/new/';
               case 'new_file': return siteRoot + 'ajax/repo/' + options.repo_id + '/file/new/';
               case 'del_dirents': return siteRoot + 'ajax/repo/' + options.repo_id + '/dirents/delete/';