add slack-channel box for comment notification

resource/js/components/PageComment/CommentForm.js

@@ -240,18 +240,27 @@ export default class CommentForm extends React.Component {
                     </label>
                   }
 
-
                   <div style={{flex: 1}}></div>{/* spacer */}
+                  { this.state.errorMessage &&
+                    <span className="text-danger text-right mr-2">{this.state.errorMessage}</span>
+                  }
+                  <div className="form-inline page-form-setting d-flex align-items-center" id="page-form-setting" data-slack-configured="{{ slackConfigured() }}">
                     <span className="input-group input-group-sm input-group-slack extended-setting m-r-5">
-                      <label title="Slack通知">
-                        <input className="comment-notif" type="checkbox" name="pageForm[notify][slack][on]" value="1"/>
-                        <img id="slack-mark-white" src="/images/icons/slack/mark-monochrome_white.svg" width="22" height="22"/>
-                        <img id="slack-mark-black" src="/images/icons/slack/mark-monochrome_black.svg" width="22" height="22"/>
+                      <label className="input-group-addon">
+                        <img id="slack-mark-white" src="/images/icons/slack/mark-monochrome_white.svg" width="18" height="18"/>
+                        <img id="slack-mark-black" src="/images/icons/slack/mark-monochrome_black.svg" width="18" height="18"/>
+                        <input className="" type="checkbox" name="pageForm[notify][slack][on]" value="1"/>
                       </label>
+                      <input className="form-control" type="text" name="pageForm[notify][slack][channel]" value="" placeholder="slack-channel-name"
+                        id="page-form-slack-channel"
+                        data-toggle="popover"
+                        title="Slack通知"
+                        data-content="通知するにはチェックを入れてください。カンマ区切りで複数チャンネルに通知することができます。"
+                        data-trigger="focus"
+                        data-placement="top"
+                      />
                     </span>
-                    { this.state.errorMessage &&
-                      <span className="text-danger text-right mr-2">{this.state.errorMessage}</span>
-                    }
+                  </div>
                   <Button type="submit" value="Submit" bsStyle="primary" className="fcbtn btn btn-sm btn-primary btn-outline btn-rounded btn-1b">
                     Comment
                   </Button>

resource/styles/scss/_comment_growi.scss

@@ -105,13 +105,15 @@
       }
     }
 
-          // slack
-          .input-group-slack {
-              padding: 4px 6px;
-              line-height: 1em;
-              img, input {
-                vertical-align: middle;
-              }
-          }
+    // slack
+    .input-group-slack {
+      .input-group-addon {
+        padding: 4px 0px;
+        line-height: 1em;
+        img, input {
+          vertical-align: middle;
+        }
+      }
+    }
   }
 }