Split out SlashCommandHelpDialog, group by category and style it

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

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";

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;
+}

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');
+            const SlashCommandHelpDialog = sdk.getComponent('dialogs.SlashCommandHelpDialog');
-            Modal.createTrackedDialog('Slash Commands', 'Help', InfoDialog, {
+
-                title: _t("Command Help"),
+            Modal.createTrackedDialog('Slash Commands', 'Help', SlashCommandHelpDialog);
-                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,
-            });
             return success();
         },
+        category: CommandCategories.advanced,
     }),
 };
 /* eslint-enable babel/no-invalid-this */

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')}

src/components/views/dialogs/SlashCommandHelpDialog.js

@@ -0,0 +1,63 @@
+/*
+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.
+*/
+
+import React from 'react';
+import {_t} from "../../../languageHandler";
+import {CommandCategories, CommandMap} from "../../../SlashCommands";
+import sdk from "../../../index";
+
+export default ({onFinished}) => {
+    const InfoDialog = sdk.getComponent('dialogs.InfoDialog');
+
+    const categories = {};
+    Object.values(CommandMap).forEach(cmd => {
+        if (!categories[cmd.category]) {
+            categories[cmd.category] = [];
+        }
+        categories[cmd.category].push(cmd);
+    });
+
+    const body = Object.values(CommandCategories).filter(c => categories[c]).map((category) => {
+        const rows = [
+            <tr key={"_category_" + category} className="mx_SlashCommandHelpDialog_headerRow">
+                <td colSpan={3}>
+                    <h2>{_t(category)}</h2>
+                </td>
+            </tr>,
+        ];
+
+        categories[category].forEach(cmd => {
+            rows.push(<tr key={cmd.command}>
+                <td><strong>{cmd.command}</strong></td>
+                <td>{cmd.args}</td>
+                <td>{cmd.description}</td>
+            </tr>);
+        });
+
+        return rows;
+    });
+
+    return <InfoDialog
+        className="mx_SlashCommandHelpDialog"
+        title={_t("Command Help")}
+        description={<table>
+            <tbody>
+                {body}
+            </tbody>
+        </table>}
+        hasCloseButton={true}
+        onFinished={onFinished} />;
+};

src/i18n/strings/en_EN.json

@@ -131,6 +131,10 @@
     "Missing room_id in request": "Missing room_id in request",
     "Room %(roomId)s not visible": "Room %(roomId)s not visible",
     "Missing user_id in request": "Missing user_id in request",
+    "Messages": "Messages",
+    "Actions": "Actions",
+    "Advanced": "Advanced",
+    "Other": "Other",
     "Usage": "Usage",
     "Prepends ¯\\_(ツ)_/¯ to a plain-text message": "Prepends ¯\\_(ツ)_/¯ to a plain-text message",
     "Searches DuckDuckGo for results": "Searches DuckDuckGo for results",
@@ -148,7 +152,6 @@
     "Changes your display nickname in the current room only": "Changes your display nickname in the current room only",
     "Changes your avatar in this current room only": "Changes your avatar in this current room only",
     "Changes your avatar in all rooms": "Changes your avatar in all rooms",
-    "Changes colour scheme of current room": "Changes colour scheme of current room",
     "Gets or sets the room topic": "Gets or sets the room topic",
     "This room has no topic.": "This room has no topic.",
     "Sets the room name": "Sets the room name",
@@ -182,6 +185,8 @@
     "Forces the current outbound group session in an encrypted room to be discarded": "Forces the current outbound group session in an encrypted room to be discarded",
     "Sends the given message coloured as a rainbow": "Sends the given message coloured as a rainbow",
     "Sends the given emote coloured as a rainbow": "Sends the given emote coloured as a rainbow",
+    "Displays list of commands with usages and descriptions": "Displays list of commands with usages and descriptions",
+    "Command Help": "Command Help",
     "Unrecognised command:": "Unrecognised command:",
     "Reason": "Reason",
     "%(targetName)s accepted the invitation for %(displayName)s.": "%(targetName)s accepted the invitation for %(displayName)s.",
@@ -509,7 +514,6 @@
     "Backup has an <validity>invalid</validity> signature from <verify>unverified</verify> device <device></device>": "Backup has an <validity>invalid</validity> signature from <verify>unverified</verify> device <device></device>",
     "Backup is not signed by any of your devices": "Backup is not signed by any of your devices",
     "This backup is trusted because it has been restored on this device": "This backup is trusted because it has been restored on this device",
-    "Advanced": "Advanced",
     "Backup version: ": "Backup version: ",
     "Algorithm: ": "Algorithm: ",
     "Your keys are <b>not being backed up from this device</b>.": "Your keys are <b>not being backed up from this device</b>.",
@@ -1417,7 +1421,6 @@
     "Join millions for free on the largest public server": "Join millions for free on the largest public server",
     "Premium": "Premium",
     "Premium hosting for organisations <a>Learn more</a>": "Premium hosting for organisations <a>Learn more</a>",
-    "Other": "Other",
     "Find other public servers or use a custom server": "Find other public servers or use a custom server",
     "Sorry, your browser is <b>not</b> able to run Riot.": "Sorry, your browser is <b>not</b> able to run Riot.",
     "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.": "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.",