diff --git a/reviewboard/static/rb/css/pages/reviews.less b/reviewboard/static/rb/css/pages/reviews.less
index dab489c99a64a1a7c049cae94642959a5587c497..c6b82db11771768a21b9a8ba7504a186192c8d0b 100644
--- a/reviewboard/static/rb/css/pages/reviews.less
+++ b/reviewboard/static/rb/css/pages/reviews.less
@@ -1912,8 +1912,8 @@
border-radius: @box-border-radius;
box-shadow: @box-shadow;
cursor: default;
- margin-top: 8px;
- overflow: hidden;
+ margin-bottom: 8px;
+ overflow: scroll;
position: absolute;
form {
@@ -1929,6 +1929,12 @@
}
}
}
+ .comment-pane-form{
+ background-color: #0074D9;
+ display: block;
+ padding: @comment-dlg-padding;
+
+ }
h1 {
background: transparent;
@@ -1947,11 +1953,17 @@
z-index: @z-index-deco;
}
+ .comment-dlg-pane,
.comment-dlg-body,
.comment-dlg-footer,
.comment-dlg-header {
position: relative;
}
+ .comment-dlg-pane{
+ left:450px;
+ background-color: #0074D9;
+ border: 1px @comment-dlg-border-color solid;
+ }
.comment-dlg-footer {
padding: @comment-dlg-padding 0 0 0;
diff --git a/reviewboard/static/rb/js/views/commentDialogView.es6.js b/reviewboard/static/rb/js/views/commentDialogView.es6.js
index 6e8968a0bc588bd0bc13ef5676e028cc923446f2..3291956a93e25db4596d597a220f054f38a4c34a 100644
--- a/reviewboard/static/rb/js/views/commentDialogView.es6.js
+++ b/reviewboard/static/rb/js/views/commentDialogView.es6.js
@@ -186,6 +186,8 @@ RB.CommentDialogView = Backbone.View.extend({
+
`),
events: {
@@ -195,7 +197,6 @@ RB.CommentDialogView = Backbone.View.extend({
'click .buttons .save': 'save',
'keydown .comment-text-field': '_onTextKeyDown',
},
-
/**
* Initialize the view.
*
@@ -212,6 +213,7 @@ RB.CommentDialogView = Backbone.View.extend({
*/
initialize(options) {
this.options = options;
+ console.log(options);
},
/**
@@ -227,7 +229,7 @@ RB.CommentDialogView = Backbone.View.extend({
const reviewRequestEditor = this.model.get('reviewRequestEditor');
this.options.animate = (this.options.animate !== false);
-
+ console.log("model",this.model)
this.$el
.hide()
.html(this.template({
@@ -253,7 +255,6 @@ RB.CommentDialogView = Backbone.View.extend({
showVerify: RB.EnabledFeatures.issueVerification,
verifyIssueText: RB.CommentDialogView._verifyIssueText,
}));
-
this._$commentsPane = this.$('.other-comments');
this._$draftForm = this.$('form');
this._$body = this._$draftForm.children('.comment-dlg-body');
@@ -295,7 +296,7 @@ RB.CommentDialogView = Backbone.View.extend({
});
this.$buttons = this._$footer.find('.buttons');
-
+ console.log(this.model.get('canSave'))
this.$saveButton = this.$buttons.find('input.save')
.bindVisibility(this.model, 'canEdit')
.bindProperty('disabled', this.model, 'canSave', {
@@ -355,7 +356,7 @@ RB.CommentDialogView = Backbone.View.extend({
this.listenTo(this.model, 'change:richText', this._handleResize);
this.$el
- .css('position', 'absolute')
+ .css('position','fixed')
.mousedown(evt => {
/*
* Prevent this from reaching the selection area, which will
@@ -372,10 +373,85 @@ RB.CommentDialogView = Backbone.View.extend({
.proxyTouchEvents();
this._$header.css('cursor', 'move');
+ //Storing the reference to the comment dialog
+ const commentBox = this.$el;
+ /**
+ * When the mousedown event is fired the position
+ * is set to absolute. The top value is set to the offset
+ * of the comment dialog box from the top.
+ */
+ commentBox.on('mousedown', () => {
+ const eTop = commentBox.offset().top;
+ const top = eTop;
+ commentBox.css({
+ 'position': 'absolute',
+ 'top': `${top}px`,
+ });
+ });
+ /**
+ * When the mouseup event is fired, the position is set to fixed.
+ * The top value is set to the top offset of the comment dialog
+ * minus the position of the comment dialog box
+ * inside the window.
+ */
+ commentBox.on('mouseup', () => {
+ const top = commentBox.offset().top - $(window).scrollTop();
+ commentBox.css({
+ 'position': 'fixed',
+ 'top': `${top}px`,
+ });
+ });
+ /**
+ * Check if the current comment dialog is not outside
+ * the top part of the content area.
+ * If the comment Dialog is outside the content area,
+ * return true.
+ */
+ function isAbove() {
+ const isTopPosition = commentBox.offset().top < $(window).scrollTop();
+ const isOffsetTop = commentBox.offset().top;
+
+ return isTopPosition || isOffsetTop === 0;
+ }
+ /**
+ * Check to see if the comment dialog box is not below
+ * the bottom part of the content area.
+ * If the comment Dialog is below the content area,
+ * return true.
+ */
+ function isBelow() {
+ const bottomOfScreen = $(window).scrollTop() + $(window).height();
+
+ return commentBox.offset().top>bottomOfScreen;
+ }
+
+ /**
+ * This function handles dragging.
+ *
+ * When dragging stops, if the comment dialog is above the
+ * content area, fix the position and snap the dialog box
+ * to the top of the page. Otherwise, If the comment Dialog
+ * box is below the content area, fix the position and
+ * change the top value to the bottom of the viewport.
+ */
this.$el.draggable({
handle: '.comment-dlg-header',
+ containment: 'document',
+ stop: function(event, ui) {
+ if(isAbove()) {
+ commentBox.css({
+ 'position': 'fixed',
+ 'top': `${ui.helper.scrollTop()}px`,
+ });
+ } else if (isBelow()) {
+ const bottomOfScreen = ui.helper.scrollTop() + ui.helper.height();
+ commentBox.css({
+ 'position': 'fixed',
+ 'top': `${bottomOfScreen}px`,
+ });
+ }
+ },
});
-
this.listenTo(this.model, 'change:dirty', this._updateTitle);
this._updateTitle();
@@ -398,7 +474,6 @@ RB.CommentDialogView = Backbone.View.extend({
return this;
},
-
/**
* Callback for when the Save button is pressed.
*
@@ -410,7 +485,7 @@ RB.CommentDialogView = Backbone.View.extend({
* that we haven't been notified about yet.
*/
this.model.set('text', this._textEditor.getText());
-
+ console.log('save clicked');
if (this.model.get('canSave')) {
this.model.save({
error: (model, xhr) => {
@@ -424,7 +499,7 @@ RB.CommentDialogView = Backbone.View.extend({
/**
* Open the comment dialog and focuses the text field.
*/
- open() {
+ open() {
function openDialog() {
this.$el.scrollIntoView();
this._textEditor.focus();
@@ -432,7 +507,8 @@ RB.CommentDialogView = Backbone.View.extend({
this.$el
.css({
- top: parseInt(this.$el.css('top'), 10) - this.SLIDE_DISTANCE,
+ top:'20%',
+ //top: parseInt(this.$el.css('top'), 10) - this.SLIDE_DISTANCE,
opacity: 0,
})
.show();
@@ -610,7 +686,6 @@ RB.CommentDialogView = Backbone.View.extend({
*/
_onCancelClicked() {
let shouldExit = true;
-
if (this.model.get('dirty')) {
shouldExit = confirm(RB.CommentDialogView._shouldExitText);
}
@@ -620,7 +695,6 @@ RB.CommentDialogView = Backbone.View.extend({
this.close();
}
},
-
/**
* Callback for when the Delete button is pressed.
*
@@ -632,7 +706,6 @@ RB.CommentDialogView = Backbone.View.extend({
this.close();
}
},
-
/**
* Callback for keydown events in the text field.
*
@@ -731,10 +804,29 @@ RB.CommentDialogView = Backbone.View.extend({
})
});
+
+ //console.log(pane.render().$el.appendTo(dlg.find(".comment-dlg-pane")))
+
+
dlg.render().$el
.css('z-index', 999) // XXX Use classes for z-indexes.
.appendTo(options.container || document.body);
+ const pane = new RB.CommentPaneView({
+ animate: options.animate,
+ commentIssueManager: options.commentIssueManager ||
+ reviewRequestEditor.get('commentIssueManager'),
+ model: new RB.CommentEditor({
+ comment: options.comment,
+ reviewRequest: reviewRequestEditor.get('reviewRequest'),
+ reviewRequestEditor: reviewRequestEditor,
+ publishedComments: options.publishedComments || undefined,
+ publishedCommentsType: options.publishedCommentsType ||
+ undefined,
+ })
+ });
+ pane.render().$el.appendTo(dlg.$el.find(".comment-dlg-pane"));
+
options.position = options.position || {};
if (_.isFunction(options.position)) {
@@ -801,5 +893,4 @@ RB.CommentDialogView = Backbone.View.extend({
_yourCommentDirtyText: gettext('Your comment (unsaved)'),
});
-
})();
diff --git a/reviewboard/static/rb/js/views/commentPaneView.es6.js b/reviewboard/static/rb/js/views/commentPaneView.es6.js
new file mode 100644
index 0000000000000000000000000000000000000000..f5d04a851fbacdc29227d02f33b63725418c08db
--- /dev/null
+++ b/reviewboard/static/rb/js/views/commentPaneView.es6.js
@@ -0,0 +1,388 @@
+/**
+ * Displays a list of existing comments within a comment dialog.
+ *
+ * Each comment in the list is an existing, published comment that a user
+ * has made. They will be displayed, along with any issue states and
+ * identifying information, and links for viewing the comment on the review
+ * or replying to it.
+ *
+ * This is used internally in CommentDialogView.
+ *
+ * This is rendered when comments already exist, and appears as kind of a sidebar
+ * const CommentsListView
+ */
+
+/*
+ * This View creates the actual dialog popup, when you click add a comment
+ * Which would mean that both the Pane and Dialog would be separate Views.
+ * The Comment Dialog View would include:
+ * open(), close(), move(),positionBeside()
+ *
+ * The Comment Pane View would include:
+ * Save(), _updateTitle(),_onPublishedCommentsChanged(), handleResize(unsure),
+ * _onCancelClicked(), _onDeleteClicked(), _onTextKeyDown(e) , create() I'm guessing is
+ * where commentPaneView will be called.
+ * The Dialog View would call the Comment Pane, where Comment Pane would initialize
+ * a Comment Dialog
+ */
+RB.CommentPaneView = Backbone.View.extend({
+ id: 'comment-dialog-pane',
+
+ template: _.template(dedent`
+
+ `),
+ events: {
+ 'click .buttons .cancel': '_onCancelClicked',
+ 'click .buttons .close': '_onCancelClicked',
+ 'click .buttons .delete': '_onDeleteClicked',
+ 'click .buttons .save': 'save',
+ 'keydown .comment-text-field': '_onTextKeyDown',
+ },
+ initialize(options) {
+ this.options = options;
+ },
+ render() {
+ const userSession = RB.UserSession.instance;
+ const reviewRequest = this.model.get('reviewRequest');
+ // const reviewRequestEditor = this.model.get('reviewRequestEditor');
+
+ this.options.animate = (this.options.animate !== false);
+ console.log("model", this.model)
+ this.$el
+ .html(this.template({
+ authenticated: userSession.get('authenticated'),
+ hasDraft: reviewRequest.get('hasDraft'),
+ markdownDocsURL: MANUAL_URL + 'users/markdown/',
+ markdownText: RB.CommentDialogView._markdownText,
+ otherReviewsText: RB.CommentDialogView._otherReviewsText,
+ loginText: interpolate(
+ RB.CommentDialogView._loginTextTemplate,
+ [userSession.get('loginURL')]),
+ draftWarning: interpolate(
+ RB.CommentDialogView._draftWarningTextTemplate,
+ [reviewRequest.get('reviewURL')]),
+ openAnIssueText: RB.CommentDialogView._openAnIssueText,
+ enableMarkdownText: RB.CommentDialogView._enableMarkdownText,
+ saveButton: RB.CommentDialogView._saveText,
+ cancelButton: RB.CommentDialogView._cancelText,
+ deleteButton: RB.CommentDialogView._deleteText,
+ closeButton: RB.CommentDialogView._closeText,
+ readOnly: userSession.get('readOnly'),
+ readOnlyText: gettext('Review Board is currently in read-only mode.'),
+ showVerify: RB.EnabledFeatures.issueVerification,
+ verifyIssueText: RB.CommentDialogView._verifyIssueText,
+ }));
+
+ this._$draftForm = this.$('form');
+ this._$body = this._$draftForm.children('.comment-dlg-body');
+ this._$header = this._$draftForm.children('.comment-dlg-header');
+ this._$footer = this._$draftForm.children('.comment-dlg-footer');
+ this._$title = this._$header.children('.title');
+
+ this._$commentOptions = this._$body.children('.comment-dlg-options');
+
+ this._$issueOptions =
+ this._$commentOptions.children('.comment-issue-options')
+ .bindVisibility(this.model, 'canEdit');
+ this._$markdownOptions =
+ this._$commentOptions.children('.comment-markdown-options')
+ .bindVisibility(this.model, 'canEdit');
+
+ this._$issueField = this._$issueOptions
+ .find('#comment_issue')
+ .bindProperty('checked', this.model, 'openIssue')
+ .bindProperty('disabled', this.model, 'editing', {
+ elementToModel: false,
+ inverse: true,
+ });
+
+ this._$issueVerificationField = this._$issueOptions
+ .find('#comment_issue_verify')
+ .bindProperty('checked', this.model, 'requireVerification')
+ .bindProperty('disabled', this.model, 'editing', {
+ elementToModel: false,
+ inverse: true,
+ });
+
+ this._$enableMarkdownField = this._$markdownOptions
+ .find('#enable_markdown')
+ .bindProperty('checked', this.model, 'richText')
+ .bindProperty('disabled', this.model, 'editing', {
+ elementToModel: false,
+ inverse: true,
+ });
+
+ this.$buttons = this._$footer.find('.buttons');
+ console.log(this.model.get('canSave'))
+ this.$saveButton = this.$buttons.find('input.save')
+ .bindVisibility(this.model, 'canEdit')
+ .bindProperty('disabled', this.model, 'canSave', {
+ elementToModel: false,
+ inverse: true,
+ });
+
+ this.$cancelButton = this.$buttons.find('input.cancel')
+ .bindVisibility(this.model, 'canEdit');
+
+ this.$deleteButton = this.$buttons.find('input.delete')
+ .bindVisibility(this.model, 'canDelete')
+ .bindProperty('disabled', this.model, 'canDelete', {
+ elementToModel: false,
+ inverse: true,
+ });
+
+ this.$closeButton = this.$buttons.find('input.close')
+ .bindVisibility(this.model, 'canEdit', {
+ inverse: true,
+ });
+
+ /*
+ * We need to handle keypress here, rather than in events above,
+ * because jQuery will actually handle it. Backbone fails to.
+ */
+ this._textEditor = new RB.TextEditorView({
+ el: this._$draftForm.find('.comment-text-field'),
+ autoSize: false,
+ minHeight: 0,
+ text: this.model.get('text'),
+ bindRichText: {
+ model: this.model,
+ attrName: 'richText',
+ },
+ });
+ this._textEditor.render();
+ this._textEditor.show();
+ this._textEditor.$el.bindVisibility(this.model, 'canEdit');
+ this.listenTo(this._textEditor, 'change',
+ () => this.model.set('text',
+ this._textEditor.getText()));
+ this._textEditor.bindRichTextCheckbox(this._$enableMarkdownField);
+ this._textEditor.bindRichTextVisibility(
+ this._$draftForm.find('.markdown-info'));
+
+ this.listenTo(this.model, 'change:text',
+ () => this._textEditor.setText(this.model.get('text')));
+
+ this.listenTo(this.model, 'change:richText', this._handleResize);
+
+ this.listenTo(this.model, 'change:dirty', this._updateTitle);
+ this._updateTitle();
+
+
+ /* Add any hooks. */
+ RB.CommentDialogHook.each(hook => {
+ const HookViewType = hook.get('viewType');
+ const hookView = new HookViewType({
+ extension: hook.get('extension'),
+ commentDialog: this,
+ commentEditor: this.model,
+ el: this.el,
+ });
+
+ hookView.render();
+ });
+
+ return this;
+ },
+ save() {
+ /*
+ * Set this immediately, in case new text has been set in the editor
+ * that we haven't been notified about yet.
+ */
+ this.model.set('text', this._textEditor.getText());
+ console.log('PAne save clicked');
+ if (this.model.get('canSave')) {
+ this.model.save({
+ error: (model, xhr) => {
+ alert(gettext('Error saving comment: ') + xhr.errorText);
+ }
+ });
+ this.close();
+ }
+ },
+
+ /**
+ * Close the comment dialog, discarding the comment block if empty.
+ *
+ * This can optionally take a callback and context to notify when the
+ * dialog has been closed.
+ *
+ * Args:
+ * onClosed (function, optional):
+ * An optional callback to call once the dialog has been closed.
+ *
+ * context (object, optional):
+ * Context to use when calling ``onClosed``.
+ */
+ close(onClosed = undefined, context = {}) {
+ function closeDialog() {
+ this.model.close();
+ this.$el.remove();
+ this.trigger('closed');
+
+ if (_.isFunction(onClosed)) {
+ onClosed.call(context);
+ }
+ }
+
+ if (this.options.animate && this.$el.is(':visible')) {
+ this.$el.animate({
+ top: `-=${this.SLIDE_DISTANCE}px`,
+ opacity: 0,
+ }, 350, 'swing', _.bind(closeDialog, this));
+ } else {
+ closeDialog.call(this);
+ }
+ },
+
+ /**
+ * Update the title of the comment dialog, based on the current state.
+ */
+ _updateTitle() {
+ console.log('Title updated')
+ this._$title.text(this.model.get('dirty')
+ ? RB.CommentDialogView._yourCommentDirtyText
+ : RB.CommentDialogView._yourCommentText);
+ },
+ /**
+ * Callback for when the Cancel button is pressed.
+ *
+ * Cancels the comment (which may delete the comment block, if it's new)
+ * and closes the dialog.
+ */
+ _onCancelClicked() {
+ let shouldExit = true;
+ if (this.model.get('dirty')) {
+ shouldExit = confirm(RB.CommentDialogView._shouldExitText);
+ }
+
+ if (shouldExit) {
+ this.model.cancel();
+ this.close();
+ }
+ },
+ /**
+ * Callback for when the Delete button is pressed.
+ *
+ * Deletes the comment and closes the dialog.
+ */
+ _onDeleteClicked() {
+ if (this.model.get('canDelete')) {
+ this.model.deleteComment();
+ this.close();
+ }
+ },
+ /**
+ * Callback for keydown events in the text field.
+ *
+ * If the Escape key is pressed, the dialog will be closed.
+ * If the Control-Enter or Alt-I keys are pressed, we'll handle them
+ * specially. Control-Enter is the same thing as clicking Save.
+ *
+ * metaKey used as alternative for Mac key shortcut philosophy.
+ * metaKey is only fired on keydown in Chrome and Brave.
+ *
+ * The keydown event won't be propagated to the parent elements.
+ *
+ * Args:
+ * e (Event):
+ * The keydown event.
+ */
+ _onTextKeyDown(e) {
+ e.stopPropagation();
+ console.log(this.model.get('canSave'));
+ this.model.set({'canSave':true})
+ switch (e.which) {
+ case $.ui.keyCode.ESCAPE:
+ this._onCancelClicked();
+ return false;
+
+ case 10:
+ case $.ui.keyCode.ENTER:
+ /* Enter */
+ if (e.metaKey || e.ctrlKey) {
+ this.save();
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ break;
+
+ case 73:
+ case 105:
+ /* I */
+ if (e.metaKey || e.altKey) {
+ // preventDefault is called to avoid Firefox info window.
+ e.preventDefault();
+ this.model.set('openIssue', !this.model.get('openIssue'));
+ }
+ break;
+
+ case 77:
+ case 109:
+ /* M */
+ if (e.metaKey || e.altKey) {
+ // preventDefault is called to avoid Mac's window minimize.
+ e.preventDefault();
+ this.model.set('richText', !this.model.get('richText'));
+ }
+ break;
+
+ default:
+ break;
+ }
+ },
+ _cancelText: gettext('Cancel'),
+ _closeText: gettext('Close'),
+ _deleteText: gettext('Delete'),
+ _draftWarningTextTemplate: gettext('The review request\'s current draft needs to be published before you can comment.'),
+ _enableMarkdownText: gettext('Enable Markdown'),
+ _loginTextTemplate: gettext('You must log in to post a comment.'),
+ _markdownText: gettext('Markdown'),
+ _openAnIssueText: gettext('Open an Issue'),
+ _otherReviewsText: gettext('Other reviews'),
+ _saveText: gettext('Save'),
+ _shouldExitText: gettext('You have unsaved changes. Are you sure you want to exit?'),
+ _verifyIssueText: gettext('Require Verification'),
+ _yourCommentText: gettext('Your comment'),
+ _yourCommentDirtyText: gettext('Your comment (unsaved)'),
+});
+
+
diff --git a/reviewboard/staticbundles.py b/reviewboard/staticbundles.py
index 47048045cf1180b548c7aba8564f239e2377e487..ef4c0b85fc24c28a69cd7894ae35182068e7e65f 100644
--- a/reviewboard/staticbundles.py
+++ b/reviewboard/staticbundles.py
@@ -267,6 +267,7 @@ PIPELINE_JAVASCRIPT = dict({
'rb/js/views/abstractCommentBlockView.es6.js',
'rb/js/views/abstractReviewableView.es6.js',
'rb/js/views/commentDialogView.es6.js',
+ 'rb/js/views/commentPaneView.es6.js',
'rb/js/views/commentIssueBarView.es6.js',
'rb/js/views/diffFragmentQueueView.es6.js',
'rb/js/views/diffFragmentView.es6.js',