Add button to toggle showing of resolved comment (#2473)

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 } from 'reactstrap';
+import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Tooltip } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { reviewID, gettext } from '../../utils/constants';
 import moment from 'moment';
@@ -25,6 +25,8 @@ class ReviewComments extends React.Component {
       userAvatar: `${window.location.host}media/avatars/default.png`,
       inResizing: false,
       commentFooterHeight: 30,
+      showResolvedComment: false,
+      openResolvedTooltip: false,
     };
     this.accountInfo = {};
   }
@@ -70,6 +72,18 @@ class ReviewComments extends React.Component {
     });
   }
 
+  toggleResolvedComment = () => {
+    this.setState({
+      showResolvedComment: !this.state.showResolvedComment
+    });
+  }
+
+  toggleResolvedTooltip = () => {
+    this.setState({
+      openResolvedTooltip: !this.state.openResolvedTooltip
+    });
+  }
+
   deleteComment = (event) => {
     seafileAPI.deleteReviewComment(reviewID, event.target.id).then((res) => {
       this.props.getCommentsNumber();
@@ -120,6 +134,15 @@ class ReviewComments extends React.Component {
             <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}/>
+              <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)+'%'}}>
           { this.props.commentsNumber == 0 &&
@@ -133,23 +156,19 @@ class ReviewComments extends React.Component {
           <ul className={'seafile-comment-list'}>
             { (this.state.commentsList.length > 0 && this.props.commentsNumber > 0) &&
               this.state.commentsList.map((item, index = 0, arr) => {
-                if (item.resolved) {
-                  return null;
-                }
-                else {
                 let oldTime = (new Date(item.created_at)).getTime();
                 let time = moment(oldTime).format('YYYY-MM-DD HH:mm');
                 return (
                   <CommentItem id={item.id} time={time} headUrl={item.avatar_url}
                     comment={item.comment} name={item.user_name}
-                      user_email={item.user_email} key={index}
+                    user_email={item.user_email} key={index} resolved={item.resolved}
                     deleteComment={this.deleteComment}
                     resolveComment={this.resolveComment}
                     commentsList={this.state.commentsList}
                     accountInfo={this.accountInfo}
+                    showResolvedComment={this.state.showResolvedComment}
                   />
                 );
-                }
               })
             }
           </ul>
@@ -185,7 +204,9 @@ const commentItemPropTypes = {
   deleteComment: PropTypes.func.isRequired,
   resolveComment: PropTypes.func.isRequired,
   accountInfo: PropTypes.object.isRequired,
-  headUrl: PropTypes.string.isRequired
+  headUrl: PropTypes.string.isRequired,
+  resolved: PropTypes.bool.isRequired,
+  showResolvedComment: PropTypes.bool.isRequired
 };
 
 class CommentItem extends React.Component {
@@ -224,29 +245,33 @@ class CommentItem extends React.Component {
   }
 
   render() {
+    if (this.props.resolved && !this.props.showResolvedComment) {
+      return null;
+    }
     return (
-      <li className="seafile-comment-item" id={this.props.id}>
+      <li className={this.props.resolved ? 'seafile-comment-item seafile-comment-item-resolved'
+        : 'seafile-comment-item'} id={this.props.id}>
         <div className="seafile-comment-info">
           <img className="avatar" src={this.props.headUrl} alt="avatar"/>
           <div className="reviewer-info">
             <div className="reviewer-name">{this.props.name}</div>
             <div className="review-time">{this.props.time}</div>
           </div>
+          { !this.props.resolved &&
             <Dropdown isOpen={this.state.dropdownOpen} size="sm"
               className="seafile-comment-dropdown" toggle={this.toggleDropDownMenu}>
               <DropdownToggle className="seafile-comment-dropdown-btn">
                 <i className="fas fa-ellipsis-v"></i>
               </DropdownToggle>
               <DropdownMenu>
-              {
+                { (this.props.user_email === this.props.accountInfo.email) &&
-                (this.props.user_email === this.props.accountInfo.email) &&
                   <DropdownItem onClick={this.props.deleteComment}
-                  className="delete-comment" id={this.props.id}>{gettext('Delete')}</DropdownItem>
+                    className="delete-comment" id={this.props.id}>{gettext('Delete')}</DropdownItem>}
-              }
                 <DropdownItem onClick={this.props.resolveComment}
                   className="seafile-comment-resolved" id={this.props.id}>{gettext('Mark as resolved')}</DropdownItem>
               </DropdownMenu>
             </Dropdown>
+          }
         </div>
         <div className="seafile-comment-content" dangerouslySetInnerHTML={{ __html: this.state.html }}></div>
       </li>

frontend/src/css/review-comments.css

@@ -30,8 +30,11 @@
 .seafile-comment-title .seafile-comment-title-close:hover {
   color: #888;
 }
+.seafile-comment-title .seafile-comment-title-toggle {
+  display: flex;
+}
 .seafile-comment-list {
-  padding-top: 50px;
+  padding-top: 45px;
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
@@ -48,6 +51,9 @@
   padding: 15px 10px;
   overflow-y: hidden;
 }
+.seafile-comment-item-resolved {
+  background-color: #e6ffed;
+}
 .seafile-comment-item .seafile-comment-info {
   display: flex;
 }

media/css/seahub_react.css

@@ -981,3 +981,8 @@ a.op-icon:focus {
 }
 /* end activity page */
 
+/* css to overwrite seahub-ui.css */
+.custom-switch-input:checked ~ .custom-switch-indicator {
+    background: #eb8205;
+    border: 1px solid #eb8205;
+}