Style editCommentWindow messages and i18n

client/coral-embed-stream/src/Comment.css

@@ -49,6 +49,25 @@
   margin-top: 5px;
 }
 
+.editCommentForm {
+  margin-bottom: 10px;
+}
+
+.editCommentForm .buttonContainerLeft {
+  margin-right: auto;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.editCommentForm .buttonContainerLeft .editWindowRemaining {
+  margin-right: 1em;
+}
+
+.editCommentForm .button {
+  flex-shrink: 0;
+}
+
 .link {
   color: #2376D8;
   cursor: pointer;

client/coral-embed-stream/src/EditableCommentContent.js

@@ -1,6 +1,8 @@
 import React, {PropTypes} from 'react';
 import {CommentForm} from 'coral-plugin-commentbox/CommentBox';
+import styles from './Comment.css';
 
+import {Icon} from 'coral-ui';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-framework/translations';
 const lang = new I18n(translations);
@@ -102,7 +104,7 @@ export class EditableCommentContent extends React.Component {
     const editableUntil = getEditableUntilDate(this.props.comment);
     const editWindowExpired = (editableUntil - new Date()) < 0;
     return (
-      <div style={{marginBottom: '10px'}}>
+      <div className={styles.editCommentForm}>
         <CommentForm
           defaultValue={this.props.comment.body}
           charCountEnable={this.props.asset.settings.charCountEnable}
@@ -114,17 +116,33 @@ export class EditableCommentContent extends React.Component {
             return (comment.body !== originalBody) && ! editWindowExpired;
           }}
           saveComment={this.editComment}
-          bodyLabel={'Edit this comment' /* @TODO (bengo) i18n */}
+          bodyLabel={lang.t('editComment.bodyInputLabel')}
           bodyPlaceholder=""
-          submitText={'Save changes' /* @TODO (bengo) i18n */}
+          submitText={<span>{lang.t('editComment.saveButton')}</span>}
           saveButtonCStyle="green"
           cancelButtonClicked={this.props.stopEditing}
+          buttonClass={styles.button}
+          buttonContainerStart={
+            <div className={styles.buttonContainerLeft}>
+              <span className={styles.editWindowRemaining}>
+                {
+                  editWindowExpired
+                  ? <span>
+                      {lang.t('editComment.editWindowExpired')}
+                      {
+                        typeof this.props.stopEditing === 'function'
+                        ? <span>&nbsp;<a className={styles.link} onClick={this.props.stopEditing}>{lang.t('editComment.editWindowExpiredClose')}</a></span>
+                        : null
+                      }
+                    </span>
+                  : <span>
+                      <Icon name="timer"/> {lang.t('editComment.editWindowTimerPrefix')}<CountdownSeconds until={editableUntil} />
+                    </span>
+                }
+              </span>
+            </div>
+          }
         />
-        {
-          editWindowExpired
-          ? <p>You can no longer edit this comment. The time window to do so has expired. Why not post another one?</p>
-          : <p>You have <CountdownSeconds until={editableUntil} /> to save this Edit. You may save this edit now to reset the clock.</p>
-        }
       </div>
     );
   }
@@ -164,6 +182,7 @@ class CountdownSeconds extends React.Component {
     const secRemaining = msRemaining / 1000;
     const wholeSecRemaining = Math.floor(secRemaining);
     const plural = secRemaining !== 1;
-    return <span>{`${wholeSecRemaining} second${plural ? 's' : ''}`}</span>;
+    const units = lang.t(plural ? 'editComment.secondsPlural' : 'editComment.second');
+    return <span>{`${wholeSecRemaining} ${units}`}</span>;
   }
 }

client/coral-framework/translations.json

@@ -22,6 +22,15 @@
     "comment": "comment",
     "comments": "comments",
     "commentIsIgnored": "This comment is hidden because you ignored this user.",
+    "editComment": {
+      "bodyInputLabel": "Edit this comment",
+      "saveButton": "Save changes",
+      "editWindowExpired": "You can no longer edit this comment. The time window to do so has expired. Why not post another one?",
+      "editWindowExpiredClose": "Close",
+      "editWindowTimerPrefix": "Edit Window: ",
+      "second": "second",
+      "secondsPlural": "seconds"
+    },
     "error": {
       "editWindowExpired": "You can no longer edit this comment. The time window to do so has expired.",
       "emailNotVerified": "Email address {0} not verified.",
@@ -63,6 +72,15 @@
     "comments": "commentarios",
     "commentIsIgnored": "Este comentario está escondido porque has ignorado al usuario.",
     "showAllComments": "Mostrar todos los comentarios",
+    "editComment": {
+      "bodyInputLabel": "Editar este comentario",
+      "saveButton": "Guardar cambios",
+      "editWindowExpired": "Ya no puedes editar este comentario. La ventana de tiempo para hacerlo ha caducado. ¿Por qué no publicar otro?",
+      "editWindowExpiredClose": "Cerca",
+      "editWindowTimerPrefix": "Ventana de edición: ",
+      "second": "segundo",
+      "secondsPlural": "segundos"
+    },
     "error": {
       "emailNotVerified": "E-mail {0} no verificado.",
       "email": "No es un e-mail válido",

client/coral-plugin-commentbox/CommentBox.js

@@ -4,6 +4,7 @@ import translations from './translations.json';
 import {Button} from 'coral-ui';
 import Slot from 'coral-framework/components/Slot';
 import {connect} from 'react-redux';
+import classnames from 'classnames';
 
 const name = 'coral-plugin-commentbox';
 
@@ -48,6 +49,9 @@ export class CommentForm extends Component {
     // return whether the save button should be enabled for the provided
     // comment ({ body }) (for reasons other than charCount)
     saveCommentEnabled: PropTypes.func,
+
+    // className to add to buttons
+    buttonClass: PropTypes.string,
   }
   static get defaultProps() {
     return {
@@ -76,7 +80,7 @@ export class CommentForm extends Component {
     saveComment({body});
   }
   render() {
-    const {maxCharCount, styles, saveCommentEnabled} = this.props;
+    const {maxCharCount, styles, saveCommentEnabled, buttonClass} = this.props;
 
     const body = this.state.body;
     const length = body.length;
@@ -112,7 +116,7 @@ export class CommentForm extends Component {
           typeof this.props.cancelButtonClicked === 'function' && (
             <Button
               cStyle='darkGrey'
-              className={`${name}-cancel-button`}
+              className={classnames(`${name}-cancel-button`, buttonClass)}
               onClick={this.props.cancelButtonClicked}>
               {lang.t('cancel')}
             </Button>
@@ -120,7 +124,7 @@ export class CommentForm extends Component {
         }
         <Button
           cStyle={disablePostComment ? 'lightGrey' : this.props.saveButtonCStyle}
-          className={`${name}-button`}
+          className={classnames(`${name}-button`, buttonClass)}
           onClick={this.onClickSubmit}
           disabled={disablePostComment ? 'disabled' : ''}>
           {this.props.submitText}