diff options
author | samogot <samogot@gmail.com> | 2016-07-19 15:27:23 +0300 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-07-19 08:27:23 -0400 |
commit | f31e8e09f54418f867f95192a71e67b450340c13 (patch) | |
tree | 313f38a9bd8c999909b26cf49172df32e427dedc /webapp/components/user_settings | |
parent | febe3a01cd5db03d152e993d42f39800e494a83a (diff) | |
download | chat-f31e8e09f54418f867f95192a71e67b450340c13.tar.gz chat-f31e8e09f54418f867f95192a71e67b450340c13.tar.bz2 chat-f31e8e09f54418f867f95192a71e67b450340c13.zip |
PLT-914 Add mention notifications for replies on a comment thread (#3130)
* PLT-914 Add mention notifications for replies on a comment thread
* remove useless store method
fix highlighting comments posted before th user write something to thread
* refactor out isCommentMention function after rebase
* change comment bar highlighting to replay icon mention highlighting
* settings and always visible highlight
* fix unit tests for new settings
* change highlight behaviour
- if any message in comment thread generates mention - all thread is highlighted
- remove always visible highlightion
* fix bug about the textarea in the center channel not clearing
* fix default settings value notify_props.comments
* do not highlight own comments if there is no other user's messages in thread
* refactor out ReactDOM.findDOMNode
* refactor out using of UserStore from component
Diffstat (limited to 'webapp/components/user_settings')
-rw-r--r-- | webapp/components/user_settings/user_settings_notifications.jsx | 154 |
1 files changed, 145 insertions, 9 deletions
diff --git a/webapp/components/user_settings/user_settings_notifications.jsx b/webapp/components/user_settings/user_settings_notifications.jsx index 5ae2a83af..b9e9b6de1 100644 --- a/webapp/components/user_settings/user_settings_notifications.jsx +++ b/webapp/components/user_settings/user_settings_notifications.jsx @@ -2,7 +2,6 @@ // See License.txt for license information. import $ from 'jquery'; -import ReactDOM from 'react-dom'; import SettingItemMin from '../setting_item_min.jsx'; import SettingItemMax from '../setting_item_max.jsx'; @@ -26,6 +25,10 @@ function getNotificationsStateFromStores() { if (user.notify_props && user.notify_props.desktop) { desktop = user.notify_props.desktop; } + var comments = 'never'; + if (user.notify_props && user.notify_props.comments) { + comments = user.notify_props.comments; + } var email = 'true'; if (user.notify_props && user.notify_props.email) { email = user.notify_props.email; @@ -82,7 +85,8 @@ function getNotificationsStateFromStores() { customKeys, customKeysChecked: customKeys.length > 0, firstNameKey, - channelKey + channelKey, + notifyCommentsLevel: comments }; } @@ -103,6 +107,10 @@ const holders = defineMessages({ id: 'user.settings.notifications.wordsTrigger', defaultMessage: 'Words that trigger mentions' }, + comments: { + id: 'user.settings.notifications.comments', + defaultMessage: 'Comment threads notifications' + }, close: { id: 'user.settings.notifications.close', defaultMessage: 'Close' @@ -140,6 +148,7 @@ class NotificationsTab extends React.Component { data.desktop_sound = this.state.enableSound; data.desktop = this.state.notifyLevel; data.push = this.state.notifyPushLevel; + data.comments = this.state.notifyCommentsLevel; var mentionKeys = []; if (this.state.usernameKey) { @@ -195,21 +204,26 @@ class NotificationsTab extends React.Component { } handleNotifyRadio(notifyLevel) { this.setState({notifyLevel}); - ReactDOM.findDOMNode(this.refs.wrapper).focus(); + this.refs.wrapper.focus(); + } + + handleNotifyCommentsRadio(notifyCommentsLevel) { + this.setState({notifyCommentsLevel}); + this.refs.wrapper.focus(); } handlePushRadio(notifyPushLevel) { this.setState({notifyPushLevel}); - ReactDOM.findDOMNode(this.refs.wrapper).focus(); + this.refs.wrapper.focus(); } handleEmailRadio(enableEmail) { this.setState({enableEmail}); - ReactDOM.findDOMNode(this.refs.wrapper).focus(); + this.refs.wrapper.focus(); } handleSoundRadio(enableSound) { this.setState({enableSound}); - ReactDOM.findDOMNode(this.refs.wrapper).focus(); + this.refs.wrapper.focus(); } updateUsernameKey(val) { this.setState({usernameKey: val}); @@ -224,10 +238,10 @@ class NotificationsTab extends React.Component { this.setState({channelKey: val}); } updateCustomMentionKeys() { - var checked = ReactDOM.findDOMNode(this.refs.customcheck).checked; + var checked = this.refs.customcheck.checked; if (checked) { - var text = ReactDOM.findDOMNode(this.refs.custommentions).value; + var text = this.refs.custommentions.value; // remove all spaces and split string into individual keys this.setState({customKeys: text.replace(/ /g, ''), customKeysChecked: true}); @@ -236,7 +250,7 @@ class NotificationsTab extends React.Component { } } onCustomChange() { - ReactDOM.findDOMNode(this.refs.customcheck).checked = true; + this.refs.customcheck.checked = true; this.updateCustomMentionKeys(); } createPushNotificationSection() { @@ -902,6 +916,126 @@ class NotificationsTab extends React.Component { ); } + var commentsSection; + var handleUpdateCommentsSection; + if (this.props.activeSection === 'comments') { + var commentsActive = [false, false, false]; + if (this.state.notifyCommentsLevel === 'never') { + commentsActive[2] = true; + } else if (this.state.notifyCommentsLevel === 'root') { + commentsActive[1] = true; + } else { + commentsActive[0] = true; + } + + let inputs = []; + + inputs.push( + <div key='userNotificationLevelOption'> + <div className='radio'> + <label> + <input + type='radio' + name='commentsNotificationLevel' + checked={commentsActive[0]} + onChange={this.handleNotifyCommentsRadio.bind(this, 'any')} + /> + <FormattedMessage + id='user.settings.notifications.commentsAny' + defaultMessage='Mention any comments in a thread you participated in (This will include both mentions to your root post and any comments after you commented on a post)' + /> + </label> + <br/> + </div> + <div className='radio'> + <label> + <input + type='radio' + name='commentsNotificationLevel' + checked={commentsActive[1]} + onChange={this.handleNotifyCommentsRadio.bind(this, 'root')} + /> + <FormattedMessage + id='user.settings.notifications.commentsRoot' + defaultMessage='Mention any comments on your post' + /> + </label> + <br/> + </div> + <div className='radio'> + <label> + <input + type='radio' + name='commentsNotificationLevel' + checked={commentsActive[2]} + onChange={this.handleNotifyCommentsRadio.bind(this, 'never')} + /> + <FormattedMessage + id='user.settings.notifications.commentsNever' + defaultMessage='No mentions for comments' + /> + </label> + </div> + </div> + ); + + const extraInfo = ( + <span> + <FormattedMessage + id='user.settings.notifications.commentsInfo' + defaultMessage='Mode of triggering notifications on posts in comment threads you participated in.' + /> + </span> + ); + + commentsSection = ( + <SettingItemMax + title={formatMessage(holders.comments)} + extraInfo={extraInfo} + inputs={inputs} + submit={this.handleSubmit} + server_error={serverError} + updateSection={this.handleCancel} + /> + ); + } else { + let describe = ''; + if (this.state.notifyCommentsLevel === 'never') { + describe = ( + <FormattedMessage + id='user.settings.notifications.commentsNever' + defaultMessage='No mentions for comments' + /> + ); + } else if (this.state.notifyCommentsLevel === 'root') { + describe = ( + <FormattedMessage + id='user.settings.notifications.commentsRoot' + defaultMessage='Mention any comments on your post' + /> + ); + } else { + describe = ( + <FormattedMessage + id='user.settings.notifications.commentsAny' + defaultMessage='Mention any comments in a thread you participated in (This will include both mentions to your root post and any comments after you commented on a post)' + /> + ); + } + + handleUpdateCommentsSection = function updateCommentsSection() { + this.props.updateSection('comments'); + }.bind(this); + + commentsSection = ( + <SettingItemMin + title={formatMessage(holders.comments)} + describe={describe} + updateSection={handleUpdateCommentsSection} + /> + ); + } + const pushNotificationSection = this.createPushNotificationSection(); return ( @@ -952,6 +1086,8 @@ class NotificationsTab extends React.Component { {pushNotificationSection} <div className='divider-light'/> {keysSection} + <div className='divider-light'/> + {commentsSection} <div className='divider-dark'/> </div> </div> |