Rest

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

Author: SimonBrandner

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

@@ -18,8 +18,17 @@ 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;
     }
 
     kbd {

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

@@ -0,0 +1,44 @@
+/*
+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, { useState } from "react";
+
+import { KeyCombo } from "../../../../../KeyBindingsManager";
+import BaseDialog from "../../../dialogs/BaseDialog";
+import { IDialogProps } from "../../../dialogs/IDialogProps";
+import KeyboardShortcut from "../../KeyboardShortcut";
+
+interface IProps extends IDialogProps {
+    value: KeyCombo;
+}
+
+export const ChangeKeyboardShortcutDialog: React.FC<IProps> = ({ onFinished, value }) => {
+    const [currentValue] = useState(value);
+
+    const onDialogFinished = () => {
+        onFinished();
+    };
+
+    const onKeyDown = (event: KeyboardEvent) => {
+
+    };
+
+    return <BaseDialog onFinished={onDialogFinished} onKeyDown={onKeyDown}>
+        <KeyboardShortcut value={currentValue} />
+    </BaseDialog>;
+};
+
+export default ChangeKeyboardShortcutDialog;

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

@@ -25,41 +25,69 @@ 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";
 
 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()['showLabsSettings']);
 
-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 = (): void => {
+
+    };
+
+    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 +96,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>;
 };