[draft view] redesigned the 'comment' panel

2025-09-06 17:33:18 +00:00 · 2022-04-11 17:57:24 +08:00
parent be69c6d7ce
commit e086097a69
6 changed files with 39 additions and 261 deletions
--- 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,13 +103,13 @@ 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}
@@ -169,7 +117,8 @@ class ReviewComments extends React.Component {
            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,6 +1,5 @@
 .seafile-comment {
  background-color: #f5f5f5;
-  border-left: 1px solid #e6e6dd;
  display: flex;
  flex-direction: column;
 }
@@ -92,17 +91,26 @@
 .seafile-comment-footer {
  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;
@@ -126,12 +134,3 @@
 .seafile-edit-comment .comment-btn {
  height: 28px;
 }
-.detail-comments {
-  border-left: 0;
-}
-.detail-comments .seafile-comment-footer {
-  min-height: 175px;
-}
-.detail-comments .seafile-edit-comment .edit-comment-input {
-  width: 100%;
-}
--- a/frontend/src/css/draft.css
+++ b/frontend/src/css/draft.css
@@ -26,13 +26,9 @@
  height: 100%;
 }

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

@@ -118,7 +114,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 +141,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
@@ -68,5 +68,6 @@ body {
@media (min-width: 768px) {
  .file-view-body .seafile-comment {
    width: 300px;
+    border-left: 1px solid #e6e6dd;
  }
 }
--- 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
@@ -54,7 +54,7 @@ class Draft extends React.Component {
      showReviewerDialog: false,
      reviewers: [],
      inResizing: false,
-      rightPartWidth: 30,
+      rightPartWidth: 300 / window.innerWidth * 100,
      draftStatus: draftStatus,
    };
    this.quote = '';