Skip to content

Commit 0215f11

Browse files
globauglobau
committed
Bug 1146770: implement comment preview
1 parent b7afadc commit 0215f11

File tree

7 files changed

+175
-27
lines changed

7 files changed

+175
-27
lines changed

‎Bugzilla/WebService/Server/REST/Resources/Bug.pm‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ sub _rest_resources {
6262
success_code => STATUS_CREATED
6363
}
6464
},
65-
qr{^/bug/comment/([^/]+)$}, {
65+
qr{^/bug/comment/(\d+)$}, {
6666
GET => {
6767
method => 'comments',
6868
params => sub {
@@ -86,6 +86,11 @@ sub _rest_resources {
8686
},
8787
},
8888
},
89+
qr{^/bug/comment/render$}, {
90+
POST => {
91+
method => 'render_comment',
92+
},
93+
},
8994
qr{^/bug/([^/]+)/history$}, {
9095
GET => {
9196
method => 'history',

‎extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -978,6 +978,13 @@
978978
INCLUDE bug_modal/activity_stream.html.tmpl stream=bug.activity_stream;
979979
IF user.id;
980980
INCLUDE bug_modal/new_comment.html.tmpl;
981+
ELSE;
982+
%]
983+
<div id="new-comment-notice">
984+
You need to <a href="show_bug.cgi?id=[% bug.bug_id FILTER none %]&amp;GoAheadAndLogIn=1">log in</a>
985+
before you can comment on or make changes to this [% terms.bug %].
986+
</div>
987+
[%
981988
END;
982989
%]
983990

@@ -1007,11 +1014,6 @@
10071014
</div>
10081015
</div>
10091016
</form>
1010-
[% ELSE %]
1011-
<div id="login-required">
1012-
You need to <a href="show_bug.cgi?id=[% bug.bug_id FILTER none %]&amp;GoAheadAndLogIn=1">log in</a>
1013-
before you can comment on or make changes to this [% terms.bug %].
1014-
</div>
10151017
[% END %]
10161018

10171019
[%# === blocks === %]

‎extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,15 @@
1212
#%]
1313

1414
<div id="add-comment">
15-
<div id="add-comment-label">Add Comment:</div>
16-
[% IF user.is_insider && bug.check_can_change_field('longdesc', 0, 1) %]
15+
16+
[% IF !bug.check_can_change_field('longdesc', 0, 1) %]
17+
<div id="new-comment-notice">
18+
You are not allowed to make an additional comment on this [% terms.bug %].
19+
</div>
20+
[% RETURN %]
21+
[% END %]
22+
23+
[% IF user.is_insider %]
1724
<div id="add-comment-private"
1825
title="Make comment visible only to members of the '[% Param('insidergroup') FILTER html %]' group"
1926
>
@@ -22,7 +29,26 @@
2229
<label for="add-comment-private-cb">Private</label>
2330
</div>
2431
[% END %]
25-
<textarea rows="5" cols="80" name="comment" id="comment"></textarea>
32+
33+
<ul id="comment-tabs">
34+
<li id="comment-edit-tab" data-tab="comment-tab-add" data-focus="comment" class="current">
35+
Add Comment
36+
</li>
37+
[%~ ~%]
38+
<li id="comment-preview-tab" data-tab="comment-tab-preview" data-focus="">
39+
Preview
40+
<img id="preview-throbber" src="extensions/BugModal/web/throbber.gif" width="16" height="11" style="display:none">
41+
</li>
42+
</ul>
43+
44+
<div id="comment-tab-add" class="comment-tab">
45+
<textarea rows="5" cols="80" name="comment" id="comment"></textarea>
46+
</div>
47+
<div id="comment-tab-preview" class="comment-tab" style="display:none">
48+
<pre id="comment-preview" class="comment-text"></pre>
49+
</div>
50+
</div>
51+
2652
<div id="after-comment-commit-button">
2753
[% Hook.process("after_comment_commit_button", 'bug/edit.html.tmpl') %]
2854

‎extensions/BugModal/web/bug_modal.css‎

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,7 @@ input[type="number"] {
270270
float: right;
271271
}
272272

273-
#login-required {
273+
#new-comment-notice {
274274
padding: 20px 8px;
275275
margin-bottom: 50px;
276276
}
@@ -576,18 +576,56 @@ td.flag-requestee {
576576
margin-top: 20px;
577577
}
578578

579-
#add-comment-label {
580-
display: inline;
581-
font-weight: bold;
582-
}
583-
584579
#add-comment-private {
585580
float: right;
586581
}
587582

588583
#comment {
584+
border: 1px solid #ccc;
585+
}
586+
587+
#comment, #comment-preview {
588+
clear: both;
589589
width: 100%;
590590
box-sizing: border-box !important;
591+
margin: 0 0 1em;
592+
}
593+
594+
#comment-preview {
595+
border: 1px solid #fff;
596+
-moz-box-shadow: none;
597+
-webkit-box-shadow: none;
598+
box-shadow: none;
599+
padding: 4px 3px 5px;
600+
}
601+
602+
#preview-throbber {
603+
margin-left: 8px;
604+
}
605+
606+
#comment-tabs {
607+
margin: 0px;
608+
padding: 0px;
609+
list-style: none;
610+
}
611+
612+
#comment-tabs li {
613+
display: inline-block;
614+
padding: 4px 8px;
615+
cursor: pointer;
616+
border: 1px solid silver;
617+
border-top-left-radius: 2px;
618+
border-top-right-radius: 2px;
619+
}
620+
621+
#comment-tabs li.current {
622+
background: #fff;
623+
border-bottom: 1px solid #fff;
624+
}
625+
626+
.preview-error {
627+
color: #666;
628+
font-style: italic;
591629
}
592630

