[dir view] added 'file comment'

media/css/seahub.css

@@ -1087,6 +1087,7 @@ textarea:-moz-placeholder {/* for FF */
 .details-panel {
     width:320px;
 }
+.file-comment-panel-item-name,
 .details-panel-item-name {
     display:inline-block;
     max-width:215px;

seahub/templates/js/templates.html

@@ -616,6 +616,7 @@
                     </ul>
                     <div class="menu-inner-divider"></div>
                     <ul>
+                        <li><a class="op file-comment" href="#">{% trans "Comment" %}</a><li>
                         <li><a class="op file-history" href="{{ SITE_ROOT }}repo/file_revisions/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>&referer=<% print(encodeURIComponent(location.href)); %>">{% trans "History" %}</a></li>
                         <% if (is_pro && file_audit_enabled) { %>
                         <li><a class="op" href="{{ SITE_ROOT }}repo/file-access/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>" target="_blank">{% trans "Access Log" %}</a></li>
@@ -635,6 +636,7 @@
                     <% if (!repo_encrypted) { %>
                     <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
                     <% } %>
+                    <li><a class="op file-comment" href="#">{% trans "Comment" %}</a><li>
                     <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>
                 </ul>
             </div>
@@ -736,6 +738,7 @@
                     <div class="menu-inner-divider"></div>
                     <ul>
                     <% if (dirent.perm == 'rw') { %>
+                        <li><a class="op file-comment" href="#">{% trans "Comment" %}</a><li>
                         <li><a class="op file-history" href="{{ SITE_ROOT }}repo/file_revisions/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>">{% trans "History" %}</a></li>
                         <% if (is_pro) { %>
                             <% if (file_audit_enabled) { %>
@@ -744,6 +747,7 @@
                         <% } %>
                         <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>
                     <% } else if (dirent.perm == 'r') { %>
+                        <li><a class="op file-comment" href="#">{% trans "Comment" %}</a><li>
                         <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>
                     <% } %>
                     </ul>
@@ -813,12 +817,15 @@
         <div class="menu-inner-divider"></div>
         <ul>
             <% if (dirent.perm == 'rw') { %>
+            <li><a class="op file-comment" href="#">{% trans "Comment" %}</a><li>
             <li><a class="op file-history" href="{{ SITE_ROOT }}repo/file_revisions/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>&referer=<% print(encodeURIComponent(location.href)); %>">{% trans "History" %}</a></li>
                 <% if (is_pro && file_audit_enabled) { %>
                 <li><a class="op" href="{{ SITE_ROOT }}repo/file-access/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>" target="_blank">{% trans "Access Log" %}</a></li>
                 <% } %>
             <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>
+
             <% } else if (dirent.perm == 'r') { %>
+                <li><a class="op file-comment" href="#">{% trans "Comment" %}</a><li>
                 <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>
             <% } %>
         </ul>
@@ -2420,3 +2427,46 @@
         <span class="loading-icon vam" style="margin-left:5px;display:none;"></span>
     </form>
 </script>
+
+{# file comment #}
+<script type="text/template" id="file-comment-panel-tmpl">
+    <div class="right-side-panel-hd file-discussions-hd ovhd">
+        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon fleft"></a>
+        <h3 class="right-side-panel-title">
+            <img src="<%= icon_url %>" width="24" alt="" class="vam" />
+            <span class="vam ellipsis file-comment-panel-item-name" title="<%- file_name %>"><%- file_name %></span>
+        </h3>
+    </div>
+    <div class="right-side-panel-con file-discussions-con">
+        <div class="loading-icon loading-tip"></div>
+        <ul class="file-discussion-list hide"></ul>
+        <p class="no-discussion-tip hide">{% trans "No comment yet." %}</p>
+        <p class="error hide"></p>
+    </div>
+    <div class="right-side-panel-footer file-discussions-footer">
+        <form action="" method="post" class="msg-form">
+            <img src="{% avatar_url request.user 64 %}" alt="" width="32" class="avatar-circle fleft" />
+            <div class="msg-body">
+                <textarea name="message" placeholder="{% trans "Add a comment..." %}" class="msg-input"></textarea>
+                <p class="error hide"></p>
+                <button type="submit" class="submit msg-submit">{% trans "Submit" %}</button>
+            </div>
+        </form>
+    </div>
+</script>
+<script type="text/template" id="file-comment-tmpl">
+<img src="<%= avatar_url %>" alt="" width="32" class="avatar-circle fleft" />
+<div class="msg-body">
+    <div class="ovhd">
+        <a class="msg-username ellipsis" title="<%- user_name %>" href="<%= user_profile_url %>"><%- user_name %></a>
+        <span class="msg-time" title="<%- time %>"><%- time_from_now %></span>
+        <div class="msg-ops fright vh">
+            <a class="msg-op sf2-icon-reply op-icon js-reply-msg" title="{% trans "Reply" %}" aria-label="{% trans "Reply" %}" href="#"></a>
+            <% if (can_delete_msg) { %>
+                <a class="msg-op sf2-icon-delete op-icon js-del-msg" title="{% trans "Delete" %}" aria-label="{% trans "Delete" %}" href="#" data-id="<%= id %>"></a>
+            <% } %>
+        </div>
+    </div>
+    <div class="msg-content"><%= content_marked %></div>
+</div>
+</script>

seahub/templates/libraries.html

@@ -264,7 +264,7 @@ app["pageOptions"] = {
         {% endfor %}
         return mods_enabled;
     })(),
-    username: "{{request.user.username}}",
+    username: "{{request.user.username|escapejs}}",
     name: "{{request.user.username|email2nickname|escapejs}}",
     contact_email: "{{ request.user.username|email2contact_email|escapejs }}",
     events_enabled: {% if events_enabled %} true {% else %} false {% endif %},

static/scripts/app/collections/file-comments.js

@@ -0,0 +1,24 @@
+define([
+    'underscore',
+    'backbone',
+    'common'
+], function(_, Backbone, Common) {
+    'use strict';
+
+    var collection = Backbone.Collection.extend({
+
+        url: function() {
+            return Common.getUrl({name: 'file-comments', repo_id: this.repo_id});
+        },
+
+        parse: function(data) {
+            return data.comments; // return the array
+        },
+
+        setData: function(repo_id) {
+            this.repo_id = repo_id;
+        }
+    });
+
+    return collection;
+});

static/scripts/app/views/dir.js

@@ -14,10 +14,11 @@ define([
     'app/views/dirent-details',
     'app/views/fileupload',
     'app/views/share',
+    'app/views/file-comments',
     'app/views/widgets/dropdown'
     ], function($, progressbar, magnificPopup, simplemodal, _, Backbone, Common,
         FileTree, Cookies, DirentCollection, DirentView, DirentGridView,
-        DirentDetailsView, FileUploadView, ShareView, DropdownView) {
+        DirentDetailsView, FileUploadView, ShareView, FileCommentsView, DropdownView) {
         'use strict';
 
         var DirView = Backbone.View.extend({
@@ -74,6 +75,7 @@ define([
 
                 this.fileUploadView = new FileUploadView({dirView: this});
                 this.direntDetailsView = new DirentDetailsView();
+                this.fileCommentsView = new FileCommentsView();
 
                 this.render();
 
@@ -159,6 +161,7 @@ define([
                 this.attached = false;
 
                 this.direntDetailsView.hide();
+                this.fileCommentsView.hide();
             },
 
             /***** private functions *****/
@@ -174,6 +177,9 @@ define([
             },
 
             reset: function() {
+                this.direntDetailsView.hide();
+                this.fileCommentsView.hide();
+
                 this.renderPath();
                 this.renderDirOpBar();
 
@@ -673,8 +679,8 @@ define([
                     var dirent_name = $.trim($input.val());
 
                     if (!dirent_name) {
-                      Common.showFormError(form_id, gettext("It is required."));
-                      return false;
+                        Common.showFormError(form_id, gettext("It is required."));
+                        return false;
                     };
 
                     if (dirent_name.indexOf('/') != -1) {

static/scripts/app/views/dirent-grid.js

@@ -139,6 +139,7 @@ define([
             this.$('.lock-file').on('click', _.bind(this.lockFile, this));
             this.$('.unlock-file').on('click', _.bind(this.unlockFile, this));
             this.$('.view-details').on('click', _.bind(this.viewDetails, this));
+            this.$('.file-comment').on('click', _.bind(this.viewFileComments, this));
             this.$('.set-folder-permission').on('click', _.bind(this.setFolderPerm, this));
 
             return false;
@@ -386,6 +387,20 @@ define([
             return false;
         },
 
+        viewFileComments: function() {
+            var file_icon_size = Common.isHiDPI() ? 48 : 24;
+            this.dirView.fileCommentsView.show({
+                'is_repo_owner': this.dir.is_repo_owner,
+                'repo_id': this.dir.repo_id,
+                'path': Common.pathJoin([this.dir.path, this.model.get('obj_name')]),
+                'icon_url': this.model.getIconUrl(file_icon_size),
+                'file_name': this.model.get('obj_name')
+            });
+
+            this.closeMenu();
+            return false;
+        },
+
         open_via_client: function() {
             this.closeMenu();
             return true;

static/scripts/app/views/dirent.js

@@ -104,6 +104,7 @@ define([
             'click .lock-file': 'lockFile',
             'click .unlock-file': 'unlockFile',
             'click .view-details': 'viewDetails',
+            'click .file-comment': 'viewFileComments',
             'click .open-via-client': 'open_via_client'
         },
 
@@ -113,9 +114,13 @@ define([
 
         clickItem: function(e) {
             var target =  e.target || event.srcElement;
-            if (this.$('td').is(target) &&
-                $('#dirent-details').css('right') == '0px') { // after `#dirent-details` is shown
-                this.viewDetails();
+            if (this.$('td').is(target)) {
+                if ($('#dirent-details').css('right') == '0px') { // after `#dirent-details` is shown
+                    this.viewDetails();
+                }
+                if ($('#file-comments').css('right') == '0px') {
+                    this.viewFileComments();
+                }
             }
         },
 
@@ -668,6 +673,20 @@ define([
             return false;
         },
 
+        viewFileComments: function() {
+            var file_icon_size = Common.isHiDPI() ? 48 : 24;
+            this.dirView.fileCommentsView.show({
+                'is_repo_owner': this.dir.is_repo_owner,
+                'repo_id': this.dir.repo_id,
+                'path': Common.pathJoin([this.dir.path, this.model.get('obj_name')]),
+                'icon_url': this.model.getIconUrl(file_icon_size),
+                'file_name': this.model.get('obj_name')
+            });
+
+            this._hideMenu();
+            return false;
+        },
+
         open_via_client: function() {
             this._hideMenu();
             return true;

static/scripts/app/views/file-comment.js

@@ -0,0 +1,99 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'marked',
+    'moment'
+], function($, _, Backbone, Common, Marked, Moment) {
+    'use strict';
+
+    var View = Backbone.View.extend({
+
+        tagName: 'li',
+        className: 'msg ovhd',
+
+        template: _.template($('#file-comment-tmpl').html()),
+
+        initialize: function(options) {
+            this.listenTo(this.model, 'destroy', this.remove);
+
+            this.is_repo_owner = options.is_repo_owner;
+            this.parentView = options.parentView;
+        },
+
+        events: {
+            'mouseenter': 'highlight',
+            'mouseleave': 'rmHighlight',
+            'click .js-del-msg': 'delMsg',
+            'click .js-reply-msg': 'reply'
+        },
+
+        highlight: function() {
+            this.$el.addClass('hl');
+            this.$('.msg-ops').removeClass('vh');
+        },
+
+        rmHighlight: function() {
+            this.$el.removeClass('hl');
+            this.$('.msg-ops').addClass('vh');
+        },
+
+        delMsg: function() {
+            this.model.destroy({
+                wait: true,
+                success: function() {
+                },
+                error: function(model, response) {
+                    var err_msg;
+                    if (response.responseText) {
+                        err_msg = $.parseJSON(response.responseText).error_msg;
+                    } else {
+                        err_msg = gettext("Failed. Please check the network.");
+                    }
+                    Common.feedback(err_msg, 'error');
+                }
+            });
+            return false;
+        },
+
+        reply: function() {
+            this.parentView.replyTo(this.model.get('user_name'));
+            return false;
+        },
+
+        render: function() {
+            var user_email = this.model.get('user_email');
+
+            var can_delete_msg = false;
+            if (this.is_repo_owner ||
+                user_email == app.pageOptions.username) {
+                can_delete_msg = true;
+            }
+
+            var user_profile_url = Common.getUrl({
+                'name': 'user_profile',
+                'username': encodeURIComponent(user_email)
+            });
+
+            var obj = this.model.attributes;
+            var m = Moment(obj.created_at);
+            var data = $.extend({}, obj, {
+                'content_marked': Marked(obj.comment, {
+                    breaks: true,
+                    sanitize: true
+                }),
+                'time': m.format('LLLL'),
+                'time_from_now': Common.getRelativeTimeStr(m),
+                'can_delete_msg': can_delete_msg,
+                'user_profile_url': user_profile_url
+            });
+
+            this.$el.html(this.template(data));
+            return this;
+        }
+
+    });
+
+    return View;
+});

static/scripts/app/views/file-comments.js

@@ -0,0 +1,205 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'app/collections/file-comments',
+    'app/views/file-comment'
+], function($, _, Backbone, Common, Collection, ItemView) {
+    'use strict';
+
+    var View = Backbone.View.extend({
+
+        id: 'file-comments',
+        className: 'right-side-panel',
+
+        template: _.template($('#file-comment-panel-tmpl').html()),
+
+        initialize: function() {
+            $("#main").append(this.$el);
+
+            this.collection = new Collection();
+            this.listenTo(this.collection, 'add', this.addOne);
+            this.listenTo(this.collection, 'reset', this.reset);
+
+            var _this = this;
+            $(document).keydown(function(e) {
+                // ESCAPE key pressed
+                if (e.which == 27) {
+                    _this.hide();
+                }
+            });
+            $(window).resize(function() {
+                _this.setConHeight();
+            });
+        },
+
+        events: {
+            'click .js-close': 'close',
+            'submit .msg-form': 'formSubmit'
+        },
+
+        close: function() {
+            this.hide();
+            return false;
+        },
+
+        render: function(data) {
+            this.$el.html(this.template(data));
+
+            this.$listContainer = $('.file-discussion-list', this.$el);
+            this.$emptyTip = $('.no-discussion-tip', this.$el);
+            this.$loadingTip = $('.loading-tip', this.$el);
+            this.$conError = $('.file-discussions-con .error', this.$el);
+            this.$msgInput = $('[name="message"]', this.$el);
+        },
+
+        show: function(options) {
+            this.is_repo_owner = options.is_repo_owner;
+            this.repo_id = options.repo_id;
+            this.path = options.path;
+
+            this.collection.setData(this.repo_id);
+
+            this.render({
+                'icon_url': options.icon_url,
+                'file_name': options.file_name
+            });
+            this.$el.css({'right': 0});
+            this.setConHeight();
+            this.getContent();
+        },
+
+        hide: function() {
+            this.$el.css({'right': '-400px'});
+            this.$el.empty();
+        },
+
+        reset: function() {
+            this.$conError.hide();
+            this.$loadingTip.hide();
+            this.$listContainer.empty();
+
+            if (this.collection.length) {
+                this.$emptyTip.hide();
+                this.collection.each(this.addOne, this);
+                this.$listContainer.show();
+                this.scrollConToBottom();
+            } else {
+                this.$emptyTip.show();
+                this.$listContainer.hide();
+            }
+        },
+
+        getContent: function() {
+            var _this = this;
+
+            this.collection.fetch({
+                cache: false,
+                data: {
+                    p: this.path,
+                    avatar_size: 64
+                },
+                reset: true,
+                success: function() {
+                },
+                error: function(collection, response, opts) {
+                    _this.$loadingTip.hide();
+                    var err_msg;
+                    if (response.responseText) {
+                        if (response['status'] == 401 || response['status'] == 403) {
+                            err_msg = gettext("Permission error");
+                        } else {
+                            err_msg = $.parseJSON(response.responseText).error_msg;
+                        }
+                    } else {
+                        err_msg = gettext('Please check the network.');
+                    }
+                    _this.$conError.html(err_msg).show();
+                }
+            });
+        },
+
+        formSubmit: function() {
+            var _this = this;
+            var $formError = $('.msg-form .error', this.$el);
+            var $submitBtn = $('[type="submit"]', this.$el)
+                var msg = $.trim(this.$msgInput.val());
+            if (!msg) {
+                return false;
+            }
+
+            $formError.hide();
+            Common.disableButton($submitBtn);
+
+            $.ajax({
+                url: Common.getUrl({name: 'file-comments', repo_id: this.repo_id}) +
+                    '?p=' + encodeURIComponent(this.path) + '&avatar_size=64',
+                type: 'POST',
+                cache: false,
+                dataType: 'json',
+                beforeSend: Common.prepareCSRFToken,
+                data: {
+                    'comment': msg
+                },
+                success: function(data) {
+                    _this.$msgInput.val('');
+                    _this.collection.add(data);
+                    if (_this.$emptyTip.is(':visible')) {
+                        _this.$emptyTip.hide();
+                        _this.$listContainer.show();
+                    }
+                    _this.scrollConToBottom();
+                },
+                error: function(xhr) {
+                    var err_msg;
+                    if (xhr.responseText) {
+                        err_msg = $.parseJSON(xhr.responseText).error_msg;
+                    } else {
+                        err_msg = gettext("Failed. Please check the network.");
+                    }
+                    $formError.html(err_msg).show();
+                },
+                complete: function() {
+                    Common.enableButton($submitBtn);
+                }
+            });
+
+            return false;
+        },
+
+        addOne: function(item) {
+            var view = new ItemView({
+                model: item,
+                is_repo_owner: this.is_repo_owner,
+                parentView: this
+            });
+
+            this.$listContainer.append(view.render().el);
+        },
+
+        setConHeight: function() {
+            $('.file-discussions-con', this.$el).css({
+                'max-height': $(window).height()
+                    - this.$el.offset().top
+                    - $('.file-discussions-hd', this.$el).outerHeight(true)
+                    - $('.file-discussions-footer', this.$el).outerHeight(true)
+            });
+        },
+
+        scrollConToBottom: function() {
+            var $el = this.$('.file-discussions-con');
+            $el.scrollTop($el[0].scrollHeight - $el[0].clientHeight);
+        },
+
+        replyTo: function(to_user) {
+            var str = "@" + to_user + " ";
+            var $input = this.$msgInput.val(str);
+            Common.setCaretPos($input[0], str.length);
+            $input.focus();
+        }
+
+    });
+
+    return View;
+});

static/scripts/common.js

@@ -98,6 +98,7 @@ define([
 
                 case 'dir-details': return siteRoot + 'api/v2.1/repos/' + options.repo_id + '/dir/detail/';
                 case 'tags': return siteRoot + 'api/v2.1/repos/' + options.repo_id + '/tags/';
+                case 'file-comments': return siteRoot + 'api2/repos/' + options.repo_id + '/file/comments/';
 
                 // Repos
                 case 'repos': return siteRoot + 'api2/repos/';