Skip to content

Commit

Permalink
Add comment previews to the client, with keyboard shortcut.
Browse files Browse the repository at this point in the history
Fixes #70.
  • Loading branch information
cespare committed Oct 12, 2011
1 parent c7d0e14 commit 87d3e4c
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 12 deletions.
3 changes: 2 additions & 1 deletion lib/keyboard_shortcuts.rb
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,10 @@ module KeyboardShortcuts
"shift + n" => "Next file in commit",
"shift + p" => "Previous file in commit",
"enter" => "New comment on selected line",
"shift + c" => "Add a commit comment",
"ctrl + p" => "Toggle comment preview",
"n" => "Next diff chunk in commit",
"p" => "Previous diff chunk in commit",
"shift + c" => "Add a commit comment",
"a then a" => "Toggle approval of commit",
"e" => "Toggle full diff view",
"b" => "Toggle side-by-side diff view",
Expand Down
47 changes: 40 additions & 7 deletions public/commit.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ window.Commit =
$(".reply").live "click", (e) => @onDiffLineDblClickOrReply e
$(".diffLine").hover(((e) => @selectLine(e)), ((e) => @clearSelectedLine()))
$(".commentForm").live "submit", (e) => @onCommentSubmit e
$(".commentPreview").click (e) => @onCommentPreview e
$(".commentEditForm").live "submit", (e) => @onCommentEditSubmit e
$("#approveButton").live "click", (e) => @onApproveClicked e
$("#disapproveButton").live "click", (e) => @onDisapproveClicked e
Expand All @@ -21,6 +22,10 @@ window.Commit =
commitComment = $("#commitComments .commentText")
KeyboardShortcuts.createShortcutContext commitComment
KeyboardShortcuts.registerShortcut commitComment, "esc", => commitComment.blur()
KeyboardShortcuts.registerShortcut commitComment, "ctrl+p", (e) =>
$(e.target).parents(".commentForm").find(".commentPreview").click()
# Prevent side effects such as cursor movement.
false

shortcuts =
"a": => @approveOrDisapprove()
Expand Down Expand Up @@ -203,15 +208,15 @@ window.Commit =
filename = codeLine.parents(".file").attr("filename")
sha = codeLine.parents("#commit").attr("sha")
repoName = codeLine.parents("#commit").attr("repo")
Commit.createCommentForm(codeLine, repoName, sha, filename, lineNumber)
@createCommentForm(codeLine, repoName, sha, filename, lineNumber)

onCommentEdit: (e) ->
# Use the comment ID instead of generating form ID since left and right tables have the same comments.
comment = $(".comment[commentId='#{$(e.target).parents(".comment").attr("commentId")}']")
if comment.find(".commentEditForm").size() > 0 then return
commentEdit = $(Snippets.commentForm(true, true))
commentEdit.find(".commentText").html($(e.target).parents(".comment").data("commentRaw"))
commentEdit.find(".commentCancel").click(Commit.onCommentEditCancel)
commentEdit.find(".commentCancel").click @onCommentEditCancel
comment.append(commentEdit).find(".commentBody").hide()
textarea = comment.find(".commentText")
KeyboardShortcuts.createShortcutContext textarea
Expand Down Expand Up @@ -253,18 +258,23 @@ window.Commit =
sha: sha
filename: filename
line_number: lineNumber
success: (html) ->
success: (html) =>
commentForm = $(html)
commentForm.click (e) -> e.stopPropagation()
# Add a random id so matching comments on both sides of side-by-side can be shown.
commentForm.attr("form-id", Math.floor(Math.random() * 10000))
commentForm.find(".commentCancel").click(Commit.onCommentCancel)
commentForm.find(".commentCancel").click @onCommentCancel
commentForm.find(".commentPreview").click @onCommentPreview
codeLine.append(commentForm)
Commit.setSideBySideCommentVisibility()
@setSideBySideCommentVisibility()
textarea = codeLine.find(".commentForm .commentText").filter(-> $(@).css("visibility") == "visible")
KeyboardShortcuts.createShortcutContext textarea
textarea.focus()
KeyboardShortcuts.registerShortcut textarea, "esc", => textarea.blur()
KeyboardShortcuts.registerShortcut textarea, "ctrl+p", (e) =>
$(e.target).parents(".commentForm").find(".commentPreview").click()
# Prevent side effects such as cursor movement.
false