593631
/* controls */

‎extensions/BugModal/web/bug_modal.js‎

Lines changed: 87 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -742,14 +742,31 @@ $(function() {
742742
.keydown(function(event) {
743743
if (!(event.ctrlKey || event.metaKey))
744744
return;
745-
// don't conflict with text input shortcut
746-
if (document.activeElement.nodeNode == 'INPUT' || document.activeElement.nodeName == 'TEXTAREA')
747-
return;
748-
if (String.fromCharCode(event.which).toLowerCase() == 'e') {
749-
if ($('#cancel-btn:visible').length === 0) {
750-
event.preventDefault();
751-
$('#mode-btn').click();
752-
}
745+
switch(String.fromCharCode(event.which).toLowerCase()) {
746+
// ctrl+e or meta+e = enter edit mode
747+
case 'e':
748+
// don't conflict with text input shortcut
749+
if (document.activeElement.nodeNode == 'INPUT' || document.activeElement.nodeName == 'TEXTAREA')
750+
return;
751+
if ($('#cancel-btn:visible').length === 0) {
752+
event.preventDefault();
753+
$('#mode-btn').click();
754+
}
755+
break;
756+
757+
// ctrl+shift+p = toggle comment preview
758+
case 'p':
759+
if (event.metaKey || !event.shiftKey)
760+
return;
761+
if (document.activeElement.id == 'comment') {
762+
event.preventDefault();
763+
$('#comment-preview-tab').click();
764+
}
765+
else if ($('#comment-preview:visible').length !== 0) {
766+
event.preventDefault();
767+
$('#comment-edit-tab').click();
768+
}
769+
break;
753770
}
754771
});
755772

@@ -892,6 +909,60 @@ $(function() {
892909
.prop('title', message)
893910
.show();
894911
});
912+
913+
// comment preview
914+
var last_comment_text = '';
915+
$('#comment-tabs li').click(function() {
916+
var that = $(this);
917+
if (that.hasClass('current'))
918+
return;
919+
920+
// ensure preview's height matches the comment
921+
var comment = $('#comment');
922+
var preview = $('#comment-preview');
923+
var comment_height = comment[0].offsetHeight;
924+
925+
// change tabs
926+
$('#comment-tabs li').removeClass('current').attr('aria-selected', false);
927+
$('.comment-tab').hide();
928+
that.addClass('current').attr('aria-selected', true);
929+
var tab = that.attr('data-tab');
930+
$('#' + tab).show();
931+
var focus = that.data('focus');
932+
if (focus === '') {
933+
document.activeElement.blur();
934+
}
935+
else {
936+
$('#' + focus).focus();
937+
}
938+
939+
// update preview
940+
preview.css('height', comment_height + 'px');
941+
if (tab != 'comment-tab-preview' || last_comment_text == comment.val())
942+
return;
943+
$('#preview-throbber').show();
944+
preview.html('');
945+
bugzilla_ajax(
946+
{
947+
url: 'rest/bug/comment/render',
948+
type: 'POST',
949+
data: { text: comment.val() },
950+
hideError: true
951+
},
952+
function(data) {
953+
$('#preview-throbber').hide();
954+
preview.html(data.html);
955+
},
956+
function(message) {
957+
$('#preview-throbber').hide();
958+
var container = $('<div/>');
959+
container.addClass('preview-error');
960+
container.text(message);
961+
preview.html(container);
962+
}
963+
);
964+
last_comment_text = comment.val();
965+
});
895966
});
896967

897968
function confirmUnsafeURL(url) {
@@ -921,6 +992,10 @@ function bugzilla_ajax(request, done_fn, error_fn) {
921992
'Bugzilla_api_token=' + encodeURIComponent(BUGZILLA.api_token);
922993
if (request.type != 'GET') {
923994
request.contentType = 'application/json';
995+
request.processData = false;
996+
if (request.data && request.data.constructor === Object) {
997+
request.data = JSON.stringify(request.data);
998+
}
924999
}
9251000
$.ajax(request)
9261001
.done(function(data) {
@@ -936,8 +1011,10 @@ function bugzilla_ajax(request, done_fn, error_fn) {
9361011
})
9371012
.error(function(data) {
9381013
var message = data.responseJSON ? data.responseJSON.message : 'Unexpected Error'; // all errors are unexpected :)
939-
$('#xhr-error').html(message);
940-
$('#xhr-error').show('fast');
1014+
if (!request.hideError) {
1015+
$('#xhr-error').html(message);
1016+
$('#xhr-error').show('fast');
1017+
}
9411018
if (error_fn)
9421019
error_fn(message);
9431020
});

‎skins/contrib/Mozilla-OpenSans/global.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -462,7 +462,7 @@ table.edit_form hr {
462462
margin: 0 0 20px;
463463
}
464464

465-
.bz_comment pre, #comment {
465+
.bz_comment pre, #comment, #comment-preview {
466466
font: 13px/1.2 "Droid Sans Mono", Menlo, Monaco, "Courier New", Courier, monospace;
467467
}
468468

‎skins/contrib/Mozilla/global.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -505,7 +505,7 @@ table.edit_form hr {
505505
margin: 0 0 20px;
506506
}
507507

508-
.bz_comment pre, #comment {
508+
.bz_comment pre, #comment, #comment-preview {
509509
font: 13px/1.2 "Droid Sans Mono", Menlo, Monaco, "Courier New", Courier, monospace;
510510
}
511511

0 commit comments

Comments
 (0)