[file view] redesigned the comment panel

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,35 @@ 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">
+            <ul className="seafile-comment-list">
-            <label className="custom-switch" id="toggle-resolved-comments">
+              {commentsList.map((item, index = 0, arr) => {
-              <input type="checkbox" name="option" className="custom-switch-input"
+                let oldTime = (new Date(item.created_at)).getTime();
-                onChange={this.toggleResolvedComment}
+                let time = moment(oldTime).format('YYYY-MM-DD HH:mm');
-                checked={this.state.showResolvedComment && 'checked'}
+                return (
-              />
+                  <React.Fragment key={item.id}>
-              <span className="custom-switch-indicator"></span>
+                    <CommentItem
-            </label>
+                      item={item} time={time}
-          </div>
+                      deleteComment={this.deleteComment}
-        </div>
+                      resolveComment={this.resolveComment}
-        <ul className="seafile-comment-list">
+                      editComment={this.editComment}
-          {commentsList.length > 0 &&
+                      showResolvedComment={this.state.showResolvedComment}
-            commentsList.map((item, index = 0, arr) => {
+                    />
-              let oldTime = (new Date(item.created_at)).getTime();
+                  </React.Fragment>
-              let time = moment(oldTime).format('YYYY-MM-DD HH:mm');
+                );
-              return (
+              })}
-                <React.Fragment key={item.id}>
+            </ul>) :
-                  <CommentItem
+            <p className="text-center my-4">{gettext('No comment yet.')}</p>
-                    item={item} time={time}
-                    deleteComment={this.deleteComment}
-                    resolveComment={this.resolveComment}
-                    editComment={this.editComment}
-                    showResolvedComment={this.state.showResolvedComment}
-                  />
-                </React.Fragment>
-              );
-            })
           }
-          {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}
@@ -230,8 +216,10 @@ 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>
     );

frontend/src/css/comments-list.css

@@ -1,4 +1,5 @@
 .seafile-comment {
+  background-color: #f5f5f5;
   border-left: 1px solid #e6e6dd;
   display: flex;
   flex-direction: column;
@@ -11,7 +12,7 @@
   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 {
@@ -27,26 +28,8 @@
 .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;
@@ -89,6 +72,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,7 +94,6 @@
   background-color: #e6ffed;
 }
 .seafile-comment-footer {
-  background-color: #fafaf9;
   padding: 10px;
   border-top: 1px solid #e5e5e5;
   min-height: 182px;
@@ -117,18 +106,30 @@
   border-radius: 5px;
   background-color: #fff;
 }
+
+.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;
 }

frontend/src/css/file-view.css

@@ -61,12 +61,12 @@ 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;
   }
 }

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