diff --git a/client/coral-embed-stream/src/Comment.css b/client/coral-embed-stream/src/Comment.css
index 0429b18b3..85143e32c 100644
--- a/client/coral-embed-stream/src/Comment.css
+++ b/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;
diff --git a/client/coral-embed-stream/src/EditableCommentContent.js b/client/coral-embed-stream/src/EditableCommentContent.js
index 0b9dda93a..676eb2bff 100644
--- a/client/coral-embed-stream/src/EditableCommentContent.js
+++ b/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 (
-
+
{lang.t('editComment.saveButton')}}
saveButtonCStyle="green"
cancelButtonClicked={this.props.stopEditing}
+ buttonClass={styles.button}
+ buttonContainerStart={
+
+
+ {
+ editWindowExpired
+ ?
+ {lang.t('editComment.editWindowExpired')}
+ {
+ typeof this.props.stopEditing === 'function'
+ ? {lang.t('editComment.editWindowExpiredClose')}
+ : null
+ }
+
+ :
+ {lang.t('editComment.editWindowTimerPrefix')}
+
+ }
+
+
+ }
/>
- {
- editWindowExpired
- ? You can no longer edit this comment. The time window to do so has expired. Why not post another one?
- : You have to save this Edit. You may save this edit now to reset the clock.
- }
);
}
@@ -164,6 +182,7 @@ class CountdownSeconds extends React.Component {
const secRemaining = msRemaining / 1000;
const wholeSecRemaining = Math.floor(secRemaining);
const plural = secRemaining !== 1;
- return
{`${wholeSecRemaining} second${plural ? 's' : ''}`};
+ const units = lang.t(plural ? 'editComment.secondsPlural' : 'editComment.second');
+ return
{`${wholeSecRemaining} ${units}`};
}
}
diff --git a/client/coral-framework/translations.json b/client/coral-framework/translations.json
index 35317920f..6298afa2f 100644
--- a/client/coral-framework/translations.json
+++ b/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",
diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js
index ee3b9722c..7b20e9b99 100644
--- a/client/coral-plugin-commentbox/CommentBox.js
+++ b/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' && (
@@ -120,7 +124,7 @@ export class CommentForm extends Component {
}