Split out SlashCommandHelpDialog, group by category and style it

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
matrix-org · Aug 6, 2019 · ae834f8 · ae834f8
1 parent 2fd371e
commit ae834f8
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 25 deletions.
diff --git a/res/css/_components.scss b/res/css/_components.scss
@@ -70,6 +70,7 @@
 @import "./views/dialogs/_SetPasswordDialog.scss";
 @import "./views/dialogs/_SettingsDialog.scss";
 @import "./views/dialogs/_ShareDialog.scss";
+@import "./views/dialogs/_SlashCommandHelpDialog.scss";
 @import "./views/dialogs/_TermsDialog.scss";
 @import "./views/dialogs/_UnknownDeviceDialog.scss";
 @import "./views/dialogs/_UploadConfirmDialog.scss";

diff --git a/res/css/views/dialogs/_SlashCommandHelpDialog.scss b/res/css/views/dialogs/_SlashCommandHelpDialog.scss
@@ -0,0 +1,42 @@
+/*!
+ *
+ * Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+ *
+ * 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.
+ * /
+ */
+
+/*
+Copyright Michael Telatynski <7t3chguy@gmail.com>
+
+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.
+*/
+
+.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 {
+    margin-bottom: 2px;
+}
+
+.mx_SlashCommandHelpDialog .mx_Dialog_content {
+    margin-top: 12px;
+    margin-bottom: 34px;
+}
diff --git a/src/SlashCommands.js b/src/SlashCommands.js
@@ -20,11 +20,9 @@ limitations under the License.
 import React from 'react';
 import MatrixClientPeg from './MatrixClientPeg';
 import dis from './dispatcher';
-import Tinter from './Tinter';
 import sdk from './index';
 import {_t, _td} from './languageHandler';
 import Modal from './Modal';
-import SettingsStore, {SettingLevel} from './settings/SettingsStore';
 import {MATRIXTO_URL_PATTERN} from "./linkify-matrix";
 import * as querystring from "querystring";
 import MultiInviter from './utils/MultiInviter';
@@ -54,12 +52,21 @@ const singleMxcUpload = async () => {
     });
 };
 
+export const CommandCategories = {
+    "messages": _td("Messages"),
+    "actions": _td("Actions"),
+    "admin": _td("Admin"),
+    "advanced": _td("Advanced"),
+    "other": _td("Other"),
+};
+
 class Command {
-    constructor({name, args='', description, runFn, hideCompletionAfterSpace=false}) {
+    constructor({name, args='', description, runFn, category=CommandCategories.other, hideCompletionAfterSpace=false}) {
         this.command = '/' + name;
         this.args = args;
         this.description = description;
         this.runFn = runFn;
+        this.category = category;
         this.hideCompletionAfterSpace = hideCompletionAfterSpace;
     }
 
@@ -106,6 +113,7 @@ export const CommandMap = {
             }
             return success(MatrixClientPeg.get().sendTextMessage(roomId, message));
         },
+        category: CommandCategories.messages,
     }),
 
     ddg: new Command({
@@ -121,6 +129,7 @@ export const CommandMap = {
             });
             return success();
         },
+        category: CommandCategories.actions,
         hideCompletionAfterSpace: true,
     }),
 
@@ -199,6 +208,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.admin,
     }),
 
     nick: new Command({
@@ -211,6 +221,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.actions,
     }),
 
     myroomnick: new Command({
@@ -229,6 +240,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.actions,
     }),
 
     myroomavatar: new Command({
@@ -255,6 +267,7 @@ export const CommandMap = {
                 return cli.sendStateEvent(roomId, 'm.room.member', content, userId);
             }));
         },
+        category: CommandCategories.actions,
     }),
 
     myavatar: new Command({
@@ -272,6 +285,7 @@ export const CommandMap = {
                 return MatrixClientPeg.get().setAvatarUrl(url);
             }));
         },
+        category: CommandCategories.actions,
     }),
 
     // Room Tint has been unsupported since the redesign
@@ -298,6 +312,7 @@ export const CommandMap = {
     //         }
     //         return reject(this.getUsage());
     //     },
+    //     category: CommandCategories.actions,
     // }),
 
     topic: new Command({
@@ -323,6 +338,7 @@ export const CommandMap = {
             });
             return success();
         },
+        category: CommandCategories.admin,
     }),
 
     roomname: new Command({
@@ -335,6 +351,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.admin,
     }),
 
     invite: new Command({
@@ -358,6 +375,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.actions,
     }),
 
     join: new Command({
@@ -462,6 +480,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.actions,
     }),
 
     part: new Command({
@@ -509,6 +528,7 @@ export const CommandMap = {
                 }),
             );
         },
