summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorSaturnino Abril <saturnino.abril@gmail.com>2017-02-14 22:42:33 +0900
committerGeorge Goldberg <george@gberg.me>2017-02-14 13:42:33 +0000
commit4aeb78e94a752c5b287b7fdcc4901bddd8c8f2c0 (patch)
tree9ede38e0cc37a89db3af7791667144c7e9439e9b /webapp
parent6251e836b048f8f5aeeee97f3b2ad216f2a2c4bb (diff)
downloadchat-4aeb78e94a752c5b287b7fdcc4901bddd8c8f2c0.tar.gz
chat-4aeb78e94a752c5b287b7fdcc4901bddd8c8f2c0.tar.bz2
chat-4aeb78e94a752c5b287b7fdcc4901bddd8c8f2c0.zip
PLT-5441 Disabled the "Add Comment" button in the right-hand side unless there is a valid input (#5320)
Diffstat (limited to 'webapp')
-rw-r--r--webapp/components/create_comment.jsx58
-rw-r--r--webapp/sass/layout/_post-right.scss5
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 {