improve (#2467)

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

@@ -1,13 +1,21 @@
 import React from 'react';
-import { processor } from "../../utils/seafile-markdown2html";
+import PropTypes from 'prop-types';
-import { Button, Input, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import { processor } from '../../utils/seafile-markdown2html';
+import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
-import { draftID, reviewID, gettext } from '../../utils/constants';
+import { reviewID, gettext } from '../../utils/constants';
 import moment from 'moment';
 import Loading from '../../components/loading.js';
 
 import '../../css/review-comments.css';
 
+const commentPropTypes = {
+  getCommentsNumber: PropTypes.func.isRequired,
+  inResizing: PropTypes.bool.isRequired,
+  toggleCommentList: PropTypes.func.isRequired,
+  commentsNumber: PropTypes.number.isRequired
+};
+
 class ReviewComments extends React.Component {
 
   constructor(props) {
@@ -15,12 +23,15 @@ class ReviewComments extends React.Component {
     this.state = {
       commentsList: [],
       userAvatar: `${window.location.host}media/avatars/default.png`,
-    }
+      inResizing: false,
+      commentFooterHeight: 30,
+    };
     this.accountInfo = {};
   }
 
   listComments = () => {
     seafileAPI.listReviewComments(reviewID).then((response) => {
+      response.data.comments.reverse();
       this.setState({
         commentsList: response.data.comments
       });
@@ -32,8 +43,8 @@ class ReviewComments extends React.Component {
       this.accountInfo = res.data;
       this.setState({
         userAvatar: res.data.avatar_url,
-      })
+      });
-    })
+    });
   }
 
   handleCommentChange = (event) => {
@@ -66,54 +77,87 @@ class ReviewComments extends React.Component {
     });
   }
 
+  onResizeMouseUp = () => {
+    if (this.state.inResizing) {
+      this.setState({
+        inResizing: false
+      });
+    }
+  }
+
+  onResizeMouseDown = () => {
+    this.setState({
+      inResizing: true
+    });
+  };
+
+  onResizeMouseMove = (event) => {
+    let rate = 100 - (event.nativeEvent.clientY - 50 ) / this.refs.comment.clientHeight * 100;
+    if (rate < 20 || rate > 70) {
+      this.setState({
+        inResizing: false
+      });
+      return null;
+    }
+    this.setState({
+      commentFooterHeight: rate
+    });
+  };
+
   componentWillMount() {
     this.getUserAvatar();
     this.listComments();
   }
 
   render() {
+    const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null;
     return (
-      <div className="seafile-comment">
+      <div className={(this.state.inResizing || this.props.inResizing)?
+        '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'}>
             <i className={'fa fa-times-circle'}/>
           </div>
           <div className={'seafile-comment-title-text'}>{gettext('Comments')}</div>
         </div>
-        { this.props.commentsNumber == 0 &&
+        <div style={{height:(100-this.state.commentFooterHeight)+'%'}}>
-          <div className={"seafile-comment-list"}>
+          { this.props.commentsNumber == 0 &&
-            <div className="comment-vacant">{gettext('No comment yet.')}</div>
+            <div className={'seafile-comment-list'}>
-          </div>
+              <div className="comment-vacant">{gettext('No comment yet.')}</div>
-        }
+            </div>
-        { (this.state.commentsList.length == 0 && this.props.commentsNumber > 0) &&
-          <div><Loading/></div>
-        }
-        <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
-              } 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}
-                    editorUtilities={this.props.editorUtilities}
-                    comment={item.comment} name={item.user_name}
-                    user_email={item.user_email} key={index}
-                    deleteComment={this.deleteComment}
-                    resolveComment={this.resolveComment}
-                    commentsList={this.state.commentsList}
-                    accountInfo={this.accountInfo}
-                  />
-                )
-              }
-            })
           }
