[PLT-4318] Display a message when post is over 4000 characters (#4687)

* test changes

* added functionality

* css updates

* additional css updates

* i18n updates

* textbox cleanup

* var naming tweak

* replaced jQuery with React-based UI changes

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>

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}

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>",

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;
+            }
         }
     }
 

webapp/sass/responsive/_tablet.scss

@@ -27,6 +27,12 @@
 
             .control-label {
                 top: 0;
+
+                &.post-error {
+                  left: 32px;
+                  top: 0px;
+                  position: relative;
+                }
             }
         }