add (#2571)

frontend/src/components/review-list-view/review-comment-dialog.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'reactstrap';
+import { seafileAPI } from '../../utils/seafile-api';
+import { reviewID, gettext } from '../../utils/constants';
+
+import '../../css/review-comment-dialog.css';
+
+const commentDialogPropTypes = {
+  onCommentAdded: PropTypes.func.isRequired,
+  toggleCommentDialog: PropTypes.func.isRequired,
+  selectedText: PropTypes.string,
+  newIndex: PropTypes.number,
+  oldIndex: PropTypes.number,
+  top: PropTypes.string
+};
+
+class ReviewCommentDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      comment: '',
+      userName: '',
+    };
+  }
+
+  handleCommentChange = (event) => {
+    let comment = event.target.value;
+    this.setState({
+      comment: comment
+    });
+  }
+
+  getUserName = () => {
+    seafileAPI.getAccountInfo().then((res) => {
+      this.setState({
+        userName: res.data.name
+      });
+    });
+  } 
+
+  submitComment = () => {
+    let comment = this.state.comment.trim();
+    if (comment.length > 0) {
+      if (this.props.selectedText.length > 0) {
+        let detail = {
+          selectedText: this.props.selectedText.slice(0, 10),
+          newIndex: this.props.newIndex,
+          oldIndex: this.props.oldIndex
+        };
+        let detailJSON = JSON.stringify(detail);
+        seafileAPI.addReviewComment(reviewID, comment, detailJSON).then((response) => {
+          this.props.onCommentAdded();
+        });
+      }
+      else {
+        seafileAPI.addReviewComment(reviewID, comment).then((response) => {
+          this.props.onCommentAdded();
+        });
+      }
+      this.setState({
+        comment: ''
+      });
+    }
+  }
+
+  setQuoteText = (text) => {
+    if (text.length > 0) {
+      let comment = '> ' + text;
+      this.setState({
+        comment: comment
+      });
+    }
+  }
+
+  componentWillMount() {
+    this.getUserName();
+  }
+
+  componentDidMount() {
+    this.setQuoteText(this.props.selectedText);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.selectedText !== nextProps.selectedText) {
+      this.setQuoteText(nextProps.selectedText);
+    }
+  }
+
+  render() {
+    let dialogTop = (parseInt(this.props.top) - 80)+ 'px';
+    return (
+      <div className="review-comment-dialog" style={{top: (dialogTop)}}>
+        <div>{this.state.userName}</div>
+        <textarea value={this.state.comment} onChange={this.handleCommentChange}></textarea>
+        <div className="button-group">
+          <Button size="sm" color="primary" onClick={this.submitComment}>{gettext('Submit')}</Button>
+          <Button size="sm" color="secondary" onClick={this.props.toggleCommentDialog}>{gettext('Cancle')}</Button>
+        </div>
+        <span className="review-comment-dialog-triangle"></span>
+      </div>
+    );
+  }
+}
+
+ReviewCommentDialog.propTypes = commentDialogPropTypes;
+
+export default ReviewCommentDialog;

frontend/src/css/draft-review.css

