diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx
index f2b0a76313..6bd5f02937 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 = (
+
Type here to write a message and press ENTER to post it.
Click the Attachment button to upload an image or a file.
", diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 9a042f3252..7a119b7af4 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 f9cd0869d0..48f72b0f31 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; + } } }