Displaying character count and preventing user from posting when count is too high.

client/coral-embed-stream/style/default.css

@@ -95,7 +95,7 @@ hr {
   margin-top: 10px;
 }
 
-#coralStream .coral-plugin-commentbox-button {
+.coral-plugin-commentbox-button {
   float: right;
   margin-top: 10px;
   padding: 5px 10px;
@@ -111,6 +111,16 @@ hr {
   margin-bottom: 5px;
 }
 
+.coral-plugin-commentbox-char-count {
+  color: #ccc;
+  text-align: right;
+  font-size: 12px;
+}
+
+.coral-plugin-commentbox-char-max {
+  color: #d50000;
+}
+
 /* Comment styles */
 .comment {
   margin-bottom: 10px;

client/coral-plugin-commentbox/CommentBox.js

@@ -53,6 +53,10 @@ class CommentBox extends Component {
     if (child_id || parent_id) {
       updateItem(child_id || parent_id, 'showReply', false, 'comments');
     }
+
+    if (this.props.charCount && this.state.body.length > this.props.charCount) {
+      return;
+    }
     postItem(comment, 'comments')
       .then((postedComment) => {
         const commentId = postedComment.id;
@@ -70,17 +74,9 @@ class CommentBox extends Component {
     this.setState({body: ''});
   }
 
-  onUpdateComment = (e) => {
-    const body = e.target.value;
-    if (!this.props.charCount || body.length > this.props.charCount) {
-      this.setState({body});
-    }
-  }
-
   render () {
     const {styles, reply, author, charCount} = this.props;
     const length = this.state.body.length;
-    // How to handle language in plugins? Should we have a dependency on our central translation file?
     return <div>
       <div
         className={`${name}-container`}>
@@ -99,16 +95,16 @@ class CommentBox extends Component {
             onChange={(e) => this.setState({body: e.target.value})}
             rows={3}/>
         </div>
-        <div className={`${name}-char-count ${length > charCount && `${name}-char-max`}`}>
+        <div className={`${name}-char-count ${length > charCount ? `${name}-char-max` : ''}`}>
           {
             charCount &&
-            `${length}/${charCount}`
+            `${charCount - length} ${lang.t('characters-remaining')}`
           }
         </div>
         <div className={`${name}-button-container`}>
           { author && (
               <Button
-                cStyle='darkGrey'
+                cStyle={length > charCount ? 'lightGrey' : 'darkGrey'}
                 className={`${name}-button`}
                 onClick={this.postComment}>
                 {lang.t('post')}

client/coral-plugin-commentbox/translations.json

@@ -6,7 +6,8 @@
     "name": "Name",
     "comment-post-notif": "Your comment has been posted.",
     "comment-post-notif-premod": "Thank you for posting. Our moderation team will review your comment shortly.",
-    "comment-post-banned-word":  "Your comment contains one or more words that are not permitted, so it will not be published. If you think this message is incorrect, please contact our moderation team."
+    "comment-post-banned-word":  "Your comment contains one or more words that are not permitted, so it will not be published. If you think this message is incorrect, please contact our moderation team.",
+    "characters-remaining": " characters remaining"
   },
   "es": {
     "post": "Publicar",
@@ -15,6 +16,7 @@
     "name": "Nombre",
     "comment-post-notif": "Tu comentario ha sido publicado.",
     "comment-post-notif-premod": "Gracias por comentar. Nuestro equipo de moderación va a revisarlo muy pronto.",
-    "comment-post-banned-word":  "Tu comentario contiene una o más palabras que no estan permitidasen nuestro espacio, por lo que no será publicado. Si crees que es un error, por favor contacta a nuestro equipo de moderación."
+    "comment-post-banned-word":  "Tu comentario contiene una o más palabras que no estan permitidasen nuestro espacio, por lo que no será publicado. Si crees que es un error, por favor contacta a nuestro equipo de moderación.",
+    "characters-remaining": "tracundeme"
   }
 }

client/coral-ui/components/Button.css

@@ -77,6 +77,17 @@
   background: #696969;
 }
 
+.type--lightGrey {
+  color: white;
+  background: #ccc;
+  cursor: default;
+}
+
+.type--lightGrey:hover {
+  color: white;
+  background: #ccc;
+}
+
 .type--green {
   color: white;
   background: #00897B;