improve PageComments component layout

resource/css/_comment.scss

@@ -1,3 +1,6 @@
+// import crowi variable
+@import 'utilities';
+
 .crowi.main-container {
   .page-comment-delete-modal .modal-content {
     .modal-body {
@@ -40,14 +43,6 @@
   }
 
   .page-comments-list {
-    .page-comments-list-toggle-newer,
-    .page-comments-list-toggle-older {
-      text-align: center;
-      display: block;
-      margin: 8px;
-      font-size: .9em;
-      color: #999;
-    }
     .page-comment {
       margin-top: 8px;
       padding-top: 8px;
@@ -110,7 +105,28 @@
 
     }
 
-    .page-comment.page-comment-old {
+  }
+}
+
+} // .crowi.main-container aside.sidebar .side-content
+
+.crowi.main-container {
+  .page-comments {
+
+    .page-comments-list-toggle-newer,
+    .page-comments-list-toggle-older {
+      text-align: center;
+      display: block;
+      margin: 8px;
+      font-size: .9em;
+      color: #999;
+    }
+
+    // older comments
+    .page-comments-list-older .page-comment {
+    }
+    // newer comments
+    .page-comments-list-newer .page-comment {
       opacity: .7;
 
       &:hover {
@@ -119,5 +135,3 @@
     }
   }
 }
-
-} // .crowi.main-container aside.sidebar .side-content

resource/css/_comment_crowi-plus.scss

@@ -87,14 +87,6 @@
     display: block;
   }
 
-  .page-comment-old {
-    opacity: .7;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
   .comment-form {
     position: relative;
     margin-top: 2em;

resource/js/components/PageComment/Comment.js

@@ -36,8 +36,7 @@ export default class Comment extends React.Component {
 
   getRootClassName() {
     return "page-comment "
-        + (this.isCurrentUserEqualsToAuthor() ? 'page-comment-me' : '')
-        + (this.isCurrentRevision() ? '': 'page-comment-old');
+        + (this.isCurrentUserEqualsToAuthor() ? 'page-comment-me ' : '');
   }
 
   getRevisionLabelClassName() {

resource/js/components/PageComments.js

@@ -21,6 +21,8 @@ export default class PageComments extends React.Component {
     this.state = {
       comments: [],
 
+      isLayoutTypeCrowiPlus: false,
+
       // for deleting comment
       commentToDelete: undefined,
       isDeleteConfirmModalShown: false,
@@ -49,6 +51,10 @@ export default class PageComments extends React.Component {
 
     const pageId = this.props.pageId;
 
+    const layoutType = this.props.crowi.getConfig()['layoutType'];
+    this.setState({isLayoutTypeCrowiPlus: 'crowi-plus' === layoutType});
+
+    // get data
     this.props.crowi.apiGet('/comments.get', {page_id: pageId})
     .then(res => {
       if (res.ok) {
@@ -142,38 +148,72 @@ export default class PageComments extends React.Component {
     });
 
     // generate elements
-    let currentElements = this.generateCommentElements(currentComments);
-    let newerElements = this.generateCommentElements(newerComments);
-    let olderElements = this.generateCommentElements(olderComments);
+    const currentElements = this.generateCommentElements(currentComments);
+    const newerElements = this.generateCommentElements(newerComments);
+    const olderElements = this.generateCommentElements(olderComments);
+    // generate blocks
+    const currentBlock = (
+      <div className="page-comments-list-current" id="page-comments-list-current">
+        {currentElements}
+      </div>
+    );
+    const newerBlock = (
+      <div className="page-comments-list-newer collapse" id="page-comments-list-newer">
+        {newerElements}
+      </div>
+    );
+    const olderBlock = (
+      <div className="page-comments-list-older collapse in" id="page-comments-list-older">
+        {olderElements}
+      </div>
+    );
 
-    let toggleNewer = (newerElements.length === 0)
+    // generate toggle elements
+    const iconForNewer = (this.state.isLayoutTypeCrowiPlus)
+      ? <i className="fa fa-angle-double-down"></i>
+      : <i className="fa fa-angle-double-up"></i>;
+    const toggleNewer = (newerElements.length === 0)
       ? <div></div>
       : (
         <a className="page-comments-list-toggle-newer text-center" data-toggle="collapse" href="#page-comments-list-newer">
-          <i className="fa fa-angle-double-up"></i> Comments for Newer Revision <i className="fa fa-angle-double-up"></i>
+          {iconForNewer} Comments for Newer Revision {iconForNewer}
         </a>
-      )
-    let toggleOlder = (olderElements.length === 0)
+      );
+    const iconForOlder = (this.state.isLayoutTypeCrowiPlus)
+      ? <i className="fa fa-angle-double-up"></i>
+      : <i className="fa fa-angle-double-down"></i>;
+    const toggleOlder = (olderElements.length === 0)
       ? <div></div>
       : (
         <a className="page-comments-list-toggle-older text-center" data-toggle="collapse" href="#page-comments-list-older">
-          <i className="fa fa-angle-double-down"></i> Comments for Older Revision <i className="fa fa-angle-double-down"></i>
+          {iconForOlder} Comments for Older Revision {iconForOlder}
         </a>
+      );
+
+    // layout blocks
+    const commentsElements = (this.state.isLayoutTypeCrowiPlus)
+      ? (
+        <div>
+          {olderBlock}
+          {toggleOlder}
+          {currentBlock}
+          {toggleNewer}
+          {newerBlock}
+        </div>
       )
+      : (
+        <div>
+          {newerBlock}
+          {toggleNewer}
+          {currentBlock}
+          {toggleOlder}
+          {olderBlock}
+        </div>
+      );
 
     return (
       <div>
-        <div className="page-comments-list-newer collapse" id="page-comments-list-newer">
-          {newerElements}
-        </div>
-        {toggleNewer}
-        <div className="page-comments-list-current" id="page-comments-list-current">
-          {currentElements}
-        </div>
-        {toggleOlder}
-        <div className="page-comments-list-older collapse in" id="page-comments-list-older">
-          {olderElements}
-        </div>
+        {commentsElements}
 
         <DeleteCommentModal
           isShown={this.state.isDeleteConfirmModalShown}