PushRules settings: Use the new TextInputDialog to display keywords list. We earn the focus at the end of the keywords list and the management of enter and esc keys

src/components/views/login/VectorCustomServerDialog.js

@@ -25,7 +25,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/settings/Notifications.js

@@ -160,18 +160,31 @@ module.exports = React.createClass({
         var self = this;
         this.newKeywords = undefined;
 
-        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        // Compute the keywords list to display
-        Modal.createDialog(QuestionDialog, {
+        var keywords = [];
-            title: "Keywords",
+        for (var i in this.state.vectorContentRules.rules) {
-            description: this.keywordsDialogDiv,
+            var rule = this.state.vectorContentRules.rules[i];
-            focus: false,
+            keywords.push(rule.pattern);
-            onFinished: function onFinished(should_leave) {
+        }
+        if (keywords.length) {
+            keywords = keywords.join(", ");
+        }
+        else {
+            keywords = "";
+        }
 
-                if (should_leave && self.newKeywords) {
+        var TextInputDialog = sdk.getComponent("dialogs.TextInputDialog");
+        Modal.createDialog(TextInputDialog, {
+            title: "Keywords",
+            description: "Enter keywords separated by a comma:",
+            value: keywords,
+            onFinished: function onFinished(should_leave, newValue) {
+
+                if (should_leave && newValue !== keywords) {
                     var cli = MatrixClientPeg.get();
                     var removeDeferreds = [];
 
-                    var newKeywords = self.newKeywords.split(',');
+                    var newKeywords = newValue.split(',');
                     for (var i in newKeywords) {
                         newKeywords[i] = newKeywords[i].trim();
                     }
@@ -536,38 +549,6 @@ module.exports = React.createClass({
             );
         }
 
-        // Prepare keywords dialog here, in a render method, else React complains if
-        // it is done later from onKeywordsClicked
-        var keywords = [];
-        for (var i in this.state.vectorContentRules.rules) {
-            var rule = this.state.vectorContentRules.rules[i];
-            keywords.push(rule.pattern);
-        }
-
-        if (keywords.length) {
-            keywords = keywords.join(", ");
-        }
-        else {
-            keywords = "";
-        }
-
-        var onKeywordsChange = function(e) {
-            self.newKeywords = e.target.value;
-            
-            this.props.onFinished(false);
-        };
-
-        this.keywordsDialogDiv = (
-            <div>
-                <div className="mx_UserNotifSettings_keywordsLabel">
-                    <label htmlFor="keywords">Enter keywords separated by a comma:</label>
-                </div>
-                <div>
-                    <input id="keywords" ref="keywords" className="mx_UserNotifSettings_keywordsInput" defaultValue={keywords} autoFocus={true} size="64" onChange={onKeywordsChange}/>
-                </div>
-            </div>
-        );
-
         // Build the list of keywords rules that have been defined outside Vector UI
         var externalKeyWords = [];
         for (var i in this.state.externalContentRules) {

src/skins/vector/css/common.css

@@ -187,8 +187,7 @@ input[type=text]:focus, textarea:focus, .mx_RoomSettings textarea:focus {
     padding-right: 1em;
 }
 
-.mx_ErrorDialogTitle,
+.mx_Dialog_title {
-.mx_QuestionDialogTitle {
     min-height: 16px;
     padding: 12px;
     border-bottom: 1px solid #a4a4a4;
@@ -196,3 +195,14 @@ input[type=text]:focus, textarea:focus, .mx_RoomSettings textarea:focus {
     font-size: 18px;
     line-height: 1.4;
 }
+
+.mx_TextInputDialog_label {
+    text-align: left;
+    padding-bottom: 12px;
+}
+
+.mx_TextInputDialog_input {
+    color: #747474;
+    font-weight: 300;
+    font-size: 15px;
+}

src/skins/vector/css/vector-web/views/settings/Notifications.css

@@ -56,14 +56,3 @@ limitations under the License.
     cursor: pointer;
     color: #76cfa6;
 }
-
-.mx_UserNotifSettings_keywordsLabel {
-    text-align: left;
-    padding-bottom: 12px;
-}
-
-.mx_UserNotifSettings_keywordsInput {
-    color: #747474;
-    font-weight: 300;
-    font-size: 15px;
-}