@@ -128,8 +128,8 @@
 
 .review-comment-btn {
   position: absolute;
-  top: 0;
-  right: 5000px;
+  top: -1000px;
+  right: 0;
   border: 1px solid rgba(0, 40, 100, 0.12);
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   border-radius: 3px;

frontend/src/css/review-comment-dialog.css

@@ -0,0 +1,33 @@
+.review-comment-dialog {
+  width: 300px;
+  position: absolute;
+  top: 200px;
+  right: 0;
+  padding: 10px;
+  background-color: #fafafa;
+  background-clip: padding-box;
+  border: 1px solid rgba(0,0,0,.2);
+  border-radius: .3rem;
+  outline: 0;
+}
+.review-comment-dialog-triangle {
+  position: absolute;
+  left: -6px;
+  top: 50%;
+  transform: rotate(45deg);
+  border: 1px solid rgba(0,0,0,.2);
+  border-top: none;
+  border-right: none;
+  width: 10px;
+  height: 10px;
+  z-index: 1001;
+  background-color: #fff;
+}
+.review-comment-dialog textarea {
+  width: 100%;
+  min-height: 100px;
+  max-height: 200px;
+}
+.review-comment-dialog .button-group .btn {
+  margin-right: 10px;
+}

frontend/src/draft-review.js

@@ -13,6 +13,7 @@ import DiffViewer from '@seafile/seafile-editor/dist/viewer/diff-viewer';
 import Loading from './components/loading';
 import Toast from './components/toast';
 import ReviewComments from './components/review-list-view/review-comments';
+import ReviewCommentDialog from './components/review-list-view/review-comment-dialog.js'
 import { Tooltip } from 'reactstrap';
 import AddReviewerDialog from './components/dialog/add-reviewer-dialog.js';
 import { findRange } from '@seafile/slate-react';
@@ -51,6 +52,8 @@ class DraftReview extends React.Component {
       historyList: [],
       totalReversionCount: 0,
       changedNodes: [],
+      isShowCommentDialog: false,
+      commentBtnTop: '-1000px',
     };
     this.selectedText = '';
     this.newIndex = null;
@@ -128,6 +131,12 @@ class DraftReview extends React.Component {
     });
   }
   
+  toggleCommentDialog = () => {
+    this.setState({
+      isShowCommentDialog: !this.state.isShowCommentDialog
+    });
+  }
+
   getCommentsNumber = () => {
     seafileAPI.listReviewComments(reviewID).then((res) => {
       let number = res.data.total_count;
@@ -228,14 +237,16 @@ class DraftReview extends React.Component {
         }
       }
       let style = this.refs.commentbtn.style;
-      style.top = `${rect.top - 113 + this.refs.viewContent.scrollTop}px`;
-      style.right = `${this.refs.viewContent.clientWidth - rect.x - 70}px`;
+      let commentBtnTop = `${rect.top - 100 + this.refs.viewContent.scrollTop}px`;
+      style.top = commentBtnTop;
+      this.setState({
+        commentBtnTop: commentBtnTop
+      });
       return range;
     }
     else {
       let style = this.refs.commentbtn.style;
-      style.top = '0px';
-      style.right = '5000px';
+      style.top = '-1000px';
     }
   }
 
@@ -279,7 +290,7 @@ class DraftReview extends React.Component {
     this.newIndex = node.data.get('new_index');
     this.oldIndex = node.data.get('old_index');
     this.setState({
-      isShowComments: true
+      isShowCommentDialog: true
     });
   }
 
@@ -432,6 +443,11 @@ class DraftReview extends React.Component {
     });
   }
 
+  onCommentAdded = () => {
+    this.getCommentsNumber();
+    this.toggleCommentDialog();
+  }
+
   render() {
     const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null;
     const draftLink = siteRoot + 'lib/' + draftOriginRepoID + '/file' + draftFilePath + '?mode=edit';
@@ -507,8 +523,17 @@ class DraftReview extends React.Component {
                       ref="diffViewer"
                     />
                   }
-                  <i className="fa fa-comments review-comment-btn"
-                    ref="commentbtn" onMouseDown={this.addComment}></i>
+                  <i className="fa fa-plus-square review-comment-btn" ref="commentbtn" onMouseDown={this.addComment}></i>
+                  {this.state.isShowCommentDialog &&
+                    <ReviewCommentDialog
+                      toggleCommentDialog={this.toggleCommentDialog}
+                      onCommentAdded={this.onCommentAdded}
+                      selectedText={this.selectedText}
+                      newIndex={this.newIndex}
+                      oldIndex={this.oldIndex}
+                      top={this.state.commentBtnTop}
+                    />
+                  }
                 </div>
               }
             </div>