diff options
Diffstat (limited to 'extensions')
4 files changed, 167 insertions, 24 deletions
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; + %] + <div id="new-comment-notice"> + You need to <a href="show_bug.cgi?id=[% bug.bug_id FILTER none %]&GoAheadAndLogIn=1">log in</a> + before you can comment on or make changes to this [% terms.bug %]. + </div> + [% END; %] @@ -1007,11 +1014,6 @@ </div> </div> </form> -[% ELSE %] - <div id="login-required"> - You need to <a href="show_bug.cgi?id=[% bug.bug_id FILTER none %]&GoAheadAndLogIn=1">log in</a> - before you can comment on or make changes to this [% terms.bug %]. - </div> [% 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 @@ #%] <div id="add-comment"> - <div id="add-comment-label">Add Comment:</div> - [% IF user.is_insider && bug.check_can_change_field('longdesc', 0, 1) %] + + [% IF !bug.check_can_change_field('longdesc', 0, 1) %] + <div id="new-comment-notice"> + You are not allowed to make an additional comment on this [% terms.bug %]. + </div> + [% RETURN %] + [% END %] + + [% IF user.is_insider %] <div id="add-comment-private" title="Make comment visible only to members of the '[% Param('insidergroup') FILTER html %]' group" > @@ -22,7 +29,26 @@ <label for="add-comment-private-cb">Private</label> </div> [% END %] - <textarea rows="5" cols="80" name="comment" id="comment"></textarea> + + <ul id="comment-tabs"> + <li id="comment-edit-tab" data-tab="comment-tab-add" data-focus="comment" class="current"> + Add Comment + </li> + [%~ ~%] + <li id="comment-preview-tab" data-tab="comment-tab-preview" data-focus=""> + Preview + <img id="preview-throbber" src="extensions/BugModal/web/throbber.gif" width="16" height="11" style="display:none"> + </li> + </ul> + + <div id="comment-tab-add" class="comment-tab"> + <textarea rows="5" cols="80" name="comment" id="comment"></textarea> + </div> + <div id="comment-tab-preview" class="comment-tab" style="display:none"> + <pre id="comment-preview" class="comment-text"></pre> + </div> + </div> + <div id="after-comment-commit-button"> [% 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 = $('<div/>'); + 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); }); |