summaryrefslogtreecommitdiffstats
path: root/extensions/BugModal/web
diff options
context:
space:
mode:
authorByron Jones <glob@mozilla.com>2015-05-12 15:35:45 +0200
committerByron Jones <glob@mozilla.com>2015-05-12 15:35:45 +0200
commit0215f11d5c734cb818ed7b988b8f73e745e45179 (patch)
tree7d2c7f9b769bfa560aab4f0590597a52378ce438 /extensions/BugModal/web
parentb7afadc6edb7a8f25acafaf08bd611b8ad5892ab (diff)
downloadbugzilla-0215f11d5c734cb818ed7b988b8f73e745e45179.tar.gz
bugzilla-0215f11d5c734cb818ed7b988b8f73e745e45179.tar.xz
Bug 1146770: implement comment preview
Diffstat (limited to 'extensions/BugModal/web')
-rw-r--r--extensions/BugModal/web/bug_modal.css50
-rw-r--r--extensions/BugModal/web/bug_modal.js97
2 files changed, 131 insertions, 16 deletions
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);
});