-        </ul>
+          { (this.state.commentsList.length == 0 && this.props.commentsNumber > 0) &&
-        <div className="seafile-comment-footer">
+            <div><Loading/></div>
+          }
+          <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}
+                      deleteComment={this.deleteComment}
+                      resolveComment={this.resolveComment}
+                      commentsList={this.state.commentsList}
+                      accountInfo={this.accountInfo}
+                    />
+                  );
+                }
+              })
+            }
+          </ul>
+        </div>
+        <div className="seafile-comment-footer" style={{height:this.state.commentFooterHeight+'%'}}>
+          <div className="seafile-comment-row-resize" onMouseDown={this.onResizeMouseDown}></div>
           <div className="user-header">
-            <img className="avatar" src={this.state.userAvatar}/>
+            <img className="avatar" src={this.state.userAvatar} alt="avatar"/>
           </div>
           <div className="seafile-add-comment">
             <textarea className="add-comment-input" ref="commentTextarea"
@@ -125,10 +169,25 @@ class ReviewComments extends React.Component {
           </div>
         </div>
       </div>
-    )
+    );
   }
 }
 
+ReviewComments.propTypes = commentPropTypes;
+
+
+const commentItemPropTypes = {
+  comment: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  time: PropTypes.string.isRequired,
+  user_email: PropTypes.string.isRequired,
+  deleteComment: PropTypes.func.isRequired,
+  resolveComment: PropTypes.func.isRequired,
+  accountInfo: PropTypes.object.isRequired,
+  headUrl: PropTypes.string.isRequired
+};
+
 class CommentItem extends React.Component {
 
   constructor(props) {
@@ -136,13 +195,13 @@ class CommentItem extends React.Component {
     this.state = {
       dropdownOpen: false,
       html: '',
-    }
+    };
   }
 
   toggleDropDownMenu = () => {
     this.setState({
       dropdownOpen: !this.state.dropdownOpen,
-    })
+    });
   }
 
   convertComment = (mdFile) => {
@@ -151,7 +210,7 @@ class CommentItem extends React.Component {
         let html = String(result);
         this.setState({
           html: html
-        })
+        });
       }
     );
   }
@@ -168,7 +227,7 @@ class CommentItem extends React.Component {
     return (
       <li className="seafile-comment-item" id={this.props.id}>
         <div className="seafile-comment-info">
-          <img className="avatar reviewer-head" src={this.props.headUrl} />
+          <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>
@@ -181,8 +240,8 @@ class CommentItem extends React.Component {
             <DropdownMenu>
               {
                 (this.props.user_email === this.props.accountInfo.email) &&
-              <DropdownItem onClick={this.props.deleteComment}
+                <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>
@@ -191,8 +250,10 @@ class CommentItem extends React.Component {
         </div>
         <div className="seafile-comment-content" dangerouslySetInnerHTML={{ __html: this.state.html }}></div>
       </li>
-    )
+    );
   }
 }
 
+CommentItem.propTypes = commentItemPropTypes;
+
 export default ReviewComments;

frontend/src/css/draft-review.css

@@ -14,7 +14,8 @@
   width: 100%;
   height: 100%;
   display: flex;
-  flex-direction: column;
+  flex-flow:  row nowrap;
+  justify-content: space-between;
   box-sizing: border-box;
   background-color: #fafaf9;
 }
@@ -25,11 +26,37 @@
 
 .main .cur-view-container .cur-view-content-commenton {
   overflow: auto;
-  margin-right: 30em;
+  width: 70%;
+  height: 100%;
 }
 
 .main .cur-view-container .seafile-comment {
+  height: 100%;
+  position: relative;
+  width: calc(100% - 5px);
+}
+.main .cur-view-right-part {
+  height: 100%;
+  width: 35%;
+  position: relative;
+}
+
+.seafile-comment-resize {
+  width: 5px;
+  height: 100%;
+  background-color: transparent;
   position: absolute;
-  right: 0;
+  left: 0;
-  height: calc(100% - 4.5em);
+  top: 0;
-}
+  cursor: col-resize;
+  z-index: 1;
+}
+
+@media (max-width: 992px) {
+  .main .cur-view-container .cur-view-content-commenton {
+    width: 20% !important;
+  }
+  .main .cur-view-right-part {
+    width: 80% !important;
+  }
+}

