Rest

Signed-off-by: Šimon Brandner <[email protected]>

res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.scss

@@ -18,7 +18,16 @@ limitations under the License.
 .mx_KeyboardUserSettingsTab .mx_SettingsTab_section {
     .mx_KeyboardShortcut_shortcutRow {
         display: flex;
-        justify-content: space-between;
         align-items: center;
+
+        .mx_KeyboardShortcut_shortcutRow_displayName {
+            margin-right: auto;
+        }
+
+        .mx_AccessibleButton {
+            margin: 0 4px;
+        }
+
+        margin: 4px 0;
     }
 }

src/components/views/settings/tabs/user/ChangeKeyboardShortcutDialog.tsx

@@ -0,0 +1,80 @@
+/*
+Copyright 2022 Šimon Brandner <[email protected]>
+
+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, { KeyboardEvent, useState } from "react";
+
+import { KeyCombo } from "../../../../../KeyBindingsManager";
+import { Key } from "../../../../../Keyboard";
+import { _t } from "../../../../../languageHandler";
+import BaseDialog from "../../../dialogs/BaseDialog";
+import { IDialogProps } from "../../../dialogs/IDialogProps";
+import DialogButtons from "../../../elements/DialogButtons";
+import KeyboardShortcut from "../../KeyboardShortcut";
+
+const eventIntoKeyCombo = (event: KeyboardEvent): KeyCombo | null => {
+    const hasModifier = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+    const isKeyAModifier = [Key.ALT, Key.CONTROL, Key.META, Key.SHIFT].includes(event.key);
+    // Don't allow KeyCombos without modifiers
+    if (!hasModifier) return null;
+    // Don't allow KeyCombos without a key pressed
+    if (isKeyAModifier || !event.key) return null;
+
+    return {
+        key: event.key,
+        altKey: event.altKey,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        shiftKey: event.shiftKey,
+    };
+};
+
+export interface IProps extends IDialogProps {
+    value: KeyCombo;
+}
+
+export const ChangeKeyboardShortcutDialog: React.FC<IProps> = ({ onFinished, value }) => {
+    const [currentValue, setValue] = useState<KeyCombo | null>(value);
+
+    const onDialogFinished = () => {
+        onFinished(currentValue);
+    };
+
+    const onKeyDown = (event: KeyboardEvent): void => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const key = event.key;
+        if (!key) return;
+
+        setValue(eventIntoKeyCombo(event));
+    };
+
+    const onCancel = (): void => {
+        onFinished(null);
+    };
+
+    const onPrimaryButtonClick = (): void => {
+        if (!currentValue) return;
+        onFinished(currentValue);
+    };
+
+    return <BaseDialog onFinished={onDialogFinished} onKeyDown={onKeyDown}>
+        <KeyboardShortcut value={currentValue} />
+        <DialogButtons primaryButton={_t("Done")} hasCancel onPrimaryButtonClick={onPrimaryButtonClick} onCancel={onCancel} />
+    </BaseDialog>;
+};
+
+export default ChangeKeyboardShortcutDialog;

src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx

@@ -25,41 +25,80 @@ import {
 import SdkConfig from "../../../../../SdkConfig";
 import { _t } from "../../../../../languageHandler";
 import {
-    getKeyboardShortcutDisplayName, getKeyboardShortcutValue,
+    getKeyboardShortcutDisplayName,
+    getKeyboardShortcutHideEditUI,
+    getKeyboardShortcutValue,
 } from "../../../../../accessibility/KeyboardShortcutUtils";
 import { KeyboardShortcut } from "../../KeyboardShortcut";
+import AccessibleButton from "../../../elements/AccessibleButton";
+import SettingsStore from "../../../../../settings/SettingsStore";
+import { SettingLevel } from "../../../../../settings/SettingLevel";
+import Modal from "../../../../../Modal";
+import {
+    ChangeKeyboardShortcutDialog,
+    IProps as IChangeKeyboardShortcutDialogProps,
+} from "./ChangeKeyboardShortcutDialog";
 
 interface IKeyboardShortcutRowProps {
     name: string;
+    allowCustomization: boolean;
 }
 
 // Filter out the labs section if labs aren't enabled.
 const visibleCategories = Object.entries(CATEGORIES).filter(([categoryName]) =>
     categoryName !== CategoryName.LABS || SdkConfig.get("show_labs_settings"));
 
-const KeyboardShortcutRow: React.FC<IKeyboardShortcutRowProps> = ({ name }) => {
+const KeyboardShortcutRow: React.FC<IKeyboardShortcutRowProps> = ({ name, allowCustomization }) => {
     const displayName = getKeyboardShortcutDisplayName(name);
+    const hideEditUI = getKeyboardShortcutHideEditUI(name);
     const value = getKeyboardShortcutValue(name);
     if (!displayName || !value) return null;
 
+    const onEditClick = async (): Promise<void> => {
+        const { finished } = Modal.createDialog(ChangeKeyboardShortcutDialog, {
+            value,
+        } as IChangeKeyboardShortcutDialogProps);
+        const [newValue] = await finished;
+        if (!newValue) return;
+
+        //SettingsStore.setValue(name, null, SettingLevel.DEVICE, newValue);
+    };
+
+    const onResetClick = (): void => {
+        SettingsStore.setValue(name, null, SettingLevel.DEVICE, SettingsStore.getDefaultValue(name));
+    };
+
     return <div className="mx_KeyboardShortcut_shortcutRow">
-        { displayName }
+        <div className="mx_KeyboardShortcut_shortcutRow_displayName">
+            { displayName }
+        </div>
         <KeyboardShortcut value={value} />
+        { allowCustomization && <React.Fragment>
+            <AccessibleButton kind="primary_outline" disabled={hideEditUI} onClick={onEditClick}> { _t("Edit") } </AccessibleButton>
+            <AccessibleButton kind="primary_outline" disabled={hideEditUI} onClick={onResetClick}> { _t("Reset") } </AccessibleButton>
+        </React.Fragment> }
     </div>;
 };
 
 interface IKeyboardShortcutSectionProps {
     categoryName: CategoryName;
     category: ICategory;
+    allowCustomization: boolean;
 }
 
-const KeyboardShortcutSection: React.FC<IKeyboardShortcutSectionProps> = ({ categoryName, category }) => {
+const KeyboardShortcutSection: React.FC<IKeyboardShortcutSectionProps> = (
+    { categoryName, category, allowCustomization },
+) => {
     if (!category.categoryLabel) return null;
 
     return <div className="mx_SettingsTab_section" key={categoryName}>
         <div className="mx_SettingsTab_subheading">{ _t(category.categoryLabel) }</div>
         <div> { category.settingNames.map((shortcutName) => {
-            return <KeyboardShortcutRow key={shortcutName} name={shortcutName} />;
+            return <KeyboardShortcutRow
+                key={shortcutName}
+                name={shortcutName}
+                allowCustomization={allowCustomization}
+            />;
         }) } </div>
     </div>;
 };
@@ -68,7 +107,12 @@ const KeyboardUserSettingsTab: React.FC = () => {
     return <div className="mx_SettingsTab mx_KeyboardUserSettingsTab">
         <div className="mx_SettingsTab_heading">{ _t("Keyboard") }</div>
         { visibleCategories.map(([categoryName, category]: [CategoryName, ICategory]) => {
-            return <KeyboardShortcutSection key={categoryName} categoryName={categoryName} category={category} />;
+            return <KeyboardShortcutSection
+                key={categoryName}
+                categoryName={categoryName}
+                category={category}
+                allowCustomization={SettingsStore.getValue("feature_customizable_keybindings")}
+            />;
         }) }
     </div>;
 };