From f67865ea625aa679ed60b35a82abaeaec209a85a Mon Sep 17 00:00:00 2001 From: llj Date: Tue, 24 May 2016 17:53:29 +0800 Subject: [PATCH] [file view] add 'discussion' --- media/css/file_view_extra.css | 16 +- media/css/seahub.css | 35 +- seahub/templates/view_file_base.html | 303 +++++++++++++++++- seahub/templates/view_file_markdown.html | 2 +- seahub/templates/view_file_text.html | 2 +- seahub/templates/view_history_file.html | 4 +- static/scripts/app/views/group-discussions.js | 2 +- 7 files changed, 304 insertions(+), 60 deletions(-) diff --git a/media/css/file_view_extra.css b/media/css/file_view_extra.css index 7151894aa9..8de07d9cf2 100644 --- a/media/css/file_view_extra.css +++ b/media/css/file_view_extra.css @@ -17,15 +17,9 @@ #shared-file-view-hd { margin-top:4px; } -#file-op { - padding:0; - border:0; -} -#file-op .avatar, -#file-op .name, -#file-op .time, -#file-op span { +#file-op .avatar { vertical-align:middle; + border-radius:1000px; } #file-op .time { color:#666; @@ -34,9 +28,6 @@ #file-op .file-diff { font-size:100%; } -#file-op .contributors { - margin-left:8px; -} #file-view { padding:30px 0 15px; background:#f4f4f4; @@ -73,9 +64,6 @@ .file-path { margin: 0 0 9px; } -#file-op .avatar { - border-radius:1000px; -} .history-file-path { margin:.5em 0 0; } diff --git a/media/css/seahub.css b/media/css/seahub.css index 89773b58e2..fb95e55d20 100644 --- a/media/css/seahub.css +++ b/media/css/seahub.css @@ -886,7 +886,7 @@ textarea:-moz-placeholder {/* for FF */ } /**** right side panel ****/ .right-side-panel { - background:#f8f8f8; + background: #fff; width:400px; position:fixed; right:-400px; @@ -901,8 +901,9 @@ textarea:-moz-placeholder {/* for FF */ transition: all 0.3s ease; } .right-side-panel-hd { + background:#f8f8f8; padding:10px; - border-bottom: 1px solid #c9c9c9; + border-bottom:1px solid #c9c9c9; } .right-side-panel-footer { position:absolute; @@ -910,7 +911,6 @@ textarea:-moz-placeholder {/* for FF */ } .right-side-panel-con { overflow-y: auto; - background: #fff; } /**** messages ****/ .messages { @@ -1979,7 +1979,6 @@ button.sf-dropdown-toggle:focus { text-align:right; margin-bottom:4px; } -.file-op button, #file-op button, .repo-op .op-btn { *margin-left:5px;/* for ie 7*/ @@ -2440,10 +2439,6 @@ button.sf-dropdown-toggle:focus { } /* file view online, file edit */ -.file-op { - color:#444; - text-align:right; -} #shared-link, #shared-upload-link, #shared-link-text, @@ -2461,22 +2456,6 @@ button.sf-dropdown-toggle:focus { #gen-upload-link-btn { margin-top: 0.5em; } -.file-op { - margin-top:0.8em; -} -.file-op a { - font-weight:normal; - margin-left:2px; -} -.file-op button { - color:#444; -} -.file-op [class^='icon-'], -.file-op [class^='sf-icon-'] { - font-size:1em; - margin-right:3px; - color:#666; -} #text-diff-output { padding:3px; background:#dedede; @@ -2484,13 +2463,7 @@ button.sf-dropdown-toggle:focus { -moz-border-radius:3px; margin-top:12px; } -#file-op { - padding:8px 10px; - background:#fff; - text-align:right; - border:1px solid #ccc; -} -#file-op button, +#file-op .op-btn, #file-op .sf-btn-link { padding:2px 8px; } diff --git a/seahub/templates/view_file_base.html b/seahub/templates/view_file_base.html index 151f8f0932..5670480c8b 100644 --- a/seahub/templates/view_file_base.html +++ b/seahub/templates/view_file_base.html @@ -1,5 +1,5 @@ {% extends 'base.html' %} -{% load seahub_tags avatar_tags i18n %} +{% load seahub_tags avatar_tags i18n staticfiles %} {% load url from future %} {% block sub_title %}{{filename}} - {% endblock %} @@ -39,31 +39,32 @@
-
+
- {% avatar latest_contributor 24 %} {{ latest_contributor|email2nickname }} - {{ last_modified|translate_seahub_time}} + {% avatar latest_contributor 24 %} {{ latest_contributor|email2nickname }} + {{ last_modified|translate_seahub_time}} {% block update_detail %} {% if last_commit_id %} - {% trans "updated this file"%}. + {% trans "updated this file"%}. {% endif %} {% endblock %}
+
{% if can_lock_unlock_file %} {% if not file_locked %} - - + + {% elif locked_by_me %} - - + + {% endif %} {% endif %} {% if not repo.encrypted %} {% if request.user.permissions.can_generate_shared_link %} - + {% endif %} {% endif %} @@ -77,6 +78,11 @@ {% endif %} {% trans "Download"%} + + +
+ +
@@ -100,9 +106,53 @@
+ + + {% endblock %} {% block extra_script %} + + + {% if highlight_keyword %} {% endif %} @@ -243,5 +293,238 @@ $(window).load(function() { } }); {% endif %} + + +// file discussion +var fileDiscussions = { + + $el: $('#file-discussions'), + tmpl: _.template($('#discussion-panel-tmpl').html()), + + init: function() { + var _this = this; + + // events + this.$el.on('click', '.js-close', function() { + _this.hide(); + return false; + }); + this.$el.on('mouseenter', '.msg', function() { + $(this).addClass('hl').find('.msg-ops').removeClass('vh'); + }); + this.$el.on('mouseleave', '.msg', function() { + $(this).removeClass('hl').find('.msg-ops').addClass('vh'); + }); + this.$el.on('click', '.js-reply-msg', function() { + _this.replyTo($(this).attr('data-username')); + return false; + }); + this.$el.on('click', '.js-del-msg', function() { + _this.delOne({ + id: $(this).attr('data-id'), + $el: $(this).closest('.msg') + }); + return false; + }); + this.$el.on('submit', '.msg-form', function() { + _this.formSubmit(); + return false; + }); + + }, + + render: function () { + this.$el.html($(this.tmpl())); + + 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); + }, + + collectionUrl: '{% url "api2-file-comments" repo.id %}?p=' + + e('{{path|escapejs}}') + '&avatar_size=64', + + show: function() { + this.render(); + this.$el.css({'right': 0}); + this.setConHeight(); + this.getContent(); + }, + + hide: function() { + this.$el.css({'right': '-400px'}); + this.$el.empty(); + }, + + getContent: function() { + var _this = this; + $.ajax({ + url: this.collectionUrl, + type: 'GET', + cache: false, + dataType: 'json', + success: function(data) { + var comments = data.comments; + if (comments.length > 0) { + $(comments).each(function(index, item) { + _this.addOne(item); + }); + _this.$listContainer.show(); + } else { + _this.$emptyTip.show(); + } + }, + error: function(xhr) { + var err_msg; + if (xhr.responseText) { + err_msg = $.parseJSON(xhr.responseText).error_msg; + } else { + err_msg = "{% trans "Failed. Please check the network." %}"; + } + _this.$conError.html(err_msg).show(); + }, + complete: function() { + _this.$loadingTip.hide(); + } + }); + }, + + 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(); + disable($submitBtn); + $.ajax({ + url: this.collectionUrl, + type: 'POST', + cache: false, + dataType: 'json', + beforeSend: prepareCSRFToken, + data: {'comment': msg}, + success: function(data) { + _this.$msgInput.val(''); + _this.addOne(data); + if (_this.$emptyTip.is(':visible')) { + _this.$emptyTip.hide(); + _this.$listContainer.show(); + } + }, + error: function(xhr) { + var err_msg; + if (xhr.responseText) { + err_msg = $.parseJSON(xhr.responseText).error_msg; + } else { + err_msg = "{% trans "Failed. Please check the network." %}"; + } + $formError.html(err_msg).show(); + }, + complete: function() { + enable($submitBtn); + } + }); + }, + + itemTmpl: _.template($('#discussion-tmpl').html()), + + addOne: function(obj) { + var can_delete_msg = false; + if ('{{is_repo_owner}}' == 'True' || + obj.user_email == '{{request.user|escapejs}}') { + can_delete_msg = true; + } + + var user_profile_url = '{{SITE_ROOT}}profile/' + encodeURIComponent(obj.user_email) + '/'; + + 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': this.util_getRelativeTimeStr(m), + 'can_delete_msg': can_delete_msg, + 'user_profile_url': user_profile_url + }); + + var $item = $(this.itemTmpl(data)); + this.$listContainer.append($item); + }, + + setConHeight: function() { + $('.file-discussions-con', this.$el).css({ + 'max-height': $(window).height() + - $('.file-discussions-hd', this.$el).outerHeight(true) + - $('.file-discussions-footer', this.$el).outerHeight(true) + }); + }, + + replyTo: function(to_user) { + var str = "@" + to_user + " "; + var $input = this.$msgInput.val(str); + setCaretPos($input[0], str.length); + $input.focus(); + }, + + // delete a comment + delOne: function(item) { // item: {id:, $el:} + var _this = this; + $.ajax({ + url: '{{SITE_ROOT}}api2/repos/{{repo.id}}/file/comments/' + item.id + '/', + type: 'delete', + cache: false, + beforeSend: prepareCSRFToken, + success: function() { + item.$el.remove(); + if ($('.msg', _this.$el).length == 0) { + _this.$emptyTip.show(); + _this.$listContainer.hide(); + } + }, + error: function(xhr) { + var err_msg; + if (xhr.responseText) { + err_msg = $.parseJSON(xhr.responseText).error_msg; + } else { + err_msg = "{% trans "Failed. Please check the network." %}"; + } + feedback(err_msg, 'error'); + } + }); + }, + + util_getRelativeTimeStr: function(m) { + var now = new Date(); + if (m - now > 0) { + return "{% trans "Just now" %}"; + } else { + return m.fromNow(); + } + } +}; +// init +fileDiscussions.init(); + +$('#discuss').click(function() { + fileDiscussions.show(); +}); +$(document).keydown(function(e) { + // ESCAPE key pressed + if (e.which == 27) { + fileDiscussions.hide(); + } +}); +$(window).resize(function() { + fileDiscussions.setConHeight(); +}); {% endblock %} diff --git a/seahub/templates/view_file_markdown.html b/seahub/templates/view_file_markdown.html index 92cd45e840..6a63bcedcf 100644 --- a/seahub/templates/view_file_markdown.html +++ b/seahub/templates/view_file_markdown.html @@ -4,7 +4,7 @@ {% block update_detail %} {% if last_commit_id %} - {% trans "updated this file"%}, {% trans "Detail"%}. + {% trans "updated this file"%}, {% trans "Detail"%}. {% endif %} {% endblock %} diff --git a/seahub/templates/view_file_text.html b/seahub/templates/view_file_text.html index 361dbd4a74..f48d73062b 100644 --- a/seahub/templates/view_file_text.html +++ b/seahub/templates/view_file_text.html @@ -13,7 +13,7 @@ {% block update_detail %} {% if last_commit_id %} - {% trans "updated this file"%}, {% trans "Detail"%}. + {% trans "updated this file"%}, {% trans "Detail"%}. {% endif %} {% endblock %} diff --git a/seahub/templates/view_history_file.html b/seahub/templates/view_history_file.html index f40fb83d49..ac72697d8c 100644 --- a/seahub/templates/view_history_file.html +++ b/seahub/templates/view_history_file.html @@ -19,7 +19,7 @@
-
+

{% block file_path %} {% trans "Current Path: "%} @@ -29,7 +29,7 @@ {% endblock %}

- {% trans "Download"%} + {% trans "Download"%}
{% include 'snippets/file_content_html.html' %}
diff --git a/static/scripts/app/views/group-discussions.js b/static/scripts/app/views/group-discussions.js index c482d7fb34..d5b351528b 100644 --- a/static/scripts/app/views/group-discussions.js +++ b/static/scripts/app/views/group-discussions.js @@ -29,7 +29,7 @@ define([ var _this = this; $(document).keydown(function(e) { // ESCAPE key pressed - if (e.keyCode == 27) { + if (e.which == 27) { _this.hide(); } });