frontend/src/css/review-comments.css

@@ -4,17 +4,19 @@
   display: flex;
   flex-direction: column;
   flex: 0 0 auto;
-  min-height: 18.5em;
+}
-  width: 30em;
+.seafile-comment-resizing {
+  user-select: none;
 }
 .seafile-comment-title {
   border-bottom: 1px solid #e5e5e5;
-  min-height: 3em;
   line-height: 3em;
   padding: 0 1em;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  position: absolute;
+  z-index: 1;
+  width: 100%;
   background-color: #fafaf9;
 }
 .seafile-comment-title .seafile-comment-title-text {
@@ -29,15 +31,16 @@
   color: #888;
 }
 .seafile-comment-list {
-  height: calc(100% - 40px);
+  padding-top: 50px;
+  box-sizing: border-box;
+  height: 100%;
   overflow-y: auto;
-  margin-bottom: 0;
 }
 .seafile-comment .loading-icon {
   margin-top: 20px;
 }
 .seafile-comment-list .comment-vacant {
-  padding: 1em;
+  padding: 15px;
   text-align: center;
 }
 .seafile-comment-item {
@@ -46,13 +49,7 @@
   overflow-y: hidden;
 }
 .seafile-comment-item .seafile-comment-info {
-  padding-bottom: 0.5em;
-  height: 3em;
   display: flex;
-  justify-content: flex-start;
-}
-.seafile-comment-item .seafile-comment-info .reviewer-head {
-  margin-top: .3em;
 }
 .seafile-comment-item .seafile-comment-info .reviewer-info {
   padding-left: 10px;
@@ -92,32 +89,54 @@
 .seafile-comment-item .seafile-comment-content td {
   border: 1px solid #333;
 }
+.seafile-comment-row-resize {
+  height: 5px;
+  width: 100%;
+  background-color: transparent;
+  position: absolute;
+  left: 0;
+  top: 0;
+  cursor: row-resize;
+  z-index: 1;
+}
 .seafile-comment-footer {
   background-color: #fafaf9;
   padding: 10px;
   border-top: 1px solid #e5e5e5;
   display: flex;
   justify-content: flex-start;
-  min-height: 150px;
+  position: relative;
+  min-height: 140px;
+  position: absolute;
+  bottom: 0;
+  padding-top: 0;
+  width: 100%;
+}
+.seafile-comment-footer .user-header {
+  margin-top: 10px;
 }
 .seafile-comment-footer .seafile-add-comment {
-  margin-left: 10px;
+  margin: 10px 10px 5px 10px;
-  overflow: hidden;
+  height: 100%;
-  width: 25em;
+  width: 100%;
-  display: flex;
-  flex-direction: column;
 }
 .seafile-comment-footer .seafile-add-comment .add-comment-input {
   box-sizing: border-box;
   background-color: #fff;
   border: 1px solid #e6e6dd;
   padding: 5px;
-  width: 25em;
+  height: calc(100% - 38px);
   min-height: 90px;
+  width: 100%;
 }
 .seafile-comment-footer .seafile-add-comment .submit-comment {
-  margin-top: 5px;
-  width: 60px;
   height: 28px;
-  min-height: 28px;
+}
+@media (max-width: 992px) {
+  .seafile-comment-footer {
+    min-height: 80px;
+  }
+  .seafile-comment-footer .seafile-add-comment .add-comment-input {
+    min-height: 30px;
+  }
 }

frontend/src/draft-review.js

@@ -32,6 +32,8 @@ class DraftReview extends React.Component {
       isLoading: true,
       commentsNumber: null,
       isShowComments: false,
+      inResizing: false,
+      commentWidth: 30,
     };
   }
 
@@ -101,11 +103,39 @@ class DraftReview extends React.Component {
     });
   }
 
