Merge pull request #97 from matrix-org/push-rules-settings

Push rules settings

src/component-index.js

@@ -23,6 +23,9 @@ limitations under the License.
 
 module.exports.components = {};
 module.exports.components['structures.CreateRoom'] = require('./components/structures/CreateRoom');
+module.exports.components['structures.login.Login'] = require('./components/structures/login/Login');
+module.exports.components['structures.login.PostRegistration'] = require('./components/structures/login/PostRegistration');
+module.exports.components['structures.login.Registration'] = require('./components/structures/login/Registration');
 module.exports.components['structures.MatrixChat'] = require('./components/structures/MatrixChat');
 module.exports.components['structures.RoomView'] = require('./components/structures/RoomView');
 module.exports.components['structures.ScrollPanel'] = require('./components/structures/ScrollPanel');
@@ -41,6 +44,7 @@ module.exports.components['views.create_room.RoomAlias'] = require('./components
 module.exports.components['views.dialogs.ErrorDialog'] = require('./components/views/dialogs/ErrorDialog');
 module.exports.components['views.dialogs.LogoutPrompt'] = require('./components/views/dialogs/LogoutPrompt');
 module.exports.components['views.dialogs.QuestionDialog'] = require('./components/views/dialogs/QuestionDialog');
+module.exports.components['views.dialogs.TextInputDialog'] = require('./components/views/dialogs/TextInputDialog');
 module.exports.components['views.elements.EditableText'] = require('./components/views/elements/EditableText');
 module.exports.components['views.elements.PowerSelector'] = require('./components/views/elements/PowerSelector');
 module.exports.components['views.elements.ProgressBar'] = require('./components/views/elements/ProgressBar');
@@ -54,10 +58,10 @@ module.exports.components['views.login.LoginHeader'] = require('./components/vie
 module.exports.components['views.login.PasswordLogin'] = require('./components/views/login/PasswordLogin');
 module.exports.components['views.login.RegistrationForm'] = require('./components/views/login/RegistrationForm');
 module.exports.components['views.login.ServerConfig'] = require('./components/views/login/ServerConfig');
+module.exports.components['views.messages.MessageEvent'] = require('./components/views/messages/MessageEvent');
 module.exports.components['views.messages.MFileBody'] = require('./components/views/messages/MFileBody');
 module.exports.components['views.messages.MImageBody'] = require('./components/views/messages/MImageBody');
 module.exports.components['views.messages.MVideoBody'] = require('./components/views/messages/MVideoBody');
-module.exports.components['views.messages.MessageEvent'] = require('./components/views/messages/MessageEvent');
 module.exports.components['views.messages.TextualBody'] = require('./components/views/messages/TextualBody');
 module.exports.components['views.messages.TextualEvent'] = require('./components/views/messages/TextualEvent');
 module.exports.components['views.messages.UnknownBody'] = require('./components/views/messages/UnknownBody');

src/components/structures/RoomView.js

@@ -940,6 +940,13 @@ module.exports = React.createClass({
             );
         }
 
+        // setRoomMutePushRule will do nothing if there is no change
+        deferreds.push(
+            MatrixClientPeg.get().setRoomMutePushRule(
+                "global", this.state.room.roomId, newVals.are_notifications_muted
+            )
+        );
+
         if (newVals.power_levels) {
             deferreds.push(
                 MatrixClientPeg.get().sendStateEvent(
@@ -1145,6 +1152,7 @@ module.exports = React.createClass({
             topic: this.refs.header.getTopic(),
             join_rule: this.refs.room_settings.getJoinRules(),
             history_visibility: this.refs.room_settings.getHistoryVisibility(),
+            are_notifications_muted: this.refs.room_settings.areNotificationsMuted(),
             power_levels: this.refs.room_settings.getPowerLevels(),
             alias_operations: this.refs.room_settings.getAliasOperations(),
             tag_operations: this.refs.room_settings.getTagOperations(),

src/components/structures/UserSettings.js

@@ -152,10 +152,6 @@ module.exports = React.createClass({
         this.logoutModal.closeDialog();
     },
 
-    onEnableNotificationsChange: function(event) {
-        UserSettingsStore.setEnableNotifications(event.target.checked);
-    },
-
     render: function() {
         switch (this.state.phase) {
             case "UserSettings.LOADING":
@@ -173,6 +169,7 @@ module.exports = React.createClass({
         var ChangeDisplayName = sdk.getComponent("views.settings.ChangeDisplayName");
         var ChangePassword = sdk.getComponent("views.settings.ChangePassword");
         var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
+        var Notifications = sdk.getComponent("settings.Notifications");
         var avatarUrl = (
             this.state.avatarUrl ? MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl) : null
         );
@@ -263,22 +260,7 @@ module.exports = React.createClass({
                 <h2>Notifications</h2>
 
                 <div className="mx_UserSettings_section">
-                    <div className="mx_UserSettings_notifTable">
+                    <Notifications/>
-                        <div className="mx_UserSettings_notifTableRow">
-                            <div className="mx_UserSettings_notifInputCell">
-                                <input id="enableNotifications"
-                                    ref="enableNotifications"
-                                    type="checkbox"
-                                    checked={ UserSettingsStore.getEnableNotifications() }
-                                    onChange={ this.onEnableNotificationsChange } />
-                            </div>
-                            <div className="mx_UserSettings_notifLabelCell">
-                                <label htmlFor="enableNotifications">
-                                    Enable desktop notifications
-                                </label>
-                            </div>
-                        </div>
-                    </div>
                 </div>
 
                 <h2>Advanced</h2>

src/components/views/dialogs/ErrorDialog.js

@@ -48,7 +48,7 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_ErrorDialog">
-                <div className="mx_ErrorDialogTitle">
+                <div className="mx_Dialog_title">
                     {this.props.title}
                 </div>
                 <div className="mx_Dialog_content">

src/components/views/dialogs/QuestionDialog.js

@@ -46,7 +46,7 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_QuestionDialog">
-                <div className="mx_QuestionDialogTitle">
+                <div className="mx_Dialog_title">
                     {this.props.title}
                 </div>
                 <div className="mx_Dialog_content">

src/components/views/dialogs/TextInputDialog.js

@@ -0,0 +1,94 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var React = require("react");
+
+module.exports = React.createClass({
+    displayName: 'TextInputDialog',
+    propTypes: {
+        title: React.PropTypes.string,
+        description: React.PropTypes.string,
+        value: React.PropTypes.string,
+        button: React.PropTypes.string,
+        focus: React.PropTypes.bool,
+        onFinished: React.PropTypes.func.isRequired
+    },
+
+    getDefaultProps: function() {
+        return {
+            title: "",
+            value: "",
+            description: "",
+            button: "OK",
+            focus: true
+        };
+    },
+    
+    componentDidMount: function() {
+        if (this.props.focus) {
+            // Set the cursor at the end of the text input 
+            this.refs.textinput.value = this.props.value;        
+        }
+    },
+
+    onOk: function() {
+        this.props.onFinished(true, this.refs.textinput.value);
+    },
+
+    onCancel: function() {
+        this.props.onFinished(false);
+    },
+
+    onKeyDown: function(e) {
+        if (e.keyCode === 27) { // escape
+            e.stopPropagation();
+            e.preventDefault();
+            this.props.onFinished(false);
+        }
+        else if (e.keyCode === 13) { // enter
+            e.stopPropagation();
+            e.preventDefault();
+            this.props.onFinished(true, this.refs.textinput.value);
+        }
+    },
+
+    render: function() {
+        return (
+            <div className="mx_TextInputDialog">
+                <div className="mx_Dialog_title">
+                    {this.props.title}
+                </div>
+                <div className="mx_Dialog_content">
+                    <div className="mx_TextInputDialog_label">
+                        <label htmlFor="textinput"> {this.props.description} </label>
+                    </div>
+                    <div>
+                        <input id="textinput" ref="textinput" className="mx_TextInputDialog_input" defaultValue={this.props.value} autoFocus={this.props.focus} size="64" onKeyDown={this.onKeyDown}/>
+                    </div>
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button onClick={this.onOk}>
+                        {this.props.button}
+                    </button>
+
+                    <button onClick={this.onCancel}>
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        );
+    }
+});

src/components/views/login/CustomServerDialog.js

@@ -22,7 +22,7 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_ErrorDialog">
-                <div className="mx_ErrorDialogTitle">
+                <div className="mx_Dialog_title">
                     Custom Server Options
                 </div>
                 <div className="mx_Dialog_content">

src/components/views/rooms/RoomSettings.js

@@ -128,6 +128,10 @@ module.exports = React.createClass({
         return this.refs.share_history.checked ? "shared" : "invited";
     },
 
+    areNotificationsMuted: function() {
+        return this.refs.are_notifications_muted.checked;
+    },
+
     getPowerLevels: function() {
         if (!this.state.power_levels_changed) return undefined;
 
@@ -387,10 +391,19 @@ module.exports = React.createClass({
             guest_access = guest_access.getContent().guest_access;
         }
 
+        var are_notifications_muted;
+        var roomPushRule = MatrixClientPeg.get().getRoomPushRule("global", this.props.room.roomId); 
+        if (roomPushRule) {
+            if (0 <= roomPushRule.actions.indexOf("dont_notify")) {
+                are_notifications_muted = true;
+            }
+        }
+
         var events_levels = (power_levels ? power_levels.events : {}) || {};
 
         var user_id = MatrixClientPeg.get().credentials.userId;
 
+
         if (power_levels) {
             power_levels = power_levels.getContent();
 
@@ -674,6 +687,11 @@ module.exports = React.createClass({
 
                 { aliases_section }
 
+                <h3>Notifications</h3>
+                <div className="mx_RoomSettings_settings">
+                    <label><input type="checkbox" ref="are_notifications_muted" defaultChecked={are_notifications_muted}/> Mute notifications for this room</label>
+                </div>
+
                 <h3>Permissions</h3>
                 <div className="mx_RoomSettings_powerLevels mx_RoomSettings_settings">
                     <div className="mx_RoomSettings_powerLevel">