summaryrefslogtreecommitdiffstats
path: root/web/react/components/channel_notifications.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/channel_notifications.jsx')
-rw-r--r--web/react/components/channel_notifications.jsx160
1 files changed, 89 insertions, 71 deletions
diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx
index 884bad9d2..83067240d 100644
--- a/web/react/components/channel_notifications.jsx
+++ b/web/react/components/channel_notifications.jsx
@@ -4,26 +4,29 @@
var SettingItemMin = require('./setting_item_min.jsx');
var SettingItemMax = require('./setting_item_max.jsx');
-var utils = require('../utils/utils.jsx');
-var client = require('../utils/client.jsx');
+var Utils = require('../utils/utils.jsx');
+var Client = require('../utils/client.jsx');
var UserStore = require('../stores/user_store.jsx');
var ChannelStore = require('../stores/channel_store.jsx');
export default class ChannelNotifications extends React.Component {
constructor(props) {
super(props);
+
this.onListenerChange = this.onListenerChange.bind(this);
this.updateSection = this.updateSection.bind(this);
this.handleUpdate = this.handleUpdate.bind(this);
this.handleRadioClick = this.handleRadioClick.bind(this);
this.handleQuietToggle = this.handleQuietToggle.bind(this);
+ this.createDesktopSection = this.createDesktopSection.bind(this);
+ this.createQuietSection = this.createQuietSection.bind(this);
+
this.state = {notifyLevel: '', title: '', channelId: '', activeSection: ''};
}
componentDidMount() {
ChannelStore.addChangeListener(this.onListenerChange);
- var self = this;
- $(this.refs.modal.getDOMNode()).on('show.bs.modal', function showModal(e) {
+ $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function showModal(e) {
var button = e.relatedTarget;
var channelId = button.getAttribute('data-channelid');
@@ -34,8 +37,8 @@ export default class ChannelNotifications extends React.Component {
quietMode = true;
}
- self.setState({notifyLevel: notifyLevel, quietMode: quietMode, title: button.getAttribute('data-title'), channelId: channelId});
- });
+ this.setState({notifyLevel: notifyLevel, quietMode: quietMode, title: button.getAttribute('data-title'), channelId: channelId});
+ }.bind(this));
}
componentWillUnmount() {
ChannelStore.removeChangeListener(this.onListenerChange);
@@ -55,7 +58,7 @@ export default class ChannelNotifications extends React.Component {
newState.notifyLevel = notifyLevel;
newState.quietMode = quietMode;
- if (!utils.areStatesEqual(this.state, newState)) {
+ if (!Utils.areStatesEqual(this.state, newState)) {
this.setState(newState);
}
}
@@ -78,7 +81,7 @@ export default class ChannelNotifications extends React.Component {
return;
}
- client.updateNotifyLevel(data,
+ Client.updateNotifyLevel(data,
function success() {
var member = ChannelStore.getMember(channelId);
member.notify_level = notifyLevel;
@@ -92,25 +95,15 @@ export default class ChannelNotifications extends React.Component {
}
handleRadioClick(notifyLevel) {
this.setState({notifyLevel: notifyLevel, quietMode: false});
- this.refs.modal.getDOMNode().focus();
+ React.findDOMNode(this.refs.modal).focus();
}
handleQuietToggle(quietMode) {
this.setState({notifyLevel: 'none', quietMode: quietMode});
- this.refs.modal.getDOMNode().focus();
+ React.findDOMNode(this.refs.modal).focus();
}
- render() {
- var serverError = null;
- if (this.state.serverError) {
- serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
- }
-
- var self = this;
- var describe = '';
- var inputs = [];
-
+ createDesktopSection(serverError) {
var handleUpdateSection;
- var desktopSection;
if (this.state.activeSection === 'desktop') {
var notifyActive = [false, false, false];
if (this.state.notifyLevel === 'mention') {
@@ -121,6 +114,8 @@ export default class ChannelNotifications extends React.Component {
notifyActive[2] = true;
}
+ var inputs = [];
+
inputs.push(
<div>
<div className='radio'>
@@ -128,7 +123,7 @@ export default class ChannelNotifications extends React.Component {
<input
type='radio'
checked={notifyActive[0]}
- onChange={self.handleRadioClick.bind(this, 'all')}
+ onChange={this.handleRadioClick.bind(this, 'all')}
>
For all activity
</input>
@@ -140,7 +135,7 @@ export default class ChannelNotifications extends React.Component {
<input
type='radio'
checked={notifyActive[1]}
- onChange={self.handleRadioClick.bind(this, 'mention')}
+ onChange={this.handleRadioClick.bind(this, 'mention')}
>
Only for mentions
</input>
@@ -152,7 +147,7 @@ export default class ChannelNotifications extends React.Component {
<input
type='radio'
checked={notifyActive[2]}
- onChange={self.handleRadioClick.bind(this, 'none')}
+ onChange={this.handleRadioClick.bind(this, 'none')}
>
Never
</input>
@@ -162,44 +157,54 @@ export default class ChannelNotifications extends React.Component {
);
handleUpdateSection = function updateSection(e) {
- self.updateSection('');
- self.onListenerChange();
+ this.updateSection('');
+ this.onListenerChange();
e.preventDefault();
- };
+ }.bind(this);
+
+ let curChannel = ChannelStore.get(this.state.channelId);
+ let extraInfo = (<span>These settings will override the global notification settings</span>);
- desktopSection = (
+ if (curChannel && curChannel.display_name) {
+ extraInfo = (<span>These settings will override the global notification settings for the <b>{curChannel.display_name}</b> channel</span>);
+ }
+
+ return (
<SettingItemMax
title='Send desktop notifications'
inputs={inputs}
submit={this.handleUpdate}
server_error={serverError}
updateSection={handleUpdateSection}
+ extraInfo={extraInfo}
/>
);
- } else {
- if (this.state.notifyLevel === 'mention') {
- describe = 'Only for mentions';
- } else if (this.state.notifyLevel === 'all') {
- describe = 'For all activity';
- } else {
- describe = 'Never';
- }
-
- handleUpdateSection = function updateSection(e) {
- self.updateSection('desktop');
- e.preventDefault();
- };
+ }
- desktopSection = (
- <SettingItemMin
- title='Send desktop notifications'
- describe={describe}
- updateSection={handleUpdateSection}
- />
- );
+ var describe;
+ if (this.state.notifyLevel === 'mention') {
+ describe = 'Only for mentions';
+ } else if (this.state.notifyLevel === 'all') {
+ describe = 'For all activity';
+ } else {
+ describe = 'Never';
}
- var quietSection;
+ handleUpdateSection = function updateSection(e) {
+ this.updateSection('desktop');
+ e.preventDefault();
+ }.bind(this);
+
+ return (
+ <SettingItemMin
+ title='Send desktop notifications'
+ describe={describe}
+ updateSection={handleUpdateSection}
+ />
+ );
+ }
+ createQuietSection(serverError) {
+ var handleUpdateSection;
if (this.state.activeSection === 'quiet') {
var quietActive = [false, false];
if (this.state.quietMode) {
@@ -208,6 +213,8 @@ export default class ChannelNotifications extends React.Component {
quietActive[1] = true;
}
+ var inputs = [];
+
inputs.push(
<div>
<div className='radio'>
@@ -215,7 +222,7 @@ export default class ChannelNotifications extends React.Component {
<input
type='radio'
checked={quietActive[0]}
- onChange={self.handleQuietToggle.bind(this, true)}
+ onChange={this.handleQuietToggle.bind(this, true)}
>
On
</input>
@@ -227,7 +234,7 @@ export default class ChannelNotifications extends React.Component {
<input
type='radio'
checked={quietActive[1]}
- onChange={self.handleQuietToggle.bind(this, false)}
+ onChange={this.handleQuietToggle.bind(this, false)}
>
Off
</input>
@@ -245,12 +252,12 @@ export default class ChannelNotifications extends React.Component {
);
handleUpdateSection = function updateSection(e) {
- self.updateSection('');
- self.onListenerChange();
+ this.updateSection('');
+ this.onListenerChange();
e.preventDefault();
- };
+ }.bind(this);
- quietSection = (
+ return (
<SettingItemMax
title='Quiet mode'
inputs={inputs}
@@ -259,27 +266,38 @@ export default class ChannelNotifications extends React.Component {
updateSection={handleUpdateSection}
/>
);
+ }
+
+ var describe;
+ if (this.state.quietMode) {
+ describe = 'On';
} else {
- if (this.state.quietMode) {
- describe = 'On';
- } else {
- describe = 'Off';
- }
+ describe = 'Off';
+ }
- handleUpdateSection = function updateSection(e) {
- self.updateSection('quiet');
- e.preventDefault();
- };
+ handleUpdateSection = function updateSection(e) {
+ this.updateSection('quiet');
+ e.preventDefault();
+ }.bind(this);
- quietSection = (
- <SettingItemMin
- title='Quiet mode'
- describe={describe}
- updateSection={handleUpdateSection}
- />
- );
+ return (
+ <SettingItemMin
+ title='Quiet mode'
+ describe={describe}
+ updateSection={handleUpdateSection}
+ />
+ );
+ }
+ render() {
+ var serverError = null;
+ if (this.state.serverError) {
+ serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
}
+ var desktopSection = this.createDesktopSection(serverError);
+
+ var quietSection = this.createQuietSection(serverError);
+
return (
<div
className='modal fade'
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-05 06:36:06 +0000