clean code

packages/app/src/components/PageComment.module.scss

@@ -2,11 +2,11 @@
 
 // TODO: _comment_growi.scss, need to find where using h4 class.
 .page-comment-module :global {
-  .page-comments {
-    h4 {
-      margin-bottom: 1em;
-    }
-  }
+  // .page-comments {
+  //   h4 {
+  //     margin-bottom: 1em;
+  //   }
+  // }
 
   // reply button
   .btn-comment-reply {

packages/app/src/components/PageComment/Comment.module.scss

@@ -33,89 +33,103 @@
   }
 }
 
-.page-comment-writer :global {
-  @include bs.media-breakpoint-down(xs) {
-    height: 3.5em;
-  }
+// TODO: Never use this class. From _comment.scss
+.page-comments {
+  // .page-comments-list-toggle-older {
+  //   display: inline-block;
+  //   font-size: 0.9em;
+  // }
+  // .page-comment {
+  //   padding-top: 50px;
+  //   margin-top: -50px;
+  //   pointer-events: none;
+  // }
 }
 
-.page-comment :global {
-  position: relative;
-  padding-top: 70px;
-  margin-top: -70px;
-  pointer-events: none;
-
-  // ユーザー名
-  .page-comment-creator {
-    margin-top: -0.5em;
-    margin-bottom: 0.5em;
-    font-weight: bold;
-  }
-
-  // ユーザーアイコン
-  .picture {
-    @extend %picture;
+.comment-styles :global {
+  .page-comment-writer {
+    @include bs.media-breakpoint-down(xs) {
+      height: 3.5em;
+    }
   }
 
+  .page-comment {
+    position: relative;
+    padding-top: 70px;
+    margin-top: -70px;
+    pointer-events: none;
+
+    // ユーザー名
+    .page-comment-creator {
+      margin-top: -0.5em;
+      margin-bottom: 0.5em;
+      font-weight: bold;
+    }
 
-  // コメントセクション
-  .page-comment-main {
-    @extend %comment-section;
-    @include bs.media-breakpoint-up(sm) {
-      margin-left: 4.5em;
+    // ユーザーアイコン
+    .picture {
+      @extend %picture;
     }
-    @include bs.media-breakpoint-down(xs) {
-      &:before {
-        content: none;
+
+    // コメントセクション
+    .page-comment-main {
+      @extend %comment-section;
+      @include bs.media-breakpoint-up(sm) {
+        margin-left: 4.5em;
+      }
+      @include bs.media-breakpoint-down(xs) {
+        &:before {
+          content: none;
+        }
+      }
+      // TODO: from _comment.scss ###
+      pointer-events: auto;
+
+      // delete button
+      .page-comment-control {
+        position: absolute;
+        top: 0;
+        right: 0;
+        visibility: hidden;
       }
-    }
-    // TODO: from _comment.scss ###
-    pointer-events: auto;
-
-    // delete button
-    .page-comment-control {
-      position: absolute;
-      top: 0;
-      right: 0;
-      visibility: hidden;
-    }
 
-    &:hover > .page-comment-control {
-      visibility: visible;
+      &:hover > .page-comment-control {
+        visibility: visible;
+      }
+      // ###
     }
-    // ###
-  }
 
-  // コメント本文
-  .page-comment-body {
-    margin-bottom: 0.5em;
-    word-wrap: break-word;
-  }
+    // コメント本文
+    .page-comment-body {
+      margin-bottom: 0.5em;
+      word-wrap: break-word;
+    }
 
-  // // TODO: from _comment.scss ###
-  // // older comments
-  // &.page-comment-older {
-  // }
-  // // newer comments
-  // &.page-comment-newer {
-  //   opacity: 0.7;
+    // TODO: from _comment.scss ###
+    // older comments
+    &.page-comment-older {
+    }
+    // newer comments
+    &.page-comment-newer {
+      opacity: 0.7;
 
-  //   &:hover {
-  //     opacity: 1;
-  //   }
-  // }
+      &:hover {
+        opacity: 1;
+      }
+    }
 
-  .page-comment-meta {
-    display: flex;
-    justify-content: flex-end;
+    .page-comment-meta {
+      display: flex;
+      justify-content: flex-end;
 
-    font-size: 0.9em;
-    color: bs.$gray-400;
-  }
+      font-size: 0.9em;
+      color: bs.$gray-400;
+    }
 
-  .page-comment-revision svg {
-    width: 16px;
-    height: 16px;
+    .page-comment-revision svg {
+      width: 16px;
+      height: 16px;
+    }
+    // ###
   }
-  // ###
 }

packages/app/src/components/PageComment/Comment.tsx

@@ -70,7 +70,7 @@ export const Comment = (props: CommentProps): JSX.Element => {
   };
 
   const getRootClassName = (comment: ICommentHasId) => {
-    let className = `${styles['page-comment']} page-comment flex-column`;
+    let className = 'page-comment flex-column';
 
     if (comment.revision === currentRevisionId) {
       className += ' page-comment-current';
@@ -132,8 +132,8 @@ export const Comment = (props: CommentProps): JSX.Element => {
           }}
         />
       ) : (
-        <div id={commentId} className={rootClassName}>
-          <div className={`${styles['page-comment-writer']} page-comment-writer`}>
+        <div id={commentId} className={`${styles['comment-styles']} ${rootClassName}`}>
+          <div className="page-comment-writer">
             <UserPicture user={creator} noLink noTooltip />
           </div>
           <div className="page-comment-main">

packages/app/src/components/PageComment/CommentEditor.module.scss

@@ -34,41 +34,43 @@
 }
 
 // display cheatsheet for comment form only
-.comment-form :global {
-  .editor-cheatsheet {
-    display: none;
-  }
+.comment-editor-styles :global {
+  .comment-form {
+    // .editor-cheatsheet {
+    //   display: none;
+    // }
 
-  position: relative;
-  margin-top: 1em;
+    position: relative;
+    margin-top: 1em;
 
-  // user icon
-  .picture {
-    @extend %picture;
-  }
+    // user icon
+    .picture {
+      @extend %picture;
+    }
 
-  // seciton
-  .comment-form-main {
-    @extend %comment-section;
-    margin-left: 4.5em;
-    @include bs.media-breakpoint-down(xs) {
-      margin-left: 3.5em;
+    // seciton
+    .comment-form-main {
+      @extend %comment-section;
+      margin-left: 4.5em;
+      @include bs.media-breakpoint-down(xs) {
+        margin-left: 3.5em;
+      }
     }
-  }
 
-  // textarea
-  .comment-write {
-    margin-bottom: 0.5em;
-  }
-  .comment-form-comment {
-    height: 80px;
-    &:focus,
-    &:not(:invalid) {
-      height: 180px;
-      transition: height 0.2s ease-out;
+    // textarea
+    .comment-write {
+      margin-bottom: 0.5em;
+    }
+    // .comment-form-comment {
+    //   height: 80px;
+    //   &:focus,
+    //   &:not(:invalid) {
+    //     height: 180px;
+    //     transition: height 0.2s ease-out;
+    //   }
+    // }
+    .comment-form-preview {
+      padding-top: 0.5em;
     }
-  }
-  .comment-form-preview {
-    padding-top: 0.5em;
   }
 }

packages/app/src/components/PageComment/CommentEditor.tsx

@@ -330,8 +330,8 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
   };
 
   return (
-    <div className="form page-comment-form">
-      <div className={`${styles['comment-form']} comment-form`}>
+    <div className={`${styles['comment-editor-styles']} form page-comment-form`}>
+      <div className="comment-form">
         <div className="comment-form-user">
           <UserPicture user={currentUser} noLink noTooltip />
         </div>

packages/app/src/styles/_comment.scss

@@ -9,57 +9,57 @@
   }
 }
 
-.page-comments {
-  .page-comments-list-toggle-older {
-    display: inline-block;
-    font-size: 0.9em;
-  }
-  .page-comment {
-    padding-top: 50px;
-    margin-top: -50px;
-    pointer-events: none;
-  }
+// .page-comments {
+//   // .page-comments-list-toggle-older {
+//   //   display: inline-block;
+//   //   font-size: 0.9em;
+//   // }
+//   // .page-comment {
+//   //   padding-top: 50px;
+//   //   margin-top: -50px;
+//   //   pointer-events: none;
+//   // }
 
-  .page-comment {
-    // older comments
-    &.page-comment-older {
-    }
-    // newer comments
-    &.page-comment-newer {
-      opacity: 0.7;
+//   .page-comment {
+//     // older comments
+//     &.page-comment-older {
+//     }
+//     // newer comments
+//     &.page-comment-newer {
+//       opacity: 0.7;
 
-      &:hover {
-        opacity: 1;
-      }
-    }
+//       &:hover {
+//         opacity: 1;
+//       }
+//     }
 
-    .page-comment-meta {
-      display: flex;
-      justify-content: flex-end;
+//     .page-comment-meta {
+//       display: flex;
+//       justify-content: flex-end;
 
-      font-size: 0.9em;
-      color: $gray-400;
-    }
+//       font-size: 0.9em;
+//       color: $gray-400;
+//     }
 
-    .page-comment-revision svg {
-      width: 16px;
-      height: 16px;
-    }
-  }
+//     .page-comment-revision svg {
+//       width: 16px;
+//       height: 16px;
+//     }
+//   }
 
-  .page-comment-main {
-    pointer-events: auto;
+//   .page-comment-main {
+//     pointer-events: auto;
 
-    // delete button
-    .page-comment-control {
-      position: absolute;
-      top: 0;
-      right: 0;
-      visibility: hidden;
-    }
+//     // delete button
+//     .page-comment-control {
+//       position: absolute;
+//       top: 0;
+//       right: 0;
+//       visibility: hidden;
+//     }
 
-    &:hover > .page-comment-control {
-      visibility: visible;
-    }
-  }
-}
+//     &:hover > .page-comment-control {
+//       visibility: visible;
+//     }
+//   }
+// }

packages/app/src/styles/_comment_growi.scss

@@ -1,139 +1,139 @@
-.growi {
-  %comment-section {
-    position: relative;
-    padding: 1em;
-
-    // speech balloon
-    &:before {
-      position: absolute;
-      top: 1.5em;
-      left: -1em;
-      display: block;
-      width: 0;
-      content: '';
-      border: 1em solid transparent;
-      border-left-width: 0;
-
-      @include media-breakpoint-down(xs) {
-        top: 1em;
-      }
-    }
-  }
-
-  %picture {
-    float: left;
-    width: 3em;
-    height: 3em;
-    margin-top: 0.8em;
-
-    @include media-breakpoint-down(xs) {
-      width: 2em;
-      height: 2em;
-    }
-  }
-
-  .page-comments {
-    h4 {
-      margin-bottom: 1em;
-    }
-  }
-
-  .page-comment-writer {
-    @include media-breakpoint-down(xs) {
-      height: 3.5em;
-    }
-  }
-
-  .page-comment {
-    position: relative;
-    padding-top: 70px;
-    margin-top: -70px;
-
-    // ユーザー名
-    .page-comment-creator {
-      margin-top: -0.5em;
-      margin-bottom: 0.5em;
-      font-weight: bold;
-    }
-
-    // ユーザーアイコン
-    .picture {
-      @extend %picture;
-    }
-
-    // コメントセクション
-    .page-comment-main {
-      @extend %comment-section;
-      @include media-breakpoint-up(sm) {
-        margin-left: 4.5em;
-      }
-      @include media-breakpoint-down(xs) {
-        &:before {
-          content: none;
-        }
-      }
-    }
-
-    // コメント本文
-    .page-comment-body {
-      margin-bottom: 0.5em;
-      word-wrap: break-word;
-    }
-  }
-
-  /*
-   * reply
-   */
-  .page-comment-reply {
-    margin-top: 1em;
-  }
-  // remove margin after hidden replies
-  .page-comments-hidden-replies + .page-comment-reply {
-    margin-top: 0;
-  }
-  // reply button
-  .btn.btn-comment-reply {
-    margin-top: 0.5em;
-    border: none;
-  }
-
-  // display cheatsheet for comment form only
-  .comment-form {
-    .editor-cheatsheet {
-      display: none;
-    }
-
-    position: relative;
-    margin-top: 1em;
-
-    // user icon
-    .picture {
-      @extend %picture;
-    }
-
-    // seciton
-    .comment-form-main {
-      @extend %comment-section;
-      margin-left: 4.5em;
-      @include media-breakpoint-down(xs) {
-        margin-left: 3.5em;
-      }
-    }
-
-    // textarea
-    .comment-write {
-      margin-bottom: 0.5em;
-    }
-    .comment-form-comment {
-      height: 80px;
-      &:focus,
-      &:not(:invalid) {
-        height: 180px;
-        transition: height 0.2s ease-out;
-      }
-    }
-    .comment-form-preview {
-      padding-top: 0.5em;
-    }
-  }
+// .growi {
+//   %comment-section {
+//     position: relative;
+//     padding: 1em;
+
+//     // speech balloon
+//     &:before {
+//       position: absolute;
+//       top: 1.5em;
+//       left: -1em;
+//       display: block;
+//       width: 0;
+//       content: '';
+//       border: 1em solid transparent;
+//       border-left-width: 0;
+
+//       @include media-breakpoint-down(xs) {
+//         top: 1em;
+//       }
+//     }
+//   }
+
+//   %picture {
+//     float: left;
+//     width: 3em;
+//     height: 3em;
+//     margin-top: 0.8em;
+
+//     @include media-breakpoint-down(xs) {
+//       width: 2em;
+//       height: 2em;
+//     }
+//   }
+
+//   .page-comments {
+//     h4 {
+//       margin-bottom: 1em;
+//     }
+//   }
+
+  // .page-comment-writer {
+  //   @include media-breakpoint-down(xs) {
+  //     height: 3.5em;
+  //   }
+  // }
+
+  // .page-comment {
+  //   position: relative;
+  //   padding-top: 70px;
+  //   margin-top: -70px;
+
+  //   // ユーザー名
+  //   .page-comment-creator {
+  //     margin-top: -0.5em;
+  //     margin-bottom: 0.5em;
+  //     font-weight: bold;
+  //   }
+
+  //   // ユーザーアイコン
+  //   .picture {
+  //     @extend %picture;
+  //   }
+
+  //   // コメントセクション
+  //   .page-comment-main {
+  //     @extend %comment-section;
+  //     @include media-breakpoint-up(sm) {
+  //       margin-left: 4.5em;
+  //     }
+  //     @include media-breakpoint-down(xs) {
+  //       &:before {
+  //         content: none;
+  //       }
+  //     }
+  //   }
+
+  //   // コメント本文
+  //   .page-comment-body {
+  //     margin-bottom: 0.5em;
+  //     word-wrap: break-word;
+  //   }
+  // }
+
+  // /*
+  //  * reply
+  //  */
+  // .page-comment-reply {
+  //   margin-top: 1em;
+  // }
+  // // remove margin after hidden replies
+  // .page-comments-hidden-replies + .page-comment-reply {
+  //   margin-top: 0;
+  // }
+  // // reply button
+  // .btn.btn-comment-reply {
+  //   margin-top: 0.5em;
+  //   border: none;
+  // }
+
+  // // display cheatsheet for comment form only
+  // .comment-form {
+  //   .editor-cheatsheet {
+  //     display: none;
+  //   }
+
+  //   position: relative;
+  //   margin-top: 1em;
+
+  //   // user icon
+  //   .picture {
+  //     @extend %picture;
+  //   }
+
+  //   // seciton
+  //   .comment-form-main {
+  //     @extend %comment-section;
+  //     margin-left: 4.5em;
+  //     @include media-breakpoint-down(xs) {
+  //       margin-left: 3.5em;
+  //     }
+  //   }
+
+  //   // textarea
+  //   .comment-write {
+  //     margin-bottom: 0.5em;
+  //   }
+  //   .comment-form-comment {
+  //     height: 80px;
+  //     &:focus,
+  //     &:not(:invalid) {
+  //       height: 180px;
+  //       transition: height 0.2s ease-out;
+  //     }
+  //   }
+  //   .comment-form-preview {
+  //     padding-top: 0.5em;
+  //   }
+  // }
 }