+        category: CommandCategories.actions,
     }),
 
     kick: new Command({
@@ -524,6 +544,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.admin,
     }),
 
     // Ban a user from the room with an optional reason
@@ -540,6 +561,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.admin,
     }),
 
     // Unban a user from ythe room
@@ -557,6 +579,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.admin,
     }),
 
     ignore: new Command({
@@ -587,6 +610,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.actions,
     }),
 
     unignore: new Command({
@@ -618,6 +642,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.actions,
     }),
 
     // Define the power level of a user
@@ -646,6 +671,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.admin,
     }),
 
     // Reset the power level of a user
@@ -667,6 +693,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.admin,
     }),
 
     devtools: new Command({
@@ -677,6 +704,7 @@ export const CommandMap = {
             Modal.createDialog(DevtoolsDialog, {roomId});
             return success();
         },
+        category: CommandCategories.advanced,
     }),
 
     addwidget: new Command({
@@ -697,6 +725,7 @@ export const CommandMap = {
                 return reject(_t("You cannot modify widgets in this room."));
             }
         },
+        category: CommandCategories.admin,
     }),
 
     // Verify a user, device, and pubkey tuple
@@ -766,6 +795,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.advanced,
     }),
 
     // Command definitions for autocompletion ONLY:
@@ -775,6 +805,7 @@ export const CommandMap = {
         name: 'me',
         args: '<message>',
         description: _td('Displays action'),
+        category: CommandCategories.messages,
         hideCompletionAfterSpace: true,
     }),
 
@@ -789,6 +820,7 @@ export const CommandMap = {
             }
             return success();
         },
+        category: CommandCategories.advanced,
     }),
 
     rainbow: new Command({
@@ -799,6 +831,7 @@ export const CommandMap = {
             if (!args) return reject(this.getUserId());
             return success(MatrixClientPeg.get().sendHtmlMessage(roomId, args, textToHtmlRainbow(args)));
         },
+        category: CommandCategories.messages,
     }),
 
     rainbowme: new Command({
@@ -809,32 +842,19 @@ export const CommandMap = {
             if (!args) return reject(this.getUserId());
             return success(MatrixClientPeg.get().sendHtmlEmote(roomId, args, textToHtmlRainbow(args)));
         },
+        category: CommandCategories.messages,
     }),
 
     help: new Command({
         name: "help",
         description: _td("Displays list of commands with usages and descriptions"),
         runFn: function() {
-            const InfoDialog = sdk.getComponent('dialogs.InfoDialog');
-            Modal.createTrackedDialog('Slash Commands', 'Help', InfoDialog, {
-                title: _t("Command Help"),
-                description: <table>
-                    <tbody>
-                    {
-                        Object.values(CommandMap).map(cmd => {
-                            return <tr key={cmd.command}>
-                                <td>{cmd.command}</td>
-                                <td>{cmd.args}</td>
-                                <td>{cmd.description}</td>
-                            </tr>;
-                        })
-                    }
-                    </tbody>
-                </table>,
-                hasCloseButton: true,
-            });
+            const SlashCommandHelpDialog = sdk.getComponent('dialogs.SlashCommandHelpDialog');
+
+            Modal.createTrackedDialog('Slash Commands', 'Help', SlashCommandHelpDialog);
             return success();
         },
+        category: CommandCategories.advanced,
     }),
 };
 /* eslint-enable babel/no-invalid-this */

diff --git a/src/components/views/dialogs/InfoDialog.js b/src/components/views/dialogs/InfoDialog.js
@@ -20,10 +20,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import classNames from "classnames";
 
 export default React.createClass({
     displayName: 'InfoDialog',
     propTypes: {
+        className: PropTypes.string,
         title: PropTypes.string,
         description: PropTypes.node,
         button: PropTypes.string,
@@ -52,7 +54,7 @@ export default React.createClass({
                 contentId='mx_Dialog_content'
                 hasCancel={this.props.hasCloseButton}
             >
-                <div className="mx_Dialog_content" id="mx_Dialog_content">
+                <div className={classNames("mx_Dialog_content", this.props.className)} id="mx_Dialog_content">
                     { this.props.description }
                 </div>
                 <DialogButtons primaryButton={this.props.button || _t('OK')}