change comment panel style (#2573)

frontend/src/components/review-list-view/review-comments.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { processor } from '../../utils/seafile-markdown2html';
-import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Tooltip } from 'reactstrap';
+import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { reviewID, gettext } from '../../utils/constants';
 import Loading from '../../components/loading.js';
@@ -12,7 +12,6 @@ import '../../css/review-comments.css';
 const commentPropTypes = {
   getCommentsNumber: PropTypes.func.isRequired,
   inResizing: PropTypes.bool.isRequired,
-  toggleCommentList: PropTypes.func.isRequired,
   commentsNumber: PropTypes.number.isRequired,
   selectedText: PropTypes.string,
   newIndex: PropTypes.number,
@@ -29,8 +28,7 @@ class ReviewComments extends React.Component {
       userAvatar: '',
       inResizing: false,
       commentFooterHeight: 30,
-      showResolvedComment: false,
+      showResolvedComment: true,
-      openResolvedTooltip: false,
       comment: '',
     };
     this.accountInfo = {};
@@ -107,12 +105,6 @@ class ReviewComments extends React.Component {
     });
   }
 
-  toggleResolvedTooltip = () => {
-    this.setState({
-      openResolvedTooltip: !this.state.openResolvedTooltip
-    });
-  }
-
   deleteComment = (event) => {
     seafileAPI.deleteReviewComment(reviewID, event.target.id).then((res) => {
       this.props.getCommentsNumber();
@@ -135,7 +127,7 @@ class ReviewComments extends React.Component {
   };
 
   onResizeMouseMove = (event) => {
-    let rate = 100 - (event.nativeEvent.clientY - 50 ) / this.refs.comment.clientHeight * 100;
+    let rate = 100 - (event.nativeEvent.clientY - 120 ) / this.refs.comment.clientHeight * 100;
     if (rate < 20 || rate > 70) {
       if (rate < 20) {
         this.setState({
@@ -162,7 +154,7 @@ class ReviewComments extends React.Component {
       let comment = '> ' + text;
       this.setState({
         comment: comment
-      })
+      });
     }
   }
   
@@ -195,18 +187,15 @@ class ReviewComments extends React.Component {
         'seafile-comment seafile-comment-resizing' : 'seafile-comment'}
       onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} ref="comment">
         <div className="seafile-comment-title">
-          <div onClick={this.props.toggleCommentList} className={'seafile-comment-title-close'}>
+          <div className={'seafile-comment-title-text'}>{gettext('Show resolved comments')}</div>
-            <i className={'fa fa-times-circle'}/>
-          </div>
-          <div className={'seafile-comment-title-text'}>{gettext('Comments')}</div>
           <div className={'seafile-comment-title-toggle'}>
             <label className="custom-switch" id="toggle-resolved-comments">
-              <input type="checkbox" name="option" className="custom-switch-input" onClick={this.toggleResolvedComment}/>
+              <input type="checkbox" name="option" className="custom-switch-input"
+                onChange={this.toggleResolvedComment}
+                checked={this.state.showResolvedComment && 'checked'}
+              />
               <span className="custom-switch-indicator"></span>
             </label>
-            <Tooltip placement="bottom" isOpen={this.state.openResolvedTooltip}
-              target="toggle-resolved-comments" toggle={this.toggleResolvedTooltip}>
-              {gettext('Show/Hide resolved comments')}</Tooltip>
           </div>
         </div>
         <div style={{height:(100-this.state.commentFooterHeight)+'%'}}>

frontend/src/css/draft-review.css

@@ -1,5 +1,6 @@
 .header .button-group {
   display: flex;
+  align-items: center;
 }
 
 .header .common-list-btn, .header .add-reviewer-btn {
@@ -139,17 +140,40 @@
   cursor: pointer;
   background-color: #eee;
 }
+.comments-number {
+  font-size: 12px;
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  text-align: center;
+  line-height: 16px;
+  font-weight: 600;
+  background-color: #feac74;
+  position: absolute;
+  top: 10%;
+  right: 30%;
+  color: #fff;
+}
+
 .review-side-panel-nav {
   margin: 0;
 }
 .review-side-panel-nav .nav-item {
-  width: 50%;
+  width: 33.3%;
 }
 .review-side-panel-nav .nav-item a {
   margin: 0 auto;
 }
 .review-side-panel-nav .nav-item i {
   padding: 0 8px;
+  font-size: 1rem;
+  width: 1rem;
+}
+.review-side-panel .tab-content {
+  height: 100%;
+}
+.review-side-panel .tab-content .comments {
+  height: 100%;
 }
 
 @media (max-width: 992px) {

frontend/src/css/review-comments.css

@@ -1,40 +1,31 @@
 .seafile-comment {
-  border-left: 1px solid #e6e6dd;
   background-color: #fff;
   display: flex;
   flex-direction: column;
   flex: 0 0 auto;
+  height: 100%;
 }
 .seafile-comment-resizing {
   user-select: none;
 }
 .seafile-comment-title {
   border-bottom: 1px solid #e5e5e5;
-  line-height: 3em;
+  line-height: 2em;
   padding: 0 1em;
   display: flex;
-  flex-direction: row;
   position: absolute;
   z-index: 1;
   width: 100%;
-  background-color: #fafaf9;
+  background-color: #fff;
 }
 .seafile-comment-title .seafile-comment-title-text {
   width: 100%;
-  text-align: center;
-  font-weight: 700;
-}
-.seafile-comment-title .seafile-comment-title-close {
-  color: #b9b9b9;
-}
-.seafile-comment-title .seafile-comment-title-close:hover {
-  color: #888;
 }
 .seafile-comment-title .seafile-comment-title-toggle {
   display: flex;
 }
 .seafile-comment-list {
-  padding-top: 45px;
+  padding-top: 30px;
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
@@ -49,7 +40,6 @@
 .seafile-comment-item {
   overflow-y: hidden;
   padding: 15px 10px;
-  overflow-y: hidden;
 }
 .seafile-comment-item-resolved {
   background-color: #e6ffed;
@@ -59,9 +49,17 @@
 }
 .seafile-comment-item .seafile-comment-info .reviewer-info {
   padding-left: 10px;
+  height: 2rem;
+  display: block;
+}
+.seafile-comment-item .seafile-comment-info .reviewer-name {
+  font-size: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .seafile-comment-item .seafile-comment-info .review-time {
-  font-size: .6em;
+  margin-top: 2px;
+  font-size: .6rem;
   color: #777;
 }
 .seafile-comment-item .seafile-comment-info .seafile-comment-dropdown {
@@ -86,7 +84,7 @@
   color: #555;
 }
 .seafile-comment-item .seafile-comment-content {
-  margin-left: 42px;
+  margin: 10px 0 0 42px;
 }
 .seafile-comment-item .seafile-comment-content ol,
 .seafile-comment-item .seafile-comment-content ul,
@@ -112,15 +110,11 @@
   background-color: #fafaf9;
   padding: 10px;
   border-top: 1px solid #e5e5e5;
-  display: flex;
+  min-height: 170px;
-  justify-content: flex-start;
-  position: relative;
-  min-height: 140px;
   position: absolute;
   bottom: 0;
   padding-top: 0;
   width: 100%;
-  position: relative;
 }
 .seafile-comment-footer .user-header {
   margin-top: 10px;
@@ -129,15 +123,14 @@
 .seafile-comment-footer .seafile-add-comment {
   margin: 10px 10px 5px 40px;
   height: 100%;
-  width: 100%;
 }
 .seafile-comment-footer .seafile-add-comment .add-comment-input {
   box-sizing: border-box;
   background-color: #fff;
   border: 1px solid #e6e6dd;
   padding: 5px;
-  height: calc(100% - 38px);
+  height: calc(100% - 100px);
-  min-height: 90px;
+  min-height: 70px;
   width: 100%;
   resize: none;
 }

frontend/src/draft-review.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 /* eslint-disable */
 import Prism from 'prismjs';
 /* eslint-enable */
@@ -127,12 +128,6 @@ class DraftReview extends React.Component {
     });
   }
 
-  toggleCommentList = () => {
-    this.setState({
-      isShowComments: !this.state.isShowComments
-    });
-  }
-
   getCommentsNumber = () => {
     seafileAPI.listReviewComments(reviewID).then((res) => {
       let number = res.data.total_count;
@@ -338,14 +333,15 @@ class DraftReview extends React.Component {
 
   tabItemClick = (tab) => {
     if (this.state.activeTab !== tab) {
-      if (tab == "reviewInfo") { 
+      if (tab == 'reviewInfo') { 
         this.initialContent();
-      } else {
+      }
+      else if (tab == 'history'){
         this.initialDiffViewerContent();
       }
       this.setState({
         activeTab: tab
-      })
+      });
     }
   }
 
@@ -354,13 +350,13 @@ class DraftReview extends React.Component {
     let keys = [];
     let lastDiffState = '';
     nodes.map((node) => {
-      if (node.data.get("diff_state") === 'diff-added' && lastDiffState !== 'diff-added') {
+      if (node.data.get('diff_state') === 'diff-added' && lastDiffState !== 'diff-added') {
         keys.push(node.key);
       }
-      else if (node.data.get("diff_state") === 'diff-removed' && lastDiffState !== 'diff-removed') {
+      else if (node.data.get('diff_state') === 'diff-removed' && lastDiffState !== 'diff-removed') {
         keys.push(node.key);
       }
-      lastDiffState = node.data.get("diff_state");
+      lastDiffState = node.data.get('diff_state');
     });
     this.setState({
       changedNodes: keys
@@ -422,7 +418,7 @@ class DraftReview extends React.Component {
             this.setState({
               draftContent: content.data,
               draftOriginContent: ''
-            })
+            });
           });
         });
       }
@@ -433,7 +429,7 @@ class DraftReview extends React.Component {
     this.setState({
       draftContent: newContent,
       draftOriginContent: prevContent  
-    })
+    });
   }
 
   render() {
@@ -468,14 +464,6 @@ class DraftReview extends React.Component {
                 target="toggle-diff" toggle={this.toggleDiffTip}>
                 {gettext('View diff')}</Tooltip>
             </div>
-            <button className="btn btn-icon btn-secondary btn-active common-list-btn"
-              id="commentsNumber" type="button" data-active="false"
-              onMouseDown={this.toggleCommentList}>
-              <i className="fa fa-comments"></i>
-              { this.state.commentsNumber > 0 &&
-                <span>&nbsp;{this.state.commentsNumber}</span>
-              }
-            </button>
             {
               this.state.reviewStatus === 'open' &&
               <div className="cur-file-operation">
@@ -524,21 +512,6 @@ class DraftReview extends React.Component {
                 </div>
               }
             </div>
-            { this.state.isShowComments &&
-              <div className="cur-view-right-part" style={{width:(this.state.commentWidth)+'%'}}>
-                <div className="seafile-comment-resize" onMouseDown={this.onResizeMouseDown}></div>
-                <ReviewComments
-                  toggleCommentList={this.toggleCommentList}
-                  scrollToQuote={this.scrollToQuote}
-                  getCommentsNumber={this.getCommentsNumber}
-                  commentsNumber={this.state.commentsNumber}
-                  inResizing={this.state.inResizing}
-                  selectedText={this.selectedText}
-                  newIndex={this.newIndex}
-                  oldIndex={this.oldIndex}
-                />
-              </div>
-            }
             { !this.state.isShowComments &&
               <div className="cur-view-right-part" style={{width:(this.state.commentWidth)+'%'}}>
                 <div className="seafile-comment-resize" onMouseDown={this.onResizeMouseDown}></div>
@@ -549,10 +522,20 @@ class DraftReview extends React.Component {
                         className={classnames({ active: this.state.activeTab === 'reviewInfo' })}
                         onClick={() => { this.tabItemClick('reviewInfo');}}
                       >
-                       <i className="fas fa-info-circle"></i>
+                        <i className="fas fa-info-circle"></i>
                       </NavLink>
                     </NavItem>
-                    { this.state.reviewStatus == "finished" ? '':
+                    <NavItem className="nav-item">
+                      <NavLink
+                        className={classnames({ active: this.state.activeTab === 'comments' })}
+                        onClick={() => { this.tabItemClick('comments');}}
+                      >
+                        <i className="fa fa-comments"></i>
+                        { this.state.commentsNumber > 0 &&
+                          <div className='comments-number'>{this.state.commentsNumber}</div>}
+                      </NavLink>
+                    </NavItem>
+                    { this.state.reviewStatus == 'finished' ? '':
                       <NavItem className="nav-item">
                         <NavLink
                           className={classnames({ active: this.state.activeTab === 'history' })}
@@ -577,7 +560,21 @@ class DraftReview extends React.Component {
                         }
                       </div>
                     </TabPane>
-                    { this.state.reviewStatus == "finished"? '':
+                    <TabPane tabId="comments" className="comments">
+                      {this.state.commentsNumber &&
+                        <ReviewComments
+                          scrollToQuote={this.scrollToQuote}
+                          getCommentsNumber={this.getCommentsNumber}
+                          commentsNumber={this.state.commentsNumber}
+                          inResizing={this.state.inResizing}
+                          selectedText={this.selectedText}
+                          newIndex={this.newIndex}
+                          oldIndex={this.oldIndex}
+                        />
+                      }
+                    </TabPane>
+
+                    { this.state.reviewStatus == 'finished'? '':
                       <TabPane tabId="history" className="history">
                         <HistoryList setDiffViewerContent={this.setDiffViewerContent} 
                                      historyList={this.state.historyList}
@@ -632,6 +629,13 @@ class SidePanelReviewers extends React.Component {
   }
 }
 
+const sidePanelReviewersPropTypes = {
+  reviewers: PropTypes.array.isRequired,
+  toggleAddReviewerDialog: PropTypes.func.isRequired
+};
+
+SidePanelReviewers.propTypes = sidePanelReviewersPropTypes;
+
 class SidePanelAuthor extends React.Component {
   render() {
     return (
@@ -670,6 +674,13 @@ class SidePanelChanges extends React.Component {
   }
 }
 
+const sidePanelChangesPropTypes = {
+  changedNumber: PropTypes.number.isRequired,
+  scrollToChangedNode: PropTypes.func.isRequired
+};
+
+SidePanelChanges.propTypes = sidePanelChangesPropTypes;
+
 ReactDOM.render (
   <DraftReview />,
   document.getElementById('wrapper')