imported scss

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

@@ -0,0 +1,87 @@
+@use '~/styles/bootstrap/init' as bs;
+
+$bgcolor-global: white;
+
+.page-comments :global {
+  /*
+  * GROWI comment form
+  */
+  .page-comment .page-comment-main,
+  .page-comment-form .comment-form-main {
+    background-color: $bgcolor-global;
+
+    &:before {
+      border-right-color: $bgcolor-global;
+    }
+
+    .nav.nav-tabs {
+      > li > a.active {
+        background: transparent;
+        border-bottom: solid 1px darken($bgcolor-global, 4%);
+        border-bottom-color: darken($bgcolor-global, 4%);
+      }
+    }
+  }
+
+
+  .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;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    .page-comment-meta {
+      display: flex;
+      justify-content: flex-end;
+
+      font-size: 0.9em;
+      color: bs.$gray-400;
+    }
+
+    .page-comment-revision svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .page-comment-main {
+    pointer-events: auto;
+
+    // delete button
+    .page-comment-control {
+      position: absolute;
+      top: 0;
+      right: 0;
+      visibility: hidden;
+    }
+
+    &:hover > .page-comment-control {
+      visibility: visible;
+    }
+  }
+}
+
+
+// reply button
+.btn.btn-comment-reply :global {
+  margin-top: 0.5em;
+  border: none;
+}
+

packages/app/src/components/PageComment.tsx

@@ -15,9 +15,12 @@ import { useSWRxPageComment } from '../stores/comment';
 
 import { Comment } from './PageComment/Comment';
 import { CommentEditor } from './PageComment/CommentEditor';
+import { CommentEditorLazyRenderer } from './PageComment/CommentEditorLazyRenderer';
 import DeleteCommentModal from './PageComment/DeleteCommentModal';
 import { ReplayComments } from './PageComment/ReplayComments';
 
+import styles from './PageComment.module.scss';
+
 type Props = {
   isReadOnly: boolean,
   titleAlign?: 'center' | 'left' | 'right',
@@ -155,9 +158,9 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
 
   return (
     <>
-      <div className="page-comments-row comment-list">
+      <div className="page-comments-row comment-list mt-5 py-4 d-edit-none d-print-none">
         <div className="container-lg">
-          <div className="page-comments">
+          <div className={`${styles['page-comments']}`}>
             <h2 className={commentTitleClasses}><i className="icon-fw icon-bubbles"></i>Comments</h2>
             <div className="page-comments-list" id="page-comments-list">
               { commentsExceptReply.map((comment) => {
@@ -181,7 +184,7 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
                           outline
                           color="secondary"
                           size="sm"
-                          className="btn-comment-reply"
+                          className={`${styles['btn-comment-reply']}`}
                           onClick={() => {
                             setShowEditorIds(previousState => new Set(previousState.add(comment._id)));
                           }}
@@ -208,7 +211,10 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
                 );
 
               })}
+
             </div>
+            {/* TODO: Check if identical-page */}
+            <CommentEditorLazyRenderer />
           </div>
         </div>
       </div>

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

@@ -0,0 +1,91 @@
+@use '../../styles/bootstrap/init' as bs;
+
+$bgcolor-global: white;
+
+%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 bs.media-breakpoint-down(xs) {
+      top: 1em;
+    }
+  }
+}
+
+%picture {
+  float: left;
+  width: 3em;
+  height: 3em;
+  margin-top: 0.8em;
+
+  @include bs.media-breakpoint-down(xs) {
+    width: 2em;
+    height: 2em;
+  }
+}
+
+.page-comment :global {
+  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 bs.media-breakpoint-up(sm) {
+      margin-left: 4.5em;
+    }
+    @include bs.media-breakpoint-down(xs) {
+      &:before {
+        content: none;
+      }
+    }
+
+
+    /*
+      * GROWI comment form
+    */
+    background-color: $bgcolor-global;
+
+    &:before {
+      border-right-color: $bgcolor-global;
+    }
+
+    .nav.nav-tabs {
+      > li > a.active {
+        background: transparent;
+        border-bottom: solid 1px darken($bgcolor-global, 4%);
+        border-bottom-color: darken($bgcolor-global, 4%);
+      }
+    }
+  }
+
+  // コメント本文
+  .page-comment-body {
+    margin-bottom: 0.5em;
+    word-wrap: break-word;
+  }
+}

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

@@ -17,6 +17,8 @@ import Username from '../User/Username';
 import CommentControl from './CommentControl';
 import { CommentEditor } from './CommentEditor';
 
