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 { }