diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/create_post.jsx | 2 | ||||
-rw-r--r-- | webapp/components/edit_post_modal.jsx | 41 |
2 files changed, 36 insertions, 7 deletions
diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index 30af8dd30..4ec2bec38 100644 --- a/webapp/components/create_post.jsx +++ b/webapp/components/create_post.jsx @@ -494,7 +494,7 @@ export default class CreatePost extends React.Component { let postError = null; if (this.state.postError) { - const postErrorClass = 'control-label post-error' + (this.state.errorClass ? (' ' + this.state.errorClass) : ''); + const postErrorClass = 'post-error' + (this.state.errorClass ? (' ' + this.state.errorClass) : ''); postError = <label className={postErrorClass}>{this.state.postError}</label>; } diff --git a/webapp/components/edit_post_modal.jsx b/webapp/components/edit_post_modal.jsx index a5bccfb80..1617d9f65 100644 --- a/webapp/components/edit_post_modal.jsx +++ b/webapp/components/edit_post_modal.jsx @@ -47,7 +47,8 @@ export default class EditPostModal extends React.Component { channel_id: '', comments: 0, refocusId: '', - ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter') + ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), + postError: '' }; } @@ -58,6 +59,14 @@ export default class EditPostModal extends React.Component { channel_id: this.state.channel_id }; + if (this.state.postError) { + this.setState({errorClass: 'animation--highlight'}); + setTimeout(() => { + this.setState({errorClass: null}); + }, Constants.ANIMATION_TIMEOUT); + return; + } + if (updatedPost.message === this.state.originalText) { // no changes so just close the modal $('#edit_post').modal('hide'); @@ -90,9 +99,25 @@ export default class EditPostModal extends React.Component { } handleChange(e) { + const message = e.target.value; this.setState({ - editText: e.target.value + editText: message }); + + if (message.length > Constants.CHARACTER_LIMIT) { + const errorMessage = ( + <FormattedMessage + id='create_post.error_message' + defaultMessage='Your message is too long. Character count: {length}/{limit}' + values={{ + length: message.length, + limit: Constants.CHARACTER_LIMIT + }} + />); + this.setState({postError: errorMessage}); + } else { + this.setState({postError: ''}); + } } handleEditKeyPress(e) { @@ -195,9 +220,11 @@ export default class EditPostModal extends React.Component { } render() { - var error = (<div className='form-group'><br/></div>); - if (this.state.error) { - error = (<div className='form-group has-error'><br/><label className='control-label'>{this.state.error}</label></div>); + const errorBoxClass = 'edit-post-footer' + (this.state.postError ? ' has-error' : ''); + let postError = null; + if (this.state.postError) { + const postErrorClass = 'post-error' + (this.state.errorClass ? (' ' + this.state.errorClass) : ''); + postError = (<label className={postErrorClass}>{this.state.postError}</label>); } return ( @@ -242,7 +269,9 @@ export default class EditPostModal extends React.Component { id='edit_textbox' ref='editbox' /> - {error} + <div className={errorBoxClass}> + {postError} + </div> </div> <div className='modal-footer'> <button |