fb401cae8830

web: add line-level comment editing support
[view raw] [browse files]
author Steve Losh <steve@stevelosh.com>
date Sat, 03 Jul 2010 12:52:47 -0400
parents c0e1c48cd6a8
children 84b11de68417 5c200ed49875
branches/tags (none)
files review/static/comments.js review/static/style.css review/static/style.less review/templates/pieces/linecomment.html

Changes

--- a/review/static/comments.js	Sat Jul 03 12:07:31 2010 -0400
+++ b/review/static/comments.js	Sat Jul 03 12:52:47 2010 -0400
@@ -24,16 +24,18 @@
                 '<a class="cancel-line button"><span>Cancel</span></a>' +
 
                 '<input type="hidden" name="filename" value="{{ filename }}" />' +
+                '<input type="hidden" name="current" value="{{ identifier }}" class="current" />' +
                 '<input class="lines" type="hidden" name="lines" value="{{ currNum }}" />' +
             '</form>' +
         '</td>' +
     '</tr>'
 );
 
-function RenderLineCommentForm(line, currNum, body, markdown) {
+function RenderLineCommentForm(line, currNum, body, markdown, identifier) {
     var filename = line.closest(".file").find(".filename h3 a .name").html();
     markdown_checked = markdown ? 'checked="checked"' : '';
-    return comment_form({ filename: filename, currNum: currNum, body: body, markdown_checked: markdown_checked });
+    return comment_form({ filename: filename, currNum: currNum, body: body,
+                          markdown_checked: markdown_checked, identifier: identifier });
 }
 
 $(function() {
@@ -61,16 +63,41 @@
     });
     $("a.cancel-line").live('click', function(event) {
         $(event.target).closest(".diff").find(".chosen").removeClass("chosen");
+        $(event.target).closest("tr.comment-form").hide();
+        $(event.target).closest(".diff").find("tr.comment").fadeIn('fast');
         $(event.target).closest("tr.comment-form").remove();
         return false;
     });
+    $("a.edit-line").click(function(event) {
+        var diff = $(this).closest(".diff");
+        var comment = $(this).closest("tr.comment");
+
+        diff.find(".chosen").removeClass("chosen");
+        diff.find(".comment-form").remove();
+        comment.hide();
+
+        _.each($(event.target).closest(".comment").find(".commentlines").html().split(","),
+               function(i) { diff.find(".line-" + i).addClass("chosen") });
+
+        var lines_chosen = diff.find(".chosen");
+        var last_line = lines_chosen.last();
+        var last_line_number = parseInt(lines_chosen.find(".linenumber").last().html());
+        var body = comment.find(".raw").html();
+        var markdown = comment.find(".message").hasClass("markdown");
+        var identifier = comment.find(".identifier").html();
+
+        var comment_form = RenderLineCommentForm(last_line, last_line_number, body, markdown, identifier);
+        last_line.after(comment_form);
+        diff.find("label").inFieldLabels();
+
+        return false;
+    });
 
     $("tr.comment").hover(function(event) {
         var diff = $(event.target).closest(".diff");
-        var lines = $(event.target).find(".commentlines").html().split(",");
-        for (i=0; i < lines.length; i++) {
-            diff.find(".line-" + lines[i]).addClass("viewing");
-        }
+
+        _.each($(event.target).find(".commentlines").html().split(","),
+               function (i) { diff.find(".line-" + i).addClass("viewing"); });
     }, function(event) {
         $(".viewing").removeClass("viewing");
     });
@@ -93,8 +120,7 @@
                 if (lastSelected && jQuery.contains(diff.get(0), lastSelected.get(0))) {
                     var lastNum = parseInt(lastSelected.find(".linenumber").html());
                     _.each(_.range(currNum, lastNum, lastNum > currNum ? 1 : -1),
-                           function(i) { diff.find(".line-" + i).addClass("chosen"); }
-                    );
+                           function(i) { diff.find(".line-" + i).addClass("chosen"); });
                 }
             } else {
                 $(this).addClass("chosen");
@@ -108,16 +134,19 @@
         if (existing_forms.length) {
             if (_.isNaN(last_line_number)) {
                 existing_forms.remove();
+                diff.find("tr.comment").fadeIn('fast');
             } else {
                 var existing_form = existing_forms.last();
                 var existing_form_line_number = parseInt(existing_form.find(".lastlinenumber").html());
                 var existing_body = existing_form.find(".body").val();
-                var markdown = existing_form.find('.markdown-select').is(':checked');
+                var existing_markdown = existing_form.find('.markdown-select').is(':checked');
+                var existing_current = existing_form.find('.current').val();
 
                 if (existing_form_line_number != last_line_number) {
                     existing_forms.remove();
 
-                    var comment_form = RenderLineCommentForm($(this), last_line_number, existing_body, markdown);
+                    var comment_form = RenderLineCommentForm($(this), last_line_number, existing_body,
+                                                             existing_markdown, existing_current);
                     lines_chosen.last().after(comment_form);
                     diff.find("label").inFieldLabels();
                 }
@@ -127,7 +156,7 @@
                 diff.find(".comment-form form .lines").val(newLines);
             }
         } else {
-            var comment_form = RenderLineCommentForm($(this), last_line_number, '', true);
+            var comment_form = RenderLineCommentForm($(this), last_line_number, '', true, '');
             $(this).after(comment_form);
             diff.find("label").inFieldLabels();
         }
--- a/review/static/style.css	Sat Jul 03 12:07:31 2010 -0400
+++ b/review/static/style.css	Sat Jul 03 12:52:47 2010 -0400
@@ -453,6 +453,10 @@
 #changeset .content .activate a:hover span {
   background-color: #eaeaea;
 }
+#changeset .content .edit-line {
+  display: inline-block;
+  margin-top: 3px;
+}
 #changeset .content .togglebox form {
   float: left;
   border: 1px solid #ccc;
--- a/review/static/style.less	Sat Jul 03 12:07:31 2010 -0400
+++ b/review/static/style.less	Sat Jul 03 12:52:47 2010 -0400
@@ -405,6 +405,10 @@
         &:hover { .button-hover(@c-metal, #000, 12px, 1.45); }
         &:hover span { .button-hover-span(@c-metal, #000, 12px, 1.45); }
     }
+    .edit-line {
+        display: inline-block;
+        margin-top: 3px;
+    }
     .togglebox {
         form {
             float: left;
--- a/review/templates/pieces/linecomment.html	Sat Jul 03 12:07:31 2010 -0400
+++ b/review/templates/pieces/linecomment.html	Sat Jul 03 12:52:47 2010 -0400
@@ -5,6 +5,7 @@
 <tr class="comment">
     <td class="comment group" colspan="3" id="comment-{{ comment.identifier }}">
         <div class="comment-content">
+            <span class="identifier disabled">{{ comment.identifier }}</span>
             <span class="commentlines disabled">{{ ','.join(utils['map'](utils['str'], comment.lines)) }}</span>
             <a href="#comment-{{ comment.identifier }}" rel="comments" class="expand" id="comment-expand-{{ comment.identifier }}">&rarr;</a>
             <script type="text/javascript">
@@ -26,8 +27,14 @@
 
                 {% if comment.style == 'markdown' %}
                     <div class="message markdown">{{ rendered|safe }}</div>
+                    <div class="raw disabled">{{ comment.message }}</div>
                 {% else %}
-                    <div class="message plain">{{ comment.message }}</div>
+                    <div class="message raw plain">{{ comment.message }}</div>
+                {% endif %}
+
+
+                {% if not read_only %}
+                    <a class="edit-line" href="#">Edit</a>
                 {% endif %}
             </div>
         </div>