Merge pull request #5163 from haiwen/update-seafile-editor

[seafile-editor] updated the version
2025-09-20 19:08:21 +00:00 · 2022-04-12 15:51:40 +08:00
parent 16257c74e1 6999d3be76
commit eee78d381e
13 changed files with 148 additions and 423 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,7 +12,7 @@
        "@seafile/react-image-lightbox": "0.0.1",
        "@seafile/resumablejs": "1.1.16",
        "@seafile/seafile-calendar": "0.0.12",
-        "@seafile/seafile-editor": "^0.3.93",
+        "@seafile/seafile-editor": "^0.3.97",
        "chart.js": "2.9.4",
        "classnames": "^2.2.6",
        "copy-to-clipboard": "^3.0.8",
@@ -41,7 +41,7 @@
        "react-responsive": "^6.1.2",
        "react-select": "^2.4.1",
        "reactstrap": "^6.4.0",
-        "seafile-js": "0.2.180",
+        "seafile-js": "0.2.182",
        "socket.io-client": "^2.2.0",
        "unified": "^7.0.0",
        "url-parse": "^1.4.3",
@@ -5085,9 +5085,9 @@
      }
    },
    "node_modules/@seafile/seafile-editor": {
-      "version": "0.3.93",
-      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.93.tgz",
-      "integrity": "sha512-9Md5npMKK4AAc3+lzNZPKibOhrYGfuQgzEZBFl++FxodhtvPlzEJ358WAmb7cfgXGVDOkoUDWvfoGvDwwdWRTw==",
+      "version": "0.3.97",
+      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.97.tgz",
+      "integrity": "sha512-QNf+e3TtNbNK3Rd8J7wXlPOr2IFSn9OCdXLj/+DD0b95NfV6b02UGyAjdBTxBpFNIRY138xbQsTIuzuzYMCe/A==",
      "dependencies": {
        "@seafile/react-image-lightbox": "^0.0.9",
        "@seafile/slate-react": "^0.54.13",
@@ -23435,9 +23435,9 @@
      }
    },
    "node_modules/seafile-js": {
-      "version": "0.2.180",
-      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.180.tgz",
-      "integrity": "sha512-Bqvrf7vDwVygQBQg2peKXI2JlgSo29v7mkkAIA9PxD9JMTZJAtRx+PQxf1RqzkrjrfvUQ5mAFX2CUXIDd2+Cpg==",
+      "version": "0.2.182",
+      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.182.tgz",
+      "integrity": "sha512-JYX+NxxvZBHrZ5e4blHrmptUumkqynIpoot+DxlPaWWTJsOxmRDnVDjRCdvI2scmgDnaJ1lRt6E89nJT7ivh/g==",
      "dependencies": {
        "@babel/polyfill": "7.12.1",
        "axios": "0.21.1",
@@ -32114,9 +32114,9 @@
      }
    },
    "@seafile/seafile-editor": {
-      "version": "0.3.93",
-      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.93.tgz",
-      "integrity": "sha512-9Md5npMKK4AAc3+lzNZPKibOhrYGfuQgzEZBFl++FxodhtvPlzEJ358WAmb7cfgXGVDOkoUDWvfoGvDwwdWRTw==",
+      "version": "0.3.97",
+      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.97.tgz",
+      "integrity": "sha512-QNf+e3TtNbNK3Rd8J7wXlPOr2IFSn9OCdXLj/+DD0b95NfV6b02UGyAjdBTxBpFNIRY138xbQsTIuzuzYMCe/A==",
      "requires": {
        "@seafile/react-image-lightbox": "^0.0.9",
        "@seafile/slate-react": "^0.54.13",
@@ -46788,9 +46788,9 @@
      }
    },
    "seafile-js": {
-      "version": "0.2.180",
-      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.180.tgz",
-      "integrity": "sha512-Bqvrf7vDwVygQBQg2peKXI2JlgSo29v7mkkAIA9PxD9JMTZJAtRx+PQxf1RqzkrjrfvUQ5mAFX2CUXIDd2+Cpg==",
+      "version": "0.2.182",
+      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.182.tgz",
+      "integrity": "sha512-JYX+NxxvZBHrZ5e4blHrmptUumkqynIpoot+DxlPaWWTJsOxmRDnVDjRCdvI2scmgDnaJ1lRt6E89nJT7ivh/g==",
      "requires": {
        "@babel/polyfill": "7.12.1",
        "axios": "0.21.1",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,8 +7,7 @@
    "@seafile/react-image-lightbox": "0.0.1",
    "@seafile/resumablejs": "1.1.16",
    "@seafile/seafile-calendar": "0.0.12",
-    "@seafile/seafile-editor": "^0.3.94",
-    "MD5": "^1.3.0",
+    "@seafile/seafile-editor": "^0.3.97",
    "chart.js": "2.9.4",
    "classnames": "^2.2.6",
    "copy-to-clipboard": "^3.0.8",
@@ -16,6 +15,7 @@
    "i18next": "^17.0.13",
    "i18next-browser-languagedetector": "^3.0.3",
    "i18next-xhr-backend": "^3.1.2",
+    "MD5": "^1.3.0",
    "merge": "^1.2.1",
    "moment": "^2.22.2",
    "object-assign": "4.1.1",
--- a/frontend/src/components/dirent-detail/detail-comments-list.js
+++ b/frontend/src/components/dirent-detail/detail-comments-list.js
@@ -138,27 +138,32 @@ class DetailCommentList extends React.Component {

  render() {
    const { repoID, filePath, fileParticipantList } = this.props;
+    const { commentsList } = this.state;
    return (
-      <div className="seafile-comment detail-comments h-100 w-100">
+      <div className="seafile-comment detail-comments h-100">
+        <div className="flex-fill o-auto">
+          {commentsList.length > 0 ? (
            <ul className="seafile-comment-list">
-          {this.state.commentsList.length > 0 &&
-            this.state.commentsList.map((item, index = 0, arr) => {
+              {commentsList.map((item, index = 0, arr) => {
                let oldTime = (new Date(item.created_at)).getTime();
                let time = moment(oldTime).format('YYYY-MM-DD HH:mm');
                return (
-                <React.Fragment key={item.id}>
                  <CommentItem
-                    item={item} time={time} deleteComment={this.deleteComment}
-                    resolveComment={this.resolveComment} editComment={this.editComment}
+                    key={item.id}
+                    item={item}
+                    time={time}
+                    deleteComment={this.deleteComment}
+                    resolveComment={this.resolveComment}
+                    editComment={this.editComment}
                  />
-                </React.Fragment>
                );
              })
              }
-          {(this.state.commentsList.length == 0 ) &&
-            <li className="comment-vacant">{gettext('No comment yet.')}</li>}
-        </ul>
-        <div className="seafile-comment-footer">
+            </ul>) :
+            <p className="text-center my-4">{gettext('No comment yet.')}</p>
+          }
+        </div>
+        <div className="seafile-comment-footer flex-shrink-0">
          {fileParticipantList &&
            <ParticipantsList
              onParticipantsChange={this.props.onParticipantsChange}
@@ -171,7 +176,7 @@ class DetailCommentList extends React.Component {
          <MentionsInput
            value={this.state.comment}
            onChange={this.handleCommentChange}
-            placeholder={gettext('Add a comment.')}
+            placeholder={gettext('Add a comment...')}
            style={defaultStyle}
          >
            <Mention
@@ -184,9 +189,11 @@ class DetailCommentList extends React.Component {
              appendSpaceOnAdd={true}
            />
          </MentionsInput>
+          <div className="comment-submit-container">
            <Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>{gettext('Submit')}</Button>
          </div>
        </div>
+      </div>
    );
  }
 }
--- a/frontend/src/components/dirent-detail/dirent-details.js
+++ b/frontend/src/components/dirent-detail/dirent-details.js
@@ -214,7 +214,7 @@ class DirentDetail extends React.Component {
        <div className="detail-container">
          {this.renderHeader(smallIconUrl, direntName)}
          <Nav tabs className="mx-0">{this.renderNavItem('info')}{this.renderNavItem('comments')}</Nav>
-          <TabContent activeTab={this.state.activeTab}>
+          <TabContent activeTab={this.state.activeTab} className="flex-fill o-auto">
            <TabPane tabId="info">{this.renderDetailBody(bigIconUrl, folderDirent)}</TabPane>
            <TabPane tabId="comments" className="comments h-100">
              <DetailCommentList
--- a/frontend/src/components/file-view/comment-panel.js
+++ b/frontend/src/components/file-view/comment-panel.js
@@ -10,6 +10,7 @@ import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import { MentionsInput, Mention } from 'react-mentions';
 import { defaultStyle, defaultMentionStyle } from '../../css/react-mentions-default-style';
+
 import '../../css/comments-list.css';

 const { username, repoID, filePath } = window.app.pageOptions;
@@ -35,10 +36,6 @@ class CommentPanel extends React.Component {
    this.toBeAddedParticipant = [];
  }

-  toggleResolvedComment = () => {
-    this.setState({ showResolvedComment: !this.state.showResolvedComment });
-  }
-
  listComments = () => {
    seafileAPI.listComments(repoID, filePath).then((res) => {
      this.setState({
@@ -165,46 +162,34 @@ class CommentPanel extends React.Component {
    const { participants, commentsList } = this.state;
    return (
      <div className="seafile-comment">
-        <div className="seafile-comment-title">
+        <div className="seafile-comment-title flex-shrink-0">
          <div onClick={this.props.toggleCommentPanel} className="seafile-comment-title-close">
-            <i className="fa fa-times-circle"/>
+            <i className="fa fa-times-circle"></i>
          </div>
          <div className="seafile-comment-title-text">{gettext('Comments')}</div>
        </div>
-        <div className="seafile-comment-toggle-resolved">
-          <div className="seafile-comment-title-text">{gettext('Show resolved comments')}</div>
-          <div className="seafile-comment-title-toggle d-flex">
-            <label className="custom-switch" id="toggle-resolved-comments">
-              <input type="checkbox" name="option" className="custom-switch-input"
-                onChange={this.toggleResolvedComment}
-                checked={this.state.showResolvedComment && 'checked'}
-              />
-              <span className="custom-switch-indicator"></span>
-            </label>
-          </div>
-        </div>
+        <div className="flex-fill o-auto">
+          {commentsList.length > 0 ? (
            <ul className="seafile-comment-list">
-          {commentsList.length > 0 &&
-            commentsList.map((item, index = 0, arr) => {
+              {commentsList.map((item, index = 0, arr) => {
                let oldTime = (new Date(item.created_at)).getTime();
                let time = moment(oldTime).format('YYYY-MM-DD HH:mm');
                return (
-                <React.Fragment key={item.id}>
                  <CommentItem
+                    key={item.id}
                    item={item} time={time}
                    deleteComment={this.deleteComment}
                    resolveComment={this.resolveComment}
                    editComment={this.editComment}
                    showResolvedComment={this.state.showResolvedComment}
                  />
-                </React.Fragment>
                );
-            })
+              })}
+            </ul>) :
+            <p className="text-center my-4">{gettext('No comment yet.')}</p>
          }
-          {commentsList.length == 0 &&
-            <li className="comment-vacant">{gettext('No comment yet.')}</li>}
-        </ul>
-        <div className="seafile-comment-footer">
+        </div>
+        <div className="seafile-comment-footer flex-shrink-0">
          {participants &&
            <ParticipantsList
              onParticipantsChange={this.onParticipantsChange}
@@ -217,7 +202,7 @@ class CommentPanel extends React.Component {
          <MentionsInput
            value={this.state.comment}
            onChange={this.handleCommentChange}
-            placeholder={gettext('Add a comment.')}
+            placeholder={gettext('Add a comment...')}
            style={defaultStyle}
          >
            <Mention
@@ -230,8 +215,9 @@ class CommentPanel extends React.Component {
              appendSpaceOnAdd={true}
            />
          </MentionsInput>
-          <Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>
-            {gettext('Submit')}</Button>
+          <div className="comment-submit-container">
+            <Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>{gettext('Submit')}</Button>
+          </div>
        </div>
      </div>
    );
@@ -329,7 +315,7 @@ class CommentItem extends React.Component {
          </div>
          <div className="seafile-edit-comment">
            <textarea className="edit-comment-input" value={this.state.newComment} onChange={this.handleCommentChange} clos="100" rows="3" warp="virtual"></textarea>
-            <Button className="comment-btn" color="success" size="sm" onClick={this.updateComment} id={item.id}>{gettext('Update')}</Button>{' '}
+            <Button className="comment-btn" color="primary" size="sm" onClick={this.updateComment} id={item.id}>{gettext('Update')}</Button>{' '}
            <Button className="comment-btn" color="secondary" size="sm" onClick={this.toggleEditComment}>{gettext('Cancel')}</Button>
          </div>
        </li>
--- a/frontend/src/components/review-list-view/review-comments.js
+++ b/frontend/src/components/review-list-view/review-comments.js
@@ -8,11 +8,10 @@ import { username } from '../../utils/constants.js';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';

-import '../../css/review-comments.css';
+import '../../css/comments-list.css';

 const commentPropTypes = {
  listComments: PropTypes.func.isRequired,
-  inResizing: PropTypes.bool.isRequired,
  commentsList: PropTypes.array.isRequired,
  scrollToQuote: PropTypes.func.isRequired
 };
@@ -22,8 +21,6 @@ class ReviewComments extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
-      inResizing: false,
-      commentFooterHeight: 25,
      showResolvedComment: true,
      comment: '',
    };
@@ -64,10 +61,6 @@ class ReviewComments extends React.Component {
    });
  }

-  toggleResolvedComment = () => {
-    this.setState({ showResolvedComment: !this.state.showResolvedComment });
-  }
-
  deleteComment = (event) => {
    seafileAPI.deleteComment(draftRepoID, event.target.id).then((res) => {
      this.props.listComments();
@@ -77,31 +70,6 @@ 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 - 120 ) / this.refs.comment.clientHeight * 100;
-    if (rate < 20 || rate > 70) {
-      if (rate < 20) {
-        this.setState({ commentFooterHeight: 25 });
-      }
-      if (rate > 70) {
-        this.setState({ commentFooterHeight: 65 });
-      }
-      this.setState({ inResizing: false });
-      return null;
-    }
-    this.setState({ commentFooterHeight: rate });
-  };
-
  scrollToQuote = (newIndex, oldIndex, quote) => {
    this.props.scrollToQuote(newIndex, oldIndex, quote);
    this.setState({ comment: '' });
@@ -117,33 +85,13 @@ class ReviewComments extends React.Component {
  }

  render() {
-    const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null;
    const { commentsList } = this.props;
    return (
-      <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 className={'seafile-comment-title-text'}>{gettext('Show resolved 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"
-                onChange={this.toggleResolvedComment}
-                checked={this.state.showResolvedComment && 'checked'}
-              />
-              <span className="custom-switch-indicator"></span>
-            </label>
-          </div>
-        </div>
-        <div style={{height:(100 - this.state.commentFooterHeight)+'%'}}>
-          {commentsList.length === 0 &&
-            <div className="seafile-comment-list">
-              <div className="comment-vacant">{gettext('No comment yet.')}</div>
-            </div>
-          }
+      <div className="seafile-comment h-100">
+        <div className="flex-fill o-auto">
+          {commentsList.length > 0 ? (
            <ul className="seafile-comment-list" ref='commentsList'>
-            {(commentsList.length > 0) &&
-              commentsList.map((item, index) => {
+              {commentsList.map((item, index) => {
                return (
                  <CommentItem
                    item={item}
@@ -155,21 +103,22 @@ class ReviewComments extends React.Component {
                    deleteComment={this.deleteComment}
                  />
                );
-              })
-            }
+              })}
            </ul>
+          ) :
+            <p className="text-center my-4">{gettext('No comment yet.')}</p>
+          }
        </div>
-        <div className="seafile-comment-footer" style={{height:this.state.commentFooterHeight+'%'}}>
-          <div className="seafile-comment-row-resize" onMouseDown={this.onResizeMouseDown}></div>
-          <div className="seafile-add-comment">
+        <div className="seafile-comment-footer flex-shrink-0">
          <textarea
            className="add-comment-input"
            value={this.state.comment}
-              placeholder={gettext('Add a comment.')}
+            placeholder={gettext('Add a comment...')}
            onChange={this.handleCommentChange}
            clos="100" rows="3" warp="virtual"
          ></textarea>
-            <Button className="comment-btn" color="primary" size="sm" onClick={this.submitComment}>{gettext('Submit')}</Button>
+          <div className="comment-submit-container">
+            <Button className="submit-comment" color="primary" size="sm" onClick={this.submitComment}>{gettext('Submit')}</Button>
          </div>
        </div>
      </div>
--- a/frontend/src/css/comments-list.css
+++ b/frontend/src/css/comments-list.css
@@ -1,53 +1,27 @@
 .seafile-comment {
-  border-left: 1px solid #e6e6dd;
+  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
-  width: 29%;
 }
-.seafile-comment-title,
-.seafile-history-title {
+.seafile-comment-title {
  border-bottom: 1px solid #e5e5e5;
  min-height: 3em;
  line-height: 3em;
  padding: 0 1em;
  display: flex;
-  background-color: #fafaf9;
+  background-color: #fff;
 }
-.seafile-comment-title .seafile-comment-title-text,
-.seafile-history-title .seafile-history-title-text {
+.seafile-comment-title .seafile-comment-title-text {
  width: 100%;
  text-align: center;
  font-weight: 700;
 }
-.seafile-comment-title .seafile-comment-title-close,
-.seafile-history-title .seafile-history-title-close {
+.seafile-comment-title .seafile-comment-title-close {
  color: #b9b9b9;
 }
-.seafile-comment-title .seafile-comment-title-close:hover,
-.seafile-history-title .seafile-history-title-close:hover {
+.seafile-comment-title .seafile-comment-title-close:hover {
  color: #888;
 }
-.seafile-comment-toggle-resolved {
-  margin-top: 45px;
-  border-bottom: 1px solid #e5e5e5;
-  padding: 5px 10px;
-  display: flex;
-  position: absolute;
-  background-color: #fff;
-  justify-content: space-between;
-  width: 29%;
-}
-.seafile-comment-list {
-  height: calc(100% - 40px);
-  margin-top: 30px;
-  overflow-y: auto;
-  margin-bottom: 0;
-}
-.seafile-comment-list .comment-vacant {
-  padding: 1em;
-  text-align: center;
-  list-style: none;
-}
 .seafile-comment-item {
  padding: 15px 10px;
  margin-bottom: 0;
@@ -89,6 +63,13 @@
 }
 .seafile-comment-item .seafile-comment-content {
  margin-left: 42px;
+  padding: 5px 10px;
+  border-radius: 4px;
+  background: #fff;
+}
+.seafile-comment-item .seafile-comment-content p {
+  word-break: break-all;
+  margin: 0;
 }
 .seafile-comment-item .seafile-comment-content ol,
 .seafile-comment-item .seafile-comment-content ul,
@@ -104,40 +85,48 @@
  background-color: #e6ffed;
 }
 .seafile-comment-footer {
-  background-color: #fafaf9;
  padding: 10px;
  border-top: 1px solid #e5e5e5;
-  min-height: 182px;
+  display: flex;
+  flex-direction: column;
 }
+.seafile-comment-footer .add-comment-input,
 .seafile-edit-comment .edit-comment-input {
  border: 1px solid #e6e6dd;
  padding: 5px;
-  width: 23em;
+  width: 100%;
  min-height: 90px;
  border-radius: 5px;
  background-color: #fff;
 }
+
+.seafile-comment-footer .add-comment-input {
+  border-bottom: none;
+  border-radius: 5px 5px 0 0;
+}
+.seafile-comment-footer .add-comment-input:focus {
+  outline: none;
+}
+.seafile-comment-footer .comment-submit-container {
+  border: 1px solid #e6e6dd;
+  border-top: none;
+  border-radius: 0 0 5px 5px;
+  padding: 5px;
+  background: #fff;
+  text-align: right;
+  position: relative;
+}
+.seafile-comment-footer .comment-submit-container::before {
+  border-top: 1px solid #e6e6dd;
+  content: '';
+  position: absolute;
+  left: 5px;
+  right: 5px;
+  top: 0;
+}
 .seafile-comment-footer .submit-comment {
-  margin-top: 5px;
-  padding: 0.35rem 0.5rem;
+  height: 28px;
 }
 .seafile-edit-comment .comment-btn {
  height: 28px;
 }
-@media (max-width: 768px) {
-  .seafile-comment-toggle-resolved {
-    width: 100%;
-  }
-}
-.detail-comments {
-  border-left: 0;
-}
-.detail-comments .seafile-comment-list {
-  margin-top: 0;
-}
-.detail-comments .seafile-comment-footer {
-  min-height: 175px;
-}
-.detail-comments .seafile-edit-comment .edit-comment-input {
-  width: 100%;
-}
--- a/frontend/src/css/dirent-detail.css
+++ b/frontend/src/css/dirent-detail.css
@@ -171,11 +171,6 @@
  margin-bottom: 0.5rem;
 }

-.detail-container .tab-content {
-  height: calc(100% - 73px);
-  overflow-y: auto;
-}
-
 .detail-container .nav-item .nav-link, .detail-container .nav-item .nav-link i {
  margin: 0 auto;
 }
--- a/frontend/src/css/draft.css
+++ b/frontend/src/css/draft.css
@@ -16,8 +16,6 @@
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
-  justify-content: space-between;
-  box-sizing: border-box;
  background-color: #fafaf9;
 }

@@ -26,27 +24,13 @@
  height: 100%;
 }

-.main .cur-view-container .seafile-comment {
-  height: 100%;
-  position: relative;
-}
 .main .cur-view-right-part {
  height: 100%;
-  width: 35%;
+  width: 300px;
+  flex-shrink: 0;
  position: relative;
 }

-.seafile-comment-resize {
-  width: 5px;
-  height: 100%;
-  background-color: transparent;
-  position: absolute;
-  left: 0;
-  top: 0;
-  cursor: col-resize;
-  z-index: 1;
-}
-
 .cur-file-info .file-info {
  display: block;
  padding-top: 10px;
@@ -97,7 +81,7 @@
  font-weight: 700;
 }
 .review-side-panel-body {
-  padding: 1rem 2rem 3rem;
+  padding: 1rem 1rem 3rem;
  overflow-y: scroll;
  height: 100%;
 }
@@ -118,7 +102,8 @@
 .review-side-panel-item:last-child {
  border: 0;
 }
-.reviewer-info, .author-info {
+.review-side-panel-item .reviewer-info,
+.review-side-panel-item .author-info {
  display: flex;
  align-items: center;
 }
@@ -144,7 +129,8 @@
  height: 1.5rem;
  width: 1.5rem;
 }
-.reviewer-name, .author-name {
+.review-side-panel-item .reviewer-name,
+.review-side-panel-item .author-name {
  height: 2rem;
  line-height: 2rem;
 }
--- a/frontend/src/css/file-view.css
+++ b/frontend/src/css/file-view.css
@@ -67,6 +67,7 @@ body {
 }
@media (min-width: 768px) {
  .file-view-body .seafile-comment {
-    width: 29%;
+    width: 300px;
+    border-left: 1px solid #e6e6dd;
  }
 }
--- a/frontend/src/css/react-mentions-default-style.js
+++ b/frontend/src/css/react-mentions-default-style.js
@@ -35,14 +35,18 @@ const defaultStyle = {
      minHeight: 90,
      height: 90,
      border: '1px solid #e6e6dd',
-      borderRadius: '5px',
+      borderBottom: 'none',
+      borderRadius: '5px 5px 0 0',
      overfflowY: 'auto',
+      outline: 'none',
      '&focused': {
+        /*
        backgroundColor: '#cee4e5',
        outlineOffset: '-2px',
        outlineColor: '-webkit-focus-ring-color',
        outlineStyle: 'auto',
        outlineWidth: '5px',
+        */
      },
    },
  },
--- a/frontend/src/css/review-comments.css
+++ b/frontend/src/css/review-comments.css
@@ -1,169 +0,0 @@
-.review-side-panel .seafile-comment {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  background-color: #fff;
-}
-.seafile-comment-resizing {
-  user-select: none;
-}
-.seafile-comment-title {
-  border-bottom: 1px solid #e5e5e5;
-  line-height: 2em;
-  padding: 2px 1em;
-  display: flex;
-  position: absolute;
-  z-index: 1;
-  width: 100%;
-  background-color: #fff;
-}
-.seafile-comment-title .seafile-comment-title-text {
-  width: 100%;
-}
-.seafile-comment-title .seafile-comment-title-toggle {
-  display: flex;
-}
-.seafile-comment-list {
-  padding-top: 35px;
-  box-sizing: border-box;
-  height: 100%;
-  overflow-y: auto;
-}
-.seafile-comment .loading-icon {
-  margin-top: 20px;
-}
-.seafile-comment-list .comment-vacant {
-  padding: 15px;
-  text-align: center;
-}
-.seafile-comment-item {
-  padding: 15px 10px;
-}
-.seafile-comment-item-resolved {
-  background-color: #e6ffed;
-}
-.seafile-comment-item .seafile-comment-info {
-  display: flex;
-}
-.seafile-comment-item .seafile-comment-info .reviewer-info {
-  padding-left: 10px;
-  height: 2rem;
-  display: block;
-  max-width: 75%;
-}
-.seafile-comment-item .seafile-comment-info .reviewer-name {
-  font-size: 1rem;
-  height: 1rem;
-  line-height: 1rem;
-}
-.seafile-comment-item .seafile-comment-info .review-time {
-  margin-top: 2px;
-  font-size: .6rem;
-  color: #777;
-}
-.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown {
-  margin-left: auto;
-}
-.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button,
-.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button:hover,
-.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button:focus
- {
-  border: none;
-  box-shadow: none;
-  background-color: #fff;
-  height: 100%;
-}
-.seafile-comment-dropdown button:hover i {
-  color: #555;
-}
-.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown .seafile-comment-dropdown-btn {
-  color: #999;
-}
-.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown:hover .seafile-comment-dropdown-btn {
-  color: #555;
-}
-.seafile-comment-item .seafile-comment-content {
-  margin: 10px 0 0 40px;
-}
-.seafile-comment-item .seafile-comment-content ol,
-.seafile-comment-item .seafile-comment-content ul,
-.seafile-comment-item .seafile-comment-content li {
-  margin-left: 10px;
-}
-.seafile-comment-item .seafile-comment-content table,
-.seafile-comment-item .seafile-comment-content th,
-.seafile-comment-item .seafile-comment-content td {
-  border: 1px solid #333;
-}
-.seafile-comment-item blockquote {
-  word-wrap: break-word;
-  overflow: hidden;
-  padding-left: 1rem;
-  cursor: pointer;
-}
-.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;
-  border-top: 1px solid #e5e5e5;
-  min-height: 120px;
-  position: absolute;
-  bottom: 0;
-  padding-top: 0;
-  width: 100%;
-}
-.seafile-comment-footer .seafile-add-comment {
-  margin: 10px 20px 5px 15px;
-  height: 100%;
-}
-.seafile-add-comment .add-comment-input,
-.seafile-edit-comment .edit-comment-input {
-  box-sizing: border-box;
-  background-color: #fff;
-  border: 1px solid #e6e6dd;
-  padding: 5px;
-  height: calc(100% - 50px);
-  min-height: 70px;
-  width: 100%;
-  resize: none;
-  border-radius: 5px;
-}
-.seafile-comment-footer .seafile-add-comment .comment-btn,
-.seafile-edit-comment .comment-btn {
-  height: 28px;
-  margin-top: 5px;
-  width: fit-content;
-  display: inline-block;
-}
-.seafile-edit-comment {
-  margin-top: 10px;
-}
-@media (max-width: 992px) {
-  .seafile-comment-footer {
-    min-height: 80px;
-  }
-  .seafile-comment-footer .seafile-add-comment .add-comment-input {
-    min-height: 30px;
-  }
-  .seafile-comment-list .comment-vacant {
-    padding: 10px;
-  }
-  .seafile-comment {
-    font-size: 12px;
-  }
-  .seafile-comment-footer .seafile-add-comment .comment-btn {
-    height: 24px;
-  }
-  .seafile-comment-footer {
-    min-height: 120px;
-  }
-}
--- a/frontend/src/draft.js
+++ b/frontend/src/draft.js
@@ -53,8 +53,6 @@ class Draft extends React.Component {
      historyList: [],
      showReviewerDialog: false,
      reviewers: [],
-      inResizing: false,
-      rightPartWidth: 30,
      draftStatus: draftStatus,
    };
    this.quote = '';
@@ -561,25 +559,6 @@ class Draft extends React.Component {
    this.oldIndex = node.data['old_index'];
  }

-  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({ rightPartWidth: rate });
-  };
-
  componentDidMount() {
    this.getOriginRepoInfo();
    this.getDraftInfo();
@@ -660,7 +639,6 @@ class Draft extends React.Component {

  render() {
    const { draftInfo, reviewers, originRepoName, draftStatus } = this.state;
-    const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null;
    const draftLink = siteRoot + 'lib/' + draftRepoID + '/file' + draftFilePath + '?mode=edit';
    const showPublishedButton = this.state.draftStatus == 'published';
    const showPublishButton = this.state.draftStatus == 'open' && filePermission == 'rw';
@@ -706,8 +684,8 @@ class Draft extends React.Component {
          </div>
        </div>
        <div id="main" className="main" ref="main">
-          <div className="cur-view-container" onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} >
-            <div className='cur-view-content' ref="viewContent" style={{width:(100 - this.state.rightPartWidth) + '%'}}>
+          <div className="cur-view-container">
+            <div className='cur-view-content' ref="viewContent">
              {this.state.isLoading ?
                <div className="markdown-viewer-render-content article">
                  <Loading />
@@ -718,8 +696,7 @@ class Draft extends React.Component {
                </div>
              }
            </div>
-            <div className="cur-view-right-part" style={{width:(this.state.rightPartWidth) + '%'}}>
-              <div className="seafile-comment-resize" onMouseDown={this.onResizeMouseDown}></div>
+            <div className="cur-view-right-part">
              <div className="review-side-panel">
                {this.renderNavItems()}
                <TabContent activeTab={this.state.activeTab}>