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

[seafile-editor] updated the version

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",
+      "version": "0.3.97",
-      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.93.tgz",
+      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.97.tgz",
-      "integrity": "sha512-9Md5npMKK4AAc3+lzNZPKibOhrYGfuQgzEZBFl++FxodhtvPlzEJ358WAmb7cfgXGVDOkoUDWvfoGvDwwdWRTw==",
+      "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",
+      "version": "0.2.182",
-      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.180.tgz",
+      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.182.tgz",
-      "integrity": "sha512-Bqvrf7vDwVygQBQg2peKXI2JlgSo29v7mkkAIA9PxD9JMTZJAtRx+PQxf1RqzkrjrfvUQ5mAFX2CUXIDd2+Cpg==",
+      "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",
+      "version": "0.3.97",
-      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.93.tgz",
+      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.97.tgz",
-      "integrity": "sha512-9Md5npMKK4AAc3+lzNZPKibOhrYGfuQgzEZBFl++FxodhtvPlzEJ358WAmb7cfgXGVDOkoUDWvfoGvDwwdWRTw==",
+      "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",
+      "version": "0.2.182",
-      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.180.tgz",
+      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.182.tgz",
-      "integrity": "sha512-Bqvrf7vDwVygQBQg2peKXI2JlgSo29v7mkkAIA9PxD9JMTZJAtRx+PQxf1RqzkrjrfvUQ5mAFX2CUXIDd2+Cpg==",
+      "integrity": "sha512-JYX+NxxvZBHrZ5e4blHrmptUumkqynIpoot+DxlPaWWTJsOxmRDnVDjRCdvI2scmgDnaJ1lRt6E89nJT7ivh/g==",
       "requires": {
         "@babel/polyfill": "7.12.1",
         "axios": "0.21.1",

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",
+    "@seafile/seafile-editor": "^0.3.97",
-    "MD5": "^1.3.0",
     "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",

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 &&
+              {commentsList.map((item, index = 0, arr) => {
-            this.state.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}
+                    key={item.id}
-                    resolveComment={this.resolveComment} editComment={this.editComment}
+                    item={item}
+                    time={time}
+                    deleteComment={this.deleteComment}
+                    resolveComment={this.resolveComment}
+                    editComment={this.editComment}
                   />
-                </React.Fragment>
                 );
               })
               }
-          {(this.state.commentsList.length == 0 ) &&
+            </ul>) :
-            <li className="comment-vacant">{gettext('No comment yet.')}</li>}
+            <p className="text-center my-4">{gettext('No comment yet.')}</p>
-        </ul>
+          }
-        <div className="seafile-comment-footer">
+        </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>
     );
   }
 }

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

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="flex-fill o-auto">
-          <div className="seafile-comment-title-text">{gettext('Show resolved comments')}</div>
+          {commentsList.length > 0 ? (
-          <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>
             <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 &&
+        </div>
-            <li className="comment-vacant">{gettext('No comment yet.')}</li>}
+        <div className="seafile-comment-footer flex-shrink-0">
-        </ul>
-        <div className="seafile-comment-footer">
           {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}>
+          <div className="comment-submit-container">
-            {gettext('Submit')}</Button>
+            <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>

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)?
+      <div className="seafile-comment h-100">
-        'seafile-comment seafile-comment-resizing' : 'seafile-comment'}
+        <div className="flex-fill o-auto">
-      onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} ref="comment">
+          {commentsList.length > 0 ? (
-        <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>
-          }
             <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-footer flex-shrink-0">
-          <div className="seafile-comment-row-resize" onMouseDown={this.onResizeMouseDown}></div>
-          <div className="seafile-add-comment">
           <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>

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-comment-title {
-.seafile-history-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-comment-title .seafile-comment-title-text {
-.seafile-history-title .seafile-history-title-text {
   width: 100%;
   text-align: center;
   font-weight: 700;
 }
-.seafile-comment-title .seafile-comment-title-close,
+.seafile-comment-title .seafile-comment-title-close {
-.seafile-history-title .seafile-history-title-close {
   color: #b9b9b9;
 }
-.seafile-comment-title .seafile-comment-title-close:hover,
+.seafile-comment-title .seafile-comment-title-close:hover {
-.seafile-history-title .seafile-history-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;
+  height: 28px;
-  padding: 0.35rem 0.5rem;
 }
 .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%;
-}

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;
 }

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;
 }

frontend/src/css/file-view.css

@@ -61,12 +61,13 @@ body {
     opacity: 1;
   }
 }
-/* for mobile */
+ /* for mobile */
 .file-view-body .seafile-comment {
   width: 100%;
 }
 @media (min-width: 768px) {
   .file-view-body .seafile-comment {
-    width: 29%;
+    width: 300px;
+    border-left: 1px solid #e6e6dd;
   }
 }

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',
+        */
       },
     },
   },

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;
-  }
-}

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-container">
-            <div className='cur-view-content' ref="viewContent" style={{width:(100 - this.state.rightPartWidth) + '%'}}>
+            <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="cur-view-right-part">
-              <div className="seafile-comment-resize" onMouseDown={this.onResizeMouseDown}></div>
               <div className="review-side-panel">
                 {this.renderNavItems()}
                 <TabContent activeTab={this.state.activeTab}>