adjust layout

src/client/js/components/PageComment/CommentEditor.jsx

@@ -36,7 +36,6 @@ class CommentEditor extends React.Component {
     const isUploadableFile = config.upload.file;
 
     this.state = {
-      isLayoutTypeGrowi: false,
       comment: '',
       isMarkdown: true,
       html: '',
@@ -60,15 +59,6 @@ class CommentEditor extends React.Component {
     this.toggleEditor = this.toggleEditor.bind(this);
   }
 
-  componentWillMount() {
-    this.init();
-  }
-
-  init() {
-    const layoutType = this.props.appContainer.getConfig().layoutType;
-    this.setState({ isLayoutTypeGrowi: layoutType === 'crowi-plus' || layoutType === 'growi' });
-  }
-
   updateState(value) {
     this.setState({ comment: value });
   }
@@ -214,7 +204,8 @@ class CommentEditor extends React.Component {
     const commentPreview = this.state.isMarkdown ? this.getCommentHtml() : null;
     const emojiStrategy = appContainer.getEmojiStrategy();
 
-    const isLayoutTypeGrowi = this.state.isLayoutTypeGrowi;
+    const layoutType = this.props.appContainer.getConfig().layoutType;
+    const isBaloonStyle = layoutType.match(/crowi-plus|growi|kibela/);
 
     const errorMessage = <span className="text-danger text-right mr-2">{this.state.errorMessage}</span>;
     const submitButton = (
@@ -229,98 +220,86 @@ class CommentEditor extends React.Component {
 
     return (
       <div className="form page-comment-form">
-
-        { username
-          && (
-          <div className="comment-form">
-            { isLayoutTypeGrowi
-              && (
-              <div className="comment-form-user">
-                <UserPicture user={user} />
-              </div>
-              )
-            }
-            <div className="comment-form-main">
-              <div className="comment-write">
-                <Tabs activeKey={this.state.key} id="comment-form-tabs" onSelect={this.handleSelect} animation={false}>
-                  <Tab eventKey={1} title="Write">
-                    <Editor
-                      ref={(c) => { this.editor = c }}
-                      value={this.state.comment}
-                      isGfmMode={this.state.isMarkdown}
-                      lineNumbers={false}
-                      isMobile={appContainer.isMobile}
-                      isUploadable={this.state.isUploadable && this.state.isLayoutTypeGrowi} // enable only when GROWI layout
-                      isUploadableFile={this.state.isUploadableFile}
-                      emojiStrategy={emojiStrategy}
-                      onChange={this.updateState}
-                      onUpload={this.uploadHandler}
-                      onCtrlEnter={this.postHandler}
-                    />
+        <div className="comment-form">
+          { isBaloonStyle && (
+            <div className="comment-form-user">
+              <UserPicture user={user} />
+            </div>
+          ) }
+          <div className="comment-form-main">
+            <div className="comment-write">
+              <Tabs activeKey={this.state.key} id="comment-form-tabs" onSelect={this.handleSelect} animation={false}>
+                <Tab eventKey={1} title="Write">
+                  <Editor
+                    ref={(c) => { this.editor = c }}
+                    value={this.state.comment}
+                    isGfmMode={this.state.isMarkdown}
+                    lineNumbers={false}
+                    isMobile={appContainer.isMobile}
+                    isUploadable={this.state.isUploadable && this.state.isLayoutTypeGrowi} // enable only when GROWI layout
+                    isUploadableFile={this.state.isUploadableFile}
+                    emojiStrategy={emojiStrategy}
+                    onChange={this.updateState}
+                    onUpload={this.uploadHandler}
+                    onCtrlEnter={this.postHandler}
+                  />
+                </Tab>
+                { this.state.isMarkdown && (
+                  <Tab eventKey={2} title="Preview">
+                    <div className="comment-form-preview">
+                      {commentPreview}
+                    </div>
                   </Tab>
-                  { this.state.isMarkdown
-                    && (
-                    <Tab eventKey={2} title="Preview">
-                      <div className="comment-form-preview">
-                        {commentPreview}
-                      </div>
-                    </Tab>
-                    )
-                  }
-                </Tabs>
-              </div>
-              <div className="comment-submit">
-                <div className="d-flex">
-                  <label style={{ flex: 1 }}>
-                    { isLayoutTypeGrowi && this.state.key === 1
-                      && (
-                      <span>
-                        <input
-                          type="checkbox"
-                          id="comment-form-is-markdown"
-                          name="isMarkdown"
-                          checked={this.state.isMarkdown}
-                          value="1"
-                          onChange={this.updateStateCheckbox}
-                        />
-                        <span className="ml-2">Markdown</span>
-                      </span>
-                      )
-                  }
-                  </label>
-                  <span className="hidden-xs">{ this.state.errorMessage && errorMessage }</span>
-                  { this.state.hasSlackConfig
-                    && (
-                    <div className="form-inline align-self-center mr-md-2">
-                      <SlackNotification
-                        isSlackEnabled={commentContainer.state.isSlackEnabled}
-                        slackChannels={commentContainer.state.slackChannels}
-                        onEnabledFlagChange={this.onSlackEnabledFlagChange}
-                        onChannelChange={this.onSlackChannelsChange}
+                ) }
+              </Tabs>
+            </div>
+            <div className="comment-submit">
+              <div className="d-flex">
+                <label style={{ flex: 1 }}>
+                  { isBaloonStyle && this.state.key === 1 && (
+                    <span>
+                      <input
+                        type="checkbox"
+                        id="comment-form-is-markdown"
+                        name="isMarkdown"
+                        checked={this.state.isMarkdown}
+                        value="1"
+                        onChange={this.updateStateCheckbox}
                       />
-                    </div>
-                    )
-                  }
-                  <div>
-                    <Button bsStyle="danger" className="fcbtn btn btn-xs btn-danger btn-outline btn-rounded" onClick={this.toggleEditor}>
-                      Cancel
-                    </Button>
+                      <span className="ml-2">Markdown</span>
+                    </span>
+                  ) }
+                </label>
+                <span className="hidden-xs">{ this.state.errorMessage && errorMessage }</span>
+                { this.state.hasSlackConfig
+                  && (
+                  <div className="form-inline align-self-center mr-md-2">
+                    <SlackNotification
+                      isSlackEnabled={commentContainer.state.isSlackEnabled}
+                      slackChannels={commentContainer.state.slackChannels}
+                      onEnabledFlagChange={this.onSlackEnabledFlagChange}
+                      onChannelChange={this.onSlackChannelsChange}
+                    />
                   </div>
-                  &nbsp;&nbsp;&nbsp;&nbsp;
-                  <div className="hidden-xs">{submitButton}</div>
+                  )
+                }
+                <div>
+                  <Button bsStyle="danger" className="fcbtn btn btn-xs btn-danger btn-outline btn-rounded" onClick={this.toggleEditor}>
+                    Cancel
+                  </Button>
                 </div>
-                <div className="visible-xs mt-2">
-                  <div className="d-flex justify-content-end">
-                    { this.state.errorMessage && errorMessage }
-                    <div>{submitButton}</div>
-                  </div>
+                &nbsp;&nbsp;&nbsp;&nbsp;
+                <div className="hidden-xs">{submitButton}</div>
+              </div>
+              <div className="visible-xs mt-2">
+                <div className="d-flex justify-content-end">
+                  { this.state.errorMessage && errorMessage }
+                  <div>{submitButton}</div>
                 </div>
               </div>
             </div>
           </div>
-          )
-        }
-
+        </div>
       </div>
     );
   }

src/client/js/components/PageComment/CommentEditorLazyRenderer.jsx

@@ -14,7 +14,6 @@ class CommentEditorLazyRenderer extends React.Component {
 
     this.state = {
       isEditorShown: false,
-      isLayoutTypeGrowi: false,
     };
 
     this.growiRenderer = this.props.appContainer.getRenderer('comment');
@@ -22,15 +21,6 @@ class CommentEditorLazyRenderer extends React.Component {
     this.showCommentFormBtnClickHandler = this.showCommentFormBtnClickHandler.bind(this);
   }
 
-  componentWillMount() {
-    this.init();
-  }
-
-  init() {
-    const layoutType = this.props.appContainer.getConfig().layoutType;
-    this.setState({ isLayoutTypeGrowi: layoutType === 'crowi-plus' || layoutType === 'growi' });
-  }
-
   showCommentFormBtnClickHandler() {
     this.setState({ isEditorShown: !this.state.isEditorShown });
   }
@@ -38,48 +28,51 @@ class CommentEditorLazyRenderer extends React.Component {
   render() {
     const { appContainer } = this.props;
     const username = appContainer.me;
+    const isLoggedIn = username != null;
     const user = appContainer.findUser(username);
-    const isLayoutTypeGrowi = this.state.isLayoutTypeGrowi;
+
+    const layoutType = this.props.appContainer.getConfig().layoutType;
+    const isBaloonStyle = layoutType.match(/crowi-plus|growi|kibela/);
+
+    if (!isLoggedIn) {
+      return <React.Fragment></React.Fragment>;
+    }
+
     return (
       <React.Fragment>
-        { !this.state.isEditorShown
-          && (
+
+        { !this.state.isEditorShown && (
           <div className="form page-comment-form">
-            { username
-              && (
-                <div className="comment-form">
-                  { isLayoutTypeGrowi
-                  && (
-                    <div className="comment-form-user">
-                      <UserPicture user={user} />
-                    </div>
-                  )
-                  }
-                  <div className="comment-form-main">
-                    <button
-                      type="button"
-                      className={`btn btn-lg ${this.state.isLayoutTypeGrowi ? 'btn-link' : 'btn-primary'} center-block`}
-                      onClick={this.showCommentFormBtnClickHandler}
-                    >
-                      <i className="icon-bubble"></i> Add Comment
-                    </button>
-                  </div>
+            <div className="comment-form">
+              { isBaloonStyle && (
+                <div className="comment-form-user">
+                  <UserPicture user={user} />
                 </div>
-              )
-            }
+              ) }
+              <div className="comment-form-main">
+                { !this.state.isEditorShown && (
+                  <button
+                    type="button"
+                    className={`btn btn-lg ${isBaloonStyle ? 'btn-link' : 'btn-primary'} center-block`}
+                    onClick={this.showCommentFormBtnClickHandler}
+                  >
+                    <i className="icon-bubble"></i> Add Comment
+                  </button>
+                ) }
+              </div>
+            </div>
           </div>
-          )
-        }
-        { this.state.isEditorShown
-          && (
+        ) }
+
+        { this.state.isEditorShown && (
           <CommentEditor
             growiRenderer={this.growiRenderer}
             replyTo={undefined}
             commentButtonClickedHandler={this.showCommentFormBtnClickHandler}
           >
           </CommentEditor>
-)
-        }
+        ) }
+
       </React.Fragment>
     );
   }

src/client/styles/scss/_comment.scss

@@ -43,6 +43,14 @@
           opacity: 1;
         }
       }
+
+      .page-comment-meta {
+        display: flex;
+        justify-content: flex-end;
+
+        font-size: 0.9em;
+        color: #999;
+      }
     }
   }
 }

src/client/styles/scss/_comment_crowi.scss

@@ -0,0 +1,5 @@
+.crowi.main-container {
+  .page-comment-main {
+    margin-bottom: 0.5em;
+  }
+}

src/client/styles/scss/_comment_growi.scss

@@ -74,14 +74,6 @@
       margin-bottom: 0.5em;
       word-wrap: break-word;
     }