onCommentSubmit: (e) ->
e.preventDefault()
Expand All @@ -288,7 +298,7 @@ window.Commit =
$(form).before(html)
if $(form).parents(".diffLine").size() > 0
$(form).remove()
Commit.setSideBySideCommentVisibility()
@setSideBySideCommentVisibility()
else
# Don't remove the comment box if it's for a commit-level comment
$(form).find("textarea").val("")
Expand All @@ -299,7 +309,30 @@ window.Commit =
formId = $(e.currentTarget).parents(".commentForm").attr("form-id")
form = $(e.currentTarget).parents(".file").find(".commentForm[form-id='" + formId + "']")
form.remove()
Commit.setSideBySideCommentVisibility()
@setSideBySideCommentVisibility()

# Toggle preview/editing mode
onCommentPreview: (e) ->
e.stopPropagation()
comment = $(e.target).parents(".commentForm")
preview = comment.find(".commentPreviewText")
textarea = comment.find(".commentText")
previewButton = comment.find(".commentPreview")
if preview.is(":visible")
preview.hide()
textarea.show()
previewButton.val("Preview Comment")
else
return if $.trim(textarea.val()) == ""
$.ajax
type: "post",
url: "/comment_preview",
data: { text: textarea.val(), sha: $("#commit").attr("sha"), repo_name: $("#commit").attr("repo") }
success: (rendered) =>
preview.html(rendered)
textarea.hide()
previewButton.val("Continue Editing")
preview.show()

onCommentDelete: (e) ->
commentId = $(e.target).parents(".comment").attr("commentId")
Expand Down
15 changes: 13 additions & 2 deletions public/styles.less
Original file line number Diff line number Diff line change
Expand Up @@ -866,6 +866,11 @@ table.commitsList, table.authorList {
code, pre { font: @commitFontFamily; }
}

.commentPreviewText {
border-bottom: @standardBorder;
display: none;
}

.heading {
.avatar { .gravatar(25px); }
color: @lightTextColor;
Expand Down Expand Up @@ -935,14 +940,20 @@ table.commitsList, table.authorList {
width: 100%;
.flexbox;
.boxPack(end);
.commentCancel {
.buttonSpacer {
.flexbox;
.flex(1);
.boxOrdinalGroup(1);
margin-left: 10px;
}
.commentCancel {
.flexbox;
.boxOrdinalGroup(2);
margin-right: 3px;
}
.commentSubmit {
.flexbox;
.boxOrdinalGroup(2);
.boxOrdinalGroup(3);
margin-right: 10px;
}
}
Expand Down
4 changes: 2 additions & 2 deletions public/util.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,11 @@ window.KeyboardShortcuts =
return unless e.which == 63
return if @suspended and not $(e.target).is(element)
return if not $(e.target).is(element) and e.target.type == "text"
callback.call(e)
callback(e)
return
element.bind "keydown", shortcut, (e) =>
return if @suspended and not $(e.target).is(element)
callback.call(e)
callback(e)

registerPageShortcut: (shortcut, callback) -> @registerShortcut($(document), shortcut, callback)

Expand Down
2 changes: 2 additions & 0 deletions views/_comment_form.erb
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@
<input type="hidden" name="filename" value="<%= filename %>" />
<input type="hidden" name="line_number" value="<%= line_number %>" />
<textarea class="commentText" name="text"></textarea>
<div class="commentBody commentPreviewText"></div>
<div class="commentControls">
<input class="commentSubmit" type="submit" value="Post Comment" />
<%# 'Cancel' button comes after 'Post Comment' for tab ordering, but is positioned to the left %>
<% if line_number %>
<input class="commentCancel" type="button" value="Cancel" />
<% end %>
<div class="buttonSpacer"><input class="commentPreview" type="button" value="Preview Comment" /></div>
</div>
</form>

0 comments on commit 87d3e4c

Please sign in to comment.