+  onResizeMouseUp = () => {
+    if(this.state.inResizing) {
+      this.setState({
+        inResizing: false
+      });
+    }
+  }
+
+  onResizeMouseDown = () => {
+    this.setState({
+      inResizing: true
+    });
+  };
+
+  onResizeMouseMove = (e) => {
+    let rate = 100 - e.nativeEvent.clientX / this.refs.main.clientWidth * 100;
+    if(rate < 20 || rate > 60) {
+      this.setState({
+        inResizing: false
+      });
+      return null;
+    }
+    this.setState({
+      commentWidth: rate
+    });
+  };
+
   componentWillMount() {
     this.getCommentsNumber();
   }
 
   render() {
+    const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null;
     return(
       <div className="wrapper">
         <div id="header" className="header review">
@@ -130,8 +160,8 @@ class DraftReview extends React.Component {
             {
               this.state.reviewStatus === 'open' &&
               <div className="cur-file-operation">
-                <button className="btn btn-secondary file-operation-btn" title={gettext('Close Review')} onClick={this.onCloseReview}>{gettext("Close")}</button>
+                <button className='btn btn-secondary file-operation-btn' title={gettext('Close Review')} onClick={this.onCloseReview}>{gettext('Close')}</button>
-                <button className="btn btn-success file-operation-btn" title={gettext('Publish Review')} onClick={this.onPublishReview}>{gettext("Publish")}</button>
+                <button className='btn btn-success file-operation-btn' title={gettext('Publish Review')} onClick={this.onPublishReview}>{gettext('Publish')}</button>
               </div>
             }
             {
@@ -144,9 +174,11 @@ class DraftReview extends React.Component {
             }
           </div>
         </div>
-        <div id="main" className="main">
+        <div id="main" className="main" ref="main">
-          <div className="cur-view-container content-container">
+          <div className="cur-view-container content-container"
-            <div className={!this.state.isShowComments ? "cur-view-content" : "cur-view-content cur-view-content-commenton"}>
+            onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} ref="comment">
+            <div style={{width:(100-this.state.commentWidth)+'%'}}
+              className={!this.state.isShowComments ? 'cur-view-content' : 'cur-view-content cur-view-content-commenton'} >
               <div className="markdown-viewer-render-content article">
                 {this.state.isLoading ? 
                   <Loading /> :
@@ -155,11 +187,15 @@ class DraftReview extends React.Component {
               </div>
             </div>
             { this.state.isShowComments &&
-              <ReviewComments
+              <div className="cur-view-right-part" style={{width:(this.state.commentWidth)+'%'}}>
-                toggleCommentList={this.toggleCommentList}
+                <div className="seafile-comment-resize" onMouseDown={this.onResizeMouseDown}></div>
-                commentsNumber={this.state.commentsNumber}
+                <ReviewComments
-                getCommentsNumber={this.getCommentsNumber}
+                  toggleCommentList={this.toggleCommentList}
-              />
+                  commentsNumber={this.state.commentsNumber}
+                  getCommentsNumber={this.getCommentsNumber}
+                  inResizing={this.state.inResizing}
+                />
+              </div>
             }
           </div>
         </div>

frontend/src/utils/seafile-markdown2html.js

@@ -14,30 +14,32 @@ var deepmerge = require('deepmerge').default;
 function stringify(config) {
   var settings = xtend(config, this.data('settings'));
   var schema = deepmerge(gh, {
-    "attributes":{
+    'attributes': {
-      "input": [
+      'input': [
-        "type",
+        'type',
       ],
-      "li": [
+      'li': [
-        "className"
+        'className'
       ],
-      "code":[
+      'code': [
-        "className",
+        'className',
       ],
     },
-    "tagNames": [
+    'tagNames': [
-      "input",
+      'input',
-      "code"
+      'code'
     ]
   });
   this.Compiler = compiler;
 
   function compiler(tree) {
+    // use sanity to remove dangerous html, the default is
     var hast = sanitize(tree, schema);
     return toHTML(hast, settings);
   }
 }
 
+// markdown -> mdast -> html AST -> html
 var processor = unified()
   .use(markdown, {commonmark: true})
   .use(breaks)
@@ -49,6 +51,6 @@ var processor = unified()
 
 var processorGetAST = unified()
   .use(markdown, {commonmark: true})
-  .use(slug)
+  .use(slug);
 
 export { processor, processorGetAST };