-
-    .page-comment-meta {
-      display: flex;
-      justify-content: flex-end;
-
-      font-size: 0.9em;
-      color: #999;
-    }
   }
 
   /*
@@ -92,7 +84,7 @@
     margin-right: 15px;
     margin-left: 6em;
   }
-
+  // reply button
   .btn.btn-comment-reply {
     width: 120px;
     margin-right: 15px;

src/client/styles/scss/_comment_kibela.scss

@@ -4,16 +4,18 @@
     position: relative;
     padding: 1em;
     margin: 1em 0 0.2em 4.5em;
+
     @media (max-width: $screen-xs) {
       margin-left: 3.5em;
-    } // speech balloon
+    }
+
+    // speech balloon
     &:before {
       position: absolute;
       top: 1.5em;
       left: -1em;
       display: block;
       width: 0;
-      width: 0; // screen-xs
       height: 0;
       content: '';
       border-top: 20px solid transparent;
@@ -21,11 +23,13 @@
       border-bottom: 20px solid transparent;
       border-left: 20px solid transparent;
       border-left-width: 0;
+
       @media (max-width: $screen-xs) {
         top: 1em;
       }
     }
   }
+
   %picture {
     float: left;
     width: 3em;
@@ -36,54 +40,78 @@
       height: 2em;
     }
   }
+
   .page-comments-row {
     margin: 10px 0px;
   }
+
   .page-comments {
     h4 {
       margin-bottom: 1em;
     }
   }
   .page-comment {
-    position: relative; // ユーザー名
+    position: relative;
+
+    // ユーザー名
     .page-comment-creator {
       margin-top: -0.5em;
       margin-bottom: 0.5em;
       font-weight: bold;
-    } // ユーザーアイコン
+    }
+
+    // ユーザーアイコン
     .picture {
       @extend %picture;
-    } // コメントセクション
+    }
+
+    // コメントセクション
     .page-comment-main {
       @extend %comment-section;
       background: #e6e9ec;
       border-radius: 0.35em;
-    } // コメント本文
+    }
+
+    // コメント本文
     .page-comment-body {
       margin-bottom: 0.5em;
       word-wrap: break-word;
     }
-    .page-comment-meta {
-      display: flex;
-      justify-content: flex-end;
+  }
 
-      font-size: 0.9em;
-      color: #999;
-    }
-  } // show when hover
+  /*
+   * reply
+   */
+  .page-comment-reply,
+  .page-comment-reply-form {
+    margin-right: 15px;
+    margin-left: 6em;
+  }
+  // reply button
+  .btn.btn-comment-reply {
+    width: 120px;
+    margin-right: 15px;
+  }
+
+  // show when hover
   .page-comment-main:hover > .page-comment-control {
     display: block;
-  } // display cheatsheet for comment form only
+  }
+
+  // display cheatsheet for comment form only
   .comment-form {
-    position: relative;
-    margin-top: 2em; // user icon
-    border: none;
     .editor-cheatsheet {
       display: none;
     }
+
+    position: relative;
+    margin-top: 2em;
+    // user icon
     .picture {
       @extend %picture;
-    } // seciton
+    }
+
+    // seciton
     .comment-form-main {
       @extend %comment-section;
       background: #e6e9ec;
@@ -91,7 +119,9 @@
       .CodeMirror {
         border: 0px;
       }
-    } // textarea
+    }
+
+    // textarea
     .comment-write {
       margin-bottom: 0.5em;
     }

src/client/styles/scss/style-app.scss

@@ -15,6 +15,7 @@
 @import 'admin';
 @import 'attachments';
 @import 'comment';
+@import 'comment_crowi';
 @import 'comment_growi';
 @import 'comment_kibela';
 @import 'navbar_kibela';