From 4bc625e8d10ab7735b76814fe9bbf3fb9144d4e1 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 22 Sep 2015 12:00:34 -0400 Subject: Added 'default' option to channel notification settings that just uses the user's notification level --- web/react/components/channel_notifications.jsx | 67 ++++++++++++++-------- web/react/components/sidebar.jsx | 14 +++-- .../user_settings/user_settings_notifications.jsx | 2 +- 3 files changed, 52 insertions(+), 31 deletions(-) (limited to 'web/react/components') diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx index 9eda68b38..347d02478 100644 --- a/web/react/components/channel_notifications.jsx +++ b/web/react/components/channel_notifications.jsx @@ -104,14 +104,28 @@ export default class ChannelNotifications extends React.Component { createDesktopSection(serverError) { var handleUpdateSection; + const user = UserStore.getCurrentUser(); + const globalNotifyLevel = user.notify_props.desktop; + + let globalNotifyLevelName; + if (globalNotifyLevel === 'all') { + globalNotifyLevelName = 'For all activity'; + } else if (globalNotifyLevel === 'mention') { + globalNotifyLevelName = 'Only for mentions'; + } else { + globalNotifyLevelName = 'Never'; + } + if (this.state.activeSection === 'desktop') { - var notifyActive = [false, false, false]; - if (this.state.notifyLevel === 'mention') { - notifyActive[1] = true; - } else if (this.state.notifyLevel === 'all') { + var notifyActive = [false, false, false, false]; + if (this.state.notifyLevel === 'default') { notifyActive[0] = true; - } else { + } else if (this.state.notifyLevel === 'all') { + notifyActive[1] = true; + } else if (this.state.notifyLevel === 'mention') { notifyActive[2] = true; + } else { + notifyActive[3] = true; } var inputs = []; @@ -123,9 +137,9 @@ export default class ChannelNotifications extends React.Component { - For all activity + {`Global default (${globalNotifyLevelName})`}
@@ -135,9 +149,9 @@ export default class ChannelNotifications extends React.Component { - Only for mentions + {'For all activity'}
@@ -147,9 +161,21 @@ export default class ChannelNotifications extends React.Component { + {'Only for mentions'} + + +
+ +
+
@@ -162,25 +188,14 @@ export default class ChannelNotifications extends React.Component { e.preventDefault(); }.bind(this); - let curChannel = ChannelStore.get(this.state.channelId); - let extraInfo = ( + const extraInfo = ( - These settings will override the global notification settings. + {'Selecting an option other than "Default" will override the global notification settings.'}
- Desktop notifications are available on Firefox, Safari, and Chrome. + {'Desktop notifications are available on Firefox, Safari, and Chrome.'} ); - if (curChannel && curChannel.display_name) { - extraInfo = ( - - These settings will override the global notification settings for the {curChannel.display_name} channel. -
- Desktop notifications are available on Firefox, Safari, and Chrome. - - ); - } - return ( Date: Wed, 23 Sep 2015 11:38:08 -0400 Subject: Removed UI for quiet mode and added UI to set when a channel will be marked unread in the sidebar --- web/react/components/channel_notifications.jsx | 214 ++++++++++++++----------- 1 file changed, 121 insertions(+), 93 deletions(-) (limited to 'web/react/components') diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx index 347d02478..c49e76333 100644 --- a/web/react/components/channel_notifications.jsx +++ b/web/react/components/channel_notifications.jsx @@ -15,14 +15,24 @@ export default class ChannelNotifications extends React.Component { 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: ''}; + this.handleSubmitNotifyLevel = this.handleSubmitNotifyLevel.bind(this); + this.handleUpdateNotifyLevel = this.handleUpdateNotifyLevel.bind(this); + this.createNotifyLevelSection = this.createNotifyLevelSection.bind(this); + + this.handleSubmitMarkUnreadLevel = this.handleSubmitMarkUnreadLevel.bind(this); + this.handleUpdateMarkUnreadLevel = this.handleUpdateMarkUnreadLevel.bind(this); + this.createMarkUnreadLevelSection = this.createMarkUnreadLevelSection.bind(this); + + this.state = { + notifyLevel: '', + markUnreadLevel: '', + title: '', + channelId: '', + activeSection: '' + }; } + componentDidMount() { ChannelStore.addChangeListener(this.onListenerChange); @@ -30,33 +40,34 @@ export default class ChannelNotifications extends React.Component { var button = e.relatedTarget; var channelId = button.getAttribute('data-channelid'); - var notifyLevel = ChannelStore.getMember(channelId).notify_level; - var quietMode = false; - - if (notifyLevel === 'quiet') { - quietMode = true; - } + const member = ChannelStore.getMember(channelId); + var notifyLevel = member.notify_level; + var markUnreadLevel = member.mark_unread_level; - this.setState({notifyLevel: notifyLevel, quietMode: quietMode, title: button.getAttribute('data-title'), channelId: channelId}); + this.setState({ + notifyLevel, + markUnreadLevel, + title: button.getAttribute('data-title'), + channelId: channelId + }); }.bind(this)); } componentWillUnmount() { ChannelStore.removeChangeListener(this.onListenerChange); } + onListenerChange() { if (!this.state.channelId) { return; } - var notifyLevel = ChannelStore.getMember(this.state.channelId).notify_level; - var quietMode = false; - if (notifyLevel === 'quiet') { - quietMode = true; - } + const member = ChannelStore.getMember(this.state.channelId); + var notifyLevel = member.notify_level; + var markUnreadLevel = member.mark_unread_level; var newState = this.state; newState.notifyLevel = notifyLevel; - newState.quietMode = quietMode; + newState.markUnreadLevel = markUnreadLevel; if (!Utils.areStatesEqual(this.state, newState)) { this.setState(newState); @@ -65,12 +76,10 @@ export default class ChannelNotifications extends React.Component { updateSection(section) { this.setState({activeSection: section}); } - handleUpdate() { + + handleSubmitNotifyLevel() { var channelId = this.state.channelId; var notifyLevel = this.state.notifyLevel; - if (this.state.quietMode) { - notifyLevel = 'quiet'; - } var data = {}; data.channel_id = channelId; @@ -82,26 +91,24 @@ export default class ChannelNotifications extends React.Component { } Client.updateNotifyLevel(data, - function success() { + () => { var member = ChannelStore.getMember(channelId); member.notify_level = notifyLevel; ChannelStore.setChannelMember(member); this.updateSection(''); - }.bind(this), - function error(err) { + }, + (err) => { this.setState({serverError: err.message}); - }.bind(this) + } ); } - handleRadioClick(notifyLevel) { - this.setState({notifyLevel: notifyLevel, quietMode: false}); - React.findDOMNode(this.refs.modal).focus(); - } - handleQuietToggle(quietMode) { - this.setState({notifyLevel: 'none', quietMode: quietMode}); + + handleUpdateNotifyLevel(notifyLevel) { + this.setState({notifyLevel}); React.findDOMNode(this.refs.modal).focus(); } - createDesktopSection(serverError) { + + createNotifyLevelSection(serverError) { var handleUpdateSection; const user = UserStore.getCurrentUser(); @@ -137,7 +144,7 @@ export default class ChannelNotifications extends React.Component { {`Global default (${globalNotifyLevelName})`} @@ -149,7 +156,7 @@ export default class ChannelNotifications extends React.Component { {'For all activity'} @@ -161,7 +168,7 @@ export default class ChannelNotifications extends React.Component { {'Only for mentions'} @@ -173,7 +180,7 @@ export default class ChannelNotifications extends React.Component { {'Never'} @@ -200,7 +207,7 @@ export default class ChannelNotifications extends React.Component { ); } - createQuietSection(serverError) { - var handleUpdateSection; - if (this.state.activeSection === 'quiet') { - var quietActive = [false, false]; - if (this.state.quietMode) { - quietActive[0] = true; - } else { - quietActive[1] = true; + + handleSubmitMarkUnreadLevel() { + const channelId = this.state.channelId; + const markUnreadLevel = this.state.markUnreadLevel; + + const data = { + channel_id: channelId, + user_id: UserStore.getCurrentId(), + mark_unread_level: markUnreadLevel + }; + + if (!data.mark_unread_level || data.mark_unread_level.length === 0) { + return; + } + + Client.updateMarkUnreadLevel(data, + () => { + var member = ChannelStore.getMember(channelId); + member.mark_unread_level = markUnreadLevel; + ChannelStore.setChannelMember(member); + this.updateSection(''); + }, + (err) => { + this.setState({serverError: err.message}); } + ); + } - var inputs = []; + handleUpdateMarkUnreadLevel(markUnreadLevel) { + this.setState({markUnreadLevel}); + React.findDOMNode(this.refs.modal).focus(); + } - inputs.push( + createMarkUnreadLevelSection(serverError) { + let content; + + if (this.state.activeSection === 'markUnreadLevel') { + const inputs = [(
-
+
-
+
- ); + )]; - inputs.push( -
-
- Enabling quiet mode will turn off desktop notifications and only mark the channel as unread if you have been mentioned. -
- ); - - handleUpdateSection = function updateSection(e) { + const handleUpdateSection = function handleUpdateSection(e) { this.updateSection(''); this.onListenerChange(); e.preventDefault(); }.bind(this); - return ( + const extraInfo = {'The channel name is bolded in the sidebar when there are unread messages. Selecting "Only for mentions" will bold the channel only when you are mentioned.'}; + + content = ( ); - } - - var describe; - if (this.state.quietMode) { - describe = 'On'; } else { - describe = 'Off'; - } + let describe; - handleUpdateSection = function updateSection(e) { - this.updateSection('quiet'); - e.preventDefault(); - }.bind(this); + if (!this.state.markUnreadLevel || this.state.markUnreadLevel === 'all') { + describe = 'For all unread messages'; + } else { + describe = 'Only for mentions'; + } - return ( - - ); + const handleUpdateSection = function handleUpdateSection(e) { + this.updateSection('markUnreadLevel'); + e.preventDefault(); + }.bind(this); + + content = ( + + ); + } + + return content; } + render() { var serverError = null; if (this.state.serverError) { serverError =
; } - var desktopSection = this.createDesktopSection(serverError); - - var quietSection = this.createQuietSection(serverError); - return (

- {desktopSection} + {this.createNotifyLevelSection(serverError)}
- {quietSection} + {this.createMarkUnreadLevelSection(serverError)}
-- cgit v1.2.3-1-g7c22 From c4d50885a7d9c1716bc2cfe4e18a9065130bd045 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Wed, 23 Sep 2015 14:43:36 -0400 Subject: Implemented ChannelMember.MarkUnreadLevel so that it actually functions --- web/react/components/notify_counts.jsx | 2 +- web/react/components/sidebar.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'web/react/components') diff --git a/web/react/components/notify_counts.jsx b/web/react/components/notify_counts.jsx index 0b7c41b62..3df661d70 100644 --- a/web/react/components/notify_counts.jsx +++ b/web/react/components/notify_counts.jsx @@ -15,7 +15,7 @@ function getCountsStateFromStores() { count += channel.total_msg_count - channelMember.msg_count; } else if (channelMember.mention_count > 0) { count += channelMember.mention_count; - } else if (channelMember.notify_level !== 'quiet' && channel.total_msg_count - channelMember.msg_count > 0) { + } else if (channelMember.mark_unread_level !== 'mention' && channel.total_msg_count - channelMember.msg_count > 0) { count += 1; } }); diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index bc66ee03c..5a4fb1169 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -334,7 +334,7 @@ export default class Sidebar extends React.Component { var unread = false; if (channelMember) { msgCount = channel.total_msg_count - channelMember.msg_count; - unread = (msgCount > 0 && channelMember.notify_level !== 'quiet') || channelMember.mention_count > 0; + unread = (msgCount > 0 && channelMember.mark_unread_level !== 'mention') || channelMember.mention_count > 0; } var titleClass = ''; -- cgit v1.2.3-1-g7c22 From 111fbb2495e88d69bec29971da8ddf086ac3f3b6 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Wed, 23 Sep 2015 16:58:50 -0400 Subject: Changed notification preference submission to only be updated when options have actually changed --- web/react/components/channel_notifications.jsx | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'web/react/components') diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx index c49e76333..eaa1c8255 100644 --- a/web/react/components/channel_notifications.jsx +++ b/web/react/components/channel_notifications.jsx @@ -81,6 +81,11 @@ export default class ChannelNotifications extends React.Component { var channelId = this.state.channelId; var notifyLevel = this.state.notifyLevel; + if (ChannelStore.getMember(channelId).notify_level === notifyLevel) { + this.updateSection(''); + return; + } + var data = {}; data.channel_id = channelId; data.user_id = UserStore.getCurrentId(); @@ -244,6 +249,11 @@ export default class ChannelNotifications extends React.Component { const channelId = this.state.channelId; const markUnreadLevel = this.state.markUnreadLevel; + if (ChannelStore.getMember(channelId).mark_unread_level === markUnreadLevel) { + this.updateSection(''); + return; + } + const data = { channel_id: channelId, user_id: UserStore.getCurrentId(), -- cgit v1.2.3-1-g7c22 From c16b9de8dc4924cf2fb243579284e67f55cf3a47 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Wed, 30 Sep 2015 11:08:36 -0400 Subject: Replaced ChannelMember.MarkUnreadLevel with ChannelMember.NotifyProps --- web/react/components/channel_notifications.jsx | 16 ++++++---------- web/react/components/notify_counts.jsx | 2 +- web/react/components/sidebar.jsx | 2 +- 3 files changed, 8 insertions(+), 12 deletions(-) (limited to 'web/react/components') diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx index eaa1c8255..55c0b5438 100644 --- a/web/react/components/channel_notifications.jsx +++ b/web/react/components/channel_notifications.jsx @@ -42,7 +42,7 @@ export default class ChannelNotifications extends React.Component { const member = ChannelStore.getMember(channelId); var notifyLevel = member.notify_level; - var markUnreadLevel = member.mark_unread_level; + var markUnreadLevel = member.notify_props.mark_unread; this.setState({ notifyLevel, @@ -63,7 +63,7 @@ export default class ChannelNotifications extends React.Component { const member = ChannelStore.getMember(this.state.channelId); var notifyLevel = member.notify_level; - var markUnreadLevel = member.mark_unread_level; + var markUnreadLevel = member.notify_props.mark_unread; var newState = this.state; newState.notifyLevel = notifyLevel; @@ -249,7 +249,7 @@ export default class ChannelNotifications extends React.Component { const channelId = this.state.channelId; const markUnreadLevel = this.state.markUnreadLevel; - if (ChannelStore.getMember(channelId).mark_unread_level === markUnreadLevel) { + if (ChannelStore.getMember(channelId).notify_props.mark_unread === markUnreadLevel) { this.updateSection(''); return; } @@ -257,17 +257,13 @@ export default class ChannelNotifications extends React.Component { const data = { channel_id: channelId, user_id: UserStore.getCurrentId(), - mark_unread_level: markUnreadLevel + mark_unread: markUnreadLevel }; - if (!data.mark_unread_level || data.mark_unread_level.length === 0) { - return; - } - - Client.updateMarkUnreadLevel(data, + Client.updateNotifyProps(data, () => { var member = ChannelStore.getMember(channelId); - member.mark_unread_level = markUnreadLevel; + member.notify_props.mark_unread = markUnreadLevel; ChannelStore.setChannelMember(member); this.updateSection(''); }, diff --git a/web/react/components/notify_counts.jsx b/web/react/components/notify_counts.jsx index 3df661d70..f34b4669f 100644 --- a/web/react/components/notify_counts.jsx +++ b/web/react/components/notify_counts.jsx @@ -15,7 +15,7 @@ function getCountsStateFromStores() { count += channel.total_msg_count - channelMember.msg_count; } else if (channelMember.mention_count > 0) { count += channelMember.mention_count; - } else if (channelMember.mark_unread_level !== 'mention' && channel.total_msg_count - channelMember.msg_count > 0) { + } else if (channelMember.notify_props.mark_unread !== 'mention' && channel.total_msg_count - channelMember.msg_count > 0) { count += 1; } }); diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index 5a4fb1169..821d7fd4a 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -334,7 +334,7 @@ export default class Sidebar extends React.Component { var unread = false; if (channelMember) { msgCount = channel.total_msg_count - channelMember.msg_count; - unread = (msgCount > 0 && channelMember.mark_unread_level !== 'mention') || channelMember.mention_count > 0; + unread = (msgCount > 0 && channelMember.notify_props.mark_unread !== 'mention') || channelMember.mention_count > 0; } var titleClass = ''; -- cgit v1.2.3-1-g7c22 From c9a0030551f289241407743fbd21080cd8a358a4 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Wed, 30 Sep 2015 12:28:28 -0400 Subject: Moved ChannelMember.NotifyLevel into ChannelMember.NotifyProps --- web/react/components/channel_notifications.jsx | 16 ++++++---------- web/react/components/sidebar.jsx | 2 +- 2 files changed, 7 insertions(+), 11 deletions(-) (limited to 'web/react/components') diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx index 55c0b5438..45981b295 100644 --- a/web/react/components/channel_notifications.jsx +++ b/web/react/components/channel_notifications.jsx @@ -41,7 +41,7 @@ export default class ChannelNotifications extends React.Component { var channelId = button.getAttribute('data-channelid'); const member = ChannelStore.getMember(channelId); - var notifyLevel = member.notify_level; + var notifyLevel = member.notify_props.desktop; var markUnreadLevel = member.notify_props.mark_unread; this.setState({ @@ -62,7 +62,7 @@ export default class ChannelNotifications extends React.Component { } const member = ChannelStore.getMember(this.state.channelId); - var notifyLevel = member.notify_level; + var notifyLevel = member.notify_props.desktop; var markUnreadLevel = member.notify_props.mark_unread; var newState = this.state; @@ -81,7 +81,7 @@ export default class ChannelNotifications extends React.Component { var channelId = this.state.channelId; var notifyLevel = this.state.notifyLevel; - if (ChannelStore.getMember(channelId).notify_level === notifyLevel) { + if (ChannelStore.getMember(channelId).notify_props.desktop === notifyLevel) { this.updateSection(''); return; } @@ -89,16 +89,12 @@ export default class ChannelNotifications extends React.Component { var data = {}; data.channel_id = channelId; data.user_id = UserStore.getCurrentId(); - data.notify_level = notifyLevel; + data.desktop = notifyLevel; - if (!data.notify_level || data.notify_level.length === 0) { - return; - } - - Client.updateNotifyLevel(data, + Client.updateNotifyProps(data, () => { var member = ChannelStore.getMember(channelId); - member.notify_level = notifyLevel; + member.notify_props.desktop = notifyLevel; ChannelStore.setChannelMember(member); this.updateSection(''); }, diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index 821d7fd4a..6d4b56b7b 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -203,7 +203,7 @@ export default class Sidebar extends React.Component { const user = UserStore.getCurrentUser(); const member = ChannelStore.getMember(msg.channel_id); - var notifyLevel = member.notify_level; + var notifyLevel = member.notify_props.desktop; if (notifyLevel === 'default') { notifyLevel = user.notify_props.desktop; } -- cgit v1.2.3-1-g7c22