diff options
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/create_post.jsx | 2 | ||||
-rw-r--r-- | webapp/components/edit_post_modal.jsx | 41 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 15 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 18 | ||||
-rw-r--r-- | webapp/sass/responsive/_tablet.scss | 10 | ||||
-rw-r--r-- | webapp/sass/routes/_activity-log.scss | 1 | ||||
-rw-r--r-- | webapp/utils/constants.jsx | 2 |
7 files changed, 63 insertions, 26 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 diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index c7d82feb9..4012a4611 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -31,6 +31,21 @@ .suggestion-list__content { max-height: 150px; } + + .edit-post-footer { + font-size: 13px; + position: relative; + display: inline-block; + + .post-error { + position: relative; + font-weight: normal; + margin-bottom: 0; + font-size: .85em; + @include opacity(.55); + top: 3px; + } + } } .row--invite { diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index ff990f9b8..7d1125b19 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -448,20 +448,14 @@ padding: 3px 0 0; position: relative; - .control-label { + .post-error { 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; - } + display: inline-block; + font-size: .85em; + @include opacity(.55); + position: absolute; + top: 4px; } } diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index e337fe3ac..3d6abbd69 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -32,14 +32,10 @@ display: none; } - .control-label { + .post-error { top: 0; - - &.post-error { - left: 32px; - position: relative; - top: 0; - } + left: 32px; + position: relative; } } diff --git a/webapp/sass/routes/_activity-log.scss b/webapp/sass/routes/_activity-log.scss index d3400e29a..19f4757ea 100644 --- a/webapp/sass/routes/_activity-log.scss +++ b/webapp/sass/routes/_activity-log.scss @@ -9,6 +9,7 @@ position: absolute; top: 0; width: 100%; + display: inline-block; } } diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index d23341ddb..835510c3b 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -865,6 +865,8 @@ export const Constants = { MENTION_SPECIAL: 'mention.special', DEFAULT_NOTIFICATION_DURATION: 5000, STATUS_INTERVAL: 60000, + AUTOCOMPLETE_TIMEOUT: 100, + ANIMATION_TIMEOUT: 1000, SEARCH_TIMEOUT_MILLISECONDS: 100 }; |