From a76db5b84f661f1254da6d04af5100f858051bb4 Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Mon, 29 Aug 2016 09:52:59 -0400 Subject: PLT-2074 Refactor desktop notification settings UI and add setting for duration (#3883) * Refactor desktop notification settings UI and add setting for duration * Update en.json * Update desktop_notification_settings.jsx --- .../desktop_notification_settings.jsx | 454 +++++++++++++++++++++ .../user_settings/user_settings_notifications.jsx | 295 ++----------- 2 files changed, 492 insertions(+), 257 deletions(-) create mode 100644 webapp/components/user_settings/desktop_notification_settings.jsx (limited to 'webapp/components/user_settings') diff --git a/webapp/components/user_settings/desktop_notification_settings.jsx b/webapp/components/user_settings/desktop_notification_settings.jsx new file mode 100644 index 000000000..e5376c7ee --- /dev/null +++ b/webapp/components/user_settings/desktop_notification_settings.jsx @@ -0,0 +1,454 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import SettingItemMin from 'components/setting_item_min.jsx'; +import SettingItemMax from 'components/setting_item_max.jsx'; + +import * as Utils from 'utils/utils.jsx'; +import * as UserAgent from 'utils/user_agent.jsx'; + +import React from 'react'; +import {FormattedMessage} from 'react-intl'; + +export default class DesktopNotificationSettings extends React.Component { + constructor(props) { + super(props); + + this.buildMaximizedSetting = this.buildMaximizedSetting.bind(this); + this.buildMinimizedSetting = this.buildMinimizedSetting.bind(this); + + this.state = {}; + } + + buildMaximizedSetting() { + let inputs = []; + let extraInfo = null; + + const activityRadio = [false, false, false]; + if (this.props.activity === 'mention') { + activityRadio[1] = true; + } else if (this.props.activity === 'none') { + activityRadio[2] = true; + } else { + activityRadio[0] = true; + } + + let soundSection; + let durationSection; + if (this.props.activity !== 'none') { + const soundRadio = [false, false]; + if (this.props.sound === 'false') { + soundRadio[1] = true; + } else { + soundRadio[0] = true; + } + + if (UserAgent.isFirefox()) { + soundSection = ( +
+
+ +
+ +
+ ); + } else { + soundSection = ( +
+
+ +
+
+ +
+
+
+ +
+
+
+ + + +
+ ); + } + + const durationRadio = [false, false, false, false]; + if (this.props.duration === '3') { + durationRadio[0] = true; + } else if (this.props.duration === '10') { + durationRadio[2] = true; + } else if (this.props.duration === '0') { + durationRadio[3] = true; + } else { + durationRadio[1] = true; + } + + durationSection = ( +
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+ ); + + extraInfo = ( + + + + ); + } + + inputs.push( +
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ + + + {soundSection} + {durationSection} +
+ ); + + return ( + + ); + } + + buildMinimizedSetting() { + let describe = ''; + if (this.props.activity === 'mention') { + if (UserAgent.isFirefox()) { + if (this.props.duration === '0') { + describe = ( + + ); + } else { + describe = ( + + ); + } + } else if (this.props.sound === 'false') { + if (this.props.duration === '0') { + describe = ( + + ); + } else { + describe = ( + + ); + } + } else { + if (this.props.duration === '0') { //eslint-disable-line no-lonely-if + describe = ( + + ); + } else { + describe = ( + + ); + } + } + } else if (this.props.activity === 'none') { + describe = ( + + ); + } else { + if (UserAgent.isFirefox()) { //eslint-disable-line no-lonely-if + if (this.props.duration === '0') { + describe = ( + + ); + } else { + describe = ( + + ); + } + } else if (this.props.sound === 'false') { + if (this.props.duration === '0') { + describe = ( + + ); + } else { + describe = ( + + ); + } + } else { + if (this.props.duration === '0') { //eslint-disable-line no-lonely-if + describe = ( + + ); + } else { + describe = ( + + ); + } + } + } + + const handleUpdateDesktopSection = function updateDesktopSection() { + this.props.updateSection('desktop'); + }.bind(this); + + return ( + + ); + } + + render() { + if (this.props.active) { + return this.buildMaximizedSetting(); + } + + return this.buildMinimizedSetting(); + } +} + +DesktopNotificationSettings.propTypes = { + activity: React.PropTypes.string.isRequired, + sound: React.PropTypes.string.isRequired, + duration: React.PropTypes.string.isRequired, + updateSection: React.PropTypes.func, + setParentState: React.PropTypes.func, + submit: React.PropTypes.func, + cancel: React.PropTypes.func, + error: React.PropTypes.string, + active: React.PropTypes.bool +}; diff --git a/webapp/components/user_settings/user_settings_notifications.jsx b/webapp/components/user_settings/user_settings_notifications.jsx index b3953ec17..a18cdf041 100644 --- a/webapp/components/user_settings/user_settings_notifications.jsx +++ b/webapp/components/user_settings/user_settings_notifications.jsx @@ -4,12 +4,12 @@ import $ from 'jquery'; import SettingItemMin from 'components/setting_item_min.jsx'; import SettingItemMax from 'components/setting_item_max.jsx'; +import DesktopNotificationSettings from './desktop_notification_settings.jsx'; import UserStore from 'stores/user_store.jsx'; import Client from 'client/web_client.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; -import * as UserAgent from 'utils/user_agent.jsx'; import * as Utils from 'utils/utils.jsx'; import Constants from 'utils/constants.jsx'; @@ -18,21 +18,24 @@ import {FormattedMessage} from 'react-intl'; function getNotificationsStateFromStores() { const user = UserStore.getCurrentUser(); - const soundNeeded = !UserAgent.isFirefox(); - let sound = 'true'; let desktop = 'default'; + let sound = 'true'; + let desktopDuration = '5'; let comments = 'never'; let enableEmail = 'true'; let pushActivity = 'mention'; let pushStatus = Constants.UserStatuses.ONLINE; if (user.notify_props) { + if (user.notify_props.desktop) { + desktop = user.notify_props.desktop; + } if (user.notify_props.desktop_sound) { sound = user.notify_props.desktop_sound; } - if (user.notify_props.desktop) { - desktop = user.notify_props.desktop; + if (user.notify_props.desktop_duration) { + desktopDuration = user.notify_props.desktop_duration; } if (user.notify_props.comments) { comments = user.notify_props.comments; @@ -85,12 +88,12 @@ function getNotificationsStateFromStores() { } return { - notifyLevel: desktop, + desktopActivity: desktop, + desktopDuration, enableEmail, pushActivity, pushStatus, - soundNeeded, - enableSound: sound, + desktopSound: sound, usernameKey, mentionKey, customKeys, @@ -110,16 +113,15 @@ export default class NotificationsTab extends React.Component { this.handleSubmit = this.handleSubmit.bind(this); this.handleCancel = this.handleCancel.bind(this); this.updateSection = this.updateSection.bind(this); - this.updateState = this.updateState.bind(this); + this.setStateValue = this.setStateValue.bind(this); this.onListenerChange = this.onListenerChange.bind(this); - this.handleNotifyRadio = this.handleNotifyRadio.bind(this); this.handleEmailRadio = this.handleEmailRadio.bind(this); - this.handleSoundRadio = this.handleSoundRadio.bind(this); this.updateUsernameKey = this.updateUsernameKey.bind(this); this.updateMentionKey = this.updateMentionKey.bind(this); this.updateFirstNameKey = this.updateFirstNameKey.bind(this); this.updateChannelKey = this.updateChannelKey.bind(this); this.updateCustomMentionKeys = this.updateCustomMentionKeys.bind(this); + this.updateState = this.updateState.bind(this); this.onCustomChange = this.onCustomChange.bind(this); this.createPushNotificationSection = this.createPushNotificationSection.bind(this); @@ -130,8 +132,9 @@ export default class NotificationsTab extends React.Component { var data = {}; data.user_id = this.props.user.id; data.email = this.state.enableEmail; - data.desktop_sound = this.state.enableSound; - data.desktop = this.state.notifyLevel; + data.desktop_sound = this.state.desktopSound; + data.desktop = this.state.desktopActivity; + data.desktop_duration = this.state.desktopDuration; data.push = this.state.pushActivity; data.push_status = this.state.pushStatus; data.comments = this.state.notifyCommentsLevel; @@ -166,12 +169,18 @@ export default class NotificationsTab extends React.Component { } handleCancel(e) { + e.preventDefault(); this.updateState(); this.props.updateSection(''); - e.preventDefault(); $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update'); } + setStateValue(key, value) { + const data = {}; + data[key] = value; + this.setState(data); + } + updateSection(section) { this.updateState(); this.props.updateSection(section); @@ -196,11 +205,6 @@ export default class NotificationsTab extends React.Component { this.updateState(); } - handleNotifyRadio(notifyLevel) { - this.setState({notifyLevel}); - this.refs.wrapper.focus(); - } - handleNotifyCommentsRadio(notifyCommentsLevel) { this.setState({notifyCommentsLevel}); this.refs.wrapper.focus(); @@ -221,11 +225,6 @@ export default class NotificationsTab extends React.Component { this.refs.wrapper.focus(); } - handleSoundRadio(enableSound) { - this.setState({enableSound}); - this.refs.wrapper.focus(); - } - updateUsernameKey(val) { this.setState({usernameKey: val}); } @@ -261,7 +260,7 @@ export default class NotificationsTab extends React.Component { } createPushNotificationSection() { - let handleUpdateDesktopSection; + let handleUpdatePushSection; if (this.props.activeSection === 'push') { let inputs = []; let extraInfo = null; @@ -495,7 +494,7 @@ export default class NotificationsTab extends React.Component { } } - handleUpdateDesktopSection = function updateDesktopSection() { + handleUpdatePushSection = function updateDesktopSection() { this.props.updateSection('push'); }.bind(this); @@ -503,240 +502,14 @@ export default class NotificationsTab extends React.Component { ); } render() { const serverError = this.state.serverError; - - var user = this.props.user; - - var desktopSection; - var handleUpdateDesktopSection; - if (this.props.activeSection === 'desktop') { - var notifyActive = [false, false, false]; - if (this.state.notifyLevel === 'mention') { - notifyActive[1] = true; - } else if (this.state.notifyLevel === 'none') { - notifyActive[2] = true; - } else { - notifyActive[0] = true; - } - - let inputs = []; - - inputs.push( -
-
- -
-
-
- -
-
-
- -
-
- ); - - const extraInfo = ( - - - - ); - - desktopSection = ( - - ); - } else { - let describe = ''; - if (this.state.notifyLevel === 'mention') { - describe = ( - - ); - } else if (this.state.notifyLevel === 'none') { - describe = ( - - ); - } else { - describe = ( - - ); - } - - handleUpdateDesktopSection = function updateDesktopSection() { - this.props.updateSection('desktop'); - }.bind(this); - - desktopSection = ( - - ); - } - - var soundSection; - var handleUpdateSoundSection; - if (this.props.activeSection === 'sound' && this.state.soundNeeded) { - var soundActive = [false, false]; - if (this.state.enableSound === 'false') { - soundActive[1] = true; - } else { - soundActive[0] = true; - } - - let inputs = []; - - inputs.push( -
-
- -
-
-
- -
-
-
- ); - - const extraInfo = ( - - - - ); - - soundSection = ( - - ); - } else { - let describe = ''; - if (!this.state.soundNeeded) { - describe = ( - - ); - } else if (this.state.enableSound === 'false') { - describe = ( - - ); - } else { - describe = ( - - ); - } - - handleUpdateSoundSection = function updateSoundSection() { - this.props.updateSection('sound'); - }.bind(this); - - soundSection = ( - - ); - } + const user = this.props.user; var keysSection; var handleUpdateKeysSection; @@ -1089,9 +862,17 @@ export default class NotificationsTab extends React.Component { />
- {desktopSection} -
- {soundSection} +