Merge pull request #848 from weseek/fix/847-post-comment-on-crowi-layout

Fix/847 post comment on crowi layout

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

@@ -33,6 +33,7 @@ export default class CommentForm extends React.Component {
     const isUploadableFile = config.upload.file;
 
     this.state = {
+      isLayoutTypeGrowi: false,
       isFormShown: false,
       comment: '',
       isMarkdown: true,
@@ -60,6 +61,19 @@ export default class CommentForm extends React.Component {
     this.showCommentFormBtnClickHandler = this.showCommentFormBtnClickHandler.bind(this);
   }
 
+  componentWillMount() {
+    this.init();
+  }
+
+  init() {
+    if (!this.props.pageId) {
+      return;
+    }
+
+    const layoutType = this.props.crowi.getConfig()['layoutType'];
+    this.setState({isLayoutTypeGrowi: 'crowi-plus' === layoutType || 'growi' === layoutType});
+  }
+
   updateState(value) {
     this.setState({comment: value});
   }
@@ -227,6 +241,8 @@ export default class CommentForm extends React.Component {
     const commentPreview = this.state.isMarkdown ? this.getCommentHtml(): ReactUtils.nl2br(comment);
     const emojiStrategy = this.props.crowi.getEmojiStrategy();
 
+    const isLayoutTypeGrowi = this.state.isLayoutTypeGrowi;
+
     const errorMessage = <span className="text-danger text-right mr-2">{this.state.errorMessage}</span>;
     const submitButton = (
       <Button type="submit" bsStyle="primary" className="fcbtn btn btn-sm btn-primary btn-outline btn-rounded btn-1b">
@@ -240,15 +256,17 @@ export default class CommentForm extends React.Component {
         <form className="form page-comment-form" id="page-comment-form" onSubmit={this.postComment}>
           { username &&
             <div className="comment-form">
-              <div className="comment-form-user">
-                <a href={creatorsPage}>
-                  <UserPicture user={user} />
-                </a>
-              </div>
+              { isLayoutTypeGrowi &&
+                <div className="comment-form-user">
+                  <a href={creatorsPage}>
+                    <UserPicture user={user} />
+                  </a>
+                </div>
+              }
               <div className="comment-form-main">
                 {/* Add Comment Button */}
                 { !this.state.isFormShown &&
-                  <button className="btn btn-lg btn-link center-block" onClick={this.showCommentFormBtnClickHandler}>
+                  <button className={`btn btn-lg ${isLayoutTypeGrowi ? 'btn-link' : 'btn-primary'} center-block`} onClick={this.showCommentFormBtnClickHandler}>
                     <i className="icon-bubble"></i> Add Comment
                   </button>
                 }
@@ -263,7 +281,7 @@ export default class CommentForm extends React.Component {
                           editorOptions={this.props.editorOptions}
                           lineNumbers={false}
                           isMobile={this.props.crowi.isMobile}
-                          isUploadable={this.state.isUploadable}
+                          isUploadable={this.state.isUploadable && this.state.isLayoutTypeGrowi}  // enable only when GROWI layout
                           isUploadableFile={this.state.isUploadableFile}
                           emojiStrategy={emojiStrategy}
                           onChange={this.updateState}
@@ -283,7 +301,7 @@ export default class CommentForm extends React.Component {
                   <div className="comment-submit">
                     <div className="d-flex">
                       <label style={{flex: 1}}>
-                      { this.state.key == 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} /> Markdown
                         </span>

src/client/js/components/PageComments.js

@@ -42,18 +42,13 @@ export default class PageComments extends React.Component {
   }
 
   componentWillMount() {
-    const pageId = this.props.pageId;
-
-    if (pageId) {
-      this.init();
-    }
-
+    this.init();
     this.retrieveData = this.retrieveData.bind(this);
   }
 
   init() {
     if (!this.props.pageId) {
-      return ;
+      return;
     }
 
     const layoutType = this.props.crowi.getConfig()['layoutType'];

src/client/js/components/PageEditor/Editor.jsx

@@ -276,17 +276,19 @@ export default class Editor extends AbstractEditor {
 
         </Dropzone>
 
-        <button type="button" className="btn btn-default btn-block btn-open-dropzone"
-          onClick={() => {this.refs.dropzone.open()}}>
-
-          <i className="icon-paper-clip" aria-hidden="true"></i>&nbsp;
-          Attach files
-          <span className="desc-long">
-            &nbsp;by dragging &amp; dropping,&nbsp;
-            <span className="btn-link">selecting them</span>,&nbsp;
-            or pasting from the clipboard.
-          </span>
-        </button>
+        { this.props.isUploadable &&
+          <button type="button" className="btn btn-default btn-block btn-open-dropzone"
+            onClick={() => {this.refs.dropzone.open()}}>
+
+            <i className="icon-paper-clip" aria-hidden="true"></i>&nbsp;
+            Attach files
+            <span className="desc-long">
+              &nbsp;by dragging &amp; dropping,&nbsp;
+              <span className="btn-link">selecting them</span>,&nbsp;
+              or pasting from the clipboard.
+            </span>
+          </button>
+        }
       </div>
     );
   }

src/client/styles/scss/_layout_crowi_sidebar.scss

@@ -88,22 +88,27 @@
       .page-comment-form {
         margin-top: 16px;
 
-        .comment-form {
-        }
-
         .comment-form-main {
-
-          .comment-form-comment {
-            height: 60px;
+          .navbar-editor button {
+            padding: 5px;
+            font-size: 12px;
+          }
+          .overlay-gfm-cheatsheet {
+            display: none;  // hide cheatsheet
+          }
+          .CodeMirror {
+            height: 150px;
           }
-
           .comment-submit {
             margin-top: 8px;
-            text-align: right;
           }
         }
       }
 
+      hr {
+        border-color: #ccc;
+      }
+
       .page-comments-list {
         .page-comment {
           margin-top: 8px;

src/server/views/layout-crowi/widget/page_side_content.html

@@ -12,33 +12,12 @@
 
 <h3><i class="icon-bubble"></i> Comments</h3>
 <div class="page-comments">
-  <form class="form page-comment-form" id="page-comment-form" onsubmit="return false;">
-    <div class="comment-form">
-      <div class="comment-form-main">
-        <div class="comment-write" id="comment-write">
-          <textarea class="comment-form-comment form-control" id="comment-form-comment" name="commentForm[comment]" {% if not user %}disabled{% endif %}></textarea>
-        </div>
-        <div class="comment-submit">
-          <input type="hidden" name="_csrf" value="{{ csrf() }}">
-          <input type="hidden" name="commentForm[page_id]" value="{{ page._id.toString() }}">
-          <input type="hidden" name="commentForm[revision_id]" value="{{ revision._id.toString() }}">
-          <span class="text-danger" id="comment-form-message"></span>
-          <input type="submit" id="comment-form-button" value="Comment" class="btn btn-primary btn-sm form-inline" {% if not user %}disabled{% endif %}>
-        </div>
-      </div>
-    </div>
-  </form>
-  <div id="page-comment-form-behavior"></div>
-
-  <div class="page-comments-list" id="page-comments-list">
-    <div class="page-comments-list-newer collapse" id="page-comments-list-newer"></div>
-
-    <a class="page-comments-list-toggle-newer text-center" data-toggle="collapse" href="#page-comments-list-newer"><i class="ti-angle-double-up"></i> Comments for Newer Revision <i class="ti-angle-double-up"></i></a>
+  {% if page and not page.isDeleted() %}
+  <div id="page-comment-write"></div>
+  <hr>
+  {% endif %}
 
-    <div class="page-comments-list-current" id="page-comments-list-current"></div>
-
-    <a class="page-comments-list-toggle-older text-center" data-toggle="collapse" href="#page-comments-list-older"><i class="ti-angle-double-down"></i> Comments for Older Revision <i class="ti-angle-double-down"></i></a>
+  <div id="page-comment-form-behavior"></div>
 
-    <div class="page-comments-list-older collapse in" id="page-comments-list-older"></div>
-  </div>
+  <div class="page-comments-list" id="page-comments-list"></div>
 </div>

src/server/views/layout-growi/widget/comments.html

@@ -4,19 +4,7 @@
 
     <h4><i class="icon-fw icon-bubbles"></i> Comments</h4>
 
-    <div class="page-comments-list" id="page-comments-list">
-      {# transplanted to PageComments React component -- 2017.06.02 Yuki Takei
-      <div class="page-comments-list-newer collapse" id="page-comments-list-newer"></div>
-
-      <a class="page-comments-list-toggle-newer text-center" data-toggle="collapse" href="#page-comments-list-newer"><i class="ti-angle-double-up"></i> Comments for Newer Revision <i class="ti-angle-double-up"></i></a>
-
-      <div class="page-comments-list-current" id="page-comments-list-current"></div>
-
-      <a class="page-comments-list-toggle-older text-center" data-toggle="collapse" href="#page-comments-list-older"><i class="ti-angle-double-down"></i> Comments for Older Revision <i class="ti-angle-double-down"></i></a>
-
-      <div class="page-comments-list-older collapse in" id="page-comments-list-older"></div>
-      #}
-    </div>
+    <div class="page-comments-list" id="page-comments-list"></div>
 
     {% if page and not page.isDeleted() %}
     <div id="page-comment-write"></div>

src/server/views/layout-kibela/widget/comments.html

@@ -4,19 +4,7 @@
 
       <h4><i class="icon-fw icon-bubbles"></i> Comments</h4>
 
-      <div class="page-comments-list" id="page-comments-list">
-        {# transplanted to PageComments React component -- 2017.06.02 Yuki Takei
-        <div class="page-comments-list-newer collapse" id="page-comments-list-newer"></div>
-
-        <a class="page-comments-list-toggle-newer text-center" data-toggle="collapse" href="#page-comments-list-newer"><i class="ti-angle-double-up"></i> Comments for Newer Revision <i class="ti-angle-double-up"></i></a>
-
-        <div class="page-comments-list-current" id="page-comments-list-current"></div>
-
-        <a class="page-comments-list-toggle-older text-center" data-toggle="collapse" href="#page-comments-list-older"><i class="ti-angle-double-down"></i> Comments for Older Revision <i class="ti-angle-double-down"></i></a>
-
-        <div class="page-comments-list-older collapse in" id="page-comments-list-older"></div>
-        #}
-      </div>
+      <div class="page-comments-list" id="page-comments-list"></div>
 
       {% if page and not page.isDeleted() %}
       <div id="page-comment-write"></div>