+import styles from './Comment.module.scss';
+
 type CommentProps = {
   comment: ICommentHasId,
   isReadOnly: boolean,
@@ -68,7 +70,7 @@ export const Comment = (props: CommentProps): JSX.Element => {
   };
 
   const getRootClassName = (comment) => {
-    let className = 'page-comment flex-column';
+    let className = ` ${styles['page-comment']} flex-column`;
 
     if (comment.revision === currentRevisionId) {
       className += ' page-comment-current';

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

@@ -0,0 +1,74 @@
+@use '~/styles/bootstrap/init' as bs;
+
+%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 bs.media-breakpoint-down(xs) {
+      top: 1em;
+    }
+  }
+}
+
+%picture {
+  float: left;
+  width: 3em;
+  height: 3em;
+  margin-top: 0.8em;
+
+  @include bs.media-breakpoint-down(xs) {
+    width: 2em;
+    height: 2em;
+  }
+}
+
+// display cheatsheet for comment form only
+.comment-form :global {
+  .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 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;
+    }
+  }
+  .comment-form-preview {
+    padding-top: 0.5em;
+  }
+}

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

@@ -19,13 +19,15 @@ import {
 import { useSWRxSlackChannels, useIsSlackEnabled } from '~/stores/editor';
 import { useIsMobile } from '~/stores/ui';
 
-
 import { CustomNavTab } from '../CustomNavigation/CustomNav';
 import NotAvailableForGuest from '../NotAvailableForGuest';
 import { SlackNotification } from '../SlackNotification';
 
 import { CommentPreview } from './CommentPreview';
 
+import styles from './CommentEditor.module.scss';
+
+
 const navTabMapping = {
   comment_editor: {
     Icon: () => <i className="icon-settings" />,
@@ -332,7 +334,7 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
 
   return (
     <div className="form page-comment-form">
-      <div className="comment-form">
+      <div className={`${styles['comment-form']}`}>
         <div className="comment-form-user">
           <UserPicture user={currentUser} noLink noTooltip />
         </div>

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

@@ -0,0 +1,11 @@
+/*
+  * reply
+  */
+.page-comment-reply :global {
+  margin-top: 1em;
+}
+
+// remove margin after hidden replies
+.page-comments-hidden-replies + .page-comment-reply :global {
+  margin-top: 0;
+}

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

@@ -10,6 +10,8 @@ import { useIsAllReplyShown } from '../../stores/context';
 
 import { Comment } from './Comment';
 
+import styles from './ReplayComment.module.scss';
+
 type ReplaycommentsProps = {
   isReadOnly: boolean,
   replyList: ICommentHasIdList,
@@ -34,7 +36,7 @@ export const ReplayComments = (props: ReplaycommentsProps): JSX.Element => {
 
   const renderReply = (reply: ICommentHasId) => {
     return (
-      <div key={reply._id} className="page-comment-reply ml-4 ml-sm-5 mr-3">
+      <div key={reply._id} className={`${styles['page-comment-reply']} ml-4 ml-sm-5 mr-3`}>
         <Comment
           rendererOptions={rendererOptions}
           deleteBtnClicked={deleteBtnClicked}
@@ -77,7 +79,7 @@ export const ReplayComments = (props: ReplaycommentsProps): JSX.Element => {
   return (
     <>
       {areThereHiddenReplies && (
-        <div className="page-comments-hidden-replies">
+        <div className={`${styles['page-comments-hidden-replies']}`}>
           <Collapse isOpen={isOlderRepliesShown}>
             <div>{hiddenElements}</div>
           </Collapse>

packages/app/src/pages/[[...path]].page.tsx

@@ -20,7 +20,6 @@ import superjson from 'superjson';
 import { PageAlerts } from '~/components/PageAlert/PageAlerts';
 import { PageComment } from '~/components/PageComment';
 // import { useTranslation } from '~/i18n';
-import { CommentEditorLazyRenderer } from '~/components/PageComment/CommentEditorLazyRenderer';
 import { PageContentFooter } from '~/components/PageContentFooter';
 import { CrowiRequest } from '~/interfaces/crowi-request';
 // import { renderScriptTagByName, renderHighlightJsStyleTag } from '~/service/cdn-resources-loader';
@@ -328,7 +327,6 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
         <footer>
           {/* <PageComments /> */}
           <PageComment isReadOnly={false} titleAlign="left" />
-          <CommentEditorLazyRenderer />
           <PageContentFooter />
         </footer>