[dir view] redesigned the 'comment panel' for file items

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">
-        <ul className="seafile-comment-list">
+        <div className="flex-fill o-auto">
-          {this.state.commentsList.length > 0 &&
+          {commentsList.length > 0 ? (
-            this.state.commentsList.map((item, index = 0, arr) => {
+            <ul className="seafile-comment-list">
-              let oldTime = (new Date(item.created_at)).getTime();
+              {commentsList.map((item, index = 0, arr) => {
-              let time = moment(oldTime).format('YYYY-MM-DD HH:mm');
+                let oldTime = (new Date(item.created_at)).getTime();
-              return (
+                let time = moment(oldTime).format('YYYY-MM-DD HH:mm');
-                <React.Fragment key={item.id}>
+                return (
                   <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>
+                );
-              );
+              })
-            })
+              }
+            </ul>) :
+            <p className="text-center my-4">{gettext('No comment yet.')}</p>
           }
-          {(this.state.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">
           {fileParticipantList &&
             <ParticipantsList
               onParticipantsChange={this.props.onParticipantsChange}
@@ -184,7 +189,9 @@ class DetailCommentList 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>
     );

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

@@ -175,15 +175,14 @@ class CommentPanel extends React.Component {
                 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
-                    <CommentItem
+                    key={item.id}
-                      item={item} time={time}
+                    item={item} time={time}
-                      deleteComment={this.deleteComment}
+                    deleteComment={this.deleteComment}
-                      resolveComment={this.resolveComment}
+                    resolveComment={this.resolveComment}
-                      editComment={this.editComment}
+                    editComment={this.editComment}
-                      showResolvedComment={this.state.showResolvedComment}
+                    showResolvedComment={this.state.showResolvedComment}
-                    />
+                  />
-                  </React.Fragment>
                 );
               })}
             </ul>) :
@@ -217,8 +216,7 @@ class CommentPanel extends React.Component {
             />
           </MentionsInput>
           <div className="comment-submit-container">
-            <Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>
+            <Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>{gettext('Submit')}</Button>
-              {gettext('Submit')}</Button>
           </div>
         </div>
       </div>

frontend/src/css/comments-list.css

@@ -3,7 +3,6 @@
   border-left: 1px solid #e6e6dd;
   display: flex;
   flex-direction: column;
-  width: 29%;
 }
 .seafile-comment-title,
 .seafile-history-title {
@@ -28,9 +27,6 @@
 .seafile-history-title .seafile-history-title-close:hover {
   color: #888;
 }
-.seafile-comment-list {
-  overflow-y: auto;
-}
 .seafile-comment-item {
   padding: 15px 10px;
   margin-bottom: 0;
@@ -133,9 +129,6 @@
 .detail-comments {
   border-left: 0;
 }
-.detail-comments .seafile-comment-list {
-  margin-top: 0;
-}
 .detail-comments .seafile-comment-footer {
   min-height: 175px;
 }

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