From 0215f11d5c734cb818ed7b988b8f73e745e45179 Mon Sep 17 00:00:00 2001 From: Byron Jones Date: Tue, 12 May 2015 21:35:45 +0800 Subject: Bug 1146770: implement comment preview --- Bugzilla/WebService/Server/REST/Resources/Bug.pm | 7 +- .../template/en/default/bug_modal/edit.html.tmpl | 12 +-- .../en/default/bug_modal/new_comment.html.tmpl | 32 ++++++- extensions/BugModal/web/bug_modal.css | 50 +++++++++-- extensions/BugModal/web/bug_modal.js | 97 +++++++++++++++++++--- skins/contrib/Mozilla-OpenSans/global.css | 2 +- skins/contrib/Mozilla/global.css | 2 +- 7 files changed, 175 insertions(+), 27 deletions(-) diff --git a/Bugzilla/WebService/Server/REST/Resources/Bug.pm b/Bugzilla/WebService/Server/REST/Resources/Bug.pm index 8c73e32e6..163790b77 100644 --- a/Bugzilla/WebService/Server/REST/Resources/Bug.pm +++ b/Bugzilla/WebService/Server/REST/Resources/Bug.pm @@ -62,7 +62,7 @@ sub _rest_resources { success_code => STATUS_CREATED } }, - qr{^/bug/comment/([^/]+)$}, { + qr{^/bug/comment/(\d+)$}, { GET => { method => 'comments', params => sub { @@ -86,6 +86,11 @@ sub _rest_resources { }, }, }, + qr{^/bug/comment/render$}, { + POST => { + method => 'render_comment', + }, + }, qr{^/bug/([^/]+)/history$}, { GET => { method => 'history', diff --git a/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl index dd673537c..67c94f499 100644 --- a/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl +++ b/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl @@ -978,6 +978,13 @@ INCLUDE bug_modal/activity_stream.html.tmpl stream=bug.activity_stream; IF user.id; INCLUDE bug_modal/new_comment.html.tmpl; + ELSE; + %] +
+ You need to log in + before you can comment on or make changes to this [% terms.bug %]. +
+ [% END; %] @@ -1007,11 +1014,6 @@ -[% ELSE %] -
- You need to log in - before you can comment on or make changes to this [% terms.bug %]. -
[% END %] [%# === blocks === %] diff --git a/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl index f6c3bb3fa..17bf38200 100644 --- a/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl +++ b/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl @@ -12,8 +12,15 @@ #%]
-
Add Comment:
- [% IF user.is_insider && bug.check_can_change_field('longdesc', 0, 1) %] + + [% IF !bug.check_can_change_field('longdesc', 0, 1) %] +
+ You are not allowed to make an additional comment on this [% terms.bug %]. +
+ [% RETURN %] + [% END %] + + [% IF user.is_insider %]
@@ -22,7 +29,26 @@
[% END %] - + + + +
+ +
+ +
+
[% Hook.process("after_comment_commit_button", 'bug/edit.html.tmpl') %] diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css index 910199a53..acb18638f 100644 --- a/extensions/BugModal/web/bug_modal.css +++ b/extensions/BugModal/web/bug_modal.css @@ -270,7 +270,7 @@ input[type="number"] { float: right; } -#login-required { +#new-comment-notice { padding: 20px 8px; margin-bottom: 50px; } @@ -576,18 +576,56 @@ td.flag-requestee { margin-top: 20px; } -#add-comment-label { - display: inline; - font-weight: bold; -} - #add-comment-private { float: right; } #comment { + border: 1px solid #ccc; +} + +#comment, #comment-preview { + clear: both; width: 100%; box-sizing: border-box !important; + margin: 0 0 1em; +} + +#comment-preview { + border: 1px solid #fff; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; + padding: 4px 3px 5px; +} + +#preview-throbber { + margin-left: 8px; +} + +#comment-tabs { + margin: 0px; + padding: 0px; + list-style: none; +} + +#comment-tabs li { + display: inline-block; + padding: 4px 8px; + cursor: pointer; + border: 1px solid silver; + border-top-left-radius: 2px; + border-top-right-radius: 2px; +} + +#comment-tabs li.current { + background: #fff; + border-bottom: 1px solid #fff; +} + +.preview-error { + color: #666; + font-style: italic; } /* controls */ diff --git a/extensions/BugModal/web/bug_modal.js b/extensions/BugModal/web/bug_modal.js index 9e7f5f8f9..419ac1e84 100644 --- a/extensions/BugModal/web/bug_modal.js +++ b/extensions/BugModal/web/bug_modal.js @@ -742,14 +742,31 @@ $(function() { .keydown(function(event) { if (!(event.ctrlKey || event.metaKey)) return; - // don't conflict with text input shortcut - if (document.activeElement.nodeNode == 'INPUT' || document.activeElement.nodeName == 'TEXTAREA') - return; - if (String.fromCharCode(event.which).toLowerCase() == 'e') { - if ($('#cancel-btn:visible').length === 0) { - event.preventDefault(); - $('#mode-btn').click(); - } + switch(String.fromCharCode(event.which).toLowerCase()) { + // ctrl+e or meta+e = enter edit mode + case 'e': + // don't conflict with text input shortcut + if (document.activeElement.nodeNode == 'INPUT' || document.activeElement.nodeName == 'TEXTAREA') + return; + if ($('#cancel-btn:visible').length === 0) { + event.preventDefault(); + $('#mode-btn').click(); + } + break; + + // ctrl+shift+p = toggle comment preview + case 'p': + if (event.metaKey || !event.shiftKey) + return; + if (document.activeElement.id == 'comment') { + event.preventDefault(); + $('#comment-preview-tab').click(); + } + else if ($('#comment-preview:visible').length !== 0) { + event.preventDefault(); + $('#comment-edit-tab').click(); + } + break; } }); @@ -892,6 +909,60 @@ $(function() { .prop('title', message) .show(); }); + + // comment preview + var last_comment_text = ''; + $('#comment-tabs li').click(function() { + var that = $(this); + if (that.hasClass('current')) + return; + + // ensure preview's height matches the comment + var comment = $('#comment'); + var preview = $('#comment-preview'); + var comment_height = comment[0].offsetHeight; + + // change tabs + $('#comment-tabs li').removeClass('current').attr('aria-selected', false); + $('.comment-tab').hide(); + that.addClass('current').attr('aria-selected', true); + var tab = that.attr('data-tab'); + $('#' + tab).show(); + var focus = that.data('focus'); + if (focus === '') { + document.activeElement.blur(); + } + else { + $('#' + focus).focus(); + } + + // update preview + preview.css('height', comment_height + 'px'); + if (tab != 'comment-tab-preview' || last_comment_text == comment.val()) + return; + $('#preview-throbber').show(); + preview.html(''); + bugzilla_ajax( + { + url: 'rest/bug/comment/render', + type: 'POST', + data: { text: comment.val() }, + hideError: true + }, + function(data) { + $('#preview-throbber').hide(); + preview.html(data.html); + }, + function(message) { + $('#preview-throbber').hide(); + var container = $('
'); + container.addClass('preview-error'); + container.text(message); + preview.html(container); + } + ); + last_comment_text = comment.val(); + }); }); function confirmUnsafeURL(url) { @@ -921,6 +992,10 @@ function bugzilla_ajax(request, done_fn, error_fn) { 'Bugzilla_api_token=' + encodeURIComponent(BUGZILLA.api_token); if (request.type != 'GET') { request.contentType = 'application/json'; + request.processData = false; + if (request.data && request.data.constructor === Object) { + request.data = JSON.stringify(request.data); + } } $.ajax(request) .done(function(data) { @@ -936,8 +1011,10 @@ function bugzilla_ajax(request, done_fn, error_fn) { }) .error(function(data) { var message = data.responseJSON ? data.responseJSON.message : 'Unexpected Error'; // all errors are unexpected :) - $('#xhr-error').html(message); - $('#xhr-error').show('fast'); + if (!request.hideError) { + $('#xhr-error').html(message); + $('#xhr-error').show('fast'); + } if (error_fn) error_fn(message); }); diff --git a/skins/contrib/Mozilla-OpenSans/global.css b/skins/contrib/Mozilla-OpenSans/global.css index a6c82deb8..044e631b6 100644 --- a/skins/contrib/Mozilla-OpenSans/global.css +++ b/skins/contrib/Mozilla-OpenSans/global.css @@ -462,7 +462,7 @@ table.edit_form hr { margin: 0 0 20px; } -.bz_comment pre, #comment { +.bz_comment pre, #comment, #comment-preview { font: 13px/1.2 "Droid Sans Mono", Menlo, Monaco, "Courier New", Courier, monospace; } diff --git a/skins/contrib/Mozilla/global.css b/skins/contrib/Mozilla/global.css index fd3288cc1..832d7f162 100644 --- a/skins/contrib/Mozilla/global.css +++ b/skins/contrib/Mozilla/global.css @@ -505,7 +505,7 @@ table.edit_form hr { margin: 0 0 20px; } -.bz_comment pre, #comment { +.bz_comment pre, #comment, #comment-preview { font: 13px/1.2 "Droid Sans Mono", Menlo, Monaco, "Courier New", Courier, monospace; } -- cgit v1.2.3-24-g4f1b