improve-style (#2508)

frontend/src/components/dialog/add-reviewer-dialog.js

@@ -9,7 +9,8 @@ import '../../css/add-reviewer-dialog.css';
 const propTypes = {
   showReviewerDialog: PropTypes.bool.isRequired,
   reviewID: PropTypes.string.isRequired,
-  toggleAddReviewerDialog: PropTypes.func.isRequired
+  toggleAddReviewerDialog: PropTypes.func.isRequired,
+  reviewers: PropTypes.array.isRequired
 };
 
 class AddReviewerDialog extends React.Component {
@@ -17,14 +18,15 @@ class AddReviewerDialog extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      reviewers: [],
+      reviewers: this.props.reviewers,
       selectedOption: null,
       errorMsg: [],
+      loading: false,
     };
     this.Options = [];
   }
 
-  componentWillMount() {
+  listReviewers = () => {
     seafileAPI.listReviewers(this.props.reviewID).then((res) => {
       this.setState({
         reviewers: res.data.reviewers
@@ -66,6 +68,10 @@ class AddReviewerDialog extends React.Component {
       for (let i = 0; i < this.state.selectedOption.length; i ++) {
         reviewers[i] = this.state.selectedOption[i].email;
       }
+      this.setState({
+        loading: true,
+        errorMsg: [],
+      });
       seafileAPI.addReviewers(this.props.reviewID, reviewers).then((res) => {
         if (res.data.failed.length > 0) {
           let errorMsg = [];
@@ -75,15 +81,10 @@ class AddReviewerDialog extends React.Component {
           this.setState({
             errorMsg: errorMsg
           });
-          let that = this;
-          setTimeout(() => {
-            that.setState({
-              errorMsg: []
-            });
-          }, 3000);
         }
         this.setState({
-          selectedOption: null
+          selectedOption: null,
+          loading: false
         });
         if (res.data.success.length > 0) {
           this.listReviewers();
@@ -107,8 +108,8 @@ class AddReviewerDialog extends React.Component {
           {this.state.errorMsg.length > 0 &&
             this.state.errorMsg.map((item, index = 0, arr) => {
               return (
-                <p className="error" key={index}>{this.state.errorMsg[index].email}
-                  {':'}{this.state.errorMsg[index].error_msg}</p>
+                <p className="reviewer-select-error error" key={index}>{this.state.errorMsg[index].email}
+                  {': '}{this.state.errorMsg[index].error_msg}</p>
               );
             })
           }
@@ -124,7 +125,11 @@ class AddReviewerDialog extends React.Component {
           }
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" onClick={this.addReviewers}>{gettext('Submit')}</Button>
+          { this.state.loading ?
+            <Button disabled><i className="fa fa-spinner" aria-hidden="true"></i></Button>
+            :
+            <Button color="primary" onClick={this.addReviewers}>{gettext('Submit')}</Button>
+          }
           <Button color="secondary" onClick={this.props.toggleAddReviewerDialog}>
             {gettext('Cancel')}</Button>
         </ModalFooter>

frontend/src/css/add-reviewer-dialog.css

@@ -8,6 +8,9 @@
   height: 2rem;
   line-height: 2rem;
 }
+.reviewer-select-error {
+  margin-top: 1em;
+}
 .reviewer-select>div>div:nth-child(2) {
   display: none;
-}
+}

frontend/src/css/draft-review.css

@@ -68,6 +68,50 @@
   margin-right: 10px;
 }
 
+.review-side-panel {
+  border-left: 1px solid #e6e6dd;
+  background-color: #fff;
+  height: 100%;
+}
+.review-side-panel-head {
+  border-bottom: 1px solid #e5e5e5;
+  line-height: 3em;
+  background-color: #fafaf9;
+  text-align: center;
+  font-weight: 700;
+}
+.review-side-panel-body {
+  padding: 1rem 2rem;
+}
+.review-side-panel-reviewers, .review-side-panel-author {
+  border-bottom: 1px solid #e6e6dd;
+  padding: 1em 0;
+}
+.reviewers-header, .author-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+.reviewers-header i {
+  color: #c8c8c8;
+  font-size: 18px;
+}
+.reviewers-header i:hover {
+  cursor: pointer;
+  color: #a4a4a4;
+}
+.review-side-panel-header {
+  font-weight: bold;
+  color: #586069;
+}
+.reviewer-avatar, .author-avatar {
+  margin-right: 10px;
+}
+.reviewer-name, .author-name {
+  height: 2rem;
+  line-height: 2rem;
+}
+
 @media (max-width: 992px) {
   .main .cur-view-container .cur-view-content-commenton {
     width: 20% !important;

frontend/src/draft-review.js

@@ -10,7 +10,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 { Button, Tooltip } from 'reactstrap';
+import { Tooltip } from 'reactstrap';
 import AddReviewerDialog from './components/dialog/add-reviewer-dialog.js';
 
 import 'seafile-ui';
@@ -39,7 +39,10 @@ class DraftReview extends React.Component {
       isShowDiff: true,
       showDiffTip: false,
       showReviewerDialog: false,
+      reviewers: [],
     };
+    this.authorName = '';
+    this.authorAvatar = '';
   }
 
   componentDidMount() {
@@ -95,7 +98,7 @@ class DraftReview extends React.Component {
       msg_s = msg_s.replace('%(reviewID)s', reviewID);
       Toast.success(msg_s);
     }).catch(() => {
-      let msg_s = gettext('Failed to publish review %(reviewID)s.')
+      let msg_s = gettext('Failed to publish review %(reviewID)s.');
       msg_s = msg_s.replace('%(reviewID)s', reviewID);
       Toast.error(msg_s);
     });
@@ -146,7 +149,7 @@ class DraftReview extends React.Component {
   onSwitchShowDiff = () => {
     this.setState({
       isShowDiff: !this.state.isShowDiff,
-    })
+    });
   }
 
   toggleDiffTip = () => {
@@ -161,8 +164,25 @@ class DraftReview extends React.Component {
     });
   }
 
+  getAuthorInfo = () => {
+    seafileAPI.getAccountInfo().then((res) => {
+      this.authorName = res.data.name;
+      this.authorAvatar = res.data.avatar_url;
+    });
+  }
+
+  listReviewers = () => {
+    seafileAPI.listReviewers(reviewID).then((res) => {
+      this.setState({
+        reviewers: res.data.reviewers
+      });
+    });
+  }
+
   componentWillMount() {
     this.getCommentsNumber();
+    this.getAuthorInfo();
+    this.listReviewers();
   }
 
   render() {
@@ -195,8 +215,6 @@ class DraftReview extends React.Component {
                 target="toggle-diff" toggle={this.toggleDiffTip}>
                 {gettext('View diff')}</Tooltip>
             </div>
-            <button className="btn btn-primary add-reviewer-btn" onClick={this.toggleAddReviewerDialog}>
-              {gettext('Add reviewer')}</button>
             <button className="btn btn-icon btn-secondary btn-active common-list-btn"
               id="commentsNumber" type="button" data-active="false"
               onMouseDown={this.toggleCommentList}>
@@ -227,7 +245,7 @@ class DraftReview extends React.Component {
             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'} >
-              {this.state.isLoading ? 
+              {this.state.isLoading ?
                 <div className="markdown-viewer-render-content article">
                   <Loading /> 
                 </div> 
@@ -252,6 +270,43 @@ class DraftReview extends React.Component {
                 />
               </div>
             }
+            { !this.state.isShowComments &&
+              <div className="cur-view-right-part" style={{width:(this.state.commentWidth)+'%'}}>
+                <div className="seafile-comment-resize" onMouseDown={this.onResizeMouseDown}></div>
+                <div className="review-side-panel">
+                  <div className="review-side-panel-head">{gettext('Review #')}{reviewID}</div>
+                  <div className="review-side-panel-body">
+                    <div className="review-side-panel-reviewers">
+                      <div className="reviewers-header">
+                        <div className="review-side-panel-header">{gettext('Reviewers')}</div>
+                        <i className="fa fa-cog" onClick={this.toggleAddReviewerDialog}></i>
+                      </div>
+                      { this.state.reviewers.length > 0 ?
+                        this.state.reviewers.map((item, index = 0, arr) => {
+                          return (
+                            <div className="reviewer-info" key={index}>
+                              <img className="avatar reviewer-avatar" src={item.avatar_url} alt=""/>
+                              <span className="reviewer-name">{item.user_name}</span>
+                            </div>
+                          );
+                        })
+                        :
+                        <span>{gettext('No reviewer yet.')}</span>
+                      }
+                    </div>
+                    <div className="review-side-panel-author">
+                      <div className="author-header">
+                        <div className="review-side-panel-header">{gettext('Author')}</div>
+                      </div>
+                      <div className="author-info">
+                        <img className="avatar author-avatar" src={this.authorAvatar} alt=""/>
+                        <span className="author-name">{this.authorName}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            }
           </div>
         </div>
         { this.state.showReviewerDialog &&
@@ -259,6 +314,7 @@ class DraftReview extends React.Component {
             showReviewerDialog={this.state.showReviewerDialog}
             toggleAddReviewerDialog={this.toggleAddReviewerDialog}
             reviewID={reviewID}
+            reviewers={this.state.reviewers}
           />
         }
       </div>