diff options
-rw-r--r-- | webapp/components/create_post.jsx | 29 | ||||
-rw-r--r-- | webapp/components/textbox.jsx | 1 | ||||
-rw-r--r-- | webapp/i18n/en.json | 1 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 10 | ||||
-rw-r--r-- | webapp/sass/responsive/_tablet.scss | 6 |
5 files changed, 41 insertions, 6 deletions
diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index f2b0a7631..6bd5f0293 100644 --- a/webapp/components/create_post.jsx +++ b/webapp/components/create_post.jsx @@ -25,7 +25,7 @@ import PreferenceStore from 'stores/preference_store.jsx'; import Constants from 'utils/constants.jsx'; -import {FormattedHTMLMessage} from 'react-intl'; +import {FormattedHTMLMessage, FormattedMessage} from 'react-intl'; import {browserHistory} from 'react-router/es6'; const Preferences = Constants.Preferences; @@ -95,8 +95,11 @@ export default class CreatePost extends React.Component { return; } - if (post.message.length > Constants.CHARACTER_LIMIT) { - this.setState({postError: `Post length must be less than ${Constants.CHARACTER_LIMIT} characters.`}); + if (this.state.postError) { + this.setState({errorClass: 'animation--highlight'}); + setTimeout(() => { + this.setState({errorClass: null}); + }, 1000); return; } @@ -216,6 +219,21 @@ export default class CreatePost extends React.Component { const draft = PostStore.getCurrentDraft(); draft.message = message; PostStore.storeCurrentDraft(draft); + + 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: null}); + } } handleUploadClick() { @@ -474,7 +492,8 @@ export default class CreatePost extends React.Component { let postError = null; if (this.state.postError) { - postError = <label className='control-label'>{this.state.postError}</label>; + const postErrorClass = 'control-label post-error' + (this.state.errorClass ? (' ' + this.state.errorClass) : ''); + postError = <label className={postErrorClass}>{this.state.postError}</label>; } let preview = null; @@ -549,8 +568,8 @@ export default class CreatePost extends React.Component { channelId={this.state.channelId} parentId='' /> - {preview} {postError} + {preview} {serverError} </div> </div> diff --git a/webapp/components/textbox.jsx b/webapp/components/textbox.jsx index 6ba925ed7..b9b000282 100644 --- a/webapp/components/textbox.jsx +++ b/webapp/components/textbox.jsx @@ -205,7 +205,6 @@ export default class Textbox extends React.Component { className={`form-control custom-textarea ${this.state.connection}`} type='textarea' spellCheck='true' - maxLength={Constants.MAX_POST_LEN} placeholder={this.props.createMessage} onChange={this.props.onChange} onKeyPress={this.handleKeyPress} diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index baad18f95..e6650fe22 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -1139,6 +1139,7 @@ "create_comment.file": "File uploading", "create_comment.files": "Files uploading", "create_post.comment": "Comment", + "create_post.error_message": "Your message is too long. Character count: {length}/{limit}", "create_post.post": "Post", "create_post.shortcutsNotSupported": "Keyboard shortcuts are not supported on your device.", "create_post.tutorialTip": "<h4>Sending Messages</h4><p>Type here to write a message and press <strong>ENTER</strong> to post it.</p><p>Click the <strong>Attachment</strong> button to upload an image or a file.</p>", diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 9a042f325..7a119b7af 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -409,12 +409,22 @@ @include clearfix; font-size: 13px; padding: 3px 0 0; + position: relative; .control-label { font-weight: normal; margin-bottom: 0; position: relative; top: -5px; + + &.post-error { + display: inline-block; + font-size: .85em; + @include opacity(.55); + color: rgb(51, 51, 51); + position: absolute; + top: 4px; + } } } diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index f9cd0869d..48f72b0f3 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -27,6 +27,12 @@ .control-label { top: 0; + + &.post-error { + left: 32px; + top: 0px; + position: relative; + } } } |