diff options
-rw-r--r-- | webapp/components/create_comment.jsx | 58 | ||||
-rw-r--r-- | webapp/sass/layout/_post-right.scss | 5 |
2 files changed, 53 insertions, 10 deletions
diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx index d9d66c8fa..d57e61e11 100644 --- a/webapp/components/create_comment.jsx +++ b/webapp/components/create_comment.jsx @@ -61,13 +61,15 @@ export default class CreateComment extends React.Component { MessageHistoryStore.resetHistoryIndex('comment'); const draft = PostStore.getCommentDraft(this.props.rootId); + const enableAddButton = this.handleEnableAddButton(draft.message, draft.fileInfos); this.state = { message: draft.message, uploadsInProgress: draft.uploadsInProgress, fileInfos: draft.fileInfos, submitting: false, ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), - showPostDeletedModal: false + showPostDeletedModal: false, + enableAddButton }; this.lastBlurAt = 0; @@ -142,7 +144,8 @@ export default class CreateComment extends React.Component { submitting: false, postError: null, fileInfos: [], - serverError: null + serverError: null, + enableAddButton: false }); const fasterThanHumanWillClick = 150; @@ -152,7 +155,12 @@ export default class CreateComment extends React.Component { handleSubmitCommand(message) { PostStore.storeCommentDraft(this.props.rootId, null); - this.setState({message: '', postError: null, fileInfos: []}); + this.setState({ + message: '', + postError: null, + fileInfos: [], + enableAddButton: false + }); const args = {}; args.channel_id = this.props.channelId; @@ -216,7 +224,8 @@ export default class CreateComment extends React.Component { submitting: false, postError: null, fileInfos: [], - serverError: null + serverError: null, + enableAddButton: false }); const fasterThanHumanWillClick = 150; @@ -260,7 +269,12 @@ export default class CreateComment extends React.Component { $('.post-right__scroll').parent().scrollTop($('.post-right__scroll')[0].scrollHeight); - this.setState({message}); + const enableAddButton = this.handleEnableAddButton(message, this.state.fileInfos); + + this.setState({ + message, + enableAddButton + }); } handleKeyDown(e) { @@ -293,7 +307,8 @@ export default class CreateComment extends React.Component { if (lastMessage !== null) { e.preventDefault(); this.setState({ - message: lastMessage + message: lastMessage, + enableAddButton: true }); } } @@ -334,7 +349,13 @@ export default class CreateComment extends React.Component { // Focus on preview if needed this.refs.preview.refs.container.scrollIntoViewIfNeeded(); - this.setState({uploadsInProgress: draft.uploadsInProgress, fileInfos: draft.fileInfos}); + const enableAddButton = this.handleEnableAddButton(draft.message, draft.fileInfos); + + this.setState({ + uploadsInProgress: draft.uploadsInProgress, + fileInfos: draft.fileInfos, + enableAddButton + }); } handleUploadError(err, clientId) { @@ -379,13 +400,21 @@ export default class CreateComment extends React.Component { draft.uploadsInProgress = uploadsInProgress; PostStore.storeCommentDraft(this.props.rootId, draft); - this.setState({fileInfos, uploadsInProgress}); + const enableAddButton = this.handleEnableAddButton(this.state.message, fileInfos); + + this.setState({fileInfos, uploadsInProgress, enableAddButton}); } componentWillReceiveProps(newProps) { if (newProps.rootId !== this.props.rootId) { const draft = PostStore.getCommentDraft(newProps.rootId); - this.setState({message: draft.message, uploadsInProgress: draft.uploadsInProgress, fileInfos: draft.fileInfos}); + const enableAddButton = this.handleEnableAddButton(draft.message, draft.fileInfos); + this.setState({ + message: draft.message, + uploadsInProgress: draft.uploadsInProgress, + fileInfos: draft.fileInfos, + enableAddButton + }); } } @@ -415,6 +444,10 @@ export default class CreateComment extends React.Component { this.lastBlurAt = Date.now(); } + handleEnableAddButton(message, fileInfos) { + return message.trim().length !== 0 || fileInfos.length !== 0; + } + render() { let serverError = null; if (this.state.serverError) { @@ -462,6 +495,11 @@ export default class CreateComment extends React.Component { ); } + let addButtonClass = 'btn btn-primary comment-btn pull-right'; + if (!this.state.enableAddButton) { + addButtonClass += ' disabled'; + } + return ( <form onSubmit={this.handleSubmit}> <div className='post-create'> @@ -502,7 +540,7 @@ export default class CreateComment extends React.Component { <div className='post-create-footer'> <input type='button' - className='btn btn-primary comment-btn pull-right' + className={addButtonClass} value={Utils.localizeMessage('create_comment.comment', 'Add Comment')} onClick={this.handleSubmit} /> diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss index 4db717de1..455ed7fff 100644 --- a/webapp/sass/layout/_post-right.scss +++ b/webapp/sass/layout/_post-right.scss @@ -62,6 +62,11 @@ .btn { margin-bottom: 10px; + + &.disabled { + background: grey !important; + border-color: transparent !important; + } } .custom-textarea { |